86 lines
2.6 KiB
JavaScript
86 lines
2.6 KiB
JavaScript
import { module, test } from 'qunit';
|
|
import { setupRenderingTest } from 'ember-qunit';
|
|
import { render, click } from '@ember/test-helpers';
|
|
import { hbs } from 'ember-cli-htmlbars';
|
|
|
|
module('Integration | Component | sortable-item-accessible', function(hooks) {
|
|
setupRenderingTest(hooks);
|
|
|
|
test('it can yield text', async function(assert) {
|
|
await render(hbs`
|
|
<SortableItemAccessible>
|
|
yielded text
|
|
</SortableItemAccessible>
|
|
`);
|
|
|
|
assert.equal(this.element.textContent.trim(), 'yielded text');
|
|
});
|
|
|
|
test('it does not yield sort buttons by default', async function(assert) {
|
|
await render(hbs`<SortableItemAccessible />`);
|
|
|
|
assert.dom('[data-test-id=sort-up]').doesNotExist();
|
|
assert.dom('[data-test-id=sort-down]').doesNotExist();
|
|
});
|
|
|
|
test('it does not yield sort buttons if group does not have focus', async function(assert) {
|
|
await render(hbs`
|
|
<SortableItemAccessible
|
|
@currentIndex={{0}}
|
|
@selectedIndex={{0}} />
|
|
`);
|
|
|
|
assert.dom('[data-test-id=sort-up]').doesNotExist();
|
|
assert.dom('[data-test-id=sort-down]').doesNotExist();
|
|
});
|
|
|
|
test('it does not yield sort buttons if indices dont match', async function(assert) {
|
|
await render(hbs`
|
|
<SortableItemAccessible
|
|
@groupHasFocus={{true}}
|
|
@currentIndex={{0}}
|
|
@selectedIndex={{1}} />
|
|
`);
|
|
|
|
assert.dom('[data-test-id=sort-up]').doesNotExist();
|
|
assert.dom('[data-test-id=sort-down]').doesNotExist();
|
|
});
|
|
|
|
test('it shows sort buttons when group has focus and indicies match', async function(assert) {
|
|
this.mockFunction = () => {};
|
|
|
|
await render(hbs`
|
|
<SortableItemAccessible
|
|
@groupHasFocus={{true}}
|
|
@currentIndex={{0}}
|
|
@selectedIndex={{0}}
|
|
@orderItemUp={{this.mockFunction}}
|
|
@orderItemDown={{this.mockFunction}}
|
|
@handleBlur={{this.mockFunction}} />
|
|
`);
|
|
|
|
assert.dom('[data-test-id=sort-up]').exists();
|
|
assert.dom('[data-test-id=sort-down]').exists();
|
|
});
|
|
|
|
test('it handles actions', async function(assert) {
|
|
this.mockUp = () => { assert.step('up'); };
|
|
this.mockDown = () => { assert.step('down'); };
|
|
this.mockBlur = () => { assert.step('blur'); };
|
|
|
|
await render(hbs`
|
|
<SortableItemAccessible
|
|
@groupHasFocus={{true}}
|
|
@currentIndex={{0}}
|
|
@selectedIndex={{0}}
|
|
@orderItemUp={{this.mockUp}}
|
|
@orderItemDown={{this.mockDown}}
|
|
@handleBlur={{this.mockBlur}} />
|
|
`);
|
|
|
|
await click('[data-test-id=sort-up]');
|
|
await click('[data-test-id=sort-down]');
|
|
|
|
assert.verifySteps(['up', 'blur', 'down']);
|
|
});
|
|
});
|