tor-browser

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

CustomizeMenu.test.jsx (4694B)

      1 import React from "react";
      2 import { mount } from "enzyme";
      3 import { Provider } from "react-redux";
      4 import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs";
      5 import { combineReducers, createStore } from "redux";
      6 
      7 import { CustomizeMenu } from "content-src/components/CustomizeMenu/CustomizeMenu";
      8 import { ContentSection } from "content-src/components/CustomizeMenu/ContentSection/ContentSection";
      9 
     10 const DEFAULT_STATE = {
     11  ...INITIAL_STATE,
     12  Prefs: {
     13    ...INITIAL_STATE.Prefs,
     14    values: {
     15      ...INITIAL_STATE.Prefs.values,
     16      "newtabWallpapers.wallpaper": "",
     17    },
     18  },
     19 };
     20 
     21 function WrapWithProvider({ children, state = DEFAULT_STATE }) {
     22  const store = createStore(combineReducers(reducers), state);
     23  return <Provider store={store}>{children}</Provider>;
     24 }
     25 
     26 let wrapper;
     27 let sandbox;
     28 let DEFAULT_PROPS;
     29 
     30 describe("<CustomizeMenu>", () => {
     31  beforeEach(() => {
     32    sandbox = sinon.createSandbox();
     33 
     34    DEFAULT_PROPS = {
     35      showing: false,
     36      onOpen: sandbox.stub(),
     37      onClose: sandbox.stub(),
     38      openPreferences: sandbox.stub(),
     39      setPref: sandbox.stub(),
     40      dispatch: sandbox.stub(),
     41      enabledSections: {
     42        topSitesEnabled: true,
     43        pocketEnabled: true,
     44        weatherEnabled: true,
     45        showInferredPersonalizationEnabled: false,
     46        topSitesRowsCount: 1,
     47        selectedWallpaper: "",
     48      },
     49      enabledWidgets: { timerEnabled: false, listsEnabled: false },
     50      wallpapersEnabled: false,
     51      activeWallpaper: null,
     52      pocketRegion: "US",
     53      mayHaveTopicSections: false,
     54      mayHaveInferredPersonalization: false,
     55      mayHaveWeather: true,
     56      mayHaveWidgets: false,
     57      mayHaveTimerWidget: false,
     58      mayHaveListsWidget: false,
     59    };
     60  });
     61 
     62  afterEach(() => {
     63    if (wrapper) {
     64      wrapper.unmount();
     65      wrapper = null;
     66    }
     67    sandbox.restore();
     68  });
     69 
     70  it("renders the personalize button when not showing and calls onOpen on click", () => {
     71    wrapper = mount(
     72      <WrapWithProvider>
     73        <CustomizeMenu {...DEFAULT_PROPS} showing={false} />
     74      </WrapWithProvider>
     75    );
     76 
     77    const openBtn = wrapper.find(".personalize-button");
     78    assert.isTrue(openBtn.exists(), "open button renders");
     79    openBtn.simulate("click");
     80    assert.calledOnce(DEFAULT_PROPS.onOpen);
     81  });
     82 
     83  it("calls onOpen when pressing Enter on the personalize button", () => {
     84    wrapper = mount(
     85      <WrapWithProvider>
     86        <CustomizeMenu {...DEFAULT_PROPS} showing={false} />
     87      </WrapWithProvider>
     88    );
     89 
     90    wrapper.find(".personalize-button").simulate("keydown", { key: "Enter" });
     91    assert.calledOnce(DEFAULT_PROPS.onOpen);
     92  });
     93 
     94  it("renders the menu when showing = true and calls onClose from the close button", () => {
     95    wrapper = mount(
     96      <WrapWithProvider>
     97        <CustomizeMenu {...DEFAULT_PROPS} showing={true} />
     98      </WrapWithProvider>
     99    );
    100 
    101    const menu = wrapper.find(".customize-menu");
    102    assert.isTrue(menu.exists(), "customize menu renders");
    103 
    104    const closeBtn = wrapper.find("#close-button");
    105    assert.isTrue(closeBtn.exists(), "close button renders");
    106 
    107    closeBtn.simulate("click");
    108    assert.calledOnce(DEFAULT_PROPS.onClose);
    109  });
    110 
    111  it("passes key configuration props to ContentSection", () => {
    112    const PROPS = {
    113      ...DEFAULT_PROPS,
    114      showing: true,
    115      mayHaveWidgets: true,
    116      mayHaveTimerWidget: true,
    117      mayHaveListsWidget: true,
    118      wallpapersEnabled: true,
    119      enabledWidgets: { timerEnabled: true, listsEnabled: true },
    120    };
    121 
    122    wrapper = mount(
    123      <WrapWithProvider>
    124        <CustomizeMenu {...PROPS} />
    125      </WrapWithProvider>
    126    );
    127 
    128    const child = wrapper.find(ContentSection);
    129    assert.strictEqual(child.prop("mayHaveWidgets"), true);
    130    assert.strictEqual(child.prop("mayHaveTimerWidget"), true);
    131    assert.strictEqual(child.prop("mayHaveListsWidget"), true);
    132    assert.strictEqual(child.prop("wallpapersEnabled"), true);
    133    assert.deepEqual(child.prop("enabledWidgets"), {
    134      timerEnabled: true,
    135      listsEnabled: true,
    136    });
    137  });
    138 
    139  it("adds subpanel-open class when onSubpanelToggle is called", () => {
    140    wrapper = mount(
    141      <WrapWithProvider>
    142        <CustomizeMenu {...DEFAULT_PROPS} showing={true} />
    143      </WrapWithProvider>
    144    );
    145 
    146    const instance = wrapper.find("_CustomizeMenu").instance();
    147 
    148    instance.onSubpanelToggle(true);
    149    wrapper.update();
    150 
    151    const menu = wrapper.find(".customize-menu").hostNodes();
    152    assert.isTrue(menu.hasClass("subpanel-open"));
    153 
    154    instance.onSubpanelToggle(false);
    155    wrapper.update();
    156 
    157    const menuAfter = wrapper.find(".customize-menu").hostNodes();
    158    assert.isFalse(menuAfter.hasClass("subpanel-open"));
    159  });
    160 });