gaiety/sortable-recipes
1
0
Fork 0
Code Activity

Weee more tests

Browse source
This commit is contained in:
Ava Wroten 2020-03-15 15:35:42 -05:00
parent ff234d1646
commit 8cb9d9ecf3
4 changed files with 95 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
ember-ui/app/components/meal-list.hbs
View file

@ -3,6 +3,7 @@
@models={{this.sortedItems}}
tabindex="0"
class="shadow-md bg-gray-200 outline-none border border-gray-400 focus:border-teal-400 focus:shadow-lg"
data-test-id='meal-list-wrapper'
as |groupHasFocus selectedIndex groupActions|>
<SortableGroup
@onChange={{action this.reorderMeals}}

4
ember-ui/app/components/sortable-item-accessible.hbs
View file

@ -7,7 +7,7 @@
data-action-up
role="button"
class="text-gray-800 outline-none absolute left-0 top-0 p-2 m-4 bg-white rounded-lg border-2 border-gray-800 focus:border-teal-400 shadow-sm"
data-test-id='sort-down'>
data-test-id='sort-up'>
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>
</button>
<button
@ -16,7 +16,7 @@
data-action-down
role="button"
class="transform rotate-180 text-gray-800 outline-none absolute left-0 bottom-0 p-2 m-4 bg-white rounded-lg border-2 border-gray-800 focus:border-teal-400 shadow-sm"
data-test-id='sort-up'>
data-test-id='sort-down'>
<svg class="fill-current" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.677 18.52c.914 1.523-.183 3.472-1.967 3.472h-19.414c-1.784 0-2.881-1.949-1.967-3.472l9.709-16.18c.891-1.483 3.041-1.48 3.93 0l9.709 16.18z"/></svg>
</button>
{{/if}}

25
ember-ui/tests/integration/components/meal-list-test.js
View file

@ -1,7 +1,7 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { setupMirage } from 'ember-cli-mirage/test-support';
import { render } from '@ember/test-helpers';
import { render, find, findAll, click, settled } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Component | meal-list', function(hooks) {
@ -16,7 +16,28 @@ module('Integration | Component | meal-list', function(hooks) {
assert.dom('[data-test-id=meal-item]').exists({ count: 2 });
});
// TODO Add sortable tests
test('it can focus list wrapper', async function(assert) {
await render(hbs`<MealList />`);
let element = find('[data-test-id=meal-list-wrapper]')
await element.focus();
assert.equal(element, document.activeElement);
});
test('it can reorder items via sort up/down links', async function(assert) {
await render(hbs`<MealList />`);
let element = find('[data-test-id=meal-list-wrapper]')
await element.focus();
await settled();
await click('[data-test-id=sort-down]');
assert.dom(findAll('[data-test-id=meal-name]')[0]).includesText('Meal 2');
assert.dom(findAll('[data-test-id=meal-name]')[1]).includesText('Meal 1');
await click('[data-test-id=sort-up]');
assert.dom(findAll('[data-test-id=meal-name]')[0]).includesText('Meal 1');
assert.dom(findAll('[data-test-id=meal-name]')[1]).includesText('Meal 2');
});
async function initMeals() {
let store = this.owner.lookup('service:store');

70
ember-ui/tests/integration/components/sortable-item-accessible-test.js
View file

@ -1,6 +1,6 @@
import { module, test } from 'qunit';
import { setupRenderingTest } from 'ember-qunit';
import { render } from '@ember/test-helpers';
import { render, click } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
module('Integration | Component | sortable-item-accessible', function(hooks) {
@ -15,4 +15,72 @@ module('Integration | Component | sortable-item-accessible', function(hooks) {
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']);
});
});