Source code
Revision control
Copy as Markdown
Other Tools
/* 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/. */
// @nova-cleanup(move-directory): Move to test/unit/content-src/components/CustomizeMenu/ after Nova ships
import React from "react";
import { mount } from "enzyme";
import { Provider } from "react-redux";
import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs";
import { combineReducers, createStore } from "redux";
import { WidgetsManagementPanel } from "content-src/components/Nova/CustomizeMenu/WidgetsManagementPanel/WidgetsManagementPanel";
function WrapWithProvider({ children, state = INITIAL_STATE }) {
const store = createStore(combineReducers(reducers), state);
return <Provider store={store}>{children}</Provider>;
}
describe("<WidgetsManagementPanel>", () => {
let wrapper;
let sandbox;
let DEFAULT_PROPS;
beforeEach(() => {
sandbox = sinon.createSandbox();
DEFAULT_PROPS = {
exitEventFired: false,
onSubpanelToggle: sandbox.stub(),
togglePanel: sandbox.stub(),
showPanel: false,
enabledSections: { weatherEnabled: false },
enabledWidgets: {
timerEnabled: false,
listsEnabled: false,
widgetsMaximized: false,
widgetsMayBeMaximized: false,
},
mayHaveWeather: true,
mayHaveTimerWidget: true,
mayHaveListsWidget: true,
mayHaveWeatherForecast: false,
weatherDisplay: "simple",
setPref: sandbox.stub(),
};
});
afterEach(() => {
if (wrapper) {
wrapper.unmount();
wrapper = null;
}
sandbox.restore();
});
it("should render the component", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} />
</WrapWithProvider>
);
assert.ok(wrapper.exists());
});
it("should render the manage widgets button", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} />
</WrapWithProvider>
);
assert.ok(wrapper.find("moz-box-button").exists());
});
it("should call togglePanel when button is clicked", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} />
</WrapWithProvider>
);
wrapper.find("moz-box-button").simulate("click");
assert.calledOnce(DEFAULT_PROPS.togglePanel);
});
it("should render the panel when showPanel is true", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={true} />
</WrapWithProvider>
);
assert.ok(wrapper.find(".widgets-mgmt-panel").exists());
});
it("should not render the panel when showPanel is false", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={false} />
</WrapWithProvider>
);
assert.isFalse(wrapper.find(".widgets-mgmt-panel").exists());
});
it("should call onSubpanelToggle when panel opens", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={false} />
</WrapWithProvider>
);
wrapper.setProps({
children: (
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
onSubpanelToggle={DEFAULT_PROPS.onSubpanelToggle}
/>
),
});
assert.called(DEFAULT_PROPS.onSubpanelToggle);
});
it("should call togglePanel when exitEventFired becomes true and showPanel is true", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
exitEventFired={false}
/>
</WrapWithProvider>
);
wrapper.setProps({
children: (
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
exitEventFired={true}
togglePanel={DEFAULT_PROPS.togglePanel}
/>
),
});
assert.called(DEFAULT_PROPS.togglePanel);
});
it("should not call togglePanel when exitEventFired becomes true but showPanel is false", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={false}
exitEventFired={false}
/>
</WrapWithProvider>
);
wrapper.setProps({
children: (
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={false}
exitEventFired={true}
togglePanel={DEFAULT_PROPS.togglePanel}
/>
),
});
assert.notCalled(DEFAULT_PROPS.togglePanel);
});
it("should call togglePanel when arrow button is clicked", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={true} />
</WrapWithProvider>
);
wrapper.find(".arrow-button").simulate("click");
assert.calledOnce(DEFAULT_PROPS.togglePanel);
});
it("should render panel title", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={true} />
</WrapWithProvider>
);
const panel = wrapper.find(".widgets-mgmt-panel");
assert.ok(panel.exists());
assert.equal(panel.find("h1").length, 1);
});
describe("widget toggles", () => {
it("should render weather toggle when mayHaveWeather is true", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={true} />
</WrapWithProvider>
);
assert.ok(wrapper.find("#weather-toggle").exists());
});
it("should not render weather toggle when mayHaveWeather is false", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
mayHaveWeather={false}
/>
</WrapWithProvider>
);
assert.isFalse(wrapper.find("#weather-toggle").exists());
});
it("should render timer toggle when mayHaveTimerWidget is true", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={true} />
</WrapWithProvider>
);
assert.ok(wrapper.find("#timer-toggle").exists());
});
it("should not render timer toggle when mayHaveTimerWidget is false", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
mayHaveTimerWidget={false}
/>
</WrapWithProvider>
);
assert.isFalse(wrapper.find("#timer-toggle").exists());
});
it("should render lists toggle when mayHaveListsWidget is true", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={true} />
</WrapWithProvider>
);
assert.ok(wrapper.find("#lists-toggle").exists());
});
it("should not render lists toggle when mayHaveListsWidget is false", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
mayHaveListsWidget={false}
/>
</WrapWithProvider>
);
assert.isFalse(wrapper.find("#lists-toggle").exists());
});
it("should reflect weatherEnabled in weather toggle pressed state", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
enabledSections={{ weatherEnabled: true }}
/>
</WrapWithProvider>
);
assert.isTrue(wrapper.find("#weather-toggle").prop("pressed"));
});
it("should reflect timerEnabled in timer toggle pressed state", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
enabledWidgets={{
...DEFAULT_PROPS.enabledWidgets,
timerEnabled: true,
}}
/>
</WrapWithProvider>
);
assert.isTrue(wrapper.find("#timer-toggle").prop("pressed"));
});
it("should reflect listsEnabled in lists toggle pressed state", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
enabledWidgets={{
...DEFAULT_PROPS.enabledWidgets,
listsEnabled: true,
}}
/>
</WrapWithProvider>
);
assert.isTrue(wrapper.find("#lists-toggle").prop("pressed"));
});
});
describe("dispatch on toggle", () => {
it("should dispatch PREF_CHANGED and WIDGETS_ENABLED when weather toggle is fired", () => {
const store = createStore(combineReducers(reducers), INITIAL_STATE);
const dispatchSpy = sandbox.spy(store, "dispatch");
wrapper = mount(
<Provider store={store}>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={true} />
</Provider>
);
wrapper.find("#weather-toggle").prop("ontoggle")({
target: {
dataset: { preference: "showWeather", eventSource: "WEATHER" },
pressed: true,
},
});
assert.calledWith(
dispatchSpy,
sinon.match({ type: "TELEMETRY_USER_EVENT" })
);
assert.calledWith(dispatchSpy, sinon.match({ type: "WIDGETS_ENABLED" }));
});
it("should call setPref when a toggle is fired", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={true} />
</WrapWithProvider>
);
wrapper.find("#weather-toggle").prop("ontoggle")({
target: {
dataset: { preference: "showWeather", eventSource: "WEATHER" },
pressed: true,
},
});
assert.calledOnce(DEFAULT_PROPS.setPref);
assert.calledWith(DEFAULT_PROPS.setPref, "showWeather", true);
});
it("should dispatch PREF_CHANGED and WIDGETS_ENABLED when lists toggle is fired", () => {
const store = createStore(combineReducers(reducers), INITIAL_STATE);
const dispatchSpy = sandbox.spy(store, "dispatch");
wrapper = mount(
<Provider store={store}>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={true} />
</Provider>
);
wrapper.find("#lists-toggle").prop("ontoggle")({
target: {
dataset: {
preference: "widgets.lists.enabled",
eventSource: "WIDGET_LISTS",
},
pressed: true,
},
});
assert.calledWith(
dispatchSpy,
sinon.match({ type: "TELEMETRY_USER_EVENT" })
);
assert.calledWith(dispatchSpy, sinon.match({ type: "WIDGETS_ENABLED" }));
});
it("should call setPref when lists toggle is fired", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={true} />
</WrapWithProvider>
);
wrapper.find("#lists-toggle").prop("ontoggle")({
target: {
dataset: {
preference: "widgets.lists.enabled",
eventSource: "WIDGET_LISTS",
},
pressed: true,
},
});
assert.calledOnce(DEFAULT_PROPS.setPref);
assert.calledWith(DEFAULT_PROPS.setPref, "widgets.lists.enabled", true);
});
it("should dispatch PREF_CHANGED and WIDGETS_ENABLED when timer toggle is fired", () => {
const store = createStore(combineReducers(reducers), INITIAL_STATE);
const dispatchSpy = sandbox.spy(store, "dispatch");
wrapper = mount(
<Provider store={store}>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={true} />
</Provider>
);
wrapper.find("#timer-toggle").prop("ontoggle")({
target: {
dataset: {
preference: "widgets.focusTimer.enabled",
eventSource: "WIDGET_TIMER",
},
pressed: true,
},
});
assert.calledWith(
dispatchSpy,
sinon.match({ type: "TELEMETRY_USER_EVENT" })
);
assert.calledWith(dispatchSpy, sinon.match({ type: "WIDGETS_ENABLED" }));
});
it("should call setPref when timer toggle is fired", () => {
wrapper = mount(
<WrapWithProvider>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={true} />
</WrapWithProvider>
);
wrapper.find("#timer-toggle").prop("ontoggle")({
target: {
dataset: {
preference: "widgets.focusTimer.enabled",
eventSource: "WIDGET_TIMER",
},
pressed: true,
},
});
assert.calledOnce(DEFAULT_PROPS.setPref);
assert.calledWith(
DEFAULT_PROPS.setPref,
"widgets.focusTimer.enabled",
true
);
});
it("should dispatch WIDGETS_ENABLED with enabled: false when toggled off", () => {
const store = createStore(combineReducers(reducers), INITIAL_STATE);
const dispatchSpy = sandbox.spy(store, "dispatch");
wrapper = mount(
<Provider store={store}>
<WidgetsManagementPanel {...DEFAULT_PROPS} showPanel={true} />
</Provider>
);
wrapper.find("#weather-toggle").prop("ontoggle")({
target: {
dataset: { preference: "showWeather", eventSource: "WEATHER" },
pressed: false,
},
});
assert.calledWith(
dispatchSpy,
sinon.match({
type: "WIDGETS_ENABLED",
data: sinon.match({ enabled: false }),
})
);
});
it("should dispatch WIDGETS_ENABLED with widget_size: 'mini' for weather when not detailed forecast", () => {
const store = createStore(combineReducers(reducers), INITIAL_STATE);
const dispatchSpy = sandbox.spy(store, "dispatch");
wrapper = mount(
<Provider store={store}>
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
mayHaveWeatherForecast={false}
/>
</Provider>
);
wrapper.find("#weather-toggle").prop("ontoggle")({
target: {
dataset: { preference: "showWeather", eventSource: "WEATHER" },
pressed: true,
},
});
assert.calledWith(
dispatchSpy,
sinon.match({
type: "WIDGETS_ENABLED",
data: sinon.match({ widget_size: "mini" }),
})
);
});
it("should dispatch WIDGETS_ENABLED with widget_size: 'small' for weather when detailed forecast and widgetsMayBeMaximized but not widgetsMaximized", () => {
const store = createStore(combineReducers(reducers), INITIAL_STATE);
const dispatchSpy = sandbox.spy(store, "dispatch");
wrapper = mount(
<Provider store={store}>
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
mayHaveWeatherForecast={true}
weatherDisplay="detailed"
enabledWidgets={{
...DEFAULT_PROPS.enabledWidgets,
widgetsMayBeMaximized: true,
widgetsMaximized: false,
}}
/>
</Provider>
);
wrapper.find("#weather-toggle").prop("ontoggle")({
target: {
dataset: { preference: "showWeather", eventSource: "WEATHER" },
pressed: true,
},
});
assert.calledWith(
dispatchSpy,
sinon.match({
type: "WIDGETS_ENABLED",
data: sinon.match({ widget_size: "small" }),
})
);
});
it("should dispatch WIDGETS_ENABLED with widget_size: 'medium' for weather when detailed forecast and widgetsMaximized", () => {
const store = createStore(combineReducers(reducers), INITIAL_STATE);
const dispatchSpy = sandbox.spy(store, "dispatch");
wrapper = mount(
<Provider store={store}>
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
mayHaveWeatherForecast={true}
weatherDisplay="detailed"
enabledWidgets={{
...DEFAULT_PROPS.enabledWidgets,
widgetsMayBeMaximized: true,
widgetsMaximized: true,
}}
/>
</Provider>
);
wrapper.find("#weather-toggle").prop("ontoggle")({
target: {
dataset: { preference: "showWeather", eventSource: "WEATHER" },
pressed: true,
},
});
assert.calledWith(
dispatchSpy,
sinon.match({
type: "WIDGETS_ENABLED",
data: sinon.match({ widget_size: "medium" }),
})
);
});
it("should dispatch WIDGETS_ENABLED with widget_size: 'small' for non-weather widget when widgetsMayBeMaximized and not widgetsMaximized", () => {
const store = createStore(combineReducers(reducers), INITIAL_STATE);
const dispatchSpy = sandbox.spy(store, "dispatch");
wrapper = mount(
<Provider store={store}>
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
enabledWidgets={{
...DEFAULT_PROPS.enabledWidgets,
widgetsMayBeMaximized: true,
widgetsMaximized: false,
}}
/>
</Provider>
);
wrapper.find("#timer-toggle").prop("ontoggle")({
target: {
dataset: {
preference: "widgets.focusTimer.enabled",
eventSource: "WIDGET_TIMER",
},
pressed: true,
},
});
assert.calledWith(
dispatchSpy,
sinon.match({
type: "WIDGETS_ENABLED",
data: sinon.match({ widget_size: "small" }),
})
);
});
it("should dispatch WIDGETS_ENABLED with widget_size: 'medium' for non-weather widget when widgetsMaximized", () => {
const store = createStore(combineReducers(reducers), INITIAL_STATE);
const dispatchSpy = sandbox.spy(store, "dispatch");
wrapper = mount(
<Provider store={store}>
<WidgetsManagementPanel
{...DEFAULT_PROPS}
showPanel={true}
enabledWidgets={{
...DEFAULT_PROPS.enabledWidgets,
widgetsMayBeMaximized: true,
widgetsMaximized: true,
}}
/>
</Provider>
);
wrapper.find("#timer-toggle").prop("ontoggle")({
target: {
dataset: {
preference: "widgets.focusTimer.enabled",
eventSource: "WIDGET_TIMER",
},
pressed: true,
},
});
assert.calledWith(
dispatchSpy,
sinon.match({
type: "WIDGETS_ENABLED",
data: sinon.match({ widget_size: "medium" }),
})
);
});
});
});