tor-browser

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

audit-progress-overlay.test.js (4667B)

      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 "use strict";
      5 
      6 const { mount } = require("enzyme");
      7 
      8 const {
      9  createFactory,
     10 } = require("resource://devtools/client/shared/vendor/react.mjs");
     11 const Provider = createFactory(
     12  require("resource://devtools/client/shared/vendor/react-redux.js").Provider
     13 );
     14 const {
     15  setupStore,
     16 } = require("resource://devtools/client/accessibility/test/node/helpers.js");
     17 
     18 const {
     19  accessibility: { AUDIT_TYPE },
     20 } = require("resource://devtools/shared/constants.js");
     21 const {
     22  AUDIT_PROGRESS,
     23 } = require("resource://devtools/client/accessibility/constants.js");
     24 
     25 const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
     26 const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
     27 
     28 const ConnectedAuditProgressOverlayClass = require("resource://devtools/client/accessibility/components/AuditProgressOverlay.js");
     29 const AuditProgressOverlayClass =
     30  ConnectedAuditProgressOverlayClass.WrappedComponent;
     31 const AuditProgressOverlay = createFactory(ConnectedAuditProgressOverlayClass);
     32 
     33 function testTextProgressBar(store, expectedLocalizedStringId) {
     34  const wrapper = mount(
     35    Provider(
     36      { store },
     37      LocalizationProvider({ bundles: [] }, AuditProgressOverlay())
     38    )
     39  );
     40  expect(wrapper.html()).toMatchSnapshot();
     41 
     42  const overlay = wrapper.find(AuditProgressOverlayClass);
     43  expect(overlay.children().length).toBe(1);
     44 
     45  const localized = overlay.childAt(0);
     46  expect(localized.prop("id")).toBe(expectedLocalizedStringId);
     47  expect(localized.prop("attrs")["aria-valuetext"]).toBe(true);
     48 
     49  const overlayText = localized.childAt(0);
     50  expect(overlayText.type()).toBe("span");
     51  expect(overlayText.prop("id")).toBe("audit-progress-container");
     52  expect(overlayText.prop("role")).toBe("progressbar");
     53 }
     54 
     55 function testProgress(wrapper, percentage) {
     56  const progress = wrapper.find("progress");
     57  expect(progress.prop("max")).toBe(100);
     58  expect(progress.prop("value")).toBe(percentage);
     59  expect(progress.hasClass("audit-progress-progressbar")).toBe(true);
     60  expect(progress.prop("aria-labelledby")).toBe("audit-progress-container");
     61 }
     62 
     63 describe("AuditProgressOverlay component:", () => {
     64  it("render not auditing", () => {
     65    const store = setupStore();
     66    const wrapper = mount(
     67      Provider(
     68        { store },
     69        LocalizationProvider({ bundles: [] }, AuditProgressOverlay())
     70      )
     71    );
     72    expect(wrapper.html()).toMatchSnapshot();
     73    expect(wrapper.isEmptyRender()).toBe(true);
     74  });
     75 
     76  it("render auditing initializing", () => {
     77    const store = setupStore({
     78      preloadedState: { audit: { auditing: [AUDIT_TYPE.CONTRAST] } },
     79    });
     80 
     81    testTextProgressBar(store, "accessibility-progress-initializing");
     82  });
     83 
     84  it("render auditing progress", () => {
     85    const store = setupStore({
     86      preloadedState: {
     87        audit: {
     88          auditing: [AUDIT_TYPE.CONTRAST],
     89          progress: { total: 5, percentage: 0 },
     90        },
     91      },
     92    });
     93 
     94    const wrapper = mount(
     95      Provider(
     96        { store },
     97        LocalizationProvider({ bundles: [] }, AuditProgressOverlay())
     98      )
     99    );
    100    expect(wrapper.html()).toMatchSnapshot();
    101 
    102    const overlay = wrapper.find(AuditProgressOverlayClass);
    103    expect(overlay.children().length).toBe(1);
    104 
    105    const overlayContainer = overlay.childAt(0);
    106    expect(overlayContainer.type()).toBe("span");
    107    expect(overlayContainer.prop("id")).toBe("audit-progress-container");
    108    expect(overlayContainer.children().length).toBe(2);
    109 
    110    const localized = overlayContainer.childAt(0);
    111    expect(localized.prop("id")).toBe("accessibility-progress-progressbar");
    112    expect(localized.prop("$nodeCount")).toBe(5);
    113    expect(overlayContainer.childAt(1).type()).toBe("progress");
    114 
    115    testProgress(wrapper, 0);
    116 
    117    store.dispatch({
    118      type: AUDIT_PROGRESS,
    119      progress: { total: 5, percentage: 50 },
    120    });
    121    wrapper.update();
    122 
    123    expect(wrapper.html()).toMatchSnapshot();
    124    testProgress(wrapper, 50);
    125 
    126    store.dispatch({
    127      type: AUDIT_PROGRESS,
    128      progress: { total: 5, percentage: 75 },
    129    });
    130    wrapper.update();
    131 
    132    expect(wrapper.html()).toMatchSnapshot();
    133    testProgress(wrapper, 75);
    134  });
    135 
    136  it("render auditing finishing up", () => {
    137    const store = setupStore({
    138      preloadedState: {
    139        audit: {
    140          auditing: [AUDIT_TYPE.CONTRAST],
    141          progress: { total: 5, percentage: 100 },
    142        },
    143      },
    144    });
    145 
    146    testTextProgressBar(store, "accessibility-progress-finishing");
    147  });
    148 });