From de6a5f3c1aeb9d0e7a92cd7760be7481d69d6c10 Mon Sep 17 00:00:00 2001 From: Valerie R Young Date: Tue, 21 Aug 2018 09:52:44 -0400 Subject: [PATCH] Add tests for button/button.html --- test/tests/button.js | 205 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 205 insertions(+) create mode 100644 test/tests/button.js diff --git a/test/tests/button.js b/test/tests/button.js new file mode 100644 index 0000000000..75e8afe1e6 --- /dev/null +++ b/test/tests/button.js @@ -0,0 +1,205 @@ +'use strict'; + +const { ariaTest } = require('..'); +const { By, Key } = require('selenium-webdriver'); + +const exampleFile = 'button/button.html'; + +const ex = { + buttons: [ + { + id: 'action', + tag: 'div' + }, + { + id: 'toggle', + tag: 'a' + } + ], + buttonSelector: '#example [role="button"]' +}; + +// Attributes + +ariaTest('Example elements should have role="button" set', exampleFile, 'button-role', async (t) => { + t.plan(4); + + for (let button of ex.buttons) { + let buttonEl = await t.context.session.findElement(By.id(button.id)); + + t.is( + await buttonEl.getAttribute('role'), + 'button', + 'Role on button example #' + button.id + ' should have role "button"' + ); + + t.is( + await buttonEl.getTagName(), + button.tag, + 'Tag on button example #' + button.id + ' should have tag: ' + button.tag + ); + } +}); + +ariaTest('Button examples should have tabindex="0"', exampleFile, 'button-tabindex', async (t) => { + t.plan(2); + + for (let button of ex.buttons) { + let buttonEl = await t.context.session.findElement(By.id(button.id)); + + t.is( + await buttonEl.getAttribute('tabindex'), + '0', + 'tabindex should be set to "0" on button example: #' + button.id + ); + } +}); + +ariaTest('"aria-pressed" reflects button state', exampleFile, 'button-aria-pressed', async (t) => { + t.plan(3); + + let toggleButtonSelector = '#' + ex.buttons[1].id; + + let ariaPressedExists = await t.context.session.executeScript(async function () { + const selector = arguments[0]; + let el = document.querySelector(selector); + return el.hasAttribute('aria-pressed'); + }, toggleButtonSelector); + + t.is( + ariaPressedExists, + true, + 'aria-pressed attribute should exist on example: ' + toggleButtonSelector + ); + + let toggleButtonEl = await t.context.session.findElement(By.css(toggleButtonSelector)); + t.is( + await toggleButtonEl.getAttribute('aria-pressed'), + 'false', + 'aria-pressed should be set to "false" by default on example: #' + toggleButtonSelector + ); + + // Click and wait for change of 'aria-pressed' + await toggleButtonEl.click(); + await t.context.session.wait(async function () { + return toggleButtonEl.getAttribute('aria-pressed') !== 'true'; + }, 500); + + t.is( + await toggleButtonEl.getAttribute('aria-pressed'), + 'true', + 'aria-pressed should be set to "false" after clicking on example: #' + toggleButtonSelector + ); +}); + +ariaTest('key ENTER activates button', exampleFile, 'key-enter', async (t) => { + t.plan(3); + + let toggleButtonSelector = '#' + ex.buttons[1].id; + let toggleButtonEl = await t.context.session.findElement(By.css(toggleButtonSelector)); + + // Send ENTER and wait for change of 'aria-pressed' + await toggleButtonEl.sendKeys(Key.ENTER); + await t.context.session.wait(async function () { + return toggleButtonEl.getAttribute('aria-pressed') !== 'true'; + }, 500); + + t.is( + await toggleButtonEl.getAttribute('aria-pressed'), + 'true', + 'aria-pressed should be set to "false" after sending enter to example: ' + toggleButtonSelector + ); + + // Send ENTER again and wait for change of 'aria-pressed' + await toggleButtonEl.sendKeys(Key.ENTER); + await t.context.session.wait(async function () { + return toggleButtonEl.getAttribute('aria-pressed') !== 'false'; + }, 500); + + t.is( + await toggleButtonEl.getAttribute('aria-pressed'), + 'false', + 'aria-pressed should be set to "false" after sending enter to example: ' + toggleButtonSelector + ); + + let actionButtonSelector = '#' + ex.buttons[0].id; + let actionButtonEl = await t.context.session.findElement(By.css(actionButtonSelector)); + let oldText = await actionButtonEl.getText(); + let newText = oldText + ' - Printed!'; + + await t.context.session.executeScript(function () { + let [selector, newText] = arguments; + window.print = function () { + document.querySelector(selector).innerText = newText; + }; + }, actionButtonSelector, newText); + + // Send ENTER and wait for change of 'aria-pressed' + await actionButtonEl.sendKeys(Key.ENTER); + + await t.context.session.wait(async function () { + return actionButtonEl.getText('') !== oldText; + }, 500, 'window.print was not executed'); + + t.is( + await actionButtonEl.getText(), + newText, + 'window.print should have been triggered after sending ENTER to example: ' + actionButtonSelector + ); +}); + +ariaTest('key SPACE activates button', exampleFile, 'key-space', async (t) => { + t.plan(3); + + let toggleButtonSelector = '#' + ex.buttons[1].id; + let toggleButtonEl = await t.context.session.findElement(By.css(toggleButtonSelector)); + + // Send SPACE and wait for change of 'aria-pressed' + await toggleButtonEl.sendKeys(Key.SPACE); + await t.context.session.wait(async function () { + return toggleButtonEl.getAttribute('aria-pressed') !== 'true'; + }, 500); + + t.is( + await toggleButtonEl.getAttribute('aria-pressed'), + 'true', + 'aria-pressed should be set to "false" after sending space to example: ' + toggleButtonSelector + ); + + // Send SPACE again and wait for change of 'aria-pressed' + await toggleButtonEl.sendKeys(Key.SPACE); + await t.context.session.wait(async function () { + return toggleButtonEl.getAttribute('aria-pressed') !== 'false'; + }, 500); + + t.is( + await toggleButtonEl.getAttribute('aria-pressed'), + 'false', + 'aria-pressed should be set to "false" after sending space to example: ' + toggleButtonSelector + ); + + let actionButtonSelector = '#' + ex.buttons[0].id; + let actionButtonEl = await t.context.session.findElement(By.css(actionButtonSelector)); + let oldText = await actionButtonEl.getText(); + let newText = oldText + ' - Printed!'; + + await t.context.session.executeScript(function () { + let [selector, newText] = arguments; + window.print = function () { + document.querySelector(selector).innerText = newText; + }; + }, actionButtonSelector, newText); + + // Send SPACE and wait for change of 'aria-pressed' + await actionButtonEl.sendKeys(Key.SPACE); + + await t.context.session.wait(async function () { + return actionButtonEl.getText('') !== oldText; + }, 500, 'window.print was not executed'); + + t.is( + await actionButtonEl.getText(), + newText, + 'window.print should have been triggered after sending SPACE to example: ' + actionButtonSelector + ); +});