#1355 - Auto Check Checkboxes when the row has the is-selected class

gulpfile.js

@@ -203,6 +203,7 @@ gulp.task('scripts', ['jscs', 'jshint'], function() {
     'src/icon-toggle/icon-toggle.js',
     'src/menu/menu.js',
     'src/progress/progress.js',
+    'src/data-table/data-table.js',
     'src/radio/radio.js',
     'src/slider/slider.js',
     'src/spinner/spinner.js',

src/data-table/data-table.js

@@ -116,7 +116,9 @@
     var checkbox = document.createElement('input');
     checkbox.type = 'checkbox';
     checkbox.classList.add('mdl-checkbox__input');
+
     if (row) {
+      checkbox.checked = row.classList.contains(this.CssClasses_.IS_SELECTED);
       checkbox.addEventListener('change', this.selectRow_(checkbox, row));
     } else if (rows) {
       checkbox.addEventListener('change', this.selectRow_(checkbox, null, rows));

test/index.html

@@ -44,6 +44,7 @@
 <script src="../src/mdlComponentHandler.js"></script>
 <script src="../src/button/button.js"></script>
 <script src="../src/checkbox/checkbox.js"></script>
+<script src="../src/data-table/data-table.js"></script>
 <script src="../src/icon-toggle/icon-toggle.js"></script>
 <script src="../src/layout/layout.js"></script>
 <script src="../src/progress/progress.js"></script>
@@ -68,6 +69,7 @@
 <script src="unit/componentHandler.js"></script>
 <script src="unit/button.js"></script>
 <script src="unit/checkbox.js"></script>
+<script src="unit/data-table.js"></script>
 <script src="unit/icon-toggle.js"></script>
 <script src="unit/layout.js"></script>
 <script src="unit/progress.js"></script>

test/unit/data-table.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright 2015 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+var TABLE_TEMPLATE = '<table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable" id="data-table-test">' +
+      '<thead>' +
+      '  <tr>' +
+      '    <th class="mdl-data-table__cell--non-numeric">Material</th>' +
+      '    <th>Quantity</th>' +
+      '    <th>Unit price</th>' +
+      '  </tr>' +
+      '</thead>' +
+      '<tbody>' +
+      '  <tr>' +
+      '    <td class="mdl-data-table__cell--non-numeric">Acrylic (Transparent)</td>' +
+      '    <td>25</td>' +
+      '    <td>$2.90</td>' +
+      '  </tr>' +
+      '  <tr class="is-selected second-row">' +
+      '    <td class="mdl-data-table__cell--non-numeric">Plywood (Birch)</td>' +
+      '    <td>50</td>' +
+      '    <td>$1.25</td>' +
+      '  </tr>' +
+      '</tbody>' +
+    '</table>';
+
+describe('MaterialDataTable', function () {
+
+  it('should be globally available', function () {
+    expect(MaterialDataTable).to.be.a('function');
+  });
+
+  it('should upgrade successfully', function () {
+    var el = document.createElement('div');
+    el.innerHTML = '' + TABLE_TEMPLATE;
+
+    componentHandler.upgradeElement(el, 'MaterialDataTable');
+    expect($(el)).to.have.data('upgraded', ',MaterialDataTable');
+  });
+
+  it('should have is-checked class when the row has the is-selected class', function () {
+    var el = document.createElement('div');
+    el.innerHTML = '' + TABLE_TEMPLATE;
+    document.body.appendChild(el);
+    table = document.querySelector('#data-table-test')
+    componentHandler.upgradeElement(table, 'MaterialDataTable');
+    expect(table.querySelector('.second-row label').classList.contains('is-checked')).to.be.true;
+  });
+
+});