1 files changed, 91 insertions, 0 deletions
diff --git a/devtools/client/accessibility/test/node/components/display-tabbing-order.test.js b/devtools/client/accessibility/test/node/components/display-tabbing-order.test.js
new file mode 100644
index 0000000000..65952a10e5
--- /dev/null
+++ b/devtools/client/accessibility/test/node/components/display-tabbing-order.test.js
@@ -0,0 +1,91 @@
+/* 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.js");
+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 });
+  });
+});