diff options
Diffstat (limited to 'devtools/client/accessibility/test/node/helpers.js')
-rw-r--r-- | devtools/client/accessibility/test/node/helpers.js | 134 |
1 files changed, 134 insertions, 0 deletions
diff --git a/devtools/client/accessibility/test/node/helpers.js b/devtools/client/accessibility/test/node/helpers.js new file mode 100644 index 0000000000..bfb14c258c --- /dev/null +++ b/devtools/client/accessibility/test/node/helpers.js @@ -0,0 +1,134 @@ +/* Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ */ + +"use strict"; + +const { + reducers, +} = require("resource://devtools/client/accessibility/reducers/index.js"); +const CheckClass = require("resource://devtools/client/accessibility/components/Check.js"); +const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js"); + +const { + createStore, + combineReducers, +} = require("resource://devtools/client/shared/vendor/redux.js"); + +/** + * Prepare the store for use in testing. + */ +function setupStore({ preloadedState } = {}) { + const store = createStore(combineReducers(reducers), preloadedState); + return store; +} + +/** + * Build a mock accessible object. + * @param {Object} form + * Data similar to what accessible actor passes to accessible front. + */ +function mockAccessible(form) { + return { + on: jest.fn(), + off: jest.fn(), + isDestroyed: () => !form?.actorID, + audit: jest.fn().mockReturnValue(Promise.resolve()), + ...form, + }; +} + +/** + * + * @param {DOMNode} + * DOMNode that corresponds to a menu item in a menu list + * @param {Object} + * Expected properties: + * - role: optional ARIA role for the menu item + * - checked: optional checked state for the menu item + * - disabled: optional disabled state for the menu item + * - label: optional text label for the menu item + */ +function checkMenuItem(menuItem, expected) { + expect(menuItem.tagName).toBe("BUTTON"); + if (expected.role) { + expect(menuItem.getAttribute("role")).toBe(expected.role); + } else if (typeof expected.checked !== "undefined") { + expect(menuItem.getAttribute("role")).toBe("menuitemcheckbox"); + } else { + expect(menuItem.getAttribute("role")).toBe("menuitem"); + } + + if (typeof expected.checked !== "undefined") { + expect(menuItem.hasAttribute("aria-checked")).toBe(expected.checked); + } + + if (expected.checked) { + expect(menuItem.getAttribute("aria-checked")).toBe("true"); + } + + if (expected.disabled) { + expect(menuItem.hasAttribute("disabled")).toBe(true); + } + + if (expected.label) { + expect(menuItem.textContent).toBe(expected.label); + } +} + +/** + * + * @param {ReactWrapper} + * React wrapper for the top level check component. + * @param {Object} + * Expected audit properties: + * - score: audit score + * - issue: audit issue type + */ +function testCustomCheck(wrapper, props) { + expect(wrapper.html()).toMatchSnapshot(); + expect(wrapper.children().length).toBe(1); + const check = wrapper.childAt(0); + expect(wrapper.find(CheckClass)).toStrictEqual(check); + testCheck(check, props); +} + +/** + * + * @param {ReactWrapper} + * React wrapper for the check component. + * @param {Object} + * Expected audit properties: + * - score: audit score + * - issue: audit issue type + */ +function testCheck(wrapper, props) { + expect(wrapper.html()).toMatchSnapshot(); + const container = wrapper.childAt(0); + expect(container.hasClass("accessibility-check")).toBe(true); + expect(container.prop("role")).toBe("presentation"); + expect(container.prop("tabIndex")).toBe("-1"); + expect(wrapper.props()).toMatchObject(props); + + const localized = wrapper.find(FluentReact.Localized); + expect(localized.length).toBe(3); + + const heading = localized.at(0).childAt(0); + expect(heading.type()).toBe("h3"); + expect(heading.hasClass("accessibility-check-header")).toBe(true); + + const icon = localized.at(1).childAt(0); + expect(icon.type()).toBe("img"); + expect(icon.prop("data-score")).toEqual(props.score); + + const annotation = localized.at(2).childAt(0); + expect(annotation.type()).toBe("p"); + expect(annotation.hasClass("accessibility-check-annotation")).toBe(true); +} + +module.exports = { + checkMenuItem, + mockAccessible, + setupStore, + testCheck, + testCustomCheck, +}; |