tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

display-tabbing-order.test.js (3062B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
      4 
      5 "use strict";
      6 
      7 const { mount } = require("enzyme");
      8 
      9 const {
     10  createFactory,
     11 } = require("resource://devtools/client/shared/vendor/react.mjs");
     12 const Provider = createFactory(
     13  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
     14 );
     15 const {
     16  setupStore,
     17 } = require("resource://devtools/client/accessibility/test/node/helpers.js");
     18 const {
     19  UPDATE_DISPLAY_TABBING_ORDER,
     20 } = require("resource://devtools/client/accessibility/constants.js");
     21 
     22 const ConnectedDisplayTabbingOrderClass = require("resource://devtools/client/accessibility/components/DisplayTabbingOrder.js");
     23 const DisplayTabbingOrderClass =
     24  ConnectedDisplayTabbingOrderClass.WrappedComponent;
     25 const DisplayTabbingOrder = createFactory(ConnectedDisplayTabbingOrderClass);
     26 
     27 function testCheckbox(wrapper, expected) {
     28  expect(wrapper.html()).toMatchSnapshot();
     29  const displayTabbingOrder = wrapper.find(DisplayTabbingOrderClass);
     30  expect(displayTabbingOrder.children().length).toBe(1);
     31 
     32  // Label checks
     33  const label = displayTabbingOrder.childAt(0);
     34  expect(label.hasClass("accessibility-tabbing-order")).toBe(true);
     35  expect(label.hasClass("devtools-checkbox-label")).toBe(true);
     36  expect(label.prop("title")).toBe(
     37    "Show tabbing order of elements and their tabbing index."
     38  );
     39  expect(label.text()).toBe("Show Tabbing Order");
     40  expect(label.children().length).toBe(1);
     41 
     42  // Checkbox checks
     43  const checkbox = label.childAt(0);
     44  expect(checkbox.prop("checked")).toBe(expected.checked);
     45  expect(checkbox.prop("disabled")).toBe(!!expected.disabled);
     46 }
     47 
     48 describe("DisplayTabbingOrder component:", () => {
     49  it("default render", () => {
     50    const store = setupStore();
     51    const wrapper = mount(Provider({ store }, DisplayTabbingOrder()));
     52 
     53    testCheckbox(wrapper, { checked: false });
     54  });
     55 
     56  it("toggle tabbing order overlay", () => {
     57    const store = setupStore();
     58    const wrapper = mount(Provider({ store }, DisplayTabbingOrder()));
     59 
     60    expect(wrapper.html()).toMatchSnapshot();
     61    const displayTabbingOrderInstance = wrapper
     62      .find(DisplayTabbingOrderClass)
     63      .instance();
     64    displayTabbingOrderInstance.onChange = jest.fn();
     65    displayTabbingOrderInstance.forceUpdate();
     66    const checkbox = wrapper.find("input");
     67    checkbox.simulate("change");
     68    expect(displayTabbingOrderInstance.onChange.mock.calls.length).toBe(1);
     69  });
     70 
     71  it("displaying tabbing order render/update", () => {
     72    const store = setupStore({
     73      preloadedState: {
     74        ui: {
     75          tabbingOrderDisplayed: true,
     76        },
     77      },
     78    });
     79    const wrapper = mount(Provider({ store }, DisplayTabbingOrder()));
     80 
     81    testCheckbox(wrapper, { checked: true });
     82 
     83    store.dispatch({
     84      type: UPDATE_DISPLAY_TABBING_ORDER,
     85      tabbingOrderDisplayed: false,
     86    });
     87    wrapper.update();
     88 
     89    testCheckbox(wrapper, { checked: false });
     90  });
     91 });