Skip to content

Commit

Permalink
Add missing tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcking65
Valerie Young authored and mcking65 committed Jun 30, 2020
1 parent cd19697 commit 59dfe64
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 8 deletions.
4 changes: 2 additions & 2 deletions examples/combobox/combobox-select-only.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ <h3 id="kbd_label_combobox">Closed Combobox</h3>
Opens the listbox and moves visual focus to the last option.
</td>
</tr>
<tr data-test-id="standard-single-line-editing-keys">
<tr data-test-id="printable-chars">
<th>Printable Characters</th>
<td>
<ul>
Expand Down Expand Up @@ -240,7 +240,7 @@ <h3 id="kbd_label_listbox">Listbox Popup</h3>
<th><kbd>PageDown</kbd></th>
<td>Jumps visual focus down 10 options (or to last option).</td>
</tr>
<tr data-test-id="listbox-key-char">
<tr data-test-id="printable-chars">
<th>Printable Characters</th>
<td>
<ul>
Expand Down
49 changes: 43 additions & 6 deletions test/tests/combobox_select-only.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ ariaTest('Alt + down arrow opens listbox', exampleFile, 'combobox-key-alt-down-a
t.false(await listbox.isDisplayed(), 'Listbox should be hidden on load');

// Send ALT + ARROW_DOWN to the combo
await combobox.sendKeys(Key.ALT, Key.ARROW_DOWN);
await combobox.sendKeys(Key.chord(Key.ALT, Key.ARROW_DOWN));

// Check that the listbox is displayed
t.true(await listbox.isDisplayed(), 'alt + down should show the listbox');
Expand All @@ -107,7 +107,27 @@ ariaTest('Alt + down arrow opens listbox', exampleFile, 'combobox-key-alt-down-a
t.is(await combobox.getAttribute('aria-activedescendant'), firstOptionId, 'Alt + Down should highlight the first option');
});

ariaTest('Down arrow opens listbox', exampleFile, 'combobox-key-down-arrow', async (t) => {
ariaTest('Up arrow opens listbox', exampleFile, 'combobox-key-up-arrow', async (t) => {
const combobox = await t.context.session.findElement(By.css(ex.comboSelector));
const listbox = await t.context.session.findElement(By.css(ex.listboxSelector));
const firstOptionId = await t.context.session.findElement(By.css(`${ex.listboxSelector} [role=option]`)).getAttribute('id');

// listbox starts collapsed
t.false(await listbox.isDisplayed(), 'Listbox should be hidden on load');

// Send ARROW_UP to the combo
await combobox.sendKeys(Key.ARROW_UP);

// Check that the listbox is displayed
t.true(await listbox.isDisplayed(), 'arrow up should show the listbox');
t.is(await combobox.getAttribute('aria-expanded'), 'true', 'aria-expanded should be true when opened');

// the first option should be selected
t.is(await combobox.getAttribute('aria-activedescendant'), firstOptionId, 'arrow up should highlight the first option');
});


ariaTest(' arrow opens listbox', exampleFile, 'combobox-key-down-arrow', async (t) => {
const combobox = await t.context.session.findElement(By.css(ex.comboSelector));
const listbox = await t.context.session.findElement(By.css(ex.listboxSelector));
const firstOptionId = await t.context.session.findElement(By.css(`${ex.listboxSelector} [role=option]`)).getAttribute('id');
Expand Down Expand Up @@ -215,7 +235,7 @@ ariaTest('End opens listbox to last option', exampleFile, 'combobox-key-end', as
t.is(await combobox.getAttribute('aria-activedescendant'), lastOptionId, 'end should always highlight the last option');
});

ariaTest('character keys open listbox to matching option', exampleFile, 'listbox-key-char', async (t) => {
ariaTest('character keys open listbox to matching option', exampleFile, 'printable-chars', async (t) => {
const combobox = await t.context.session.findElement(By.css(ex.comboSelector));
const listbox = await t.context.session.findElement(By.css(ex.listboxSelector));
const secondOptionId = await t.context.session.findElement(By.css(`${ex.listboxSelector} [role=option]:nth-child(2)`)).getAttribute('id');
Expand Down Expand Up @@ -291,6 +311,23 @@ ariaTest('Space closes listbox and selects option', exampleFile, 'listbox-key-sp
t.is(await secondOption.getAttribute('aria-selected'), 'true', 'Second option has aria-selected set to true');
});

ariaTest('Space closes listbox and selects option', exampleFile, 'listbox-key-alt-up-arrow', async (t) => {
const combobox = await t.context.session.findElement(By.css(ex.comboSelector));
const listbox = await t.context.session.findElement(By.css(ex.listboxSelector));
const secondOption = await t.context.session.findElement(By.css(`${ex.listboxSelector} [role=option]:nth-child(2)`));

// Open, move to third option, send ALT+UP ARROW
await combobox.sendKeys(Key.ENTER, Key.ARROW_DOWN);
const secondOptionText = await secondOption.getText();
await combobox.sendKeys(Key.chord(Key.ALT, Key.ARROW_UP));

// listbox is collapsed and the value is set to the third option
t.false(await listbox.isDisplayed(), 'Listbox should be hidden');
t.is(await combobox.getText(), secondOptionText, 'Combobox inner text should match the second option');
t.is(await secondOption.getAttribute('aria-selected'), 'true', 'Second option has aria-selected set to true');
});


ariaTest('Escape closes listbox without selecting option', exampleFile, 'listbox-key-escape', async (t) => {
const combobox = await t.context.session.findElement(By.css(ex.comboSelector));
const listbox = await t.context.session.findElement(By.css(ex.listboxSelector));
Expand Down Expand Up @@ -450,7 +487,7 @@ ariaTest('PageUp moves up 10 options, and does not wrap', exampleFile, 'listbox-
t.is(await combobox.getAttribute('aria-activedescendant'), optionId, 'aria-activedescendant points to the first option after second pageup');
});

ariaTest('Multiple single-character presses cycle through options', exampleFile, 'listbox-key-char', async (t) => {
ariaTest('Multiple single-character presses cycle through options', exampleFile, 'printable-chars', async (t) => {
const combobox = await t.context.session.findElement(By.css(ex.comboSelector));
const options = await t.context.queryElements(t, `${ex.listboxSelector} [role=option]`);

Expand Down Expand Up @@ -484,7 +521,7 @@ ariaTest('Multiple single-character presses cycle through options', exampleFile,
t.is(await combobox.getAttribute('aria-activedescendant'), `${matchingId}`, 'aria-activedescendant points to the second option beginning with "b"');
});

ariaTest('Typing multiple characters refines search', exampleFile, 'listbox-key-char', async (t) => {
ariaTest('Typing multiple characters refines search', exampleFile, 'printable-chars', async (t) => {
const combobox = await t.context.session.findElement(By.css(ex.comboSelector));
const options = await t.context.queryElements(t, `${ex.listboxSelector} [role=option]`);

Expand All @@ -505,4 +542,4 @@ ariaTest('Typing multiple characters refines search', exampleFile, 'listbox-key-

// now fourth option should be highlighted
t.is(await combobox.getAttribute('aria-activedescendant'), fourthId, 'The fourth option is highlighted after typing multiple letters');
});
});

0 comments on commit 59dfe64

Please sign in to comment.