diff --git a/app/components/file-table.js b/app/components/file-table.js index 5f989c6..4d0aabd 100644 --- a/app/components/file-table.js +++ b/app/components/file-table.js @@ -1,5 +1,5 @@ import Component from '@ember/component'; -import { set } from '@ember/object'; +import { set, computed } from '@ember/object'; const defaultFiles = []; const defaultSelectedFilePaths = []; @@ -7,6 +7,11 @@ const defaultSelectedFilePaths = []; export default Component.extend({ files: defaultFiles, selectedFilePaths: defaultSelectedFilePaths, + selectAllStatus: computed('selectedFilePaths.[]', 'files.[]', function() { + if (this.selectedFilePaths.length === this.files.length) { + return 'all'; + } else return this.selectedFilePaths.length === 0 ? 'none' : 'some'; + }), actions: { toggleSelectAll() { diff --git a/app/templates/components/file-table.hbs b/app/templates/components/file-table.hbs index 3665288..170cad2 100644 --- a/app/templates/components/file-table.hbs +++ b/app/templates/components/file-table.hbs @@ -3,6 +3,12 @@ data-test-action="file-table-select-all" {{action "toggleSelectAll"}} > + +   + Selected {{selectedFilePaths.length}} diff --git a/tests/integration/components/file-table-test.js b/tests/integration/components/file-table-test.js index ec08089..3c22819 100644 --- a/tests/integration/components/file-table-test.js +++ b/tests/integration/components/file-table-test.js @@ -74,4 +74,17 @@ module('Integration | Component | file-table', function(hooks) { await click('[data-test-action=file-table-select-all]'); assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected ' + this.files.length); }); + + test('select all checkbox changes appearance between some, all and none', async function(assert) { + this.set('files', [genericFile(), genericFile()]); + this.set('selectedFilePaths', [this.files[0].path]); + await render(hbs`{{file-table files=files selectedFilePaths=selectedFilePaths}}`); + assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('file-table-select-status-some'), true, 'Shows SOME checkbox status icon'); + + await click('[data-test-action=file-table-select-all]'); + assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('file-table-select-status-all'), true, 'Shows ALL checkbox status icon'); + + await click('[data-test-action=file-table-select-all]'); + assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('file-table-select-status-none'), true, 'Shows NONE checkbox status icon'); + }); }); \ No newline at end of file