gaiety/sortable-recipes
1
0
Fork 0
Code Activity

Code slides

Browse source
This commit is contained in:
Ava Wroten 2020-03-15 19:58:40 -05:00
parent d21579681c
commit ff4afc51d6
1 changed files with 117 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

118
presentation/index.html
View file

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