From b1e11f383994917e31cf6726c6edef27ae78d163 Mon Sep 17 00:00:00 2001 From: Adam Ward Date: Mon, 31 Jul 2017 10:35:26 -0400 Subject: [PATCH] Add more selection tests --- addon/components/frost-fixed-table.js | 6 +- tests/helpers/selection.js | 40 ++++ .../components/frost-fixed-table-test.js | 220 ++++++++++-------- .../components/frost-table-test.js | 75 ++++-- .../unit/components/frost-fixed-table-test.js | 20 ++ tests/unit/components/frost-table-test.js | 2 +- 6 files changed, 248 insertions(+), 115 deletions(-) create mode 100644 tests/helpers/selection.js diff --git a/addon/components/frost-fixed-table.js b/addon/components/frost-fixed-table.js index f8997c2..40ce2ff 100644 --- a/addon/components/frost-fixed-table.js +++ b/addon/components/frost-fixed-table.js @@ -472,8 +472,10 @@ export default Component.extend({ this.onCallback({action, args, col, row}) }, - _clickRow (row) { - this.$(`${this.get('_bodyLeftSelector')} .frost-table-row`).eq(row).trigger('click') + _clickRow (row, event) { + const leftSectionRow = this.$(`${this.get('_bodyLeftSelector')} .frost-table-row`).eq(row) + event.target = leftSectionRow[0] + leftSectionRow.trigger(event) }, _select ({isRangeSelect, isSpecificSelect, item}) { diff --git a/tests/helpers/selection.js b/tests/helpers/selection.js new file mode 100644 index 0000000..e88fcb4 --- /dev/null +++ b/tests/helpers/selection.js @@ -0,0 +1,40 @@ +/* global $ */ +import {expect} from 'chai' +import {$hook} from 'ember-hook' + +function createRangeSelectEvent () { + const e = $.Event('click') + e.shiftKey = true + return e +} + +export function assertRowsSelected (rowHook, ...rowNumbers) { + const rows = $hook(rowHook) + let remainingRows = rows + for (let rowNumber of rowNumbers) { + const row = rows.eq(rowNumber) + expect(row).to.have.class('is-selected') + remainingRows = remainingRows.not(row) + } + + // ensure remaining rows aren't selected + expect(remainingRows).to.not.have.class('is-selected') +} + +export function rowBodyRangeSelect (rowHook, row1, row2) { + $hook(rowHook, {row: row1}).trigger(createRangeSelectEvent()) + $hook(rowHook, {row: row2}).trigger(createRangeSelectEvent()) +} + +export function rowBodySingleSelect (rowHook, row) { + $hook(rowHook, {row}).click() +} + +export function rowCheckboxRangeSelect (rowHook, row1, row2) { + $hook(`${rowHook}-selectionCell`, {row: row1}).trigger(createRangeSelectEvent()) + $hook(`${rowHook}-selectionCell`, {row: row2}).trigger(createRangeSelectEvent()) +} + +export function rowCheckboxSingleSelect (rowHook, row) { + $hook(`${rowHook}-selectionCell`, {row}).click() +} diff --git a/tests/integration/components/frost-fixed-table-test.js b/tests/integration/components/frost-fixed-table-test.js index e301f9a..4066216 100644 --- a/tests/integration/components/frost-fixed-table-test.js +++ b/tests/integration/components/frost-fixed-table-test.js @@ -5,7 +5,7 @@ import {expect} from 'chai' import Ember from 'ember' -const {$, A} = Ember +const {$, A, copy} = Ember import {$hook} from 'ember-hook' import wait from 'ember-test-helpers/wait' import {integration} from 'ember-test-utils/test-support/setup-component-test' @@ -15,6 +15,8 @@ import sinon from 'sinon' import {fixedColumns, fixedColumnsWithCustomRenderers, heroes} from './data' import {startMirage, stopMirage} from 'dummy/tests/helpers/mirage' +import {assertRowsSelected, rowBodyRangeSelect, rowBodySingleSelect, rowCheckboxRangeSelect, + rowCheckboxSingleSelect} from 'dummy/tests/helpers/selection' const test = integration('frost-fixed-table') describe(test.label, function () { @@ -388,6 +390,124 @@ describe(test.label, function () { }) }) + describe('after rendering with selection functionality', function () { + beforeEach(function () { + this.setProperties({ + selectedItems: A([]), + actions: { + onSelectionChange (selectedItems) { + this.get('selectedItems').setObjects(selectedItems) + } + } + }) + this.render(hbs` + {{frost-fixed-table + columns=fixedColumns + hook=myHook + items=heroes + itemKey='name' + selectedItems=selectedItems + onSelectionChange=(action 'onSelectionChange') + }} + `) + + return wait() + }) + + it('rows should have "selectable" class', function () { + expect(this.$('.frost-table-row')).to.have.class('selectable') + }) + + it('no row has "is-selected" class', function () { + expect(this.$('.frost-table-row')).to.not.have.class('is-selected') + }) + + it('first column has selection checkboxes', function () { + expect($hook('myTable-header-left-selectionCell')).to.have.length(1) + expect($hook('myTable-left-selectionCell')).to.have.length(heroes.length) + }) + + let _assertRowsSelected = (...rows) => { + assertRowsSelected('myTable-left', ...rows) + assertRowsSelected('myTable-middle', ...rows) + assertRowsSelected('myTable-right', ...rows) + } + + describe('selecting table row checkbox', function () { + beforeEach(function () { + rowCheckboxSingleSelect('myTable-left', 0) + return wait() + }) + + it('first row is in selected state for all sections', function () { + _assertRowsSelected(0) + }) + }) + + ;['left', 'middle', 'right'].forEach((section) => { + describe(`selecting ${section} section row body`, function () { + beforeEach(function () { + rowBodySingleSelect(`myTable-${section}`, 0) + return wait() + }) + + it('first row is in selected state for all sections', function () { + _assertRowsSelected(0) + }) + }) + }) + + describe('selecting a range of checkboxes', function () { + beforeEach(function () { + rowCheckboxRangeSelect('myTable-left', 0, 4) + return wait() + }) + + it('first 5 rows are in selected for all sections', function () { + _assertRowsSelected(0, 1, 2, 3, 4) + }) + }) + + ;['left', 'middle', 'right'].forEach((section) => { + describe(`selecting a range of ${section} section table row bodies`, function () { + beforeEach(function () { + rowBodyRangeSelect(`myTable-${section}`, 0, 4) + return wait() + }) + + it('first 5 rows are in selected state', function () { + _assertRowsSelected(0, 1, 2, 3, 4) + }) + }) + }) + + describe('selecting multiple row checkboxes', function () { + beforeEach(function () { + rowCheckboxSingleSelect('myTable-left', 0) + rowCheckboxSingleSelect('myTable-left', 1) + return wait() + }) + + it('both rows should be in selected state', function () { + _assertRowsSelected(0, 1) + }) + }) + + ;['left', 'middle', 'right'].forEach((section) => { + describe(`selecting multiple ${section} section row bodies`, function () { + beforeEach(function () { + rowBodySingleSelect(`myTable-${section}`, 0) + rowBodySingleSelect(`myTable-${section}`, 1) + return wait() + }) + + it('only the second row selected should be in selected state', function () { + _assertRowsSelected(1) + }) + }) + }) + }) + describe('events', function () { let onCallback @@ -400,7 +520,9 @@ describe(test.label, function () { onCallback = sandbox.stub() this.setProperties({ onCallback, - fixedColumns: fixedColumnsWithCustomRenderers + fixedColumns: fixedColumnsWithCustomRenderers, + // deep copy the array as to not overwrite the heroes data for other tests + heroes: heroes.map(function (item) { return copy(item, true) }) }) this.render(hbs` @@ -539,98 +661,4 @@ describe(test.label, function () { }) }) }) - - describe('after render with selection functionality', function () { - beforeEach(function () { - this.setProperties({ - selectedItems: A([]), - actions: { - onSelectionChange (selectedItems) { - this.get('selectedItems').setObjects(selectedItems) - } - } - }) - this.render(hbs` - {{frost-fixed-table - columns=fixedColumns - hook=myHook - items=heroes - itemKey='name' - selectedItems=selectedItems - onSelectionChange=(action 'onSelectionChange') - }} - `) - - return wait() - }) - - it('rows should have "selectable" class', function () { - expect(this.$('.frost-table-row')).to.have.class('selectable') - }) - - it('no row has "is-selected" class', function () { - expect(this.$('.frost-table-row')).to.not.have.class('is-selected') - }) - - it('first column has selection checkboxes', function () { - expect($hook('myTable-header-left-selectionCell')).to.have.length(1) - expect($hook('myTable-left-selectionCell')).to.have.length(heroes.length) - }) - - let assertFirstRowSelected = () => { - for (let section of ['myTable-left', 'myTable-middle', 'myTable-right']) { - const rows = $hook(section) - expect(rows.slice(0, 1)).to.have.class('is-selected') - expect(rows.slice(1)).to.not.have.class('is-selected') - } - } - - describe('selecting table row checkbox', function () { - beforeEach(function () { - // debugger - $hook('myTable-left-selectionCell-checkbox-checkbox-input').eq(0).click() - return wait() - }) - - it('first row is in selected state', function () { - assertFirstRowSelected() - }) - }) - - describe('selecting left section row', function () { - beforeEach(function () { - // debugger - $hook('myTable-left').eq(0).click() - return wait() - }) - - it('first row is in selected state', function () { - assertFirstRowSelected() - }) - }) - - describe('selecting middle section row', function () { - beforeEach(function () { - // debugger - $hook('myTable-middle').eq(0).click() - return wait() - }) - - it('first row is in selected state', function () { - assertFirstRowSelected() - }) - }) - - describe('selecting right section row', function () { - beforeEach(function () { - // debugger - $hook('myTable-right').eq(0).click() - return wait() - }) - - it('first row is in selected state', function () { - assertFirstRowSelected() - }) - }) - }) }) diff --git a/tests/integration/components/frost-table-test.js b/tests/integration/components/frost-table-test.js index ff54433..e670dd2 100644 --- a/tests/integration/components/frost-table-test.js +++ b/tests/integration/components/frost-table-test.js @@ -5,7 +5,7 @@ import {expect} from 'chai' import Ember from 'ember' -const {$, A, get} = Ember +const {$, A, copy, get} = Ember import {$hook} from 'ember-hook' import wait from 'ember-test-helpers/wait' import {integration} from 'ember-test-utils/test-support/setup-component-test' @@ -15,6 +15,8 @@ import sinon from 'sinon' import {columns, columnsWithCustomRenderers, heroes} from './data' import {startMirage, stopMirage} from 'dummy/tests/helpers/mirage' +import {assertRowsSelected, rowBodyRangeSelect, rowBodySingleSelect, rowCheckboxRangeSelect, + rowCheckboxSingleSelect} from 'dummy/tests/helpers/selection' const test = integration('frost-table') describe(test.label, function () { @@ -119,7 +121,7 @@ describe(test.label, function () { }) }) - describe('after render with selection functionality', function () { + describe('after rendering with selection functionality', function () { beforeEach(function () { this.setProperties({ selectedItems: A([]), @@ -156,32 +158,71 @@ describe(test.label, function () { expect($hook('myTable-body-row-selectionCell')).to.have.length(heroes.length) }) - let assertFirstRowSelected = () => { - const rows = $hook('myTable-body-row') - expect(rows.slice(0, 1)).to.have.class('is-selected') - expect(rows.slice(1)).to.not.have.class('is-selected') - } - - describe('selecting table row checkbox', function () { + describe('selecting single checkbox', function () { beforeEach(function () { - $hook('myTable-body-row-selectionCell-checkbox-checkbox-input').eq(0).click() + rowCheckboxSingleSelect('myTable-body-row', 0) return wait() }) it('first row is in selected state', function () { - assertFirstRowSelected() + assertRowsSelected('myTable-body-row', 0) }) }) - describe('selecting the table row', function () { + describe('selecting single table row body', function () { beforeEach(function () { - // debugger - $hook('myTable-body-row').eq(0).click() + rowBodySingleSelect('myTable-body-row', 0) return wait() }) it('first row is in selected state', function () { - assertFirstRowSelected() + assertRowsSelected('myTable-body-row', 0) + }) + }) + + describe('selecting a range of checkboxes', function () { + beforeEach(function () { + rowCheckboxRangeSelect('myTable-body-row', 0, 4) + return wait() + }) + + it('first 5 rows are in selected state', function () { + assertRowsSelected('myTable-body-row', 0, 1, 2, 3, 4) + }) + }) + + describe('selecting a range of table row bodies', function () { + beforeEach(function () { + rowBodyRangeSelect('myTable-body-row', 0, 4) + return wait() + }) + + it('first 5 rows are in selected state', function () { + assertRowsSelected('myTable-body-row', 0, 1, 2, 3, 4) + }) + }) + + describe('selecting multiple row checkboxes', function () { + beforeEach(function () { + rowCheckboxSingleSelect('myTable-body-row', 0) + rowCheckboxSingleSelect('myTable-body-row', 1) + return wait() + }) + + it('both rows should be in selected state', function () { + assertRowsSelected('myTable-body-row', 0, 1) + }) + }) + + describe('selecting multiple row bodies', function () { + beforeEach(function () { + rowBodySingleSelect('myTable-body-row', 0) + rowBodySingleSelect('myTable-body-row', 1) + return wait() + }) + + it('only the second row selected should be in selected state', function () { + assertRowsSelected('myTable-body-row', 1) }) }) }) @@ -198,7 +239,9 @@ describe(test.label, function () { onCallback = sandbox.stub() this.setProperties({ columns: columnsWithCustomRenderers, - onCallback + onCallback, + // deep copy the array as to not overwrite the heroes data for other tests + heroes: heroes.map(function (item) { return copy(item, true) }) }) this.render(hbs` diff --git a/tests/unit/components/frost-fixed-table-test.js b/tests/unit/components/frost-fixed-table-test.js index 2075ff6..bb76c0e 100644 --- a/tests/unit/components/frost-fixed-table-test.js +++ b/tests/unit/components/frost-fixed-table-test.js @@ -204,6 +204,26 @@ describe(test.label, function () { }) }) }) + + describe('_isSelectable', function () { + describe('selection is enabled', function () { + beforeEach(function () { + component.setProperties({ + onSelectionChange: function () {} + }) + }) + + it('_isSelectable should be true', function () { + expect(component.get('_isSelectable')).to.equal(true) + }) + }) + + describe('selection is not enabled', function () { + it('_isSelectable should be false', function () { + expect(component.get('_isSelectable')).to.equal(false) + }) + }) + }) }) describe('.didRender()', function () { diff --git a/tests/unit/components/frost-table-test.js b/tests/unit/components/frost-table-test.js index 3877a0b..f5da62c 100644 --- a/tests/unit/components/frost-table-test.js +++ b/tests/unit/components/frost-table-test.js @@ -69,7 +69,7 @@ describe(test.label, function () { }) describe('selection is not enabled', function () { - it('_isSelectable should be true', function () { + it('_isSelectable should be false', function () { expect(component.get('_isSelectable')).to.equal(false) }) })