[tests] Cleanup tests

This PR cleans up the tests by utilizing page objects and breaking
out tests into various files. It also attempts to start formalizing
some scenario helpers that can be used to run the same modules against
multiple scenarios.

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

@@ -1,6 +1,5 @@
-import { collection, count } from 'ember-classy-page-object';
+import { collection } from 'ember-classy-page-object';
 import { findElement } from 'ember-classy-page-object/extend';
-import { getter } from 'ember-cli-page-object/macros';
 
 import {
   pressElement,
@@ -20,16 +19,16 @@ export default {
     /**
      * Retrieves selected header cell width.
      */
-    width: getter(function() {
+    get width() {
       return findElement(this).offsetWidth;
-    }),
+    },
 
     /**
      * Retrieves selected header cell height.
      */
-    height: getter(function() {
+    get height() {
       return findElement(this).offsetHeight;
-    }),
+    },
 
     /**
      * Resizes this column by dragging right border several pixels.
@@ -68,7 +67,6 @@ export default {
     async moveByPixel(deltaX) {
       let header = findElement(this);
       let box = header.getBoundingClientRect();
-      let width = header.offsetLeft;
       let startX = (box.right + box.left) / 2;
 
       await this._moveByPixel(header, startX, deltaX);
@@ -82,15 +80,11 @@ export default {
     }
   }),
 
-  /**
-   * Returns the number of columns in header.
-   */
-  columnCount: count('tr:eq(0) th'),
+  subcolumns: collection({
+    scope: 'tr:eq(1) th'
+  }),
 
-  /**
-   * Returns header width.
-   */
-  width: getter(function() {
-    return findElement(this).offsetWidth;
+  rows: collection({
+    scope: 'tr'
   })
 };

addon-test-support/pages/ember-table-page.js → addon-test-support/pages/ember-table.js

@@ -1,8 +1,9 @@
 import PageObject, { alias } from 'ember-classy-page-object';
-import EmberTableBodyPage from './-private/ember-table-body-page';
-import EmberTableFooterPage from './-private/ember-table-footer-page';
-import EmberTableHeaderPage from './-private/ember-table-header-page';
+import { findElement } from 'ember-classy-page-object/extend';
 
+import EmberTableBodyPage from './-private/ember-table-body';
+import EmberTableFooterPage from './-private/ember-table-footer';
+import EmberTableHeaderPage from './-private/ember-table-header';
 
 /**
  * Ember Table page object. Use this page object and its nested header/body object to retrieve table
@@ -25,6 +26,17 @@ export default PageObject.extend({
   footer: EmberTableFooterPage,
 
   rows: alias('body.rows'),
+  getCell: alias('body.getCell'),
+
+  headers: alias('header.columns'),
+  subheaders: alias('header.subcolumns'),
+
+  /**
+   * Returns the table width.
+   */
+  get width() {
+    return findElement(this).offsetWidth;
+  },
 
   /**
    * Selects a row in the body

addon/templates/components/ember-table-footer.hbs

@@ -1,28 +1,26 @@
 {{#if isFixed}}
   <div class="et-tf is-fixed" style={{fixedCellStyle}}>
     {{#if column.footerComponent}}
-      {{#component column.footerComponent
+      {{component column.footerComponent
         column=column
         rowValue=rowValue
         rowIndex=rowIndex
         columnIndex=columnIndex
         onFooterEvent="sendFooterEvent"
       }}
-      {{/component}}
     {{else}}
       {{footerValue}}
     {{/if}}
   </div>
 {{else}}
   {{#if column.footerComponent}}
-    {{#component column.footerComponent
+    {{component column.footerComponent
       column=column
       rowValue=rowValue
       rowIndex=rowIndex
       columnIndex=columnIndex
       onFooterEvent="sendFooterEvent"
     }}
-    {{/component}}
   {{else}}
     {{footerValue}}
   {{/if}}

tests/dummy/app/components/custom-footer.js

@@ -1,6 +1,9 @@
+import Component from '@ember/component';
+import { get } from '@ember/object';
+
+import { computed } from 'ember-decorators/object';
 import { classNames } from 'ember-decorators/component';
 import { argument } from '@ember-decorators/argument';
-import Component from '@ember/component';
 
 @classNames('custom-footer')
 export default class CustomFooter extends Component {
@@ -10,6 +13,14 @@ export default class CustomFooter extends Component {
   @argument rowIndex;
   @argument onFooterEvent;
 
+  @computed('column.valuePath', 'rowValue')
+  get footerValue() {
+    let valuePath = this.get('column.valuePath');
+    let rowValue = this.get('rowValue');
+
+    return get(rowValue, valuePath);
+  }
+
   click() {
     this.sendAction('onFooterEvent', {
       eventName: 'click',

tests/helpers/generate-table.js

@@ -19,6 +19,7 @@ const fullTable = hbs`
       tableResizeMode=tableResizeMode
 
       onSelect="onSelect"
+      onFooterEvent="onFooterEvent"
 
       as |row|
     }}
@@ -34,14 +35,14 @@ const fullTable = hbs`
   </div>
 `;
 
-export function generateRows(rowCount, columnCount) {
+export function generateRows(rowCount, columnCount, prefix = '') {
   let arr = [];
 
   for (let i = 0; i < rowCount; i++) {
     let row = { 'id': `Row ${i}` };
 
     for (let j = 0; j < columnCount; j++) {
-      row[toBase26(j)] = `${i}${toBase26(j)}`;
+      row[toBase26(j)] = `${prefix}${i}${toBase26(j)}`;
     }
 
     arr.push(row);
@@ -50,13 +51,18 @@ export function generateRows(rowCount, columnCount) {
   return emberA(arr);
 }
 
-export function generateColumns(columnCount, columnOptions = {}) {
+export function generateColumns(columnCount, {
+  subcolumnCount = 0,
+  columnOffset = 0,
+
+  ...columnOptions
+} = {}) {
   let arr = [];
 
   for (let i = 0; i < columnCount; i++) {
     let columnDefinition = {
       columnName: toBase26(i),
-      valuePath: toBase26(i),
+      valuePath: toBase26(columnOffset + i),
       width: 100,
       isResizable: true,
       isReorderable: true
@@ -66,25 +72,36 @@ export function generateColumns(columnCount, columnOptions = {}) {
       columnDefinition[property] = columnOptions[property];
     }
 
+    if (subcolumnCount) {
+      columnDefinition.subcolumns = generateColumns(subcolumnCount, {
+        columnOffset: i,
+        ...columnOptions
+      });
+    }
+
     arr.push(columnDefinition);
   }
 
   return emberA(arr);
 }
 
-function defaultOnSelect(newRows) {
-  this.set('selectedRows', newRows);
-}
+const defaultActions = {
+  onSelect(newRows) {
+    this.set('selectedRows', newRows);
+  }
+};
 
 export default async function generateTable(testContext, {
-  columns,
   rows,
+  footerRows,
+  columns,
   rowCount = 10,
+  footerRowCount = 0,
   columnCount = 10,
+  columnOptions,
   hasCheckbox = false,
 
   rowComponent = 'ember-table-row',
-  onSelect = defaultOnSelect,
 
   ...options
 } = {}) {
@@ -94,16 +111,30 @@ export default async function generateTable(testContext, {
 
   testContext.set('rowComponent', rowComponent);
 
-  columns = columns || generateColumns(columnCount);
-  rows = rows || generateRows(rowCount, columns.length);
+  columns = columns || generateColumns(columnCount, columnOptions);
+
+  // Total column length is columns + subcolumns
+  let totalColumns = columns.length + columns.reduce((v, c) => {
+    return c.subcolumns ? v + c.subcolumns.length : v;
+  }, 0);
+
+  rows = rows || generateRows(rowCount, totalColumns);
+  footerRows = footerRows || generateRows(footerRowCount, totalColumns);
 
   // Set the checkbox value if it exists
   columns[0].hasCheckbox = hasCheckbox;
 
   testContext.set('columns', columns);
   testContext.set('rows', rows);
+  testContext.set('footerRows', footerRows);
 
-  testContext.on('onSelect', onSelect.bind(testContext));
+  for (let action in defaultActions) {
+    let actions = testContext.actions || testContext._actions;
+
+    if (actions && !actions[action]) {
+      testContext.on(action, defaultActions[action].bind(testContext));
+    }
+  }
 
   testContext.render(fullTable);
 

tests/helpers/module.js

@@ -0,0 +1,15 @@
+import { module, moduleForComponent } from 'ember-qunit';
+
+export function scenarioModule(scenarios, callback) {
+  for (let scenario in scenarios) {
+    module(scenario, function(...moduleArgs) {
+      callback(scenarios[scenario], ...moduleArgs);
+    });
+  }
+}
+
+export function componentModule(moduleName, callback) {
+  moduleForComponent('ember-table', moduleName, { integration: true });
+
+  callback();
+}