Bump ember-test-selectors to v6 with fixed tests (#937)

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,13 @@
 import TablePage from './pages/ember-table';
 
-export { TablePage };
+import { setSetupRowCountForTest } from 'ember-table/components/ember-tbody/component';
+import { setupTHeadForTest } from 'ember-table/components/ember-thead/component';
+import { setSimpleCheckboxForTest } from 'ember-table/components/ember-td/component';
+
+function setupForTest() {
+  setSetupRowCountForTest(true);
+  setupTHeadForTest(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/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/-private/simple-checkbox.js → addon/components/ember-table-simple-checkbox.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import defaultTo from '../../-private/utils/default-to';
+import defaultTo from '../-private/utils/default-to';
 
 export default Component.extend({
   tagName: 'input',
@@ -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/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

@@ -5,23 +5,23 @@
         class="et-toggle-select {{unless this.shouldShowCheckbox 'et-speech-only'}}"
         data-test-select-row-container
       >
-        {{-ember-table-private/simple-checkbox
-          data-test-select-row=true
+        {{ember-table-simple-checkbox
           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
+        {{ember-table-simple-checkbox
           checked=this.rowMeta.isCollapsed
           onChange=(action "onCollapseToggled")
           ariaLabel="Collapse row"
+          dataTestCollapseRow=this.isTesting
         }}
         <span></span>
       </span>

addon/components/ember-thead/component.js

@@ -6,7 +6,7 @@ import { assert } from '@ember/debug';
 import defaultTo from '../../-private/utils/default-to';
 import { addObserver } from '../../-private/utils/observer';
 import EmberObject, { computed, get } from '@ember/object';
-import { notEmpty, or, readOnly } from '@ember/object/computed';
+import { and, notEmpty, or } from '@ember/object/computed';
 import { isPresent } from '@ember/utils';
 
 import { closest } from '../../-private/utils/element';
@@ -18,6 +18,11 @@ import ColumnTree, { RESIZE_MODE, FILL_MODE, WIDTH_CONSTRAINT } from '../../-pri
 
 import layout from './template';
 
+let isTestingThead = false;
+export function setupTHeadForTest(bool) {
+  isTestingThead = bool;
+}
+
 /**
   The table header component. This component manages and receives the column
   definitions for the table, and yields for each row of headers that exists
@@ -218,11 +223,16 @@ export default Component.extend({
   */
   onResize: null,
 
-  'data-test-row-count': readOnly('wrappedRows.length'),
+  attributeBindings: ['wrappedRowsCount:data-test-row-count'],
+  wrappedRowsCount: and('isTesting', 'wrappedRows.length'),
 
   init() {
     this._super(...arguments);
 
+    if (isTestingThead) {
+      this.set('isTesting', true);
+    }
+
     /**
      * A sensor object that sends events to this table component when table size changes. When table
      * is resized, table width & height are updated and other computed properties depending on them

app/components/ember-table-simple-checkbox.js

@@ -0,0 +1 @@
+export { default } from 'ember-table/components/ember-table-simple-checkbox';

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": {