Bump ember-test-selectors to v6 with fixed tests

README.md

@@ -143,6 +143,18 @@ You can also use the `ember-tfoot` component, which has the same API as
   {{/ember-table}}
 ```
 
+## Writing tests for Ember Table in your application
+
+Ember Table comes with test helpers, for example:
+
+To use these helpers, you should setup Ember Table for testing in your application's `tests/test-helper.js` file. For example:
+
+```js
+import { setupForTest as setupEmberTableForTest } from 'ember-table/test-support';
+
+setupEmberTableForTest();
+```
+
 ## Migrating from old Ember table
 
 To support smooth migration from old version of Ember table (support only till ember 1.11), we have

addon-test-support/index.js

@@ -1,3 +1,11 @@
 import TablePage from './pages/ember-table';
 
-export { TablePage };
+import { setSetupRowCountForTest } from 'ember-table/components/ember-tbody/component';
+import { setSimpleCheckboxForTest } from 'ember-table/components/ember-td/component';
+
+function setupForTest() {
+  setSetupRowCountForTest(true);
+  setSimpleCheckboxForTest(true);
+}
+
+export { TablePage, setupForTest };

addon-test-support/pages/-private/ember-table-body.js

@@ -37,7 +37,13 @@ export default PageObject.extend({
     Returns the number of rows in the body.
   */
   get rowCount() {
-    return Number(findElement(this).getAttribute('data-test-row-count'));
+    let element = findElement(this);
+    if (!element.hasAttribute('data-test-row-count')) {
+      throw new Error(
+        'data-test-row-count attribute not found on the Ember Table tbody. Perhaps you need to run setupForTest? See https://github.com/Addepar/ember-table/blob/master/README.md'
+      );
+    }
+    return Number(element.getAttribute('data-test-row-count'));
   },
 
   /**

addon-test-support/pages/-private/ember-table-header.js

@@ -159,7 +159,13 @@ export default {
     Returns the number of rows in the header.
   */
   get rowCount() {
-    return Number(findElement(this).getAttribute('data-test-row-count'));
+    let element = findElement(this);
+    if (!element.hasAttribute('data-test-row-count')) {
+      throw new Error(
+        'data-test-row-count attribute not found on the Ember Table tbody. Perhaps you need to run setupForTest? See https://github.com/Addepar/ember-table/blob/master/README.md'
+      );
+    }
+    return Number(element.getAttribute('data-test-row-count'));
   },
 
   rows: collection({

addon/components/-private/simple-checkbox.js

@@ -11,6 +11,8 @@ export default Component.extend({
     'indeterminate',
     'type',
     'value',
+    'dataTestSelectRow:data-test-select-row',
+    'dataTestCollapseRow:data-test-collapse-row',
   ],
 
   ariaLabel: undefined,

addon/components/ember-table-loading-more/component.js

@@ -30,7 +30,8 @@ import { next, run, schedule, scheduleOnce } from '@ember/runloop';
 export default Component.extend({
   classNames: ['ember-table-loading-more'],
 
-  'data-test-ember-table-loading-more': true,
+  attributeBindings: ['dataTestEmberTableLoadingMore:data-test-ember-table-loading-more'],
+  dataTestEmberTableLoadingMore: true,
 
   unwrappedApi: or('api.api', 'api'),
   scrollElement: readOnly('unwrappedApi.columnTree.container'),

addon/components/ember-table/component.js

@@ -32,8 +32,8 @@ import layout from './template';
 export default Component.extend({
   layout,
   classNames: ['ember-table'],
-
-  'data-test-ember-table': true,
+  attributeBindings: ['dataTestEmberTable:data-test-ember-table'],
+  dataTestEmberTable: true,
 
   didInsertElement() {
     this._super(...arguments);

addon/components/ember-tbody/component.js

@@ -10,6 +10,11 @@ import defaultTo from '../../-private/utils/default-to';
 import layout from './template';
 import { assert } from '@ember/debug';
 
+let setupRowCountForTest = false;
+export function setSetupRowCountForTest(bool) {
+  setupRowCountForTest = bool;
+}
+
 /**
   The table body component. This component manages the main bulk of the rows of
   the table, provided occlusion for them and managing their behavior. It yields
@@ -250,7 +255,7 @@ export default Component.extend({
 
   dataTestRowCount: null,
 
-  'data-test-row-count': readOnly('dataTestRowCount'),
+  attributeBindings: ['dataTestRowCount:data-test-row-count'],
 
   init() {
     this._super(...arguments);
@@ -275,12 +280,11 @@ export default Component.extend({
      * Ember test selectors will remove data-test-row-count from the bindings,
      * so if it is missing there is no need to all the count.
      *
-     * Even when ember-table is testing a production build, the test selectors
-     * addon remains enabled and causes `this.attributeBindings` to be present.
-     * In an actual app build, `this.attributeBindings` may be undefined.
-     * Guard against it being `undefined` before checking for the attribute.
+     * Even when ember-table is testing a production build, the you may want to
+     * run tests which make assertions about row count. To implement that capability
+     * reference a boolean variable controlled by the test helpers.
      */
-    if (this.attributeBindings && this.attributeBindings.includes('data-test-row-count')) {
+    if (setupRowCountForTest) {
       this._isObservingDebugRowCount = true;
       let scheduleUpdate = (this._scheduleUpdate = () => {
         scheduleOnce('actions', this, this._updateDataTestRowCount);

addon/components/ember-td/component.js

@@ -6,6 +6,11 @@ import { alias, readOnly } from '@ember/object/computed';
 import layout from './template';
 import { SELECT_MODE } from '../../-private/collapse-tree';
 
+let setupSimpleCheckboxForTest = false;
+export function setSimpleCheckboxForTest(bool) {
+  setupSimpleCheckboxForTest = bool;
+}
+
 /**
  The table cell component. This component manages cell level concerns, yields
  the cell value, column value, row value, and all of their associated meta
@@ -39,6 +44,13 @@ export default BaseTableCell.extend({
   layout,
   tagName: 'td',
 
+  init() {
+    this._super(...arguments);
+
+    if (setupSimpleCheckboxForTest) {
+      this.set('isTesting', true);
+    }
+  },
   /**
    The API object passed in by the table row
    @argument api

addon/components/ember-td/template.hbs

@@ -6,22 +6,23 @@
         data-test-select-row-container
       >
         {{-ember-table-private/simple-checkbox
-          data-test-select-row=true
           checked=this.rowMeta.isGroupSelected
           onClick=(action "onSelectionToggled")
           ariaLabel="Select row"
+          dataTestSelectRow=this.isTesting
         }}
         <span></span>
       </span>
     {{/if}}
 
     {{#if this.canCollapse}}
       <span class="et-toggle-collapse et-depth-indent {{this.depthClass}}">
+
         {{-ember-table-private/simple-checkbox
-          data-test-collapse-row=true
           checked=this.rowMeta.isCollapsed
           onChange=(action "onCollapseToggled")
           ariaLabel="Collapse row"
+          dataTestCollapseRow=this.isTesting
         }}
         <span></span>
       </span>

addon/components/ember-tfoot/component.js

@@ -33,6 +33,8 @@ export default EmberTBody.extend({
   layout,
   tagName: 'tfoot',
 
+  attributeBindings: ['wrappedRowArray.length:data-test-row-count'],
+
   wrappedRowArray: computed('wrappedRows.[]', function() {
     let wrappedRows = this.get('wrappedRows');
     let wrappedRowsLength = wrappedRows.get('length');

addon/components/ember-thead/component.js

@@ -218,7 +218,8 @@ export default Component.extend({
   */
   onResize: null,
 
-  'data-test-row-count': readOnly('wrappedRows.length'),
+  attributeBindings: ['dataTestRowCount:data-test-row-count'],
+  dataTestRowCount: readOnly('wrappedRows.length'),
 
   init() {
     this._super(...arguments);

config/ember-try.js

@@ -28,7 +28,6 @@ module.exports = function() {
           name: 'ember-lts-3.4',
           npm: {
             devDependencies: {
-              'ember-angle-bracket-invocation-polyfill': '^3.0.1',
               'ember-source': '~3.4.0',
             },
           },
@@ -37,7 +36,6 @@ module.exports = function() {
           name: 'ember-lts-3.8',
           npm: {
             devDependencies: {
-              'ember-angle-bracket-invocation-polyfill': '^3.0.1',
               'ember-source': '~3.8.0',
             },
           },

package.json

@@ -42,7 +42,7 @@
     "ember-cli-version-checker": "^5.1.2",
     "ember-compatibility-helpers": "^1.2.0",
     "ember-raf-scheduler": "^0.3.0",
-    "ember-test-selectors": "^5.0.0",
+    "ember-test-selectors": "^6.0.0",
     "hammerjs": "^2.0.8"
   },
   "devDependencies": {

tests/helpers/generate-table.js

@@ -12,86 +12,85 @@ export { configureTableGeneration, resetTableGenerationConfig, generateColumns,
 
 const fullTable = hbs`
   <div style="height: 500px;">
