diff --git a/ember-ui/tests/integration/components/sortable-group-accessible-test.js b/ember-ui/tests/integration/components/sortable-group-accessible-test.js index f52a34a..2307ae9 100644 --- a/ember-ui/tests/integration/components/sortable-group-accessible-test.js +++ b/ember-ui/tests/integration/components/sortable-group-accessible-test.js @@ -1,13 +1,12 @@ import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; +import { render, find, click, triggerEvent, triggerKeyEvent } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; module('Integration | Component | sortable-group-accessible', function(hooks) { setupRenderingTest(hooks); test('it can yield text content', async function(assert) { - // Template block usage: await render(hbs` template block text @@ -16,4 +15,107 @@ module('Integration | Component | sortable-group-accessible', function(hooks) { assert.equal(this.element.textContent.trim(), 'template block text'); }); + + test('it can pass splattributes to wrapper div', async function(assert) { + await render(hbs` + + `); + + assert.dom('[data-test-id=wrapper]').hasClass('foo'); + }); + + test('it has a wrapper div with a unique id', async function(assert) { + await render(hbs` + + + `); + + assert.dom('[data-test-id=first]').hasAttribute('data-id'); + assert.dom('[data-test-id=second]').hasAttribute('data-id'); + assert.notEqual(find('[data-test-id=first]').getAttribute('data-id'), find('[data-test-id=second]').getAttribute('data-id')); + }); + + test('it can yield whether it has group focus or not', async function(assert) { + await render(hbs` + + {{groupHasFocus}} + + `); + + assert.dom('[data-test-id=hasFocusWrapper]').hasText('false'); + + await triggerEvent('[data-test-id=wrapper]', 'focus'); + assert.dom('[data-test-id=hasFocusWrapper]').hasText('true'); + + await triggerEvent('[data-test-id=wrapper]', 'blur'); + assert.dom('[data-test-id=hasFocusWrapper]').hasText('false'); + }); + + test('it can yield focus action', async function(assert) { + await render(hbs` + + {{groupHasFocus}} + + + `); + + await click('[data-test-id=focusButton]'); + assert.dom('[data-test-id=hasFocusWrapper]').hasText('true'); + }); + + test('it yields selected index while arrow keying up/down', async function(assert) { + this.models = ['foo', 'bar']; + + await render(hbs` + + {{selectedIndex}} + + `); + + assert.dom('[data-test-id=selectedIndexWrapper]').hasText('0'); + + await triggerEvent('[data-test-id=wrapper]', 'focus'); + await triggerKeyEvent('[data-test-id=wrapper]', 'keyup', 'ArrowDown'); + assert.dom('[data-test-id=selectedIndexWrapper]').hasText('1', 'Can select down'); + + await triggerKeyEvent('[data-test-id=wrapper]', 'keyup', 'ArrowDown'); + assert.dom('[data-test-id=selectedIndexWrapper]').hasText('1', 'Does not extend past array length'); + + await triggerKeyEvent('[data-test-id=wrapper]', 'keyup', 'ArrowUp'); + assert.dom('[data-test-id=selectedIndexWrapper]').hasText('0', 'Can select up'); + + await triggerKeyEvent('[data-test-id=wrapper]', 'keyup', 'ArrowUp'); + assert.dom('[data-test-id=selectedIndexWrapper]').hasText('0', 'Can select up'); + + await triggerKeyEvent('[data-test-id=wrapper]', 'keyup', 'ArrowUp'); + assert.dom('[data-test-id=selectedIndexWrapper]').hasText('0', 'Does not extend beyond 0'); + }); + + test('it yields selected index while arrow keying up/down', async function(assert) { + this.models = ['foo', 'bar']; + + await render(hbs` + + {{selectedIndex}} + + `); + + assert.dom('[data-test-id=selectedIndexWrapper]').hasText('0'); + }); });