[tests] Cleanup tests

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();
+}