diff --git a/presentation/index.html b/presentation/index.html index 07e4cef..9a24fcc 100644 --- a/presentation/index.html +++ b/presentation/index.html @@ -206,7 +206,123 @@
- TODO: TESTING +

Splattributes

+ +

+ index.hbs +

+ +

+            <SortableGroupAccessible
+              tabindex="0"
+              class="border focus:border-teal-400"
+            > Foo </SortableGroupAccessible>
+          
+ +
+

+ sortable-group-accessible.hbs +

+ +

+              <div ...attributes>
+                {{yield}}
+              </div>
+            
+
+ +
+

+ rendered html +

+ +

+              <div tabindex="0" class="border focus:border-teal-400"
+              > Foo </div>
+            
+
+
+ +
+

Events & Modifiers

+ +

+ sortable-group-accessible.hbs +

+ +

+            <div
+              {{on 'focus' this.handleFocus}}
+              {{on 'blur' this.handleBlur}}
+              {{key-up this.handleArrowUp key='ArrowUp'}}
+              {{key-up this.handleArrowDown key='ArrowDown'}}
+          
+ +

+ modifiers/key-up.js +

+ +

+            import { modifier } from 'ember-modifier';
+            const listener = (evt) => {
+              if (!desiredKey || desiredKey === evt.key) handler(evt);
+            }
+            export default modifier(function keyUp(element, [handler], { key: desiredKey }) {
+              element.addEventListener('keyup', listener);
+              return () => { element.removeEventListener('keyup', listener); }
+            });
+          
+
+ +
+

@ember/test-helpers

+ + +
+ +
+

Modifier Tests

+ +

+ modifiers/key-up-test.js +

+ +

+            test('it can listen for specific key up events', async function(assert) {
+              this.keyUp = ({ key }) => {
+                assert.step('key up');
+                assert.equal(key, 'Enter');
+              };
+              await render(hbs`
+                <div {{key-up this.keyUp}} data-test-id='keyup'></div>`);
+              let selector = '[data-test-id=keyup]';
+              await triggerKeyEvent(selector, 'keyup', 'Enter');
+              assert.verifySteps(['key up']);
+            });
+          
+
+ +
+

Testing Reordering

+ +

+ index-test.js +

+ +

+            assert.dom(findAll('[data-test-id=item]')[0]).hasText('Item 1');
+            assert.dom(findAll('[data-test-id=item]')[1]).hasText('Item 2');
+
+            await triggerEvent('[data-test-id=group]', 'focus');
+            await click('[data-test-id=sort-down]');
+
+            assert.dom(findAll('[data-test-id=item]')[0]).hasText('Item 2');
+            assert.dom(findAll('[data-test-id=item]')[1]).hasText('Item 1');
+