-    {{#ember-table data-test-ember-table=true as |t|}}
-      {{#ember-thead
-        api=t
-
-        columns=this.columns
-        columnKeyPath=this.columnKeyPath
-        containerWidthAdjustment=this.containerWidthAdjustment
-        enableReorder=this.enableReorder
-        enableResize=this.enableResize
-        scrollIndicators=this.scrollIndicators
-        fillColumnIndex=this.fillColumnIndex
-        fillMode=this.fillMode
-        initialFillMode=this.initialFillMode
-        resizeMode=this.resizeMode
-        sorts=this.sorts
-        sortEmptyLast=this.sortEmptyLast
-        widthConstraint=this.widthConstraint
-        onUpdateSorts=(action this.onUpdateSorts)
-        onReorder=(action this.onReorder)
-        onResize=(action this.onResize)
+    <EmberTable data-test-main-table as |t|>
+      <EmberThead
+        @api={{t}}
+        @columns={{this.columns}}
+        @columnKeyPath={{this.columnKeyPath}}
+        @containerWidthAdjustment={{this.containerWidthAdjustment}}
+        @enableReorder={{this.enableReorder}}
+        @enableResize={{this.enableResize}}
+        @scrollIndicators={{this.scrollIndicators}}
+        @fillColumnIndex={{this.fillColumnIndex}}
+        @fillMode={{this.fillMode}}
+        @initialFillMode={{this.initialFillMode}}
+        @resizeMode={{this.resizeMode}}
+        @sorts={{this.sorts}}
+        @sortEmptyLast={{this.sortEmptyLast}}
+        @widthConstraint={{this.widthConstraint}}
+        @onUpdateSorts={{action this.onUpdateSorts}}
+        @onReorder={{action this.onReorder}}
+        @onResize={{action this.onResize}}
 
         as |h|
-      }}
-        {{#ember-tr api=h as |r|}}
-          {{ember-th
-            api=r
-            onContextMenu=(action this.onHeaderCellContextMenu)
-          }}
-        {{/ember-tr}}
-      {{/ember-thead}}
-
-      {{#ember-tbody
-        api=t
-        rows=this.rows
-        estimateRowHeight=this.estimateRowHeight
-        staticHeight=this.staticHeight
-        enableCollapse=this.enableCollapse
-        enableTree=this.enableTree
-        key=this.key
-        bufferSize=this.bufferSize
-        idForFirstItem=this.idForFirstItem
-        onSelect=(action this.onSelect)
-        selectingChildrenSelectsParent=this.selectingChildrenSelectsParent
-        checkboxSelectionMode=this.checkboxSelectionMode
-        rowSelectionMode=this.rowSelectionMode
-        rowToggleMode=this.rowToggleMode
-        selection=this.selection
-        selectionMatchFunction=this.selectionMatchFunction
+      >
+        <EmberTr @api={{h}} as |r|>
+          <EmberTh
+            @api={{r}}
+            @onContextMenu={{action this.onHeaderCellContextMenu}}
+          />
+        </EmberTr>
+      </EmberThead>
+
+      <EmberTbody
+        @api={{t}}
+        @rows={{this.rows}}
+        @estimateRowHeight={{this.estimateRowHeight}}
+        @staticHeight={{this.staticHeight}}
+        @enableCollapse={{this.enableCollapse}}
+        @enableTree={{this.enableTree}}
+        @key={{this.key}}
+        @bufferSize={{this.bufferSize}}
+        @idForFirstItem={{this.idForFirstItem}}
+        @onSelect={{action this.onSelect}}
+        @selectingChildrenSelectsParent={{this.selectingChildrenSelectsParent}}
+        @checkboxSelectionMode={{this.checkboxSelectionMode}}
+        @rowSelectionMode={{this.rowSelectionMode}}
+        @rowToggleMode={{this.rowToggleMode}}
+        @selection={{this.selection}}
+        @selectionMatchFunction={{this.selectionMatchFunction}}
         as |b|
-      }}
+      >
         {{#component this.rowComponent
           api=b
           onClick=(action this.onRowClick)
           onDoubleClick=(action this.onRowDoubleClick)
 
           as |r|
         }}
-          {{#ember-td
-            api=r
-            onClick=(action this.onCellClick)
-            onDoubleClick=(action this.onCellDoubleClick)
+          <EmberTd
+            @api={{r}}
+            @onClick={{action this.onCellClick}}
+            @onDoubleClick={{action this.onCellDoubleClick}}
             as |value|
-          }}
+          >
             {{value}}
-          {{/ember-td}}
+          </EmberTd>
         {{/component}}
-      {{/ember-tbody}}
+      </EmberTbody>
 
-      {{#ember-tfoot
-        api=t
-        rows=this.footerRows
+      <EmberTfoot
+        @api={{t}}
+        @rows={{this.footerRows}}
         as |f|
-      }}
-        {{#ember-tr api=f as |r|}}
-          {{#ember-td api=r as |value|}}
+      >
+        <EmberTr @api={{f}} as |r|>
+          <EmberTd @api={{r}} as |value|>
             {{value}}
-          {{/ember-td}}
-        {{/ember-tr}}
-      {{/ember-tfoot}}
-    {{/ember-table}}
+          </EmberTd>
+        </EmberTr>
+      </EmberTfoot>
+    </EmberTable>
   </div>
 `;
 

tests/integration/components/headers/ember-th-test.js

@@ -32,7 +32,7 @@ module('[Unit] ember-th', function(hooks) {
 
     let firstHeader = table.headers.objectAt(0);
 
-    await await render(hbs`
+    await render(hbs`
     {{#ember-table data-test-ember-table=true as |t|}}
       {{#ember-thead
         api=t