Code slides

presentation/index.html

@@ -206,7 +206,123 @@
         </section>
 
         <section>
-          TODO: TESTING
+          <h2>Splattributes</h2>
+
+          <p class="text-xl text-left text-gray-600">
+            index.hbs
+          </p>
+
+          <pre><code class="hljs html.hbs" data-line-numbers="2-3" data-trim>
+            &lt;SortableGroupAccessible
+              tabindex="0"
+              class="border focus:border-teal-400"
+            &gt; Foo &lt;/SortableGroupAccessible&gt;
+          </code></pre>
+
+          <div class="fragment">
+            <p class="text-xl text-left text-gray-600">
+              sortable-group-accessible.hbs
+            </p>
+
+            <pre><code class="hljs html.hbs" data-line-numbers="1" data-trim>
+              &lt;div ...attributes&gt;
+                {{yield}}
+              &lt;/div&gt;
+            </code></pre>
+          </div>
+
+          <div class="fragment">
+            <p class="text-xl text-left text-gray-600">
+              rendered html
+            </p>
+
+            <pre><code class="hljs html.hbs" data-line-numbers="1" data-trim>
+              &lt;div tabindex="0" class="border focus:border-teal-400"
+              &gt; Foo &lt;/div&gt;
+            </code></pre>
+          </div>
+        </section>
+
+        <section>
+          <h2>Events & Modifiers</h2>
+
+          <p class="text-xl text-left text-gray-600">
+            sortable-group-accessible.hbs
+          </p>
+
+          <pre><code class="hljs html.hbs" data-line-numbers="2,4" data-trim>
+            &lt;div
+              {{on 'focus' this.handleFocus}}
+              {{on 'blur' this.handleBlur}}
+              {{key-up this.handleArrowUp key='ArrowUp'}}
+              {{key-up this.handleArrowDown key='ArrowDown'}}
+          </code></pre>
+
+          <p class="text-xl text-left text-gray-600">
+            modifiers/key-up.js
+          </p>
+
+          <pre><code class="hljs js" data-line-numbers="6-7" data-trim>
+            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); }
+            });
+          </code></pre>
+        </section>
+
+        <section>
+          <h2>@ember/test-helpers</h2>
+
+          <ul>
+            <li>click</li>
+            <li class="fragment">triggerEvent</li>
+            <li class="fragment">triggerKeyEvent</li>
+          </ul>
+        </section>
+
+        <section>
+          <h2>Modifier Tests</h2>
+
+          <p class="text-xl text-left text-gray-600">
+            modifiers/key-up-test.js
+          </p>
+
+          <pre><code class="hljs js" data-line-numbers="2-4,7,9-10" data-trim>
+            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`
+                &lt;div {{key-up this.keyUp}} data-test-id='keyup'&gt;&lt;/div&gt;`);
+              let selector = '[data-test-id=keyup]';
+              await triggerKeyEvent(selector, 'keyup', 'Enter');
+              assert.verifySteps(['key up']);
+            });
+          </code></pre>
+        </section>
+
+        <section>
+          <h2>Testing Reordering</h2>
+
+          <p class="text-xl text-left text-gray-600">
+            index-test.js
+          </p>
+
+          <pre><code class="hljs js" data-trim>
+            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');
+          </code></pre>
         </section>
 
         <section>