91 lines
3 KiB
JavaScript
91 lines
3 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
"use strict";
|
|
|
|
const { mount } = require("enzyme");
|
|
|
|
const {
|
|
createFactory,
|
|
} = require("resource://devtools/client/shared/vendor/react.mjs");
|
|
const Provider = createFactory(
|
|
require("resource://devtools/client/shared/vendor/react-redux.js").Provider
|
|
);
|
|
const {
|
|
setupStore,
|
|
} = require("resource://devtools/client/accessibility/test/node/helpers.js");
|
|
const {
|
|
UPDATE_DISPLAY_TABBING_ORDER,
|
|
} = require("resource://devtools/client/accessibility/constants.js");
|
|
|
|
const ConnectedDisplayTabbingOrderClass = require("resource://devtools/client/accessibility/components/DisplayTabbingOrder.js");
|
|
const DisplayTabbingOrderClass =
|
|
ConnectedDisplayTabbingOrderClass.WrappedComponent;
|
|
const DisplayTabbingOrder = createFactory(ConnectedDisplayTabbingOrderClass);
|
|
|
|
function testCheckbox(wrapper, expected) {
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
const displayTabbingOrder = wrapper.find(DisplayTabbingOrderClass);
|
|
expect(displayTabbingOrder.children().length).toBe(1);
|
|
|
|
// Label checks
|
|
const label = displayTabbingOrder.childAt(0);
|
|
expect(label.hasClass("accessibility-tabbing-order")).toBe(true);
|
|
expect(label.hasClass("devtools-checkbox-label")).toBe(true);
|
|
expect(label.prop("title")).toBe(
|
|
"Show tabbing order of elements and their tabbing index."
|
|
);
|
|
expect(label.text()).toBe("Show Tabbing Order");
|
|
expect(label.children().length).toBe(1);
|
|
|
|
// Checkbox checks
|
|
const checkbox = label.childAt(0);
|
|
expect(checkbox.prop("checked")).toBe(expected.checked);
|
|
expect(checkbox.prop("disabled")).toBe(!!expected.disabled);
|
|
}
|
|
|
|
describe("DisplayTabbingOrder component:", () => {
|
|
it("default render", () => {
|
|
const store = setupStore();
|
|
const wrapper = mount(Provider({ store }, DisplayTabbingOrder()));
|
|
|
|
testCheckbox(wrapper, { checked: false });
|
|
});
|
|
|
|
it("toggle tabbing order overlay", () => {
|
|
const store = setupStore();
|
|
const wrapper = mount(Provider({ store }, DisplayTabbingOrder()));
|
|
|
|
expect(wrapper.html()).toMatchSnapshot();
|
|
const displayTabbingOrderInstance = wrapper
|
|
.find(DisplayTabbingOrderClass)
|
|
.instance();
|
|
displayTabbingOrderInstance.onChange = jest.fn();
|
|
displayTabbingOrderInstance.forceUpdate();
|
|
const checkbox = wrapper.find("input");
|
|
checkbox.simulate("change");
|
|
expect(displayTabbingOrderInstance.onChange.mock.calls.length).toBe(1);
|
|
});
|
|
|
|
it("displaying tabbing order render/update", () => {
|
|
const store = setupStore({
|
|
preloadedState: {
|
|
ui: {
|
|
tabbingOrderDisplayed: true,
|
|
},
|
|
},
|
|
});
|
|
const wrapper = mount(Provider({ store }, DisplayTabbingOrder()));
|
|
|
|
testCheckbox(wrapper, { checked: true });
|
|
|
|
store.dispatch({
|
|
type: UPDATE_DISPLAY_TABBING_ORDER,
|
|
tabbingOrderDisplayed: false,
|
|
});
|
|
wrapper.update();
|
|
|
|
testCheckbox(wrapper, { checked: false });
|
|
});
|
|
});
|