Weee more tests

ember-ui/app/components/meal-list.hbs

@@ -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}}

ember-ui/app/components/sortable-item-accessible.hbs

@@ -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}}

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

@@ -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');

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

@@ -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']);
+  });
 });