summaryrefslogtreecommitdiffstats
path: root/browser/components/newtab/test/unit/content-src
diff options
context:
space:
mode:
authorDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
committerDaniel Baumann <daniel.baumann@progress-linux.org>2024-04-19 00:47:55 +0000
commit26a029d407be480d791972afb5975cf62c9360a6 (patch)
treef435a8308119effd964b339f76abb83a57c29483 /browser/components/newtab/test/unit/content-src
parentInitial commit. (diff)
downloadfirefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz
firefox-26a029d407be480d791972afb5975cf62c9360a6.zip
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/components/newtab/test/unit/content-src')
-rw-r--r--browser/components/newtab/test/unit/content-src/components/Base.test.jsx130
-rw-r--r--browser/components/newtab/test/unit/content-src/components/Card.test.jsx510
-rw-r--r--browser/components/newtab/test/unit/content-src/components/CollapsibleSection.test.jsx67
-rw-r--r--browser/components/newtab/test/unit/content-src/components/ComponentPerfTimer.test.jsx447
-rw-r--r--browser/components/newtab/test/unit/content-src/components/ConfirmDialog.test.jsx182
-rw-r--r--browser/components/newtab/test/unit/content-src/components/ContextMenu.test.jsx227
-rw-r--r--browser/components/newtab/test/unit/content-src/components/CustomiseMenu.test.jsx72
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamAdmin.test.jsx267
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamBase.test.jsx313
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/CardGrid.test.jsx354
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/CollectionCardGrid.test.jsx138
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSCard.test.jsx582
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSContextFooter.test.jsx138
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSDismiss.test.jsx51
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSEmptyState.test.jsx73
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSImage.test.jsx146
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSLinkMenu.test.jsx151
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSMessage.test.jsx57
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSPrivacyModal.test.jsx50
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSSignup.test.jsx92
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSTextPromo.test.jsx96
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/Highlights.test.jsx41
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/HorizontalRule.test.jsx16
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/ImpressionStats.test.jsx276
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/Navigation.test.jsx131
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/PrivacyLink.test.jsx29
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/SafeAnchor.test.jsx56
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/SectionTitle.test.jsx22
-rw-r--r--browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/TopicsWidget.test.jsx238
-rw-r--r--browser/components/newtab/test/unit/content-src/components/ErrorBoundary.test.jsx110
-rw-r--r--browser/components/newtab/test/unit/content-src/components/FluentOrText.test.jsx68
-rw-r--r--browser/components/newtab/test/unit/content-src/components/LinkMenu.test.jsx667
-rw-r--r--browser/components/newtab/test/unit/content-src/components/MoreRecommendations.test.jsx24
-rw-r--r--browser/components/newtab/test/unit/content-src/components/PocketLoggedInCta.test.jsx46
-rw-r--r--browser/components/newtab/test/unit/content-src/components/Search.test.jsx179
-rw-r--r--browser/components/newtab/test/unit/content-src/components/Sections.test.jsx600
-rw-r--r--browser/components/newtab/test/unit/content-src/components/TopSites.test.jsx1930
-rw-r--r--browser/components/newtab/test/unit/content-src/components/TopSites/SearchShortcutsForm.test.jsx56
-rw-r--r--browser/components/newtab/test/unit/content-src/components/TopSites/TopSiteImpressionWrapper.test.jsx148
-rw-r--r--browser/components/newtab/test/unit/content-src/components/Topics.test.jsx22
-rw-r--r--browser/components/newtab/test/unit/content-src/lib/detect-user-session-start.test.js120
-rw-r--r--browser/components/newtab/test/unit/content-src/lib/init-store.test.js155
-rw-r--r--browser/components/newtab/test/unit/content-src/lib/perf-service.test.js89
-rw-r--r--browser/components/newtab/test/unit/content-src/lib/screenshot-utils.test.js147
-rw-r--r--browser/components/newtab/test/unit/content-src/lib/selectLayoutRender.test.js576
45 files changed, 9889 insertions, 0 deletions
diff --git a/browser/components/newtab/test/unit/content-src/components/Base.test.jsx b/browser/components/newtab/test/unit/content-src/components/Base.test.jsx
new file mode 100644
index 0000000000..c764348006
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/Base.test.jsx
@@ -0,0 +1,130 @@
+import {
+ _Base as Base,
+ BaseContent,
+ PrefsButton,
+} from "content-src/components/Base/Base";
+import { DiscoveryStreamAdmin } from "content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin";
+import { ErrorBoundary } from "content-src/components/ErrorBoundary/ErrorBoundary";
+import React from "react";
+import { Search } from "content-src/components/Search/Search";
+import { shallow } from "enzyme";
+import { actionCreators as ac } from "common/Actions.sys.mjs";
+
+describe("<Base>", () => {
+ let DEFAULT_PROPS = {
+ store: { getState: () => {} },
+ App: { initialized: true },
+ Prefs: { values: {} },
+ Sections: [],
+ DiscoveryStream: { config: { enabled: false } },
+ dispatch: () => {},
+ adminContent: {
+ message: {},
+ },
+ };
+
+ it("should render Base component", () => {
+ const wrapper = shallow(<Base {...DEFAULT_PROPS} />);
+ assert.ok(wrapper.exists());
+ });
+
+ it("should render the BaseContent component, passing through all props", () => {
+ const wrapper = shallow(<Base {...DEFAULT_PROPS} />);
+ const props = wrapper.find(BaseContent).props();
+ assert.deepEqual(
+ props,
+ DEFAULT_PROPS,
+ JSON.stringify([props, DEFAULT_PROPS], null, 3)
+ );
+ });
+
+ it("should render an ErrorBoundary with class base-content-fallback", () => {
+ const wrapper = shallow(<Base {...DEFAULT_PROPS} />);
+
+ assert.equal(
+ wrapper.find(ErrorBoundary).first().prop("className"),
+ "base-content-fallback"
+ );
+ });
+
+ it("should render an DiscoveryStreamAdmin if the devtools pref is true", () => {
+ const wrapper = shallow(
+ <Base
+ {...DEFAULT_PROPS}
+ Prefs={{ values: { "asrouter.devtoolsEnabled": true } }}
+ />
+ );
+ assert.lengthOf(wrapper.find(DiscoveryStreamAdmin), 1);
+ });
+
+ it("should not render an DiscoveryStreamAdmin if the devtools pref is false", () => {
+ const wrapper = shallow(
+ <Base
+ {...DEFAULT_PROPS}
+ Prefs={{ values: { "asrouter.devtoolsEnabled": false } }}
+ />
+ );
+ assert.lengthOf(wrapper.find(DiscoveryStreamAdmin), 0);
+ });
+});
+
+describe("<BaseContent>", () => {
+ let DEFAULT_PROPS = {
+ store: { getState: () => {} },
+ App: { initialized: true },
+ Prefs: { values: {} },
+ Sections: [],
+ DiscoveryStream: { config: { enabled: false } },
+ dispatch: () => {},
+ };
+
+ it("should render an ErrorBoundary with a Search child", () => {
+ const searchEnabledProps = Object.assign({}, DEFAULT_PROPS, {
+ Prefs: { values: { showSearch: true } },
+ });
+
+ const wrapper = shallow(<BaseContent {...searchEnabledProps} />);
+
+ assert.isTrue(wrapper.find(Search).parent().is(ErrorBoundary));
+ });
+
+ it("should dispatch a user event when the customize menu is opened or closed", () => {
+ const dispatch = sinon.stub();
+ const wrapper = shallow(
+ <BaseContent
+ {...DEFAULT_PROPS}
+ dispatch={dispatch}
+ App={{ customizeMenuVisible: true }}
+ />
+ );
+ wrapper.instance().openCustomizationMenu();
+ assert.calledWith(dispatch, { type: "SHOW_PERSONALIZE" });
+ assert.calledWith(dispatch, ac.UserEvent({ event: "SHOW_PERSONALIZE" }));
+ wrapper.instance().closeCustomizationMenu();
+ assert.calledWith(dispatch, { type: "HIDE_PERSONALIZE" });
+ assert.calledWith(dispatch, ac.UserEvent({ event: "HIDE_PERSONALIZE" }));
+ });
+
+ it("should render only search if no Sections are enabled", () => {
+ const onlySearchProps = Object.assign({}, DEFAULT_PROPS, {
+ Sections: [{ id: "highlights", enabled: false }],
+ Prefs: { values: { showSearch: true } },
+ });
+
+ const wrapper = shallow(<BaseContent {...onlySearchProps} />);
+ assert.lengthOf(wrapper.find(".only-search"), 1);
+ });
+});
+
+describe("<PrefsButton>", () => {
+ it("should render icon-settings if props.icon is empty", () => {
+ const wrapper = shallow(<PrefsButton icon="" />);
+
+ assert.isTrue(wrapper.find("button").hasClass("icon-settings"));
+ });
+ it("should render props.icon as a className", () => {
+ const wrapper = shallow(<PrefsButton icon="icon-happy" />);
+
+ assert.isTrue(wrapper.find("button").hasClass("icon-happy"));
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/Card.test.jsx b/browser/components/newtab/test/unit/content-src/components/Card.test.jsx
new file mode 100644
index 0000000000..5f07570b2e
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/Card.test.jsx
@@ -0,0 +1,510 @@
+import {
+ actionCreators as ac,
+ actionTypes as at,
+} from "common/Actions.sys.mjs";
+import {
+ _Card as Card,
+ PlaceholderCard,
+} from "content-src/components/Card/Card";
+import { combineReducers, createStore } from "redux";
+import { GlobalOverrider } from "test/unit/utils";
+import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs";
+import { cardContextTypes } from "content-src/components/Card/types";
+import { ContextMenuButton } from "content-src/components/ContextMenu/ContextMenuButton";
+import { LinkMenu } from "content-src/components/LinkMenu/LinkMenu";
+import { Provider } from "react-redux";
+import React from "react";
+import { shallow, mount } from "enzyme";
+
+let DEFAULT_PROPS = {
+ dispatch: sinon.stub(),
+ index: 0,
+ link: {
+ hostname: "foo",
+ title: "A title for foo",
+ url: "http://www.foo.com",
+ type: "history",
+ description: "A description for foo",
+ image: "http://www.foo.com/img.png",
+ guid: 1,
+ },
+ eventSource: "TOP_STORIES",
+ shouldSendImpressionStats: true,
+ contextMenuOptions: ["Separator"],
+};
+
+let DEFAULT_BLOB_IMAGE = {
+ path: "/testpath",
+ data: new Blob([0]),
+};
+
+function mountCardWithProps(props) {
+ const store = createStore(combineReducers(reducers), INITIAL_STATE);
+ return mount(
+ <Provider store={store}>
+ <Card {...props} />
+ </Provider>
+ );
+}
+
+describe("<Card>", () => {
+ let globals;
+ let wrapper;
+ beforeEach(() => {
+ globals = new GlobalOverrider();
+ wrapper = mountCardWithProps(DEFAULT_PROPS);
+ });
+ afterEach(() => {
+ DEFAULT_PROPS.dispatch.reset();
+ globals.restore();
+ });
+ it("should render a Card component", () => assert.ok(wrapper.exists()));
+ it("should add the right url", () => {
+ assert.propertyVal(
+ wrapper.find("a").props(),
+ "href",
+ DEFAULT_PROPS.link.url
+ );
+
+ // test that pocket cards get a special open_url href
+ const pocketLink = Object.assign({}, DEFAULT_PROPS.link, {
+ open_url: "getpocket.com/foo",
+ type: "pocket",
+ });
+ wrapper = mount(
+ <Card {...Object.assign({}, DEFAULT_PROPS, { link: pocketLink })} />
+ );
+ assert.propertyVal(wrapper.find("a").props(), "href", pocketLink.open_url);
+ });
+ it("should display a title", () =>
+ assert.equal(wrapper.find(".card-title").text(), DEFAULT_PROPS.link.title));
+ it("should display a description", () =>
+ assert.equal(
+ wrapper.find(".card-description").text(),
+ DEFAULT_PROPS.link.description
+ ));
+ it("should display a host name", () =>
+ assert.equal(wrapper.find(".card-host-name").text(), "foo"));
+ it("should have a link menu button", () =>
+ assert.ok(wrapper.find(".context-menu-button").exists()));
+ it("should render a link menu when button is clicked", () => {
+ const button = wrapper.find(".context-menu-button");
+ assert.equal(wrapper.find(LinkMenu).length, 0);
+ button.simulate("click", { preventDefault: () => {} });
+ assert.equal(wrapper.find(LinkMenu).length, 1);
+ });
+ it("should pass dispatch, source, onUpdate, site, options, and index to LinkMenu", () => {
+ wrapper
+ .find(".context-menu-button")
+ .simulate("click", { preventDefault: () => {} });
+ const { dispatch, source, onUpdate, site, options, index } = wrapper
+ .find(LinkMenu)
+ .props();
+ assert.equal(dispatch, DEFAULT_PROPS.dispatch);
+ assert.equal(source, DEFAULT_PROPS.eventSource);
+ assert.ok(onUpdate);
+ assert.equal(site, DEFAULT_PROPS.link);
+ assert.equal(options, DEFAULT_PROPS.contextMenuOptions);
+ assert.equal(index, DEFAULT_PROPS.index);
+ });
+ it("should pass through the correct menu options to LinkMenu if overridden by individual card", () => {
+ const link = Object.assign({}, DEFAULT_PROPS.link);
+ link.contextMenuOptions = ["CheckBookmark"];
+
+ wrapper = mountCardWithProps(Object.assign({}, DEFAULT_PROPS, { link }));
+ wrapper
+ .find(".context-menu-button")
+ .simulate("click", { preventDefault: () => {} });
+ const { options } = wrapper.find(LinkMenu).props();
+ assert.equal(options, link.contextMenuOptions);
+ });
+ it("should have a context based on type", () => {
+ wrapper = shallow(<Card {...DEFAULT_PROPS} />);
+ const context = wrapper.find(".card-context");
+ const { icon, fluentID } = cardContextTypes[DEFAULT_PROPS.link.type];
+ assert.isTrue(context.childAt(0).hasClass(`icon-${icon}`));
+ assert.isTrue(context.childAt(1).hasClass("card-context-label"));
+ assert.equal(context.childAt(1).prop("data-l10n-id"), fluentID);
+ });
+ it("should support setting custom context", () => {
+ const linkWithCustomContext = {
+ type: "history",
+ context: "Custom",
+ icon: "icon-url",
+ };
+
+ wrapper = shallow(
+ <Card
+ {...Object.assign({}, DEFAULT_PROPS, { link: linkWithCustomContext })}
+ />
+ );
+ const context = wrapper.find(".card-context");
+ const { icon } = cardContextTypes[DEFAULT_PROPS.link.type];
+ assert.isFalse(context.childAt(0).hasClass(`icon-${icon}`));
+ assert.equal(
+ context.childAt(0).props().style.backgroundImage,
+ "url('icon-url')"
+ );
+
+ assert.isTrue(context.childAt(1).hasClass("card-context-label"));
+ assert.equal(context.childAt(1).text(), linkWithCustomContext.context);
+ });
+ it("should parse args for fluent correctly", () => {
+ const title = '"fluent"';
+ const link = { ...DEFAULT_PROPS.link, title };
+
+ wrapper = mountCardWithProps({ ...DEFAULT_PROPS, link });
+ let button = wrapper.find(ContextMenuButton).find("button");
+
+ assert.equal(button.prop("data-l10n-args"), JSON.stringify({ title }));
+ });
+ it("should have .active class, on card-outer if context menu is open", () => {
+ const button = wrapper.find(ContextMenuButton);
+ assert.isFalse(
+ wrapper.find(".card-outer").hasClass("active"),
+ "does not have active class"
+ );
+ button.simulate("click", { preventDefault: () => {} });
+ assert.isTrue(
+ wrapper.find(".card-outer").hasClass("active"),
+ "has active class"
+ );
+ });
+ it("should send OPEN_DOWNLOAD_FILE if we clicked on a download", () => {
+ const downloadLink = {
+ type: "download",
+ url: "download.mov",
+ };
+ wrapper = mountCardWithProps(
+ Object.assign({}, DEFAULT_PROPS, { link: downloadLink })
+ );
+ const card = wrapper.find(".card");
+ card.simulate("click", { preventDefault: () => {} });
+ assert.calledThrice(DEFAULT_PROPS.dispatch);
+
+ assert.equal(
+ DEFAULT_PROPS.dispatch.firstCall.args[0].type,
+ at.OPEN_DOWNLOAD_FILE
+ );
+ assert.deepEqual(
+ DEFAULT_PROPS.dispatch.firstCall.args[0].data,
+ downloadLink
+ );
+ });
+ it("should send OPEN_LINK if we clicked on anything other than a download", () => {
+ const nonDownloadLink = {
+ type: "history",
+ url: "download.mov",
+ };
+ wrapper = mountCardWithProps(
+ Object.assign({}, DEFAULT_PROPS, { link: nonDownloadLink })
+ );
+ const card = wrapper.find(".card");
+ const event = {
+ altKey: "1",
+ button: "2",
+ ctrlKey: "3",
+ metaKey: "4",
+ shiftKey: "5",
+ };
+ card.simulate(
+ "click",
+ Object.assign({}, event, { preventDefault: () => {} })
+ );
+ assert.calledThrice(DEFAULT_PROPS.dispatch);
+
+ assert.equal(DEFAULT_PROPS.dispatch.firstCall.args[0].type, at.OPEN_LINK);
+ });
+ describe("card image display", () => {
+ const DEFAULT_BLOB_URL = "blob://test";
+ let url;
+ beforeEach(() => {
+ url = {
+ createObjectURL: globals.sandbox.stub().returns(DEFAULT_BLOB_URL),
+ revokeObjectURL: globals.sandbox.spy(),
+ };
+ globals.set("URL", url);
+ });
+ afterEach(() => {
+ globals.restore();
+ });
+ it("should display a regular image correctly and not call revokeObjectURL when unmounted", () => {
+ wrapper = shallow(<Card {...DEFAULT_PROPS} />);
+
+ assert.isUndefined(wrapper.state("cardImage").path);
+ assert.equal(wrapper.state("cardImage").url, DEFAULT_PROPS.link.image);
+ assert.equal(
+ wrapper.find(".card-preview-image").props().style.backgroundImage,
+ `url(${wrapper.state("cardImage").url})`
+ );
+
+ wrapper.unmount();
+ assert.notCalled(url.revokeObjectURL);
+ });
+ it("should display a blob image correctly and revoke blob url when unmounted", () => {
+ const link = Object.assign({}, DEFAULT_PROPS.link, {
+ image: DEFAULT_BLOB_IMAGE,
+ });
+ wrapper = shallow(<Card {...DEFAULT_PROPS} link={link} />);
+
+ assert.equal(wrapper.state("cardImage").path, DEFAULT_BLOB_IMAGE.path);
+ assert.equal(wrapper.state("cardImage").url, DEFAULT_BLOB_URL);
+ assert.equal(
+ wrapper.find(".card-preview-image").props().style.backgroundImage,
+ `url(${wrapper.state("cardImage").url})`
+ );
+
+ wrapper.unmount();
+ assert.calledOnce(url.revokeObjectURL);
+ });
+ it("should not show an image if there isn't one and not call revokeObjectURL when unmounted", () => {
+ const link = Object.assign({}, DEFAULT_PROPS.link);
+ delete link.image;
+
+ wrapper = shallow(<Card {...DEFAULT_PROPS} link={link} />);
+
+ assert.isNull(wrapper.state("cardImage"));
+ assert.lengthOf(wrapper.find(".card-preview-image"), 0);
+
+ wrapper.unmount();
+ assert.notCalled(url.revokeObjectURL);
+ });
+ it("should remove current card image if new image is not present", () => {
+ wrapper = shallow(<Card {...DEFAULT_PROPS} />);
+
+ const otherLink = Object.assign({}, DEFAULT_PROPS.link);
+ delete otherLink.image;
+ wrapper.setProps(Object.assign({}, DEFAULT_PROPS, { link: otherLink }));
+
+ assert.isNull(wrapper.state("cardImage"));
+ });
+ it("should not create or revoke urls if normal image is already in state", () => {
+ wrapper = shallow(<Card {...DEFAULT_PROPS} />);
+
+ wrapper.setProps(DEFAULT_PROPS);
+
+ assert.notCalled(url.createObjectURL);
+ assert.notCalled(url.revokeObjectURL);
+ });
+ it("should not create or revoke more urls if blob image is already in state", () => {
+ const link = Object.assign({}, DEFAULT_PROPS.link, {
+ image: DEFAULT_BLOB_IMAGE,
+ });
+ wrapper = shallow(<Card {...DEFAULT_PROPS} link={link} />);
+
+ assert.calledOnce(url.createObjectURL);
+ assert.notCalled(url.revokeObjectURL);
+
+ wrapper.setProps(Object.assign({}, DEFAULT_PROPS, { link }));
+
+ assert.calledOnce(url.createObjectURL);
+ assert.notCalled(url.revokeObjectURL);
+ });
+ it("should create blob urls for new blobs and revoke existing ones", () => {
+ const link = Object.assign({}, DEFAULT_PROPS.link, {
+ image: DEFAULT_BLOB_IMAGE,
+ });
+ wrapper = shallow(<Card {...DEFAULT_PROPS} link={link} />);
+
+ assert.calledOnce(url.createObjectURL);
+ assert.notCalled(url.revokeObjectURL);
+
+ const otherLink = Object.assign({}, DEFAULT_PROPS.link, {
+ image: { path: "/newpath", data: new Blob([0]) },
+ });
+ wrapper.setProps(Object.assign({}, DEFAULT_PROPS, { link: otherLink }));
+
+ assert.calledTwice(url.createObjectURL);
+ assert.calledOnce(url.revokeObjectURL);
+ });
+ it("should not call createObjectURL and revokeObjectURL for normal images", () => {
+ wrapper = shallow(<Card {...DEFAULT_PROPS} />);
+
+ assert.notCalled(url.createObjectURL);
+ assert.notCalled(url.revokeObjectURL);
+
+ const otherLink = Object.assign({}, DEFAULT_PROPS.link, {
+ image: "https://other/image",
+ });
+ wrapper.setProps(Object.assign({}, DEFAULT_PROPS, { link: otherLink }));
+
+ assert.notCalled(url.createObjectURL);
+ assert.notCalled(url.revokeObjectURL);
+ });
+ });
+ describe("image loading", () => {
+ let link;
+ let triggerImage = {};
+ let uniqueLink = 0;
+ beforeEach(() => {
+ global.Image.prototype = {
+ addEventListener(event, callback) {
+ triggerImage[event] = () => Promise.resolve(callback());
+ },
+ };
+
+ link = Object.assign({}, DEFAULT_PROPS.link);
+ link.image += uniqueLink++;
+ wrapper = shallow(<Card {...DEFAULT_PROPS} link={link} />);
+ });
+ it("should have a loaded preview image when the image is loaded", () => {
+ assert.isFalse(wrapper.find(".card-preview-image").hasClass("loaded"));
+
+ wrapper.setState({ imageLoaded: true });
+
+ assert.isTrue(wrapper.find(".card-preview-image").hasClass("loaded"));
+ });
+ it("should start not loaded", () => {
+ assert.isFalse(wrapper.state("imageLoaded"));
+ });
+ it("should be loaded after load", async () => {
+ await triggerImage.load();
+
+ assert.isTrue(wrapper.state("imageLoaded"));
+ });
+ it("should be not be loaded after error ", async () => {
+ await triggerImage.error();
+
+ assert.isFalse(wrapper.state("imageLoaded"));
+ });
+ it("should be not be loaded if image changes", async () => {
+ await triggerImage.load();
+ const otherLink = Object.assign({}, link, {
+ image: "https://other/image",
+ });
+
+ wrapper.setProps(Object.assign({}, DEFAULT_PROPS, { link: otherLink }));
+
+ assert.isFalse(wrapper.state("imageLoaded"));
+ });
+ });
+ describe("placeholder=true", () => {
+ beforeEach(() => {
+ wrapper = mount(<Card placeholder={true} />);
+ });
+ it("should render when placeholder=true", () => {
+ assert.ok(wrapper.exists());
+ });
+ it("should add a placeholder class to the outer element", () => {
+ assert.isTrue(wrapper.find(".card-outer").hasClass("placeholder"));
+ });
+ it("should not have a context menu button or LinkMenu", () => {
+ assert.isFalse(
+ wrapper.find(ContextMenuButton).exists(),
+ "context menu button"
+ );
+ assert.isFalse(wrapper.find(LinkMenu).exists(), "LinkMenu");
+ });
+ it("should not call onLinkClick when the link is clicked", () => {
+ const spy = sinon.spy(wrapper.instance(), "onLinkClick");
+ const card = wrapper.find(".card");
+ card.simulate("click");
+ assert.notCalled(spy);
+ });
+ });
+ describe("#trackClick", () => {
+ it("should call dispatch when the link is clicked with the right data", () => {
+ const card = wrapper.find(".card");
+ const event = {
+ altKey: "1",
+ button: "2",
+ ctrlKey: "3",
+ metaKey: "4",
+ shiftKey: "5",
+ };
+ card.simulate(
+ "click",
+ Object.assign({}, event, { preventDefault: () => {} })
+ );
+ assert.calledThrice(DEFAULT_PROPS.dispatch);
+
+ // first dispatch call is the AlsoToMain message which will open a link in a window, and send some event data
+ assert.equal(DEFAULT_PROPS.dispatch.firstCall.args[0].type, at.OPEN_LINK);
+ assert.deepEqual(
+ DEFAULT_PROPS.dispatch.firstCall.args[0].data.event,
+ event
+ );
+
+ // second dispatch call is a UserEvent action for telemetry
+ assert.isUserEventAction(DEFAULT_PROPS.dispatch.secondCall.args[0]);
+ assert.calledWith(
+ DEFAULT_PROPS.dispatch.secondCall,
+ ac.UserEvent({
+ event: "CLICK",
+ source: DEFAULT_PROPS.eventSource,
+ action_position: DEFAULT_PROPS.index,
+ })
+ );
+
+ // third dispatch call is to send impression stats
+ assert.calledWith(
+ DEFAULT_PROPS.dispatch.thirdCall,
+ ac.ImpressionStats({
+ source: DEFAULT_PROPS.eventSource,
+ click: 0,
+ tiles: [{ id: DEFAULT_PROPS.link.guid, pos: DEFAULT_PROPS.index }],
+ })
+ );
+ });
+ it("should provide card_type to telemetry info if type is not history", () => {
+ const link = Object.assign({}, DEFAULT_PROPS.link);
+ link.type = "bookmark";
+ wrapper = mount(<Card {...Object.assign({}, DEFAULT_PROPS, { link })} />);
+ const card = wrapper.find(".card");
+ const event = {
+ altKey: "1",
+ button: "2",
+ ctrlKey: "3",
+ metaKey: "4",
+ shiftKey: "5",
+ };
+
+ card.simulate(
+ "click",
+ Object.assign({}, event, { preventDefault: () => {} })
+ );
+
+ assert.isUserEventAction(DEFAULT_PROPS.dispatch.secondCall.args[0]);
+ assert.calledWith(
+ DEFAULT_PROPS.dispatch.secondCall,
+ ac.UserEvent({
+ event: "CLICK",
+ source: DEFAULT_PROPS.eventSource,
+ action_position: DEFAULT_PROPS.index,
+ value: { card_type: link.type },
+ })
+ );
+ });
+ it("should notify Web Extensions with WEBEXT_CLICK if props.isWebExtension is true", () => {
+ wrapper = mountCardWithProps(
+ Object.assign({}, DEFAULT_PROPS, {
+ isWebExtension: true,
+ eventSource: "MyExtension",
+ index: 3,
+ })
+ );
+ const card = wrapper.find(".card");
+ const event = { preventDefault() {} };
+ card.simulate("click", event);
+ assert.calledWith(
+ DEFAULT_PROPS.dispatch,
+ ac.WebExtEvent(at.WEBEXT_CLICK, {
+ source: "MyExtension",
+ url: DEFAULT_PROPS.link.url,
+ action_position: 3,
+ })
+ );
+ });
+ });
+});
+
+describe("<PlaceholderCard />", () => {
+ it("should render a Card with placeholder=true", () => {
+ const wrapper = mount(
+ <Provider store={createStore(combineReducers(reducers), INITIAL_STATE)}>
+ <PlaceholderCard />
+ </Provider>
+ );
+ assert.isTrue(wrapper.find(Card).props().placeholder);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/CollapsibleSection.test.jsx b/browser/components/newtab/test/unit/content-src/components/CollapsibleSection.test.jsx
new file mode 100644
index 0000000000..f2a8e276b4
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/CollapsibleSection.test.jsx
@@ -0,0 +1,67 @@
+import { _CollapsibleSection as CollapsibleSection } from "content-src/components/CollapsibleSection/CollapsibleSection";
+import { ErrorBoundary } from "content-src/components/ErrorBoundary/ErrorBoundary";
+import { mount } from "enzyme";
+import React from "react";
+
+const DEFAULT_PROPS = {
+ id: "cool",
+ className: "cool-section",
+ title: "Cool Section",
+ prefName: "collapseSection",
+ collapsed: false,
+ eventSource: "foo",
+ document: {
+ addEventListener: () => {},
+ removeEventListener: () => {},
+ visibilityState: "visible",
+ },
+ dispatch: () => {},
+ Prefs: { values: { featureConfig: {} } },
+};
+
+describe("CollapsibleSection", () => {
+ let wrapper;
+
+ function setup(props = {}) {
+ const customProps = Object.assign({}, DEFAULT_PROPS, props);
+ wrapper = mount(
+ <CollapsibleSection {...customProps}>foo</CollapsibleSection>
+ );
+ }
+
+ beforeEach(() => setup());
+
+ it("should render the component", () => {
+ assert.ok(wrapper.exists());
+ });
+
+ it("should render an ErrorBoundary with class section-body-fallback", () => {
+ assert.equal(
+ wrapper.find(ErrorBoundary).first().prop("className"),
+ "section-body-fallback"
+ );
+ });
+
+ describe("without collapsible pref", () => {
+ let dispatch;
+ beforeEach(() => {
+ dispatch = sinon.stub();
+ setup({ collapsed: undefined, dispatch });
+ });
+ it("should render the section uncollapsed", () => {
+ assert.isFalse(
+ wrapper.find(".collapsible-section").first().hasClass("collapsed")
+ );
+ });
+
+ it("should not render the arrow if no collapsible pref exists for the section", () => {
+ assert.lengthOf(wrapper.find(".click-target .collapsible-arrow"), 0);
+ });
+ });
+
+ describe("icon", () => {
+ it("no icon should be shown", () => {
+ assert.lengthOf(wrapper.find(".icon"), 0);
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/ComponentPerfTimer.test.jsx b/browser/components/newtab/test/unit/content-src/components/ComponentPerfTimer.test.jsx
new file mode 100644
index 0000000000..baf203947e
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/ComponentPerfTimer.test.jsx
@@ -0,0 +1,447 @@
+import {
+ actionCreators as ac,
+ actionTypes as at,
+} from "common/Actions.sys.mjs";
+import { ComponentPerfTimer } from "content-src/components/ComponentPerfTimer/ComponentPerfTimer";
+import createMockRaf from "mock-raf";
+import React from "react";
+
+import { shallow } from "enzyme";
+
+const perfSvc = {
+ mark() {},
+ getMostRecentAbsMarkStartByName() {},
+};
+
+let DEFAULT_PROPS = {
+ initialized: true,
+ rows: [],
+ id: "highlights",
+ dispatch() {},
+ perfSvc,
+};
+
+describe("<ComponentPerfTimer>", () => {
+ let mockRaf;
+ let sandbox;
+ let wrapper;
+
+ const InnerEl = () => <div>Inner Element</div>;
+
+ beforeEach(() => {
+ mockRaf = createMockRaf();
+ sandbox = sinon.createSandbox();
+ sandbox.stub(window, "requestAnimationFrame").callsFake(mockRaf.raf);
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+ });
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should render props.children", () => {
+ assert.ok(wrapper.contains(<InnerEl />));
+ });
+
+ describe("#constructor", () => {
+ beforeEach(() => {
+ sandbox.stub(ComponentPerfTimer.prototype, "_maybeSendBadStateEvent");
+ sandbox.stub(
+ ComponentPerfTimer.prototype,
+ "_ensureFirstRenderTsRecorded"
+ );
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>,
+ { disableLifecycleMethods: true }
+ );
+ });
+
+ it("should have the correct defaults", () => {
+ const instance = wrapper.instance();
+
+ assert.isFalse(instance._reportMissingData);
+ assert.isFalse(instance._timestampHandled);
+ assert.isFalse(instance._recordedFirstRender);
+ });
+ });
+
+ describe("#render", () => {
+ beforeEach(() => {
+ sandbox.stub(DEFAULT_PROPS, "id").value("fake_section");
+ sandbox.stub(ComponentPerfTimer.prototype, "_maybeSendBadStateEvent");
+ sandbox.stub(
+ ComponentPerfTimer.prototype,
+ "_ensureFirstRenderTsRecorded"
+ );
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+ });
+
+ it("should not call telemetry on sections that we don't want to record", () => {
+ const instance = wrapper.instance();
+
+ assert.notCalled(instance._maybeSendBadStateEvent);
+ assert.notCalled(instance._ensureFirstRenderTsRecorded);
+ });
+ });
+
+ describe("#_componentDidMount", () => {
+ it("should call _maybeSendPaintedEvent", () => {
+ const instance = wrapper.instance();
+ const stub = sandbox.stub(instance, "_maybeSendPaintedEvent");
+
+ instance.componentDidMount();
+
+ assert.calledOnce(stub);
+ });
+
+ it("should not call _maybeSendPaintedEvent if id not in RECORDED_SECTIONS", () => {
+ sandbox.stub(DEFAULT_PROPS, "id").value("topstories");
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+ const instance = wrapper.instance();
+ const stub = sandbox.stub(instance, "_maybeSendPaintedEvent");
+
+ instance.componentDidMount();
+
+ assert.notCalled(stub);
+ });
+ });
+
+ describe("#_componentDidUpdate", () => {
+ it("should call _maybeSendPaintedEvent", () => {
+ const instance = wrapper.instance();
+ const maybeSendPaintStub = sandbox.stub(
+ instance,
+ "_maybeSendPaintedEvent"
+ );
+
+ instance.componentDidUpdate();
+
+ assert.calledOnce(maybeSendPaintStub);
+ });
+
+ it("should not call _maybeSendPaintedEvent if id not in RECORDED_SECTIONS", () => {
+ sandbox.stub(DEFAULT_PROPS, "id").value("topstories");
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+ const instance = wrapper.instance();
+ const stub = sandbox.stub(instance, "_maybeSendPaintedEvent");
+
+ instance.componentDidUpdate();
+
+ assert.notCalled(stub);
+ });
+ });
+
+ describe("_ensureFirstRenderTsRecorded", () => {
+ let recordFirstRenderStub;
+ beforeEach(() => {
+ sandbox.stub(ComponentPerfTimer.prototype, "_maybeSendBadStateEvent");
+ recordFirstRenderStub = sandbox.stub(
+ ComponentPerfTimer.prototype,
+ "_ensureFirstRenderTsRecorded"
+ );
+ });
+
+ it("should set _recordedFirstRender", () => {
+ sandbox.stub(DEFAULT_PROPS, "initialized").value(false);
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+ const instance = wrapper.instance();
+
+ assert.isFalse(instance._recordedFirstRender);
+
+ recordFirstRenderStub.callThrough();
+ instance._ensureFirstRenderTsRecorded();
+
+ assert.isTrue(instance._recordedFirstRender);
+ });
+
+ it("should mark first_render_ts", () => {
+ sandbox.stub(DEFAULT_PROPS, "initialized").value(false);
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+ const instance = wrapper.instance();
+ const stub = sandbox.stub(perfSvc, "mark");
+
+ recordFirstRenderStub.callThrough();
+ instance._ensureFirstRenderTsRecorded();
+
+ assert.calledOnce(stub);
+ assert.calledWithExactly(stub, `${DEFAULT_PROPS.id}_first_render_ts`);
+ });
+ });
+
+ describe("#_maybeSendBadStateEvent", () => {
+ let sendBadStateStub;
+ beforeEach(() => {
+ sendBadStateStub = sandbox.stub(
+ ComponentPerfTimer.prototype,
+ "_maybeSendBadStateEvent"
+ );
+ sandbox.stub(
+ ComponentPerfTimer.prototype,
+ "_ensureFirstRenderTsRecorded"
+ );
+ });
+
+ it("should set this._reportMissingData=true when called with initialized === false", () => {
+ sandbox.stub(DEFAULT_PROPS, "initialized").value(false);
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+ const instance = wrapper.instance();
+
+ assert.isFalse(instance._reportMissingData);
+
+ sendBadStateStub.callThrough();
+ instance._maybeSendBadStateEvent();
+
+ assert.isTrue(instance._reportMissingData);
+ });
+
+ it("should call _sendBadStateEvent if initialized & other metrics have been recorded", () => {
+ const instance = wrapper.instance();
+ const stub = sandbox.stub(instance, "_sendBadStateEvent");
+ instance._reportMissingData = true;
+ instance._timestampHandled = true;
+ instance._recordedFirstRender = true;
+
+ sendBadStateStub.callThrough();
+ instance._maybeSendBadStateEvent();
+
+ assert.calledOnce(stub);
+ assert.isFalse(instance._reportMissingData);
+ });
+ });
+
+ describe("#_maybeSendPaintedEvent", () => {
+ it("should call _sendPaintedEvent if props.initialized is true", () => {
+ sandbox.stub(DEFAULT_PROPS, "initialized").value(true);
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>,
+ { disableLifecycleMethods: true }
+ );
+ const instance = wrapper.instance();
+ const stub = sandbox.stub(instance, "_afterFramePaint");
+
+ assert.isFalse(instance._timestampHandled);
+
+ instance._maybeSendPaintedEvent();
+
+ assert.calledOnce(stub);
+ assert.calledWithExactly(stub, instance._sendPaintedEvent);
+ assert.isTrue(wrapper.instance()._timestampHandled);
+ });
+ it("should not call _sendPaintedEvent if this._timestampHandled is true", () => {
+ const instance = wrapper.instance();
+ const spy = sinon.spy(instance, "_afterFramePaint");
+ instance._timestampHandled = true;
+
+ instance._maybeSendPaintedEvent();
+ spy.neverCalledWith(instance._sendPaintedEvent);
+ });
+ it("should not call _sendPaintedEvent if component not initialized", () => {
+ sandbox.stub(DEFAULT_PROPS, "initialized").value(false);
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+ const instance = wrapper.instance();
+ const spy = sinon.spy(instance, "_afterFramePaint");
+
+ instance._maybeSendPaintedEvent();
+
+ spy.neverCalledWith(instance._sendPaintedEvent);
+ });
+ });
+
+ describe("#_afterFramePaint", () => {
+ it("should call callback after the requestAnimationFrame callback returns", () =>
+ new Promise(resolve => {
+ // Setting the callback to resolve is the test that it does finally get
+ // called at the correct time, after the event loop ticks again.
+ // If it doesn't get called, this test will time out.
+ const callback = sandbox.spy(resolve);
+
+ const instance = wrapper.instance();
+
+ instance._afterFramePaint(callback);
+
+ assert.notCalled(callback);
+ mockRaf.step({ count: 1 });
+ }));
+ });
+
+ describe("#_sendBadStateEvent", () => {
+ it("should call perfSvc.mark", () => {
+ sandbox.spy(perfSvc, "mark");
+ const key = `${DEFAULT_PROPS.id}_data_ready_ts`;
+
+ wrapper.instance()._sendBadStateEvent();
+
+ assert.calledOnce(perfSvc.mark);
+ assert.calledWithExactly(perfSvc.mark, key);
+ });
+
+ it("should call compute the delta from first render to data ready", () => {
+ sandbox.stub(perfSvc, "getMostRecentAbsMarkStartByName");
+
+ wrapper
+ .instance()
+ ._sendBadStateEvent(`${DEFAULT_PROPS.id}_data_ready_ts`);
+
+ assert.calledTwice(perfSvc.getMostRecentAbsMarkStartByName);
+ assert.calledWithExactly(
+ perfSvc.getMostRecentAbsMarkStartByName,
+ `${DEFAULT_PROPS.id}_data_ready_ts`
+ );
+ assert.calledWithExactly(
+ perfSvc.getMostRecentAbsMarkStartByName,
+ `${DEFAULT_PROPS.id}_first_render_ts`
+ );
+ });
+
+ it("should call dispatch SAVE_SESSION_PERF_DATA", () => {
+ sandbox
+ .stub(perfSvc, "getMostRecentAbsMarkStartByName")
+ .withArgs("highlights_first_render_ts")
+ .returns(0.5)
+ .withArgs("highlights_data_ready_ts")
+ .returns(3.2);
+
+ const dispatch = sandbox.spy(DEFAULT_PROPS, "dispatch");
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+
+ wrapper.instance()._sendBadStateEvent();
+
+ assert.calledOnce(dispatch);
+ assert.calledWithExactly(
+ dispatch,
+ ac.OnlyToMain({
+ type: at.SAVE_SESSION_PERF_DATA,
+ data: { [`${DEFAULT_PROPS.id}_data_late_by_ms`]: 2 },
+ })
+ );
+ });
+ });
+
+ describe("#_sendPaintedEvent", () => {
+ beforeEach(() => {
+ sandbox.stub(ComponentPerfTimer.prototype, "_maybeSendBadStateEvent");
+ sandbox.stub(
+ ComponentPerfTimer.prototype,
+ "_ensureFirstRenderTsRecorded"
+ );
+ });
+
+ it("should not call mark with the wrong id", () => {
+ sandbox.stub(perfSvc, "mark");
+ sandbox.stub(DEFAULT_PROPS, "id").value("fake_id");
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+
+ wrapper.instance()._sendPaintedEvent();
+
+ assert.notCalled(perfSvc.mark);
+ });
+ it("should call mark with the correct topsites", () => {
+ sandbox.stub(perfSvc, "mark");
+ sandbox.stub(DEFAULT_PROPS, "id").value("topsites");
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+
+ wrapper.instance()._sendPaintedEvent();
+
+ assert.calledOnce(perfSvc.mark);
+ assert.calledWithExactly(perfSvc.mark, "topsites_first_painted_ts");
+ });
+ it("should not call getMostRecentAbsMarkStartByName if id!=topsites", () => {
+ sandbox.stub(perfSvc, "getMostRecentAbsMarkStartByName");
+ sandbox.stub(DEFAULT_PROPS, "id").value("fake_id");
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+
+ wrapper.instance()._sendPaintedEvent();
+
+ assert.notCalled(perfSvc.getMostRecentAbsMarkStartByName);
+ });
+ it("should call getMostRecentAbsMarkStartByName for topsites", () => {
+ sandbox.stub(perfSvc, "getMostRecentAbsMarkStartByName");
+ sandbox.stub(DEFAULT_PROPS, "id").value("topsites");
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+
+ wrapper.instance()._sendPaintedEvent();
+
+ assert.calledOnce(perfSvc.getMostRecentAbsMarkStartByName);
+ assert.calledWithExactly(
+ perfSvc.getMostRecentAbsMarkStartByName,
+ "topsites_first_painted_ts"
+ );
+ });
+ it("should dispatch SAVE_SESSION_PERF_DATA", () => {
+ sandbox.stub(perfSvc, "getMostRecentAbsMarkStartByName").returns(42);
+ sandbox.stub(DEFAULT_PROPS, "id").value("topsites");
+ const dispatch = sandbox.spy(DEFAULT_PROPS, "dispatch");
+ wrapper = shallow(
+ <ComponentPerfTimer {...DEFAULT_PROPS}>
+ <InnerEl />
+ </ComponentPerfTimer>
+ );
+
+ wrapper.instance()._sendPaintedEvent();
+
+ assert.calledOnce(dispatch);
+ assert.calledWithExactly(
+ dispatch,
+ ac.OnlyToMain({
+ type: at.SAVE_SESSION_PERF_DATA,
+ data: { topsites_first_painted_ts: 42 },
+ })
+ );
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/ConfirmDialog.test.jsx b/browser/components/newtab/test/unit/content-src/components/ConfirmDialog.test.jsx
new file mode 100644
index 0000000000..a471c09e66
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/ConfirmDialog.test.jsx
@@ -0,0 +1,182 @@
+import {
+ actionCreators as ac,
+ actionTypes as at,
+} from "common/Actions.sys.mjs";
+import { _ConfirmDialog as ConfirmDialog } from "content-src/components/ConfirmDialog/ConfirmDialog";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<ConfirmDialog>", () => {
+ let wrapper;
+ let dispatch;
+ let ConfirmDialogProps;
+ beforeEach(() => {
+ dispatch = sinon.stub();
+ ConfirmDialogProps = {
+ visible: true,
+ data: {
+ onConfirm: [],
+ cancel_button_string_id: "newtab-topsites-delete-history-button",
+ confirm_button_string_id: "newtab-topsites-cancel-button",
+ eventSource: "HIGHLIGHTS",
+ },
+ };
+ wrapper = shallow(
+ <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} />
+ );
+ });
+ it("should render an overlay", () => {
+ assert.ok(wrapper.find(".modal-overlay").exists());
+ });
+ it("should render a modal", () => {
+ assert.ok(wrapper.find(".confirmation-dialog").exists());
+ });
+ it("should not render if visible is false", () => {
+ ConfirmDialogProps.visible = false;
+ wrapper = shallow(
+ <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} />
+ );
+
+ assert.lengthOf(wrapper.find(".confirmation-dialog"), 0);
+ });
+ it("should display an icon if we provide one in props", () => {
+ const iconName = "modal-icon";
+ // If there is no icon in the props, we shouldn't display an icon
+ assert.lengthOf(wrapper.find(`.icon-${iconName}`), 0);
+
+ ConfirmDialogProps.data.icon = iconName;
+ wrapper = shallow(
+ <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} />
+ );
+
+ // But if we do provide an icon - we should show it
+ assert.lengthOf(wrapper.find(`.icon-${iconName}`), 1);
+ });
+ describe("fluent message check", () => {
+ it("should render the message body sent via props", () => {
+ Object.assign(ConfirmDialogProps.data, {
+ body_string_id: ["foo", "bar"],
+ });
+ wrapper = shallow(
+ <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} />
+ );
+ let msgs = wrapper.find(".modal-message").find("p");
+ assert.equal(msgs.length, ConfirmDialogProps.data.body_string_id.length);
+ msgs.forEach((fm, i) =>
+ assert.equal(
+ fm.prop("data-l10n-id"),
+ ConfirmDialogProps.data.body_string_id[i]
+ )
+ );
+ });
+ it("should render the correct primary button text", () => {
+ Object.assign(ConfirmDialogProps.data, {
+ confirm_button_string_id: "primary_foo",
+ });
+ wrapper = shallow(
+ <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} />
+ );
+
+ let doneLabel = wrapper.find(".actions").childAt(1);
+ assert.ok(doneLabel.exists());
+ assert.equal(
+ doneLabel.prop("data-l10n-id"),
+ ConfirmDialogProps.data.confirm_button_string_id
+ );
+ });
+ });
+ describe("click events", () => {
+ it("should emit AlsoToMain DIALOG_CANCEL when you click the overlay", () => {
+ let overlay = wrapper.find(".modal-overlay");
+
+ assert.ok(overlay.exists());
+ overlay.simulate("click");
+
+ // Two events are emitted: UserEvent+AlsoToMain.
+ assert.calledTwice(dispatch);
+ assert.propertyVal(dispatch.firstCall.args[0], "type", at.DIALOG_CANCEL);
+ assert.calledWith(dispatch, { type: at.DIALOG_CANCEL });
+ });
+ it("should emit UserEvent DIALOG_CANCEL when you click the overlay", () => {
+ let overlay = wrapper.find(".modal-overlay");
+
+ assert.ok(overlay);
+ overlay.simulate("click");
+
+ // Two events are emitted: UserEvent+AlsoToMain.
+ assert.calledTwice(dispatch);
+ assert.isUserEventAction(dispatch.secondCall.args[0]);
+ assert.calledWith(
+ dispatch,
+ ac.UserEvent({ event: at.DIALOG_CANCEL, source: "HIGHLIGHTS" })
+ );
+ });
+ it("should emit AlsoToMain DIALOG_CANCEL on cancel", () => {
+ let cancelButton = wrapper.find(".actions").childAt(0);
+
+ assert.ok(cancelButton);
+ cancelButton.simulate("click");
+
+ // Two events are emitted: UserEvent+AlsoToMain.
+ assert.calledTwice(dispatch);
+ assert.propertyVal(dispatch.firstCall.args[0], "type", at.DIALOG_CANCEL);
+ assert.calledWith(dispatch, { type: at.DIALOG_CANCEL });
+ });
+ it("should emit UserEvent DIALOG_CANCEL on cancel", () => {
+ let cancelButton = wrapper.find(".actions").childAt(0);
+
+ assert.ok(cancelButton);
+ cancelButton.simulate("click");
+
+ // Two events are emitted: UserEvent+AlsoToMain.
+ assert.calledTwice(dispatch);
+ assert.isUserEventAction(dispatch.secondCall.args[0]);
+ assert.calledWith(
+ dispatch,
+ ac.UserEvent({ event: at.DIALOG_CANCEL, source: "HIGHLIGHTS" })
+ );
+ });
+ it("should emit UserEvent on primary button", () => {
+ Object.assign(ConfirmDialogProps.data, {
+ body_string_id: ["foo", "bar"],
+ onConfirm: [
+ ac.AlsoToMain({ type: at.DELETE_URL, data: "foo.bar" }),
+ ac.UserEvent({ event: "DELETE" }),
+ ],
+ });
+ wrapper = shallow(
+ <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} />
+ );
+ let doneButton = wrapper.find(".actions").childAt(1);
+
+ assert.ok(doneButton);
+ doneButton.simulate("click");
+
+ // Two events are emitted: UserEvent+AlsoToMain.
+ assert.isUserEventAction(dispatch.secondCall.args[0]);
+
+ assert.calledTwice(dispatch);
+ assert.calledWith(dispatch, ConfirmDialogProps.data.onConfirm[1]);
+ });
+ it("should emit AlsoToMain on primary button", () => {
+ Object.assign(ConfirmDialogProps.data, {
+ body_string_id: ["foo", "bar"],
+ onConfirm: [
+ ac.AlsoToMain({ type: at.DELETE_URL, data: "foo.bar" }),
+ ac.UserEvent({ event: "DELETE" }),
+ ],
+ });
+ wrapper = shallow(
+ <ConfirmDialog dispatch={dispatch} {...ConfirmDialogProps} />
+ );
+ let doneButton = wrapper.find(".actions").childAt(1);
+
+ assert.ok(doneButton);
+ doneButton.simulate("click");
+
+ // Two events are emitted: UserEvent+AlsoToMain.
+ assert.calledTwice(dispatch);
+ assert.calledWith(dispatch, ConfirmDialogProps.data.onConfirm[0]);
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/ContextMenu.test.jsx b/browser/components/newtab/test/unit/content-src/components/ContextMenu.test.jsx
new file mode 100644
index 0000000000..4f7edadc41
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/ContextMenu.test.jsx
@@ -0,0 +1,227 @@
+import {
+ ContextMenu,
+ ContextMenuItem,
+ _ContextMenuItem,
+} from "content-src/components/ContextMenu/ContextMenu";
+import { ContextMenuButton } from "content-src/components/ContextMenu/ContextMenuButton";
+import { mount, shallow } from "enzyme";
+import React from "react";
+import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs";
+import { Provider } from "react-redux";
+import { combineReducers, createStore } from "redux";
+
+const DEFAULT_PROPS = {
+ onUpdate: () => {},
+ options: [],
+ tabbableOptionsLength: 0,
+};
+
+const DEFAULT_MENU_OPTIONS = [
+ "MoveUp",
+ "MoveDown",
+ "Separator",
+ "ManageSection",
+];
+
+const FakeMenu = props => {
+ return <div>{props.children}</div>;
+};
+
+describe("<ContextMenuButton>", () => {
+ function mountWithProps(options) {
+ const store = createStore(combineReducers(reducers), INITIAL_STATE);
+ return mount(
+ <Provider store={store}>
+ <ContextMenuButton>
+ <ContextMenu options={options} />
+ </ContextMenuButton>
+ </Provider>
+ );
+ }
+
+ let sandbox;
+ beforeEach(() => {
+ sandbox = sinon.createSandbox();
+ });
+ afterEach(() => {
+ sandbox.restore();
+ });
+ it("should call onUpdate when clicked", () => {
+ const onUpdate = sandbox.spy();
+ const wrapper = mount(
+ <ContextMenuButton onUpdate={onUpdate}>
+ <FakeMenu />
+ </ContextMenuButton>
+ );
+ wrapper.find(".context-menu-button").simulate("click");
+ assert.calledOnce(onUpdate);
+ });
+ it("should call onUpdate when activated with Enter", () => {
+ const onUpdate = sandbox.spy();
+ const wrapper = mount(
+ <ContextMenuButton onUpdate={onUpdate}>
+ <FakeMenu />
+ </ContextMenuButton>
+ );
+ wrapper.find(".context-menu-button").simulate("keydown", { key: "Enter" });
+ assert.calledOnce(onUpdate);
+ });
+ it("should call onClick", () => {
+ const onClick = sandbox.spy(ContextMenuButton.prototype, "onClick");
+ const wrapper = mount(
+ <ContextMenuButton>
+ <FakeMenu />
+ </ContextMenuButton>
+ );
+ wrapper.find("button").simulate("click");
+ assert.calledOnce(onClick);
+ });
+ it("should have a default keyboardAccess prop of false", () => {
+ const wrapper = mountWithProps(DEFAULT_MENU_OPTIONS);
+ wrapper.find(ContextMenuButton).setState({ showContextMenu: true });
+ assert.equal(wrapper.find(ContextMenu).prop("keyboardAccess"), false);
+ });
+ it("should pass the keyboardAccess prop down to ContextMenu", () => {
+ const wrapper = mountWithProps(DEFAULT_MENU_OPTIONS);
+ wrapper
+ .find(ContextMenuButton)
+ .setState({ showContextMenu: true, contextMenuKeyboard: true });
+ assert.equal(wrapper.find(ContextMenu).prop("keyboardAccess"), true);
+ });
+ it("should call focusFirst when keyboardAccess is true", () => {
+ const options = [{ label: "item1", first: true }];
+ const wrapper = mountWithProps(options);
+ const focusFirst = sandbox.spy(_ContextMenuItem.prototype, "focusFirst");
+ wrapper
+ .find(ContextMenuButton)
+ .setState({ showContextMenu: true, contextMenuKeyboard: true });
+ assert.calledOnce(focusFirst);
+ });
+});
+
+describe("<ContextMenu>", () => {
+ function mountWithProps(props) {
+ const store = createStore(combineReducers(reducers), INITIAL_STATE);
+ return mount(
+ <Provider store={store}>
+ <ContextMenu {...props} />
+ </Provider>
+ );
+ }
+
+ it("should render all the options provided", () => {
+ const options = [
+ { label: "item1" },
+ { type: "separator" },
+ { label: "item2" },
+ ];
+ const wrapper = shallow(
+ <ContextMenu {...DEFAULT_PROPS} options={options} />
+ );
+ assert.lengthOf(wrapper.find(".context-menu-list").children(), 3);
+ });
+ it("should not add a link for a separator", () => {
+ const options = [{ label: "item1" }, { type: "separator" }];
+ const wrapper = shallow(
+ <ContextMenu {...DEFAULT_PROPS} options={options} />
+ );
+ assert.lengthOf(wrapper.find(".separator"), 1);
+ });
+ it("should add a link for all types that are not separators", () => {
+ const options = [{ label: "item1" }, { type: "separator" }];
+ const wrapper = shallow(
+ <ContextMenu {...DEFAULT_PROPS} options={options} />
+ );
+ assert.lengthOf(wrapper.find(ContextMenuItem), 1);
+ });
+ it("should not add an icon to any items", () => {
+ const props = Object.assign({}, DEFAULT_PROPS, {
+ options: [{ label: "item1", icon: "icon1" }, { type: "separator" }],
+ });
+ const wrapper = mountWithProps(props);
+ assert.lengthOf(wrapper.find(".icon-icon1"), 0);
+ });
+ it("should be tabbable", () => {
+ const props = {
+ options: [{ label: "item1", icon: "icon1" }, { type: "separator" }],
+ };
+ const wrapper = mountWithProps(props);
+ assert.equal(
+ wrapper.find(".context-menu-item").props().role,
+ "presentation"
+ );
+ });
+ it("should call onUpdate with false when an option is clicked", () => {
+ const onUpdate = sinon.spy();
+ const onClick = sinon.spy();
+ const props = Object.assign({}, DEFAULT_PROPS, {
+ onUpdate,
+ options: [{ label: "item1", onClick }],
+ });
+ const wrapper = mountWithProps(props);
+ wrapper.find(".context-menu-item button").simulate("click");
+ assert.calledOnce(onUpdate);
+ assert.calledOnce(onClick);
+ });
+ it("should not have disabled className by default", () => {
+ const props = Object.assign({}, DEFAULT_PROPS, {
+ options: [{ label: "item1", icon: "icon1" }, { type: "separator" }],
+ });
+ const wrapper = mountWithProps(props);
+ assert.lengthOf(wrapper.find(".context-menu-item a.disabled"), 0);
+ });
+ it("should add disabled className to any disabled options", () => {
+ const options = [
+ { label: "item1", icon: "icon1", disabled: true },
+ { type: "separator" },
+ ];
+ const props = Object.assign({}, DEFAULT_PROPS, { options });
+ const wrapper = mountWithProps(props);
+ assert.lengthOf(wrapper.find(".context-menu-item button.disabled"), 1);
+ });
+ it("should have the context-menu-item class", () => {
+ const options = [{ label: "item1", icon: "icon1" }];
+ const props = Object.assign({}, DEFAULT_PROPS, { options });
+ const wrapper = mountWithProps(props);
+ assert.lengthOf(wrapper.find(".context-menu-item"), 1);
+ });
+ it("should call onClick when onKeyDown is called with Enter", () => {
+ const onClick = sinon.spy();
+ const props = Object.assign({}, DEFAULT_PROPS, {
+ options: [{ label: "item1", onClick }],
+ });
+ const wrapper = mountWithProps(props);
+ wrapper
+ .find(".context-menu-item button")
+ .simulate("keydown", { key: "Enter" });
+ assert.calledOnce(onClick);
+ });
+ it("should call focusSibling when onKeyDown is called with ArrowUp", () => {
+ const props = Object.assign({}, DEFAULT_PROPS, {
+ options: [{ label: "item1" }],
+ });
+ const wrapper = mountWithProps(props);
+ const focusSibling = sinon.stub(
+ wrapper.find(_ContextMenuItem).instance(),
+ "focusSibling"
+ );
+ wrapper
+ .find(".context-menu-item button")
+ .simulate("keydown", { key: "ArrowUp" });
+ assert.calledOnce(focusSibling);
+ });
+ it("should call focusSibling when onKeyDown is called with ArrowDown", () => {
+ const props = Object.assign({}, DEFAULT_PROPS, {
+ options: [{ label: "item1" }],
+ });
+ const wrapper = mountWithProps(props);
+ const focusSibling = sinon.stub(
+ wrapper.find(_ContextMenuItem).instance(),
+ "focusSibling"
+ );
+ wrapper
+ .find(".context-menu-item button")
+ .simulate("keydown", { key: "ArrowDown" });
+ assert.calledOnce(focusSibling);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/CustomiseMenu.test.jsx b/browser/components/newtab/test/unit/content-src/components/CustomiseMenu.test.jsx
new file mode 100644
index 0000000000..e1f84f7d84
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/CustomiseMenu.test.jsx
@@ -0,0 +1,72 @@
+import { actionCreators as ac } from "common/Actions.sys.mjs";
+import { ContentSection } from "content-src/components/CustomizeMenu/ContentSection/ContentSection";
+import { mount } from "enzyme";
+import React from "react";
+
+const DEFAULT_PROPS = {
+ enabledSections: {
+ pocketEnabled: true,
+ topSitesEnabled: true,
+ },
+ mayHaveSponsoredTopSites: true,
+ mayHaveSponsoredStories: true,
+ pocketRegion: true,
+ dispatch: sinon.stub(),
+ setPref: sinon.stub(),
+};
+
+describe("ContentSection", () => {
+ let wrapper;
+ beforeEach(() => {
+ wrapper = mount(<ContentSection {...DEFAULT_PROPS} />);
+ });
+
+ it("should render the component", () => {
+ assert.ok(wrapper.exists());
+ });
+
+ it("should look for a data-eventSource attribute and dispatch an event for INPUT", () => {
+ wrapper.instance().onPreferenceSelect({
+ target: {
+ nodeName: "INPUT",
+ checked: true,
+ dataset: { preference: "foo", eventSource: "bar" },
+ },
+ });
+
+ assert.calledWith(
+ DEFAULT_PROPS.dispatch,
+ ac.UserEvent({
+ event: "PREF_CHANGED",
+ source: "bar",
+ value: { status: true, menu_source: "CUSTOMIZE_MENU" },
+ })
+ );
+ assert.calledWith(DEFAULT_PROPS.setPref, "foo", true);
+ wrapper.unmount();
+ });
+
+ it("should have data-eventSource attributes on relevent pref changing inputs", () => {
+ wrapper = mount(<ContentSection {...DEFAULT_PROPS} />);
+ assert.equal(
+ wrapper.find("#shortcuts-toggle").prop("data-eventSource"),
+ "TOP_SITES"
+ );
+ assert.equal(
+ wrapper.find("#sponsored-shortcuts").prop("data-eventSource"),
+ "SPONSORED_TOP_SITES"
+ );
+ assert.equal(
+ wrapper.find("#pocket-toggle").prop("data-eventSource"),
+ "TOP_STORIES"
+ );
+ assert.equal(
+ wrapper.find("#sponsored-pocket").prop("data-eventSource"),
+ "POCKET_SPOCS"
+ );
+ assert.equal(
+ wrapper.find("#highlights-toggle").prop("data-eventSource"),
+ "HIGHLIGHTS"
+ );
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamAdmin.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamAdmin.test.jsx
new file mode 100644
index 0000000000..41849fba3e
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamAdmin.test.jsx
@@ -0,0 +1,267 @@
+import {
+ actionCreators as ac,
+ actionTypes as at,
+} from "common/Actions.sys.mjs";
+import {
+ DiscoveryStreamAdminInner,
+ CollapseToggle,
+ DiscoveryStreamAdminUI,
+ Personalization,
+ ToggleStoryButton,
+} from "content-src/components/DiscoveryStreamAdmin/DiscoveryStreamAdmin";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("DiscoveryStreamAdmin", () => {
+ let sandbox;
+ let wrapper;
+
+ beforeEach(() => {
+ sandbox = sinon.createSandbox();
+ wrapper = shallow(
+ <DiscoveryStreamAdminInner
+ collapsed={false}
+ location={{ routes: [""] }}
+ Prefs={{}}
+ />
+ );
+ });
+ afterEach(() => {
+ sandbox.restore();
+ });
+ it("should render DiscoveryStreamAdmin component", () => {
+ assert.ok(wrapper.exists());
+ });
+ it("should set a .collapsed class on the outer div if props.collapsed is true", () => {
+ wrapper.setProps({ collapsed: true });
+ assert.isTrue(wrapper.find(".discoverystream-admin").hasClass("collapsed"));
+ });
+ it("should set a .expanded class on the outer div if props.collapsed is false", () => {
+ wrapper.setProps({ collapsed: false });
+ assert.isTrue(wrapper.find(".discoverystream-admin").hasClass("expanded"));
+ assert.isFalse(
+ wrapper.find(".discoverystream-admin").hasClass("collapsed")
+ );
+ });
+ it("should render a DS section", () => {
+ assert.equal(wrapper.find("h1").at(0).text(), "Discovery Stream Admin");
+ });
+
+ describe("#DiscoveryStream", () => {
+ let state = {};
+ let dispatch;
+ beforeEach(() => {
+ dispatch = sandbox.stub();
+ state = {
+ config: {
+ enabled: true,
+ },
+ layout: [],
+ spocs: {
+ frequency_caps: [],
+ },
+ feeds: {
+ data: {},
+ },
+ };
+ wrapper = shallow(
+ <DiscoveryStreamAdminUI
+ dispatch={dispatch}
+ otherPrefs={{}}
+ state={{
+ DiscoveryStream: state,
+ }}
+ />
+ );
+ });
+ it("should render a DiscoveryStreamAdminUI component", () => {
+ assert.equal(wrapper.find("h3").at(0).text(), "Layout");
+ });
+ it("should render a spoc in DiscoveryStreamAdminUI component", () => {
+ state.spocs = {
+ frequency_caps: [],
+ data: {
+ spocs: {
+ items: [
+ {
+ id: 12345,
+ },
+ ],
+ },
+ },
+ };
+ wrapper = shallow(
+ <DiscoveryStreamAdminUI
+ otherPrefs={{}}
+ state={{ DiscoveryStream: state }}
+ />
+ );
+ wrapper.instance().onStoryToggle({ id: 12345 });
+ const messageSummary = wrapper.find(".message-summary").at(0);
+ const pre = messageSummary.find("pre").at(0);
+ const spocText = pre.text();
+ assert.equal(spocText, '{\n "id": 12345\n}');
+ });
+ it("should fire restorePrefDefaults with DISCOVERY_STREAM_CONFIG_RESET_DEFAULTS", () => {
+ wrapper.find("button").at(0).simulate("click");
+ assert.calledWith(
+ dispatch,
+ ac.OnlyToMain({
+ type: at.DISCOVERY_STREAM_CONFIG_RESET_DEFAULTS,
+ })
+ );
+ });
+ it("should fire config change with DISCOVERY_STREAM_CONFIG_CHANGE", () => {
+ wrapper.find("button").at(1).simulate("click");
+ assert.calledWith(
+ dispatch,
+ ac.OnlyToMain({
+ type: at.DISCOVERY_STREAM_CONFIG_CHANGE,
+ data: { enabled: true },
+ })
+ );
+ });
+ it("should fire expireCache with DISCOVERY_STREAM_DEV_EXPIRE_CACHE", () => {
+ wrapper.find("button").at(2).simulate("click");
+ assert.calledWith(
+ dispatch,
+ ac.OnlyToMain({
+ type: at.DISCOVERY_STREAM_DEV_EXPIRE_CACHE,
+ })
+ );
+ });
+ it("should fire systemTick with DISCOVERY_STREAM_DEV_SYSTEM_TICK", () => {
+ wrapper.find("button").at(3).simulate("click");
+ assert.calledWith(
+ dispatch,
+ ac.OnlyToMain({
+ type: at.DISCOVERY_STREAM_DEV_SYSTEM_TICK,
+ })
+ );
+ });
+ it("should fire idleDaily with DISCOVERY_STREAM_DEV_IDLE_DAILY", () => {
+ wrapper.find("button").at(4).simulate("click");
+ assert.calledWith(
+ dispatch,
+ ac.OnlyToMain({
+ type: at.DISCOVERY_STREAM_DEV_IDLE_DAILY,
+ })
+ );
+ });
+ it("should fire syncRemoteSettings with DISCOVERY_STREAM_DEV_SYNC_RS", () => {
+ wrapper.find("button").at(5).simulate("click");
+ assert.calledWith(
+ dispatch,
+ ac.OnlyToMain({
+ type: at.DISCOVERY_STREAM_DEV_SYNC_RS,
+ })
+ );
+ });
+ it("should fire setConfigValue with DISCOVERY_STREAM_CONFIG_SET_VALUE", () => {
+ const name = "name";
+ const value = "value";
+ wrapper.instance().setConfigValue(name, value);
+ assert.calledWith(
+ dispatch,
+ ac.OnlyToMain({
+ type: at.DISCOVERY_STREAM_CONFIG_SET_VALUE,
+ data: { name, value },
+ })
+ );
+ });
+ });
+
+ describe("#Personalization", () => {
+ let dispatch;
+ beforeEach(() => {
+ dispatch = sandbox.stub();
+ wrapper = shallow(
+ <Personalization
+ dispatch={dispatch}
+ state={{
+ Personalization: {
+ lastUpdated: 1000,
+ initialized: true,
+ },
+ }}
+ />
+ );
+ });
+ it("should render with pref checkbox, lastUpdated, and initialized", () => {
+ assert.lengthOf(wrapper.find("TogglePrefCheckbox"), 1);
+ assert.equal(
+ wrapper.find("td").at(1).text(),
+ "Personalization Last Updated"
+ );
+ assert.equal(
+ wrapper.find("td").at(2).text(),
+ new Date(1000).toLocaleString()
+ );
+ assert.equal(
+ wrapper.find("td").at(3).text(),
+ "Personalization Initialized"
+ );
+ assert.equal(wrapper.find("td").at(4).text(), "true");
+ });
+ it("should render with no data with no last updated", () => {
+ wrapper = shallow(
+ <Personalization
+ dispatch={dispatch}
+ state={{
+ Personalization: {
+ version: 2,
+ lastUpdated: 0,
+ initialized: true,
+ },
+ }}
+ />
+ );
+ assert.equal(wrapper.find("td").at(2).text(), "(no data)");
+ });
+ it("should dispatch DISCOVERY_STREAM_PERSONALIZATION_TOGGLE", () => {
+ wrapper.instance().togglePersonalization();
+ assert.calledWith(
+ dispatch,
+ ac.OnlyToMain({
+ type: at.DISCOVERY_STREAM_PERSONALIZATION_TOGGLE,
+ })
+ );
+ });
+ });
+
+ describe("#ToggleStoryButton", () => {
+ it("should fire onClick in toggle button", async () => {
+ let result = "";
+ function onClick(spoc) {
+ result = spoc;
+ }
+
+ wrapper = shallow(<ToggleStoryButton story="spoc" onClick={onClick} />);
+ wrapper.find("button").simulate("click");
+
+ assert.equal(result, "spoc");
+ });
+ });
+});
+
+describe("CollapseToggle", () => {
+ let wrapper;
+ beforeEach(() => {
+ wrapper = shallow(<CollapseToggle location={{ routes: [""] }} />);
+ });
+
+ describe("rendering inner content", () => {
+ it("should not render DiscoveryStreamAdminInner for about:newtab (no hash)", () => {
+ wrapper.setProps({ location: { hash: "", routes: [""] } });
+ assert.lengthOf(wrapper.find(DiscoveryStreamAdminInner), 0);
+ });
+
+ it("should render DiscoveryStreamAdminInner for about:newtab#devtools and subroutes", () => {
+ wrapper.setProps({ location: { hash: "#devtools", routes: [""] } });
+ assert.lengthOf(wrapper.find(DiscoveryStreamAdminInner), 1);
+
+ wrapper.setProps({ location: { hash: "#devtools-foo", routes: [""] } });
+ assert.lengthOf(wrapper.find(DiscoveryStreamAdminInner), 1);
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamBase.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamBase.test.jsx
new file mode 100644
index 0000000000..7720e07327
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamBase.test.jsx
@@ -0,0 +1,313 @@
+import {
+ _DiscoveryStreamBase as DiscoveryStreamBase,
+ isAllowedCSS,
+} from "content-src/components/DiscoveryStreamBase/DiscoveryStreamBase";
+import { GlobalOverrider } from "test/unit/utils";
+import { CardGrid } from "content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid";
+import { CollapsibleSection } from "content-src/components/CollapsibleSection/CollapsibleSection";
+import { DSMessage } from "content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage";
+import { HorizontalRule } from "content-src/components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule";
+import { Navigation } from "content-src/components/DiscoveryStreamComponents/Navigation/Navigation";
+import React from "react";
+import { shallow } from "enzyme";
+import { SectionTitle } from "content-src/components/DiscoveryStreamComponents/SectionTitle/SectionTitle";
+import { TopSites } from "content-src/components/TopSites/TopSites";
+
+describe("<isAllowedCSS>", () => {
+ it("should allow colors", () => {
+ assert.isTrue(isAllowedCSS("color", "red"));
+ });
+
+ it("should allow chrome urls", () => {
+ assert.isTrue(
+ isAllowedCSS(
+ "background-image",
+ `url("chrome://global/skin/icons/info.svg")`
+ )
+ );
+ });
+
+ it("should allow chrome urls", () => {
+ assert.isTrue(
+ isAllowedCSS(
+ "background-image",
+ `url("chrome://browser/skin/history.svg")`
+ )
+ );
+ });
+
+ it("should allow allowed https urls", () => {
+ assert.isTrue(
+ isAllowedCSS(
+ "background-image",
+ `url("https://img-getpocket.cdn.mozilla.net/media/image.png")`
+ )
+ );
+ });
+
+ it("should disallow other https urls", () => {
+ assert.isFalse(
+ isAllowedCSS(
+ "background-image",
+ `url("https://mozilla.org/media/image.png")`
+ )
+ );
+ });
+
+ it("should disallow other protocols", () => {
+ assert.isFalse(
+ isAllowedCSS(
+ "background-image",
+ `url("ftp://mozilla.org/media/image.png")`
+ )
+ );
+ });
+
+ it("should allow allowed multiple valid urls", () => {
+ assert.isTrue(
+ isAllowedCSS(
+ "background-image",
+ `url("https://img-getpocket.cdn.mozilla.net/media/image.png"), url("chrome://browser/skin/history.svg")`
+ )
+ );
+ });
+
+ it("should disallow if any invaild", () => {
+ assert.isFalse(
+ isAllowedCSS(
+ "background-image",
+ `url("chrome://browser/skin/history.svg"), url("ftp://mozilla.org/media/image.png")`
+ )
+ );
+ });
+});
+
+describe("<DiscoveryStreamBase>", () => {
+ let wrapper;
+ let globals;
+ let sandbox;
+
+ function mountComponent(props = {}) {
+ const defaultProps = {
+ config: { collapsible: true },
+ layout: [],
+ feeds: { loaded: true },
+ spocs: {
+ loaded: true,
+ data: { spocs: null },
+ },
+ ...props,
+ };
+ return shallow(
+ <DiscoveryStreamBase
+ locale="en-US"
+ DiscoveryStream={defaultProps}
+ Prefs={{
+ values: {
+ "feeds.section.topstories": true,
+ "feeds.system.topstories": true,
+ "feeds.topsites": true,
+ },
+ }}
+ App={{
+ locale: "en-US",
+ }}
+ document={{
+ documentElement: { lang: "en-US" },
+ }}
+ Sections={[
+ {
+ id: "topstories",
+ learnMore: { link: {} },
+ pref: {},
+ },
+ ]}
+ />
+ );
+ }
+
+ beforeEach(() => {
+ globals = new GlobalOverrider();
+ sandbox = sinon.createSandbox();
+ wrapper = mountComponent();
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ globals.restore();
+ });
+
+ it("should render something if spocs are not loaded", () => {
+ wrapper = mountComponent({
+ spocs: { loaded: false, data: { spocs: null } },
+ });
+
+ assert.notEqual(wrapper.type(), null);
+ });
+
+ it("should render something if feeds are not loaded", () => {
+ wrapper = mountComponent({ feeds: { loaded: false } });
+
+ assert.notEqual(wrapper.type(), null);
+ });
+
+ it("should render nothing with no layout", () => {
+ assert.ok(wrapper.exists());
+ assert.isEmpty(wrapper.children());
+ });
+
+ it("should render a HorizontalRule component", () => {
+ wrapper = mountComponent({
+ layout: [{ components: [{ type: "HorizontalRule" }] }],
+ });
+
+ assert.equal(
+ wrapper.find(".ds-column-grid div").children().at(0).type(),
+ HorizontalRule
+ );
+ });
+
+ it("should render a CardGrid component", () => {
+ wrapper = mountComponent({
+ layout: [{ components: [{ properties: {}, type: "CardGrid" }] }],
+ });
+
+ assert.equal(
+ wrapper.find(".ds-column-grid div").children().at(0).type(),
+ CardGrid
+ );
+ });
+
+ it("should render a Navigation component", () => {
+ wrapper = mountComponent({
+ layout: [{ components: [{ properties: {}, type: "Navigation" }] }],
+ });
+
+ assert.equal(
+ wrapper.find(".ds-column-grid div").children().at(0).type(),
+ Navigation
+ );
+ });
+
+ it("should render nothing if there was only a Message", () => {
+ wrapper = mountComponent({
+ layout: [
+ { components: [{ header: {}, properties: {}, type: "Message" }] },
+ ],
+ });
+
+ assert.isEmpty(wrapper.children());
+ });
+
+ it("should render a regular Message when not collapsible", () => {
+ wrapper = mountComponent({
+ config: { collapsible: false },
+ layout: [
+ { components: [{ header: {}, properties: {}, type: "Message" }] },
+ ],
+ });
+
+ assert.equal(
+ wrapper.find(".ds-column-grid div").children().at(0).type(),
+ DSMessage
+ );
+ });
+
+ it("should convert first Message component to CollapsibleSection", () => {
+ wrapper = mountComponent({
+ layout: [
+ {
+ components: [
+ { header: {}, properties: {}, type: "Message" },
+ { type: "HorizontalRule" },
+ ],
+ },
+ ],
+ });
+
+ assert.equal(wrapper.children().at(0).type(), CollapsibleSection);
+ assert.equal(wrapper.children().at(0).props().eventSource, "CARDGRID");
+ });
+
+ it("should render a Message component", () => {
+ wrapper = mountComponent({
+ layout: [
+ {
+ components: [
+ { header: {}, type: "Message" },
+ { properties: {}, type: "Message" },
+ ],
+ },
+ ],
+ });
+
+ assert.equal(
+ wrapper.find(".ds-column-grid div").children().at(0).type(),
+ DSMessage
+ );
+ });
+
+ it("should render a SectionTitle component", () => {
+ wrapper = mountComponent({
+ layout: [{ components: [{ properties: {}, type: "SectionTitle" }] }],
+ });
+
+ assert.equal(
+ wrapper.find(".ds-column-grid div").children().at(0).type(),
+ SectionTitle
+ );
+ });
+
+ it("should render TopSites", () => {
+ wrapper = mountComponent({
+ layout: [{ components: [{ properties: {}, type: "TopSites" }] }],
+ });
+
+ assert.equal(
+ wrapper
+ .find(".ds-column-grid div")
+ .find(".ds-top-sites")
+ .children()
+ .at(0)
+ .type(),
+ TopSites
+ );
+ });
+
+ describe("#onStyleMount", () => {
+ let parseStub;
+
+ beforeEach(() => {
+ parseStub = sandbox.stub();
+ globals.set("JSON", { parse: parseStub });
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ globals.restore();
+ });
+
+ it("should return if no style", () => {
+ assert.isUndefined(wrapper.instance().onStyleMount());
+ assert.notCalled(parseStub);
+ });
+
+ it("should insert rules", () => {
+ const sheetStub = { insertRule: sandbox.stub(), cssRules: [{}] };
+ parseStub.returns([
+ [
+ null,
+ {
+ ".ds-message": "margin-bottom: -20px",
+ },
+ null,
+ null,
+ ],
+ ]);
+ wrapper.instance().onStyleMount({ sheet: sheetStub, dataset: {} });
+
+ assert.calledOnce(sheetStub.insertRule);
+ assert.calledWithExactly(sheetStub.insertRule, "DUMMY#CSS.SELECTOR {}");
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/CardGrid.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/CardGrid.test.jsx
new file mode 100644
index 0000000000..418a731ba1
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/CardGrid.test.jsx
@@ -0,0 +1,354 @@
+import {
+ _CardGrid as CardGrid,
+ IntersectionObserver,
+ RecentSavesContainer,
+ OnboardingExperience,
+ DSSubHeader,
+} from "content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid";
+import { combineReducers, createStore } from "redux";
+import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs";
+import { Provider } from "react-redux";
+import {
+ DSCard,
+ PlaceholderDSCard,
+} from "content-src/components/DiscoveryStreamComponents/DSCard/DSCard";
+import { TopicsWidget } from "content-src/components/DiscoveryStreamComponents/TopicsWidget/TopicsWidget";
+import {
+ actionCreators as ac,
+ actionTypes as at,
+} from "common/Actions.sys.mjs";
+import React from "react";
+import { shallow, mount } from "enzyme";
+
+// Wrap this around any component that uses useSelector,
+// or any mount that uses a child that uses redux.
+function WrapWithProvider({ children, state = INITIAL_STATE }) {
+ let store = createStore(combineReducers(reducers), state);
+ return <Provider store={store}>{children}</Provider>;
+}
+
+describe("<CardGrid>", () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = shallow(
+ <CardGrid
+ Prefs={INITIAL_STATE.Prefs}
+ DiscoveryStream={INITIAL_STATE.DiscoveryStream}
+ />
+ );
+ });
+
+ it("should render an empty div", () => {
+ assert.ok(wrapper.exists());
+ assert.lengthOf(wrapper.children(), 0);
+ });
+
+ it("should render DSCards", () => {
+ wrapper.setProps({ items: 2, data: { recommendations: [{}, {}] } });
+
+ assert.lengthOf(wrapper.find(".ds-card-grid").children(), 2);
+ assert.equal(wrapper.find(".ds-card-grid").children().at(0).type(), DSCard);
+ });
+
+ it("should add 4 card classname to card grid", () => {
+ wrapper.setProps({
+ fourCardLayout: true,
+ data: { recommendations: [{}, {}] },
+ });
+
+ assert.ok(wrapper.find(".ds-card-grid-four-card-variant").exists());
+ });
+
+ it("should add no description classname to card grid", () => {
+ wrapper.setProps({
+ hideCardBackground: true,
+ data: { recommendations: [{}, {}] },
+ });
+
+ assert.ok(wrapper.find(".ds-card-grid-hide-background").exists());
+ });
+
+ it("should render sub header in the middle of the card grid for both regular and compact", () => {
+ const commonProps = {
+ essentialReadsHeader: true,
+ editorsPicksHeader: true,
+ items: 12,
+ data: {
+ recommendations: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
+ },
+ Prefs: INITIAL_STATE.Prefs,
+ DiscoveryStream: INITIAL_STATE.DiscoveryStream,
+ };
+ wrapper = mount(
+ <WrapWithProvider>
+ <CardGrid {...commonProps} />
+ </WrapWithProvider>
+ );
+
+ assert.ok(wrapper.find(DSSubHeader).exists());
+
+ wrapper.setProps({
+ compact: true,
+ });
+ wrapper = mount(
+ <WrapWithProvider>
+ <CardGrid {...commonProps} compact={true} />
+ </WrapWithProvider>
+ );
+
+ assert.ok(wrapper.find(DSSubHeader).exists());
+ });
+
+ it("should add/hide description classname to card grid", () => {
+ wrapper.setProps({
+ data: { recommendations: [{}, {}] },
+ });
+
+ assert.ok(wrapper.find(".ds-card-grid-include-descriptions").exists());
+
+ wrapper.setProps({
+ hideDescriptions: true,
+ data: { recommendations: [{}, {}] },
+ });
+
+ assert.ok(!wrapper.find(".ds-card-grid-include-descriptions").exists());
+ });
+
+ it("should create a widget card", () => {
+ wrapper.setProps({
+ widgets: {
+ positions: [{ index: 1 }],
+ data: [{ type: "TopicsWidget" }],
+ },
+ data: {
+ recommendations: [{}, {}, {}],
+ },
+ });
+
+ assert.ok(wrapper.find(TopicsWidget).exists());
+ });
+});
+
+// Build IntersectionObserver class with the arg `entries` for the intersect callback.
+function buildIntersectionObserver(entries) {
+ return class {
+ constructor(callback) {
+ this.callback = callback;
+ }
+
+ observe() {
+ this.callback(entries);
+ }
+
+ unobserve() {}
+
+ disconnect() {}
+ };
+}
+
+describe("<IntersectionObserver>", () => {
+ let wrapper;
+ let fakeWindow;
+ let intersectEntries;
+
+ beforeEach(() => {
+ intersectEntries = [{ isIntersecting: true }];
+ fakeWindow = {
+ IntersectionObserver: buildIntersectionObserver(intersectEntries),
+ };
+ wrapper = mount(<IntersectionObserver windowObj={fakeWindow} />);
+ });
+
+ it("should render an empty div", () => {
+ assert.ok(wrapper.exists());
+ assert.equal(wrapper.children().at(0).type(), "div");
+ });
+
+ it("should fire onIntersecting", () => {
+ const onIntersecting = sinon.stub();
+ wrapper = mount(
+ <IntersectionObserver
+ windowObj={fakeWindow}
+ onIntersecting={onIntersecting}
+ />
+ );
+ assert.calledOnce(onIntersecting);
+ });
+});
+
+describe("<RecentSavesContainer>", () => {
+ let wrapper;
+ let fakeWindow;
+ let intersectEntries;
+ let dispatch;
+
+ beforeEach(() => {
+ dispatch = sinon.stub();
+ intersectEntries = [{ isIntersecting: true }];
+ fakeWindow = {
+ IntersectionObserver: buildIntersectionObserver(intersectEntries),
+ };
+ wrapper = mount(
+ <WrapWithProvider
+ state={{
+ DiscoveryStream: {
+ isUserLoggedIn: true,
+ recentSavesData: [
+ {
+ resolved_id: "resolved_id",
+ top_image_url: "top_image_url",
+ title: "title",
+ resolved_url: "https://resolved_url",
+ domain: "domain",
+ excerpt: "excerpt",
+ },
+ ],
+ experimentData: {
+ utmSource: "utmSource",
+ utmContent: "utmContent",
+ utmCampaign: "utmCampaign",
+ },
+ },
+ }}
+ >
+ <RecentSavesContainer
+ gridClassName="ds-card-grid"
+ windowObj={fakeWindow}
+ dispatch={dispatch}
+ />
+ </WrapWithProvider>
+ ).find(RecentSavesContainer);
+ });
+
+ it("should render an IntersectionObserver when not visible", () => {
+ intersectEntries = [{ isIntersecting: false }];
+ fakeWindow = {
+ IntersectionObserver: buildIntersectionObserver(intersectEntries),
+ };
+ wrapper = mount(
+ <WrapWithProvider>
+ <RecentSavesContainer windowObj={fakeWindow} dispatch={dispatch} />
+ </WrapWithProvider>
+ ).find(RecentSavesContainer);
+
+ assert.ok(wrapper.exists());
+ assert.ok(wrapper.find(IntersectionObserver).exists());
+ });
+
+ it("should render nothing if visible until we log in", () => {
+ assert.ok(!wrapper.find(IntersectionObserver).exists());
+ assert.calledOnce(dispatch);
+ assert.calledWith(
+ dispatch,
+ ac.AlsoToMain({
+ type: at.DISCOVERY_STREAM_POCKET_STATE_INIT,
+ })
+ );
+ });
+
+ it("should render a grid if visible and logged in", () => {
+ assert.lengthOf(wrapper.find(".ds-card-grid"), 1);
+ assert.lengthOf(wrapper.find(DSSubHeader), 1);
+ assert.lengthOf(wrapper.find(PlaceholderDSCard), 2);
+ assert.lengthOf(wrapper.find(DSCard), 3);
+ });
+
+ it("should render a my list link with proper utm params", () => {
+ assert.equal(
+ wrapper.find(".section-sub-link").at(0).prop("url"),
+ "https://getpocket.com/a?utm_source=utmSource&utm_content=utmContent&utm_campaign=utmCampaign"
+ );
+ });
+
+ it("should fire a UserEvent for my list clicks", () => {
+ wrapper.find(".section-sub-link").at(0).simulate("click");
+ assert.calledWith(
+ dispatch,
+ ac.DiscoveryStreamUserEvent({
+ event: "CLICK",
+ source: `CARDGRID_RECENT_SAVES_VIEW_LIST`,
+ })
+ );
+ });
+});
+
+describe("<OnboardingExperience>", () => {
+ let wrapper;
+ let fakeWindow;
+ let intersectEntries;
+ let dispatch;
+ let resizeCallback;
+
+ let fakeResizeObserver = class {
+ constructor(callback) {
+ resizeCallback = callback;
+ }
+
+ observe() {}
+
+ unobserve() {}
+
+ disconnect() {}
+ };
+
+ beforeEach(() => {
+ dispatch = sinon.stub();
+ intersectEntries = [{ isIntersecting: true, intersectionRatio: 1 }];
+ fakeWindow = {
+ ResizeObserver: fakeResizeObserver,
+ IntersectionObserver: buildIntersectionObserver(intersectEntries),
+ document: {
+ visibilityState: "visible",
+ addEventListener: () => {},
+ removeEventListener: () => {},
+ },
+ };
+ wrapper = mount(
+ <WrapWithProvider state={{}}>
+ <OnboardingExperience windowObj={fakeWindow} dispatch={dispatch} />
+ </WrapWithProvider>
+ ).find(OnboardingExperience);
+ });
+
+ it("should render a ds-onboarding", () => {
+ assert.ok(wrapper.exists());
+ assert.lengthOf(wrapper.find(".ds-onboarding"), 1);
+ });
+
+ it("should dismiss on dismiss click", () => {
+ wrapper.find(".ds-dismiss-button").simulate("click");
+
+ assert.calledWith(
+ dispatch,
+ ac.DiscoveryStreamUserEvent({
+ event: "BLOCK",
+ source: "POCKET_ONBOARDING",
+ })
+ );
+ assert.calledWith(
+ dispatch,
+ ac.SetPref("discoverystream.onboardingExperience.dismissed", true)
+ );
+ assert.equal(wrapper.getDOMNode().style["max-height"], "0px");
+ assert.equal(wrapper.getDOMNode().style.opacity, "0");
+ });
+
+ it("should update max-height on resize", () => {
+ sinon
+ .stub(wrapper.find(".ds-onboarding-ref").getDOMNode(), "offsetHeight")
+ .get(() => 123);
+ resizeCallback();
+ assert.equal(wrapper.getDOMNode().style["max-height"], "123px");
+ });
+
+ it("should fire intersection events", () => {
+ assert.calledWith(
+ dispatch,
+ ac.DiscoveryStreamUserEvent({
+ event: "IMPRESSION",
+ source: "POCKET_ONBOARDING",
+ })
+ );
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/CollectionCardGrid.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/CollectionCardGrid.test.jsx
new file mode 100644
index 0000000000..10b06cab9d
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/CollectionCardGrid.test.jsx
@@ -0,0 +1,138 @@
+import { CollectionCardGrid } from "content-src/components/DiscoveryStreamComponents/CollectionCardGrid/CollectionCardGrid";
+import { CardGrid } from "content-src/components/DiscoveryStreamComponents/CardGrid/CardGrid";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<CollectionCardGrid>", () => {
+ let wrapper;
+ let sandbox;
+ let dispatchStub;
+ const initialSpocs = [
+ { id: 123, url: "123" },
+ { id: 456, url: "456" },
+ { id: 789, url: "789" },
+ ];
+
+ beforeEach(() => {
+ sandbox = sinon.createSandbox();
+ dispatchStub = sandbox.stub();
+ wrapper = shallow(
+ <CollectionCardGrid
+ dispatch={dispatchStub}
+ type="COLLECTIONCARDGRID"
+ placement={{
+ name: "spocs",
+ }}
+ data={{
+ spocs: initialSpocs,
+ }}
+ spocs={{
+ data: {
+ spocs: {
+ title: "title",
+ context: "context",
+ items: initialSpocs,
+ },
+ },
+ }}
+ />
+ );
+ });
+
+ it("should render an empty div", () => {
+ wrapper = shallow(<CollectionCardGrid />);
+ assert.ok(wrapper.exists());
+ assert.ok(!wrapper.exists(".ds-collection-card-grid"));
+ });
+
+ it("should render a CardGrid", () => {
+ assert.lengthOf(wrapper.find(".ds-collection-card-grid").children(), 1);
+ assert.equal(
+ wrapper.find(".ds-collection-card-grid").children().at(0).type(),
+ CardGrid
+ );
+ });
+
+ it("should inject spocs in every CardGrid rec position", () => {
+ assert.lengthOf(
+ wrapper.find(".ds-collection-card-grid").children().at(0).props().data
+ .recommendations,
+ 3
+ );
+ });
+
+ it("should pass along title and context to CardGrid", () => {
+ assert.equal(
+ wrapper.find(".ds-collection-card-grid").children().at(0).props().title,
+ "title"
+ );
+
+ assert.equal(
+ wrapper.find(".ds-collection-card-grid").children().at(0).props().context,
+ "context"
+ );
+ });
+
+ it("should render nothing without a title", () => {
+ wrapper = shallow(
+ <CollectionCardGrid
+ dispatch={dispatchStub}
+ placement={{
+ name: "spocs",
+ }}
+ data={{
+ spocs: initialSpocs,
+ }}
+ spocs={{
+ data: {
+ spocs: {
+ title: "",
+ context: "context",
+ items: initialSpocs,
+ },
+ },
+ }}
+ />
+ );
+
+ assert.ok(wrapper.exists());
+ assert.ok(!wrapper.exists(".ds-collection-card-grid"));
+ });
+
+ it("should dispatch telemety events on dismiss", () => {
+ wrapper.instance().onDismissClick();
+
+ const firstCall = dispatchStub.getCall(0);
+ const secondCall = dispatchStub.getCall(1);
+ const thirdCall = dispatchStub.getCall(2);
+
+ assert.equal(firstCall.args[0].type, "BLOCK_URL");
+ let expected = ["123", "456", "789"].map(url => ({
+ url,
+ pocket_id: undefined,
+ isSponsoredTopSite: undefined,
+ position: 0,
+ is_pocket_card: false,
+ }));
+
+ assert.deepEqual(firstCall.args[0].data, expected);
+
+ assert.equal(secondCall.args[0].type, "DISCOVERY_STREAM_USER_EVENT");
+ assert.deepEqual(secondCall.args[0].data, {
+ event: "BLOCK",
+ source: "COLLECTIONCARDGRID",
+ action_position: 0,
+ });
+
+ assert.equal(thirdCall.args[0].type, "TELEMETRY_IMPRESSION_STATS");
+ assert.deepEqual(thirdCall.args[0].data, {
+ source: "COLLECTIONCARDGRID",
+ block: 0,
+ tiles: [
+ { id: 123, pos: 0 },
+ { id: 456, pos: 1 },
+ { id: 789, pos: 2 },
+ ],
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSCard.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSCard.test.jsx
new file mode 100644
index 0000000000..dad4d19fa5
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSCard.test.jsx
@@ -0,0 +1,582 @@
+import {
+ _DSCard as DSCard,
+ readTimeFromWordCount,
+ DSSource,
+ DefaultMeta,
+ PlaceholderDSCard,
+} from "content-src/components/DiscoveryStreamComponents/DSCard/DSCard";
+import {
+ DSContextFooter,
+ StatusMessage,
+ SponsorLabel,
+} from "content-src/components/DiscoveryStreamComponents/DSContextFooter/DSContextFooter";
+import {
+ actionCreators as ac,
+ actionTypes as at,
+} from "common/Actions.sys.mjs";
+import { DSLinkMenu } from "content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu";
+import React from "react";
+import { INITIAL_STATE } from "common/Reducers.sys.mjs";
+import { SafeAnchor } from "content-src/components/DiscoveryStreamComponents/SafeAnchor/SafeAnchor";
+import { shallow, mount } from "enzyme";
+import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText";
+
+const DEFAULT_PROPS = {
+ url: "about:robots",
+ title: "title",
+ App: {
+ isForStartupCache: false,
+ },
+ DiscoveryStream: INITIAL_STATE.DiscoveryStream,
+};
+
+describe("<DSCard>", () => {
+ let wrapper;
+ let sandbox;
+ let dispatch;
+
+ beforeEach(() => {
+ sandbox = sinon.createSandbox();
+ dispatch = sandbox.stub();
+ wrapper = shallow(<DSCard dispatch={dispatch} {...DEFAULT_PROPS} />);
+ wrapper.setState({ isSeen: true });
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should render", () => {
+ assert.ok(wrapper.exists());
+ assert.ok(wrapper.find(".ds-card"));
+ });
+
+ it("should render a SafeAnchor", () => {
+ wrapper.setProps({ url: "https://foo.com" });
+
+ assert.equal(wrapper.children().at(0).type(), SafeAnchor);
+ assert.propertyVal(
+ wrapper.children().at(0).props(),
+ "url",
+ "https://foo.com"
+ );
+ });
+
+ it("should pass onLinkClick prop", () => {
+ assert.propertyVal(
+ wrapper.children().at(0).props(),
+ "onLinkClick",
+ wrapper.instance().onLinkClick
+ );
+ });
+
+ it("should render DSLinkMenu", () => {
+ assert.equal(wrapper.children().at(1).type(), DSLinkMenu);
+ });
+
+ it("should start with no .active class", () => {
+ assert.equal(wrapper.find(".active").length, 0);
+ });
+
+ it("should render badges for pocket, bookmark when not a spoc element ", () => {
+ wrapper = mount(<DSCard context_type="bookmark" {...DEFAULT_PROPS} />);
+ wrapper.setState({ isSeen: true });
+ const contextFooter = wrapper.find(DSContextFooter);
+
+ assert.lengthOf(contextFooter.find(StatusMessage), 1);
+ });
+
+ it("should render Sponsored Context for a spoc element", () => {
+ const context = "Sponsored by Foo";
+ wrapper = mount(
+ <DSCard context_type="bookmark" context={context} {...DEFAULT_PROPS} />
+ );
+ wrapper.setState({ isSeen: true });
+ const contextFooter = wrapper.find(DSContextFooter);
+
+ assert.lengthOf(contextFooter.find(StatusMessage), 0);
+ assert.equal(contextFooter.find(".story-sponsored-label").text(), context);
+ });
+
+ it("should render time to read", () => {
+ const discoveryStream = {
+ ...INITIAL_STATE.DiscoveryStream,
+ readTime: true,
+ };
+ wrapper = mount(
+ <DSCard
+ time_to_read={4}
+ {...DEFAULT_PROPS}
+ DiscoveryStream={discoveryStream}
+ />
+ );
+ wrapper.setState({ isSeen: true });
+ const defaultMeta = wrapper.find(DefaultMeta);
+ assert.lengthOf(defaultMeta, 1);
+ assert.equal(defaultMeta.props().timeToRead, 4);
+ });
+
+ it("should not show save to pocket button for spocs", () => {
+ wrapper.setProps({
+ id: "fooidx",
+ pos: 1,
+ type: "foo",
+ flightId: 12345,
+ saveToPocketCard: true,
+ });
+
+ let stpButton = wrapper.find(".card-stp-button");
+
+ assert.lengthOf(stpButton, 0);
+ });
+
+ it("should show save to pocket button for non-spocs", () => {
+ wrapper.setProps({
+ id: "fooidx",
+ pos: 1,
+ type: "foo",
+ saveToPocketCard: true,
+ });
+
+ let stpButton = wrapper.find(".card-stp-button");
+
+ assert.lengthOf(stpButton, 1);
+ });
+
+ describe("onLinkClick", () => {
+ let fakeWindow;
+
+ beforeEach(() => {
+ fakeWindow = {
+ requestIdleCallback: sinon.stub().returns(1),
+ cancelIdleCallback: sinon.stub(),
+ innerWidth: 1000,
+ innerHeight: 900,
+ };
+ wrapper = mount(
+ <DSCard {...DEFAULT_PROPS} dispatch={dispatch} windowObj={fakeWindow} />
+ );
+ });
+
+ it("should call dispatch with the correct events", () => {
+ wrapper.setProps({ id: "fooidx", pos: 1, type: "foo" });
+
+ wrapper.instance().onLinkClick();
+
+ assert.calledTwice(dispatch);
+ assert.calledWith(
+ dispatch,
+ ac.DiscoveryStreamUserEvent({
+ event: "CLICK",
+ source: "FOO",
+ action_position: 1,
+ value: {
+ card_type: "organic",
+ recommendation_id: undefined,
+ tile_id: "fooidx",
+ },
+ })
+ );
+ assert.calledWith(
+ dispatch,
+ ac.ImpressionStats({
+ click: 0,
+ source: "FOO",
+ tiles: [
+ {
+ id: "fooidx",
+ pos: 1,
+ type: "organic",
+ recommendation_id: undefined,
+ },
+ ],
+ window_inner_width: 1000,
+ window_inner_height: 900,
+ })
+ );
+ });
+
+ it("should set the right card_type on spocs", () => {
+ wrapper.setProps({ id: "fooidx", pos: 1, type: "foo", flightId: 12345 });
+
+ wrapper.instance().onLinkClick();
+
+ assert.calledTwice(dispatch);
+ assert.calledWith(
+ dispatch,
+ ac.DiscoveryStreamUserEvent({
+ event: "CLICK",
+ source: "FOO",
+ action_position: 1,
+ value: {
+ card_type: "spoc",
+ recommendation_id: undefined,
+ tile_id: "fooidx",
+ },
+ })
+ );
+ assert.calledWith(
+ dispatch,
+ ac.ImpressionStats({
+ click: 0,
+ source: "FOO",
+ tiles: [
+ {
+ id: "fooidx",
+ pos: 1,
+ type: "spoc",
+ recommendation_id: undefined,
+ },
+ ],
+ window_inner_width: 1000,
+ window_inner_height: 900,
+ })
+ );
+ });
+
+ it("should call dispatch with a shim", () => {
+ wrapper.setProps({
+ id: "fooidx",
+ pos: 1,
+ type: "foo",
+ shim: {
+ click: "click shim",
+ },
+ });
+
+ wrapper.instance().onLinkClick();
+
+ assert.calledTwice(dispatch);
+ assert.calledWith(
+ dispatch,
+ ac.DiscoveryStreamUserEvent({
+ event: "CLICK",
+ source: "FOO",
+ action_position: 1,
+ value: {
+ card_type: "organic",
+ recommendation_id: undefined,
+ tile_id: "fooidx",
+ shim: "click shim",
+ },
+ })
+ );
+ assert.calledWith(
+ dispatch,
+ ac.ImpressionStats({
+ click: 0,
+ source: "FOO",
+ tiles: [
+ {
+ id: "fooidx",
+ pos: 1,
+ shim: "click shim",
+ type: "organic",
+ recommendation_id: undefined,
+ },
+ ],
+ window_inner_width: 1000,
+ window_inner_height: 900,
+ })
+ );
+ });
+ });
+
+ describe("DSCard with CTA", () => {
+ beforeEach(() => {
+ wrapper = mount(<DSCard {...DEFAULT_PROPS} />);
+ wrapper.setState({ isSeen: true });
+ });
+
+ it("should render Default Meta", () => {
+ const default_meta = wrapper.find(DefaultMeta);
+ assert.ok(default_meta.exists());
+ });
+ });
+
+ describe("DSCard with Intersection Observer", () => {
+ beforeEach(() => {
+ wrapper = shallow(<DSCard {...DEFAULT_PROPS} />);
+ });
+
+ it("should render card when seen", () => {
+ let card = wrapper.find("div.ds-card.placeholder");
+ assert.lengthOf(card, 1);
+
+ wrapper.instance().observer = {
+ unobserve: sandbox.stub(),
+ };
+ wrapper.instance().placeholderElement = "element";
+
+ wrapper.instance().onSeen([
+ {
+ isIntersecting: true,
+ },
+ ]);
+
+ assert.isTrue(wrapper.instance().state.isSeen);
+ card = wrapper.find("div.ds-card.placeholder");
+ assert.lengthOf(card, 0);
+ assert.lengthOf(wrapper.find(SafeAnchor), 1);
+ assert.calledOnce(wrapper.instance().observer.unobserve);
+ assert.calledWith(wrapper.instance().observer.unobserve, "element");
+ });
+
+ it("should setup proper placholder ref for isSeen", () => {
+ wrapper.instance().setPlaceholderRef("element");
+ assert.equal(wrapper.instance().placeholderElement, "element");
+ });
+
+ it("should setup observer on componentDidMount", () => {
+ wrapper = mount(<DSCard {...DEFAULT_PROPS} />);
+ assert.isTrue(!!wrapper.instance().observer);
+ });
+ });
+
+ describe("DSCard with Idle Callback", () => {
+ let windowStub = {
+ requestIdleCallback: sinon.stub().returns(1),
+ cancelIdleCallback: sinon.stub(),
+ };
+ beforeEach(() => {
+ wrapper = shallow(<DSCard windowObj={windowStub} {...DEFAULT_PROPS} />);
+ });
+
+ it("should call requestIdleCallback on componentDidMount", () => {
+ assert.calledOnce(windowStub.requestIdleCallback);
+ });
+
+ it("should call cancelIdleCallback on componentWillUnmount", () => {
+ wrapper.instance().componentWillUnmount();
+ assert.calledOnce(windowStub.cancelIdleCallback);
+ });
+ });
+
+ describe("DSCard when rendered for about:home startup cache", () => {
+ beforeEach(() => {
+ const props = {
+ App: {
+ isForStartupCache: true,
+ },
+ DiscoveryStream: INITIAL_STATE.DiscoveryStream,
+ };
+ wrapper = mount(<DSCard {...props} />);
+ });
+
+ it("should be set as isSeen automatically", () => {
+ assert.isTrue(wrapper.instance().state.isSeen);
+ });
+ });
+
+ describe("DSCard onSaveClick", () => {
+ it("should fire telemetry for onSaveClick", () => {
+ wrapper.setProps({ id: "fooidx", pos: 1, type: "foo" });
+ wrapper.instance().onSaveClick();
+
+ assert.calledThrice(dispatch);
+ assert.calledWith(
+ dispatch,
+ ac.AlsoToMain({
+ type: at.SAVE_TO_POCKET,
+ data: { site: { url: "about:robots", title: "title" } },
+ })
+ );
+ assert.calledWith(
+ dispatch,
+ ac.DiscoveryStreamUserEvent({
+ event: "SAVE_TO_POCKET",
+ source: "CARDGRID_HOVER",
+ action_position: 1,
+ value: {
+ card_type: "organic",
+ recommendation_id: undefined,
+ tile_id: "fooidx",
+ },
+ })
+ );
+ assert.calledWith(
+ dispatch,
+ ac.ImpressionStats({
+ source: "CARDGRID_HOVER",
+ pocket: 0,
+ tiles: [
+ {
+ id: "fooidx",
+ pos: 1,
+ recommendation_id: undefined,
+ },
+ ],
+ })
+ );
+ });
+ });
+
+ describe("DSCard menu open states", () => {
+ let cardNode;
+ let fakeDocument;
+ let fakeWindow;
+
+ beforeEach(() => {
+ fakeDocument = { l10n: { translateFragment: sinon.stub() } };
+ fakeWindow = {
+ document: fakeDocument,
+ requestIdleCallback: sinon.stub().returns(1),
+ cancelIdleCallback: sinon.stub(),
+ };
+ wrapper = mount(<DSCard {...DEFAULT_PROPS} windowObj={fakeWindow} />);
+ wrapper.setState({ isSeen: true });
+ cardNode = wrapper.getDOMNode();
+ });
+
+ it("Should remove active on Menu Update", () => {
+ // Add active class name to DSCard wrapper
+ // to simulate menu open state
+ cardNode.classList.add("active");
+ assert.equal(
+ cardNode.className,
+ "ds-card ds-card-title-lines-3 ds-card-desc-lines-3 active"
+ );
+
+ wrapper.instance().onMenuUpdate(false);
+ wrapper.update();
+
+ assert.equal(
+ cardNode.className,
+ "ds-card ds-card-title-lines-3 ds-card-desc-lines-3"
+ );
+ });
+
+ it("Should add active on Menu Show", async () => {
+ await wrapper.instance().onMenuShow();
+ wrapper.update();
+ assert.equal(
+ cardNode.className,
+ "ds-card ds-card-title-lines-3 ds-card-desc-lines-3 active"
+ );
+ });
+
+ it("Should add last-item to support resized window", async () => {
+ fakeWindow.scrollMaxX = 20;
+ await wrapper.instance().onMenuShow();
+ wrapper.update();
+ assert.equal(
+ cardNode.className,
+ "ds-card ds-card-title-lines-3 ds-card-desc-lines-3 last-item active"
+ );
+ });
+
+ it("should remove .active and .last-item classes", () => {
+ const instance = wrapper.instance();
+ const remove = sinon.stub();
+ instance.contextMenuButtonHostElement = {
+ classList: { remove },
+ };
+ instance.onMenuUpdate();
+ assert.calledOnce(remove);
+ });
+
+ it("should add .active and .last-item classes", async () => {
+ const instance = wrapper.instance();
+ const add = sinon.stub();
+ instance.contextMenuButtonHostElement = {
+ classList: { add },
+ };
+ await instance.onMenuShow();
+ assert.calledOnce(add);
+ });
+ });
+});
+
+describe("<PlaceholderDSCard> component", () => {
+ it("should have placeholder prop", () => {
+ const wrapper = shallow(<PlaceholderDSCard />);
+ const placeholder = wrapper.prop("placeholder");
+ assert.isTrue(placeholder);
+ });
+
+ it("should contain placeholder div", () => {
+ const wrapper = shallow(<DSCard placeholder={true} {...DEFAULT_PROPS} />);
+ wrapper.setState({ isSeen: true });
+ const card = wrapper.find("div.ds-card.placeholder");
+ assert.lengthOf(card, 1);
+ });
+
+ it("should not be clickable", () => {
+ const wrapper = shallow(<DSCard placeholder={true} {...DEFAULT_PROPS} />);
+ wrapper.setState({ isSeen: true });
+ const anchor = wrapper.find("SafeAnchor.ds-card-link");
+ assert.lengthOf(anchor, 0);
+ });
+
+ it("should not have context menu", () => {
+ const wrapper = shallow(<DSCard placeholder={true} {...DEFAULT_PROPS} />);
+ wrapper.setState({ isSeen: true });
+ const linkMenu = wrapper.find(DSLinkMenu);
+ assert.lengthOf(linkMenu, 0);
+ });
+});
+
+describe("<DSSource> component", () => {
+ it("should return a default source without compact", () => {
+ const wrapper = shallow(<DSSource source="Mozilla" />);
+
+ let sourceElement = wrapper.find(".source");
+ assert.equal(sourceElement.text(), "Mozilla");
+ });
+ it("should return a default source with compact without a sponsor or time to read", () => {
+ const wrapper = shallow(<DSSource compact={true} source="Mozilla" />);
+
+ let sourceElement = wrapper.find(".source");
+ assert.equal(sourceElement.text(), "Mozilla");
+ });
+ it("should return a SponsorLabel with compact and a sponsor", () => {
+ const wrapper = shallow(
+ <DSSource newSponsoredLabel={true} sponsor="Mozilla" />
+ );
+ const sponsorLabel = wrapper.find(SponsorLabel);
+ assert.lengthOf(sponsorLabel, 1);
+ });
+ it("should return a time to read with compact and without a sponsor but with a time to read", () => {
+ const wrapper = shallow(
+ <DSSource compact={true} source="Mozilla" timeToRead="2000" />
+ );
+
+ let timeToRead = wrapper.find(".time-to-read");
+ assert.lengthOf(timeToRead, 1);
+
+ // Weirdly, we can test for the pressence of fluent, because time to read needs to be translated.
+ // This is also because we did a shallow render, that th contents of fluent would be empty anyway.
+ const fluentOrText = wrapper.find(FluentOrText);
+ assert.lengthOf(fluentOrText, 1);
+ });
+ it("should prioritize a SponsorLabel if for some reason it gets everything", () => {
+ const wrapper = shallow(
+ <DSSource
+ newSponsoredLabel={true}
+ sponsor="Mozilla"
+ source="Mozilla"
+ timeToRead="2000"
+ />
+ );
+ const sponsorLabel = wrapper.find(SponsorLabel);
+ assert.lengthOf(sponsorLabel, 1);
+ });
+});
+
+describe("readTimeFromWordCount function", () => {
+ it("should return proper read time", () => {
+ const result = readTimeFromWordCount(2000);
+ assert.equal(result, 10);
+ });
+ it("should return false with falsey word count", () => {
+ assert.isFalse(readTimeFromWordCount());
+ assert.isFalse(readTimeFromWordCount(0));
+ assert.isFalse(readTimeFromWordCount(""));
+ assert.isFalse(readTimeFromWordCount(null));
+ assert.isFalse(readTimeFromWordCount(undefined));
+ });
+ it("should return NaN with invalid word count", () => {
+ assert.isNaN(readTimeFromWordCount("zero"));
+ assert.isNaN(readTimeFromWordCount({}));
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSContextFooter.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSContextFooter.test.jsx
new file mode 100644
index 0000000000..08ac7868ce
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSContextFooter.test.jsx
@@ -0,0 +1,138 @@
+import {
+ DSContextFooter,
+ StatusMessage,
+ DSMessageFooter,
+} from "content-src/components/DiscoveryStreamComponents/DSContextFooter/DSContextFooter";
+import React from "react";
+import { mount } from "enzyme";
+import { cardContextTypes } from "content-src/components/Card/types.js";
+import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText.jsx";
+
+describe("<DSContextFooter>", () => {
+ let wrapper;
+ let sandbox;
+ const bookmarkBadge = "bookmark";
+ const removeBookmarkBadge = "removedBookmark";
+ const context = "Sponsored by Babel";
+ const sponsored_by_override = "Sponsored override";
+ const engagement = "Popular";
+
+ beforeEach(() => {
+ wrapper = mount(<DSContextFooter />);
+ sandbox = sinon.createSandbox();
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should render", () => assert.isTrue(wrapper.exists()));
+ it("should not render an engagement status if display_engagement_labels is false", () => {
+ wrapper = mount(
+ <DSContextFooter
+ display_engagement_labels={false}
+ engagement={engagement}
+ />
+ );
+
+ const engagementLabel = wrapper.find(".story-view-count");
+ assert.equal(engagementLabel.length, 0);
+ });
+ it("should render a badge if a proper badge prop is passed", () => {
+ wrapper = mount(
+ <DSContextFooter context_type={bookmarkBadge} engagement={engagement} />
+ );
+ const { fluentID } = cardContextTypes[bookmarkBadge];
+
+ assert.lengthOf(wrapper.find(".story-view-count"), 0);
+ const statusLabel = wrapper.find(".story-context-label");
+ assert.equal(statusLabel.prop("data-l10n-id"), fluentID);
+ });
+ it("should only render a sponsored context if pass a sponsored context", async () => {
+ wrapper = mount(
+ <DSContextFooter
+ context_type={bookmarkBadge}
+ context={context}
+ engagement={engagement}
+ />
+ );
+
+ assert.lengthOf(wrapper.find(".story-view-count"), 0);
+ assert.lengthOf(wrapper.find(StatusMessage), 0);
+ assert.equal(wrapper.find(".story-sponsored-label").text(), context);
+ });
+ it("should render a sponsored_by_override if passed a sponsored_by_override", async () => {
+ wrapper = mount(
+ <DSContextFooter
+ context_type={bookmarkBadge}
+ context={context}
+ sponsored_by_override={sponsored_by_override}
+ engagement={engagement}
+ />
+ );
+
+ assert.equal(
+ wrapper.find(".story-sponsored-label").text(),
+ sponsored_by_override
+ );
+ });
+ it("should render nothing with a sponsored_by_override empty string", async () => {
+ wrapper = mount(
+ <DSContextFooter
+ context_type={bookmarkBadge}
+ context={context}
+ sponsored_by_override=""
+ engagement={engagement}
+ />
+ );
+
+ assert.isFalse(wrapper.find(".story-sponsored-label").exists());
+ });
+ it("should render localized string with sponsor with no sponsored_by_override", async () => {
+ wrapper = mount(
+ <DSContextFooter
+ context_type={bookmarkBadge}
+ context={context}
+ sponsor="Nimoy"
+ engagement={engagement}
+ />
+ );
+
+ assert.equal(
+ wrapper.find(".story-sponsored-label").children().at(0).type(),
+ FluentOrText
+ );
+ });
+ it("should render a new badge if props change from an old badge to a new one", async () => {
+ wrapper = mount(<DSContextFooter context_type={bookmarkBadge} />);
+
+ const { fluentID: bookmarkFluentID } = cardContextTypes[bookmarkBadge];
+ const bookmarkStatusMessage = wrapper.find(
+ `div[data-l10n-id='${bookmarkFluentID}']`
+ );
+ assert.isTrue(bookmarkStatusMessage.exists());
+
+ const { fluentID: removeBookmarkFluentID } =
+ cardContextTypes[removeBookmarkBadge];
+
+ wrapper.setProps({ context_type: removeBookmarkBadge });
+ await wrapper.update();
+
+ assert.isEmpty(bookmarkStatusMessage);
+ const removedBookmarkStatusMessage = wrapper.find(
+ `div[data-l10n-id='${removeBookmarkFluentID}']`
+ );
+ assert.isTrue(removedBookmarkStatusMessage.exists());
+ });
+ it("should render a story footer", () => {
+ wrapper = mount(
+ <DSMessageFooter
+ context_type={bookmarkBadge}
+ engagement={engagement}
+ display_engagement_labels={true}
+ />
+ );
+
+ assert.lengthOf(wrapper.find(".story-footer"), 1);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSDismiss.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSDismiss.test.jsx
new file mode 100644
index 0000000000..2f7e206b4f
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSDismiss.test.jsx
@@ -0,0 +1,51 @@
+import { DSDismiss } from "content-src/components/DiscoveryStreamComponents/DSDismiss/DSDismiss";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<DSDismiss>", () => {
+ const fakeSpoc = {
+ url: "https://foo.com",
+ guid: "1234",
+ };
+ let wrapper;
+ let sandbox;
+ let onDismissClickStub;
+
+ beforeEach(() => {
+ sandbox = sinon.createSandbox();
+ onDismissClickStub = sandbox.stub();
+ wrapper = shallow(
+ <DSDismiss
+ data={fakeSpoc}
+ onDismissClick={onDismissClickStub}
+ shouldSendImpressionStats={true}
+ />
+ );
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should render", () => {
+ assert.ok(wrapper.exists());
+ assert.ok(wrapper.find(".ds-dismiss").exists());
+ });
+
+ it("should render proper hover state", () => {
+ wrapper.instance().onHover();
+ assert.ok(wrapper.find(".hovering").exists());
+ wrapper.instance().offHover();
+ assert.ok(!wrapper.find(".hovering").exists());
+ });
+
+ it("should dispatch call onDismissClick", () => {
+ wrapper.instance().onDismissClick();
+ assert.calledOnce(onDismissClickStub);
+ });
+
+ it("should add extra classes", () => {
+ wrapper = shallow(<DSDismiss extraClasses="extra-class" />);
+ assert.ok(wrapper.find(".extra-class").exists());
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSEmptyState.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSEmptyState.test.jsx
new file mode 100644
index 0000000000..6aa8045299
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSEmptyState.test.jsx
@@ -0,0 +1,73 @@
+import { DSEmptyState } from "content-src/components/DiscoveryStreamComponents/DSEmptyState/DSEmptyState";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<DSEmptyState>", () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = shallow(<DSEmptyState />);
+ });
+
+ it("should render", () => {
+ assert.ok(wrapper.exists());
+ assert.ok(wrapper.find(".section-empty-state").exists());
+ });
+
+ it("should render defaultempty state message", () => {
+ assert.ok(wrapper.find(".empty-state-message").exists());
+ const header = wrapper.find(
+ "h2[data-l10n-id='newtab-discovery-empty-section-topstories-header']"
+ );
+ const paragraph = wrapper.find(
+ "p[data-l10n-id='newtab-discovery-empty-section-topstories-content']"
+ );
+
+ assert.ok(header.exists());
+ assert.ok(paragraph.exists());
+ });
+
+ it("should render failed state message", () => {
+ wrapper = shallow(<DSEmptyState status="failed" />);
+ const button = wrapper.find(
+ "button[data-l10n-id='newtab-discovery-empty-section-topstories-try-again-button']"
+ );
+
+ assert.ok(button.exists());
+ });
+
+ it("should render waiting state message", () => {
+ wrapper = shallow(<DSEmptyState status="waiting" />);
+ const button = wrapper.find(
+ "button[data-l10n-id='newtab-discovery-empty-section-topstories-loading']"
+ );
+
+ assert.ok(button.exists());
+ });
+
+ it("should dispatch DISCOVERY_STREAM_RETRY_FEED on failed state button click", () => {
+ const dispatch = sinon.spy();
+
+ wrapper = shallow(
+ <DSEmptyState
+ status="failed"
+ dispatch={dispatch}
+ feed={{ url: "https://foo.com", data: {} }}
+ />
+ );
+ wrapper.find("button.try-again-button").simulate("click");
+
+ assert.calledTwice(dispatch);
+ let [action] = dispatch.firstCall.args;
+ assert.equal(action.type, "DISCOVERY_STREAM_FEED_UPDATE");
+ assert.deepEqual(action.data.feed, {
+ url: "https://foo.com",
+ data: { status: "waiting" },
+ });
+
+ [action] = dispatch.secondCall.args;
+
+ assert.equal(action.type, "DISCOVERY_STREAM_RETRY_FEED");
+ assert.deepEqual(action.data.feed, { url: "https://foo.com", data: {} });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSImage.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSImage.test.jsx
new file mode 100644
index 0000000000..bb2ce3b0b3
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSImage.test.jsx
@@ -0,0 +1,146 @@
+import { DSImage } from "content-src/components/DiscoveryStreamComponents/DSImage/DSImage";
+import { mount } from "enzyme";
+import React from "react";
+
+describe("Discovery Stream <DSImage>", () => {
+ it("should have a child with class ds-image", () => {
+ const img = mount(<DSImage />);
+ const child = img.find(".ds-image");
+
+ assert.lengthOf(child, 1);
+ });
+
+ it("should set proper sources if only `source` is available", () => {
+ const img = mount(<DSImage source="https://placekitten.com/g/640/480" />);
+
+ assert.equal(
+ img.find("img").prop("src"),
+ "https://placekitten.com/g/640/480"
+ );
+ });
+
+ it("should set proper sources if `rawSource` is available", () => {
+ const testSizes = [
+ {
+ mediaMatcher: "(min-width: 1122px)",
+ width: 296,
+ height: 148,
+ },
+
+ {
+ mediaMatcher: "(min-width: 866px)",
+ width: 218,
+ height: 109,
+ },
+
+ {
+ mediaMatcher: "(max-width: 610px)",
+ width: 202,
+ height: 101,
+ },
+ ];
+
+ const img = mount(
+ <DSImage
+ rawSource="https://placekitten.com/g/640/480"
+ sizes={testSizes}
+ />
+ );
+
+ assert.equal(
+ img.find("img").prop("src"),
+ "https://placekitten.com/g/640/480"
+ );
+ assert.equal(
+ img.find("img").prop("srcSet"),
+ [
+ "https://img-getpocket.cdn.mozilla.net/296x148/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fplacekitten.com%2Fg%2F640%2F480 296w",
+ "https://img-getpocket.cdn.mozilla.net/592x296/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fplacekitten.com%2Fg%2F640%2F480 592w",
+ "https://img-getpocket.cdn.mozilla.net/218x109/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fplacekitten.com%2Fg%2F640%2F480 218w",
+ "https://img-getpocket.cdn.mozilla.net/436x218/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fplacekitten.com%2Fg%2F640%2F480 436w",
+ "https://img-getpocket.cdn.mozilla.net/202x101/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fplacekitten.com%2Fg%2F640%2F480 202w",
+ "https://img-getpocket.cdn.mozilla.net/404x202/filters:format(jpeg):quality(60):no_upscale():strip_exif()/https%3A%2F%2Fplacekitten.com%2Fg%2F640%2F480 404w",
+ ].join(",")
+ );
+ });
+
+ it("should fall back to unoptimized when optimized failed", () => {
+ const img = mount(
+ <DSImage
+ source="https://placekitten.com/g/640/480"
+ rawSource="https://placekitten.com/g/640/480"
+ />
+ );
+ img.setState({
+ isSeen: true,
+ containerWidth: 640,
+ containerHeight: 480,
+ });
+
+ img.instance().onOptimizedImageError();
+ img.update();
+
+ assert.equal(
+ img.find("img").prop("src"),
+ "https://placekitten.com/g/640/480"
+ );
+ });
+
+ it("should render a placeholder image with no source and recent save", () => {
+ const img = mount(<DSImage isRecentSave={true} url="foo" title="bar" />);
+ img.setState({ isSeen: true });
+
+ img.update();
+
+ assert.equal(img.find("div").prop("className"), "placeholder-image");
+ });
+
+ it("should render a broken image with a source and a recent save", () => {
+ const img = mount(<DSImage isRecentSave={true} source="foo" />);
+ img.setState({ isSeen: true });
+
+ img.instance().onNonOptimizedImageError();
+ img.update();
+
+ assert.equal(img.find("div").prop("className"), "broken-image");
+ });
+
+ it("should render a broken image without a source and not a recent save", () => {
+ const img = mount(<DSImage isRecentSave={false} />);
+ img.setState({ isSeen: true });
+
+ img.instance().onNonOptimizedImageError();
+ img.update();
+
+ assert.equal(img.find("div").prop("className"), "broken-image");
+ });
+
+ it("should update loaded state when seen", () => {
+ const img = mount(
+ <DSImage rawSource="https://placekitten.com/g/640/480" />
+ );
+
+ img.instance().onLoad();
+ assert.propertyVal(img.state(), "isLoaded", true);
+ });
+
+ describe("DSImage with Idle Callback", () => {
+ let wrapper;
+ let windowStub = {
+ requestIdleCallback: sinon.stub().returns(1),
+ cancelIdleCallback: sinon.stub(),
+ };
+ beforeEach(() => {
+ wrapper = mount(<DSImage windowObj={windowStub} />);
+ });
+
+ it("should call requestIdleCallback on componentDidMount", () => {
+ assert.calledOnce(windowStub.requestIdleCallback);
+ });
+
+ it("should call cancelIdleCallback on componentWillUnmount", () => {
+ wrapper.instance().componentWillUnmount();
+ assert.calledOnce(windowStub.cancelIdleCallback);
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSLinkMenu.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSLinkMenu.test.jsx
new file mode 100644
index 0000000000..3aa128a32a
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSLinkMenu.test.jsx
@@ -0,0 +1,151 @@
+import { mount, shallow } from "enzyme";
+import { DSLinkMenu } from "content-src/components/DiscoveryStreamComponents/DSLinkMenu/DSLinkMenu";
+import { ContextMenuButton } from "content-src/components/ContextMenu/ContextMenuButton";
+import { LinkMenu } from "content-src/components/LinkMenu/LinkMenu";
+import React from "react";
+
+describe("<DSLinkMenu>", () => {
+ let wrapper;
+
+ describe("DS link menu actions", () => {
+ beforeEach(() => {
+ wrapper = mount(<DSLinkMenu />);
+ });
+
+ afterEach(() => {
+ wrapper.unmount();
+ });
+
+ it("should parse args for fluent correctly ", () => {
+ const title = '"fluent"';
+ wrapper = mount(<DSLinkMenu title={title} />);
+
+ const button = wrapper.find(
+ "button[data-l10n-id='newtab-menu-content-tooltip']"
+ );
+ assert.equal(button.prop("data-l10n-args"), JSON.stringify({ title }));
+ });
+ });
+
+ describe("DS context menu options", () => {
+ const ValidDSLinkMenuProps = {
+ site: {},
+ pocket_button_enabled: true,
+ };
+
+ beforeEach(() => {
+ wrapper = shallow(<DSLinkMenu {...ValidDSLinkMenuProps} />);
+ });
+
+ it("should render a context menu button", () => {
+ assert.ok(wrapper.exists());
+ assert.ok(
+ wrapper.find(ContextMenuButton).exists(),
+ "context menu button exists"
+ );
+ });
+
+ it("should render LinkMenu when context menu button is clicked", () => {
+ let button = wrapper.find(ContextMenuButton);
+ button.simulate("click", { preventDefault: () => {} });
+ assert.equal(wrapper.find(LinkMenu).length, 1);
+ });
+
+ it("should pass dispatch, onShow, site, options, shouldSendImpressionStats, source and index to LinkMenu", () => {
+ wrapper
+ .find(ContextMenuButton)
+ .simulate("click", { preventDefault: () => {} });
+ const linkMenuProps = wrapper.find(LinkMenu).props();
+ [
+ "dispatch",
+ "onShow",
+ "site",
+ "index",
+ "options",
+ "source",
+ "shouldSendImpressionStats",
+ ].forEach(prop => assert.property(linkMenuProps, prop));
+ });
+
+ it("should pass through the correct menu options to LinkMenu", () => {
+ wrapper
+ .find(ContextMenuButton)
+ .simulate("click", { preventDefault: () => {} });
+ const linkMenuProps = wrapper.find(LinkMenu).props();
+ assert.deepEqual(linkMenuProps.options, [
+ "CheckBookmark",
+ "CheckArchiveFromPocket",
+ "CheckSavedToPocket",
+ "Separator",
+ "OpenInNewWindow",
+ "OpenInPrivateWindow",
+ "Separator",
+ "BlockUrl",
+ ]);
+ });
+
+ it("should pass through the correct menu options to LinkMenu for spocs", () => {
+ wrapper = shallow(
+ <DSLinkMenu
+ {...ValidDSLinkMenuProps}
+ flightId="1234"
+ showPrivacyInfo={true}
+ />
+ );
+ wrapper
+ .find(ContextMenuButton)
+ .simulate("click", { preventDefault: () => {} });
+ const linkMenuProps = wrapper.find(LinkMenu).props();
+ assert.deepEqual(linkMenuProps.options, [
+ "CheckBookmark",
+ "CheckArchiveFromPocket",
+ "CheckSavedToPocket",
+ "Separator",
+ "OpenInNewWindow",
+ "OpenInPrivateWindow",
+ "Separator",
+ "BlockUrl",
+ "ShowPrivacyInfo",
+ ]);
+ });
+
+ it("should pass through the correct menu options to LinkMenu for save to Pocket button", () => {
+ wrapper = shallow(
+ <DSLinkMenu {...ValidDSLinkMenuProps} saveToPocketCard={true} />
+ );
+ wrapper
+ .find(ContextMenuButton)
+ .simulate("click", { preventDefault: () => {} });
+ const linkMenuProps = wrapper.find(LinkMenu).props();
+ assert.deepEqual(linkMenuProps.options, [
+ "CheckBookmark",
+ "CheckArchiveFromPocket",
+ "CheckDeleteFromPocket",
+ "Separator",
+ "OpenInNewWindow",
+ "OpenInPrivateWindow",
+ "Separator",
+ "BlockUrl",
+ ]);
+ });
+
+ it("should pass through the correct menu options to LinkMenu if Pocket is disabled", () => {
+ wrapper = shallow(
+ <DSLinkMenu {...ValidDSLinkMenuProps} pocket_button_enabled={false} />
+ );
+ wrapper
+ .find(ContextMenuButton)
+ .simulate("click", { preventDefault: () => {} });
+ const linkMenuProps = wrapper.find(LinkMenu).props();
+ assert.deepEqual(linkMenuProps.options, [
+ "CheckBookmark",
+ "CheckArchiveFromPocket",
+ "Separator",
+ "OpenInNewWindow",
+ "OpenInPrivateWindow",
+ "Separator",
+ "BlockUrl",
+ ]);
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSMessage.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSMessage.test.jsx
new file mode 100644
index 0000000000..7d9f13cc8a
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSMessage.test.jsx
@@ -0,0 +1,57 @@
+import { DSMessage } from "content-src/components/DiscoveryStreamComponents/DSMessage/DSMessage";
+import React from "react";
+import { SafeAnchor } from "content-src/components/DiscoveryStreamComponents/SafeAnchor/SafeAnchor";
+import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText";
+import { mount } from "enzyme";
+
+describe("<DSMessage>", () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = mount(<DSMessage />);
+ });
+
+ it("should render", () => {
+ assert.ok(wrapper.exists());
+ assert.ok(wrapper.find(".ds-message").exists());
+ });
+
+ it("should render an icon", () => {
+ wrapper.setProps({ icon: "foo" });
+
+ assert.ok(wrapper.find(".glyph").exists());
+ assert.propertyVal(
+ wrapper.find(".glyph").props().style,
+ "backgroundImage",
+ `url(foo)`
+ );
+ });
+
+ it("should render a title", () => {
+ wrapper.setProps({ title: "foo" });
+
+ assert.ok(wrapper.find(".title-text").exists());
+ assert.equal(wrapper.find(".title-text").text(), "foo");
+ });
+
+ it("should render a SafeAnchor", () => {
+ wrapper.setProps({ link_text: "foo", link_url: "https://foo.com" });
+
+ assert.equal(wrapper.find(".title").children().at(0).type(), SafeAnchor);
+ });
+
+ it("should render a FluentOrText", () => {
+ wrapper.setProps({
+ link_text: "link_text",
+ title: "title",
+ link_url: "https://link_url.com",
+ });
+
+ assert.equal(
+ wrapper.find(".title-text").children().at(0).type(),
+ FluentOrText
+ );
+
+ assert.equal(wrapper.find(".link a").children().at(0).type(), FluentOrText);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSPrivacyModal.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSPrivacyModal.test.jsx
new file mode 100644
index 0000000000..b4b743c7ff
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSPrivacyModal.test.jsx
@@ -0,0 +1,50 @@
+import { DSPrivacyModal } from "content-src/components/DiscoveryStreamComponents/DSPrivacyModal/DSPrivacyModal";
+import { shallow, mount } from "enzyme";
+import { actionCreators as ac } from "common/Actions.sys.mjs";
+import React from "react";
+
+describe("Discovery Stream <DSPrivacyModal>", () => {
+ let sandbox;
+ let dispatch;
+ let wrapper;
+ beforeEach(() => {
+ sandbox = sinon.createSandbox();
+ dispatch = sandbox.stub();
+ wrapper = shallow(<DSPrivacyModal dispatch={dispatch} />);
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should contain a privacy notice", () => {
+ const modal = mount(<DSPrivacyModal />);
+ const child = modal.find(".privacy-notice");
+
+ assert.lengthOf(child, 1);
+ });
+
+ it("should call dispatch when modal is closed", () => {
+ wrapper.instance().closeModal();
+ assert.calledOnce(dispatch);
+ });
+
+ it("should call dispatch with the correct events for onLearnLinkClick", () => {
+ wrapper.instance().onLearnLinkClick();
+
+ assert.calledOnce(dispatch);
+ assert.calledWith(
+ dispatch,
+ ac.DiscoveryStreamUserEvent({
+ event: "CLICK_PRIVACY_INFO",
+ source: "DS_PRIVACY_MODAL",
+ })
+ );
+ });
+
+ it("should call dispatch with the correct events for onManageLinkClick", () => {
+ wrapper.instance().onManageLinkClick();
+
+ assert.calledOnce(dispatch);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSSignup.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSSignup.test.jsx
new file mode 100644
index 0000000000..904f98e439
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSSignup.test.jsx
@@ -0,0 +1,92 @@
+import { DSSignup } from "content-src/components/DiscoveryStreamComponents/DSSignup/DSSignup";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<DSSignup>", () => {
+ let wrapper;
+ let sandbox;
+ let dispatchStub;
+
+ beforeEach(() => {
+ sandbox = sinon.createSandbox();
+ dispatchStub = sandbox.stub();
+ wrapper = shallow(
+ <DSSignup
+ data={{
+ spocs: [
+ {
+ shim: { impression: "1234" },
+ id: "1234",
+ },
+ ],
+ }}
+ type="SIGNUP"
+ dispatch={dispatchStub}
+ />
+ );
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should render", () => {
+ assert.ok(wrapper.exists());
+ assert.ok(wrapper.find(".ds-signup").exists());
+ });
+
+ it("should dispatch a click event on click", () => {
+ wrapper.instance().onLinkClick();
+
+ assert.calledTwice(dispatchStub);
+ assert.deepEqual(dispatchStub.firstCall.args[0].data, {
+ event: "CLICK",
+ source: "SIGNUP",
+ action_position: 0,
+ });
+ assert.deepEqual(dispatchStub.secondCall.args[0].data, {
+ source: "SIGNUP",
+ click: 0,
+ tiles: [{ id: "1234", pos: 0 }],
+ });
+ });
+
+ it("Should remove active on Menu Update", () => {
+ wrapper.setState = sandbox.stub();
+ wrapper.instance().onMenuButtonUpdate(false);
+ assert.calledWith(wrapper.setState, { active: false, lastItem: false });
+ });
+
+ it("Should add active on Menu Show", async () => {
+ wrapper.setState = sandbox.stub();
+ wrapper.instance().nextAnimationFrame = () => {};
+ await wrapper.instance().onMenuShow();
+ assert.calledWith(wrapper.setState, { active: true, lastItem: false });
+ });
+
+ it("Should add last-item to support resized window", async () => {
+ const fakeWindow = { scrollMaxX: "20" };
+ wrapper = shallow(<DSSignup windowObj={fakeWindow} />);
+ wrapper.setState = sandbox.stub();
+ wrapper.instance().nextAnimationFrame = () => {};
+ await wrapper.instance().onMenuShow();
+ assert.calledWith(wrapper.setState, { active: true, lastItem: true });
+ });
+
+ it("Should add last-item and active classes", () => {
+ wrapper.setState({
+ active: true,
+ lastItem: true,
+ });
+ assert.ok(wrapper.find(".last-item").exists());
+ assert.ok(wrapper.find(".active").exists());
+ });
+
+ it("Should call rAF from nextAnimationFrame", () => {
+ const fakeWindow = { requestAnimationFrame: sinon.stub() };
+ wrapper = shallow(<DSSignup windowObj={fakeWindow} />);
+
+ wrapper.instance().nextAnimationFrame();
+ assert.calledOnce(fakeWindow.requestAnimationFrame);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSTextPromo.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSTextPromo.test.jsx
new file mode 100644
index 0000000000..0748ff701a
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/DSTextPromo.test.jsx
@@ -0,0 +1,96 @@
+import { DSTextPromo } from "content-src/components/DiscoveryStreamComponents/DSTextPromo/DSTextPromo";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<DSTextPromo>", () => {
+ let wrapper;
+ let sandbox;
+ let dispatchStub;
+
+ beforeEach(() => {
+ sandbox = sinon.createSandbox();
+ dispatchStub = sandbox.stub();
+ wrapper = shallow(
+ <DSTextPromo
+ data={{
+ spocs: [
+ {
+ shim: { impression: "1234" },
+ id: "1234",
+ },
+ ],
+ }}
+ type="TEXTPROMO"
+ dispatch={dispatchStub}
+ />
+ );
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should render", () => {
+ assert.ok(wrapper.exists());
+ assert.ok(wrapper.find(".ds-text-promo").exists());
+ });
+
+ it("should render a header", () => {
+ wrapper.setProps({ header: "foo" });
+ assert.ok(wrapper.find(".text").exists());
+ });
+
+ it("should render a subtitle", () => {
+ wrapper.setProps({ subtitle: "foo" });
+ assert.ok(wrapper.find(".subtitle").exists());
+ });
+
+ it("should dispatch a click event on click", () => {
+ wrapper.instance().onLinkClick();
+
+ assert.calledTwice(dispatchStub);
+ assert.deepEqual(dispatchStub.firstCall.args[0].data, {
+ event: "CLICK",
+ source: "TEXTPROMO",
+ action_position: 0,
+ });
+ assert.deepEqual(dispatchStub.secondCall.args[0].data, {
+ source: "TEXTPROMO",
+ click: 0,
+ tiles: [{ id: "1234", pos: 0 }],
+ });
+ });
+
+ it("should dispath telemety events on dismiss", () => {
+ wrapper.instance().onDismissClick();
+
+ const firstCall = dispatchStub.getCall(0);
+ const secondCall = dispatchStub.getCall(1);
+ const thirdCall = dispatchStub.getCall(2);
+
+ assert.equal(firstCall.args[0].type, "BLOCK_URL");
+ assert.deepEqual(firstCall.args[0].data, [
+ {
+ url: undefined,
+ pocket_id: undefined,
+ isSponsoredTopSite: undefined,
+ position: 0,
+ is_pocket_card: false,
+ },
+ ]);
+
+ assert.equal(secondCall.args[0].type, "DISCOVERY_STREAM_USER_EVENT");
+ assert.deepEqual(secondCall.args[0].data, {
+ event: "BLOCK",
+ source: "TEXTPROMO",
+ action_position: 0,
+ });
+
+ assert.equal(thirdCall.args[0].type, "TELEMETRY_IMPRESSION_STATS");
+ assert.deepEqual(thirdCall.args[0].data, {
+ source: "TEXTPROMO",
+ block: 0,
+ tiles: [{ id: "1234", pos: 0 }],
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/Highlights.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/Highlights.test.jsx
new file mode 100644
index 0000000000..d8c16d8e71
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/Highlights.test.jsx
@@ -0,0 +1,41 @@
+import { combineReducers, createStore } from "redux";
+import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs";
+import { Highlights } from "content-src/components/DiscoveryStreamComponents/Highlights/Highlights";
+import { mount } from "enzyme";
+import { Provider } from "react-redux";
+import React from "react";
+
+describe("Discovery Stream <Highlights>", () => {
+ let wrapper;
+
+ afterEach(() => {
+ wrapper.unmount();
+ });
+
+ it("should render nothing with no highlights data", () => {
+ const store = createStore(combineReducers(reducers), { ...INITIAL_STATE });
+
+ wrapper = mount(
+ <Provider store={store}>
+ <Highlights />
+ </Provider>
+ );
+
+ assert.ok(wrapper.isEmptyRender());
+ });
+
+ it("should render highlights", () => {
+ const store = createStore(combineReducers(reducers), {
+ ...INITIAL_STATE,
+ Sections: [{ id: "highlights", enabled: true }],
+ });
+
+ wrapper = mount(
+ <Provider store={store}>
+ <Highlights />
+ </Provider>
+ );
+
+ assert.lengthOf(wrapper.find(".ds-highlights"), 1);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/HorizontalRule.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/HorizontalRule.test.jsx
new file mode 100644
index 0000000000..03538df6f2
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/HorizontalRule.test.jsx
@@ -0,0 +1,16 @@
+import { HorizontalRule } from "content-src/components/DiscoveryStreamComponents/HorizontalRule/HorizontalRule";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<HorizontalRule>", () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = shallow(<HorizontalRule />);
+ });
+
+ it("should render", () => {
+ assert.ok(wrapper.exists());
+ assert.ok(wrapper.find(".ds-hr").exists());
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/ImpressionStats.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/ImpressionStats.test.jsx
new file mode 100644
index 0000000000..4926cc6c70
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/ImpressionStats.test.jsx
@@ -0,0 +1,276 @@
+import {
+ ImpressionStats,
+ INTERSECTION_RATIO,
+} from "content-src/components/DiscoveryStreamImpressionStats/ImpressionStats";
+import { actionTypes as at } from "common/Actions.sys.mjs";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<ImpressionStats>", () => {
+ const SOURCE = "TEST_SOURCE";
+ const FullIntersectEntries = [
+ { isIntersecting: true, intersectionRatio: INTERSECTION_RATIO },
+ ];
+ const ZeroIntersectEntries = [
+ { isIntersecting: false, intersectionRatio: 0 },
+ ];
+ const PartialIntersectEntries = [
+ { isIntersecting: true, intersectionRatio: INTERSECTION_RATIO / 2 },
+ ];
+
+ // Build IntersectionObserver class with the arg `entries` for the intersect callback.
+ function buildIntersectionObserver(entries) {
+ return class {
+ constructor(callback) {
+ this.callback = callback;
+ }
+
+ observe() {
+ this.callback(entries);
+ }
+
+ unobserve() {}
+ };
+ }
+
+ const DEFAULT_PROPS = {
+ rows: [
+ { id: 1, pos: 0 },
+ { id: 2, pos: 1 },
+ { id: 3, pos: 2 },
+ ],
+ source: SOURCE,
+ IntersectionObserver: buildIntersectionObserver(FullIntersectEntries),
+ document: {
+ visibilityState: "visible",
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub(),
+ },
+ };
+
+ const InnerEl = () => <div>Inner Element</div>;
+
+ function renderImpressionStats(props = {}) {
+ return shallow(
+ <ImpressionStats {...DEFAULT_PROPS} {...props}>
+ <InnerEl />
+ </ImpressionStats>
+ );
+ }
+
+ it("should render props.children", () => {
+ const wrapper = renderImpressionStats();
+ assert.ok(wrapper.contains(<InnerEl />));
+ });
+ it("should not send loaded content nor impression when the page is not visible", () => {
+ const dispatch = sinon.spy();
+ const props = {
+ dispatch,
+ document: {
+ visibilityState: "hidden",
+ addEventListener: sinon.spy(),
+ removeEventListener: sinon.spy(),
+ },
+ };
+ renderImpressionStats(props);
+
+ assert.notCalled(dispatch);
+ });
+ it("should noly send loaded content but not impression when the wrapped item is not visbible", () => {
+ const dispatch = sinon.spy();
+ const props = {
+ dispatch,
+ IntersectionObserver: buildIntersectionObserver(ZeroIntersectEntries),
+ };
+ renderImpressionStats(props);
+
+ // This one is for loaded content.
+ assert.calledOnce(dispatch);
+ const [action] = dispatch.firstCall.args;
+ assert.equal(action.type, at.DISCOVERY_STREAM_LOADED_CONTENT);
+ assert.equal(action.data.source, SOURCE);
+ assert.deepEqual(action.data.tiles, [
+ { id: 1, pos: 0 },
+ { id: 2, pos: 1 },
+ { id: 3, pos: 2 },
+ ]);
+ });
+ it("should not send impression when the wrapped item is visbible but below the ratio", () => {
+ const dispatch = sinon.spy();
+ const props = {
+ dispatch,
+ IntersectionObserver: buildIntersectionObserver(PartialIntersectEntries),
+ };
+ renderImpressionStats(props);
+
+ // This one is for loaded content.
+ assert.calledOnce(dispatch);
+ });
+ it("should send a loaded content and an impression when the page is visible and the wrapped item meets the visibility ratio", () => {
+ const dispatch = sinon.spy();
+ const props = {
+ dispatch,
+ IntersectionObserver: buildIntersectionObserver(FullIntersectEntries),
+ };
+ renderImpressionStats(props);
+
+ assert.calledTwice(dispatch);
+
+ let [action] = dispatch.firstCall.args;
+ assert.equal(action.type, at.DISCOVERY_STREAM_LOADED_CONTENT);
+ assert.equal(action.data.source, SOURCE);
+ assert.deepEqual(action.data.tiles, [
+ { id: 1, pos: 0 },
+ { id: 2, pos: 1 },
+ { id: 3, pos: 2 },
+ ]);
+
+ [action] = dispatch.secondCall.args;
+ assert.equal(action.type, at.DISCOVERY_STREAM_IMPRESSION_STATS);
+ assert.equal(action.data.source, SOURCE);
+ assert.deepEqual(action.data.tiles, [
+ { id: 1, pos: 0, type: "organic", recommendation_id: undefined },
+ { id: 2, pos: 1, type: "organic", recommendation_id: undefined },
+ { id: 3, pos: 2, type: "organic", recommendation_id: undefined },
+ ]);
+ });
+ it("should send a DISCOVERY_STREAM_SPOC_IMPRESSION when the wrapped item has a flightId", () => {
+ const dispatch = sinon.spy();
+ const flightId = "a_flight_id";
+ const props = {
+ dispatch,
+ flightId,
+ rows: [{ id: 1, pos: 1, advertiser: "test advertiser" }],
+ source: "TOP_SITES",
+ IntersectionObserver: buildIntersectionObserver(FullIntersectEntries),
+ };
+ renderImpressionStats(props);
+
+ // Loaded content + DISCOVERY_STREAM_SPOC_IMPRESSION + TOP_SITES_SPONSORED_IMPRESSION_STATS + impression
+ assert.callCount(dispatch, 4);
+
+ const [action] = dispatch.secondCall.args;
+ assert.equal(action.type, at.DISCOVERY_STREAM_SPOC_IMPRESSION);
+ assert.deepEqual(action.data, { flightId });
+ });
+ it("should send a TOP_SITES_SPONSORED_IMPRESSION_STATS when the wrapped item has a flightId", () => {
+ const dispatch = sinon.spy();
+ const flightId = "a_flight_id";
+ const props = {
+ dispatch,
+ flightId,
+ rows: [{ id: 1, pos: 1, advertiser: "test advertiser" }],
+ source: "TOP_SITES",
+ IntersectionObserver: buildIntersectionObserver(FullIntersectEntries),
+ };
+ renderImpressionStats(props);
+
+ // Loaded content + DISCOVERY_STREAM_SPOC_IMPRESSION + TOP_SITES_SPONSORED_IMPRESSION_STATS + impression
+ assert.callCount(dispatch, 4);
+
+ const [action] = dispatch.getCall(2).args;
+ assert.equal(action.type, at.TOP_SITES_SPONSORED_IMPRESSION_STATS);
+ assert.deepEqual(action.data, {
+ type: "impression",
+ tile_id: 1,
+ source: "newtab",
+ advertiser: "test advertiser",
+ position: 1,
+ });
+ });
+ it("should send an impression when the wrapped item transiting from invisible to visible", () => {
+ const dispatch = sinon.spy();
+ const props = {
+ dispatch,
+ IntersectionObserver: buildIntersectionObserver(ZeroIntersectEntries),
+ };
+ const wrapper = renderImpressionStats(props);
+
+ // For the loaded content
+ assert.calledOnce(dispatch);
+
+ let [action] = dispatch.firstCall.args;
+ assert.equal(action.type, at.DISCOVERY_STREAM_LOADED_CONTENT);
+ assert.equal(action.data.source, SOURCE);
+ assert.deepEqual(action.data.tiles, [
+ { id: 1, pos: 0 },
+ { id: 2, pos: 1 },
+ { id: 3, pos: 2 },
+ ]);
+
+ dispatch.resetHistory();
+ wrapper.instance().impressionObserver.callback(FullIntersectEntries);
+
+ // For the impression
+ assert.calledOnce(dispatch);
+
+ [action] = dispatch.firstCall.args;
+ assert.equal(action.type, at.DISCOVERY_STREAM_IMPRESSION_STATS);
+ assert.deepEqual(action.data.tiles, [
+ { id: 1, pos: 0, type: "organic", recommendation_id: undefined },
+ { id: 2, pos: 1, type: "organic", recommendation_id: undefined },
+ { id: 3, pos: 2, type: "organic", recommendation_id: undefined },
+ ]);
+ });
+ it("should remove visibility change listener when the wrapper is removed", () => {
+ const props = {
+ dispatch: sinon.spy(),
+ document: {
+ visibilityState: "hidden",
+ addEventListener: sinon.spy(),
+ removeEventListener: sinon.spy(),
+ },
+ IntersectionObserver,
+ };
+
+ const wrapper = renderImpressionStats(props);
+ assert.calledWith(props.document.addEventListener, "visibilitychange");
+ const [, listener] = props.document.addEventListener.firstCall.args;
+
+ wrapper.unmount();
+ assert.calledWith(
+ props.document.removeEventListener,
+ "visibilitychange",
+ listener
+ );
+ });
+ it("should unobserve the intersection observer when the wrapper is removed", () => {
+ const IntersectionObserver =
+ buildIntersectionObserver(ZeroIntersectEntries);
+ const spy = sinon.spy(IntersectionObserver.prototype, "unobserve");
+ const props = { dispatch: sinon.spy(), IntersectionObserver };
+
+ const wrapper = renderImpressionStats(props);
+ wrapper.unmount();
+
+ assert.calledOnce(spy);
+ });
+ it("should only send the latest impression on a visibility change", () => {
+ const listeners = new Set();
+ const props = {
+ dispatch: sinon.spy(),
+ document: {
+ visibilityState: "hidden",
+ addEventListener: (ev, cb) => listeners.add(cb),
+ removeEventListener: (ev, cb) => listeners.delete(cb),
+ },
+ };
+
+ const wrapper = renderImpressionStats(props);
+
+ // Update twice
+ wrapper.setProps({ ...props, ...{ rows: [{ id: 123, pos: 4 }] } });
+ wrapper.setProps({ ...props, ...{ rows: [{ id: 2432, pos: 5 }] } });
+
+ assert.notCalled(props.dispatch);
+
+ // Simulate listeners getting called
+ props.document.visibilityState = "visible";
+ listeners.forEach(l => l());
+
+ // Make sure we only sent the latest event
+ assert.calledTwice(props.dispatch);
+ const [action] = props.dispatch.firstCall.args;
+ assert.deepEqual(action.data.tiles, [{ id: 2432, pos: 5 }]);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/Navigation.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/Navigation.test.jsx
new file mode 100644
index 0000000000..ef5baf50c1
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/Navigation.test.jsx
@@ -0,0 +1,131 @@
+import {
+ Navigation,
+ Topic,
+} from "content-src/components/DiscoveryStreamComponents/Navigation/Navigation";
+import React from "react";
+import { SafeAnchor } from "content-src/components/DiscoveryStreamComponents/SafeAnchor/SafeAnchor";
+import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText";
+import { shallow, mount } from "enzyme";
+
+const DEFAULT_PROPS = {
+ App: {
+ isForStartupCache: false,
+ },
+};
+
+describe("<Navigation>", () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = mount(<Navigation header={{}} locale="en-US" />);
+ });
+
+ it("should render", () => {
+ assert.ok(wrapper.exists());
+ });
+
+ it("should render a title", () => {
+ wrapper.setProps({ header: { title: "Foo" } });
+
+ assert.equal(wrapper.find(".ds-navigation-header").text(), "Foo");
+ });
+
+ it("should not render a title", () => {
+ wrapper.setProps({ header: null });
+
+ assert.lengthOf(wrapper.find(".ds-navigation-header"), 0);
+ });
+
+ it("should set default alignment", () => {
+ assert.lengthOf(wrapper.find(".ds-navigation-centered"), 1);
+ });
+
+ it("should set custom alignment", () => {
+ wrapper.setProps({ alignment: "left-align" });
+
+ assert.lengthOf(wrapper.find(".ds-navigation-left-align"), 1);
+ });
+
+ it("should set default of no links", () => {
+ assert.lengthOf(wrapper.find("ul").children(), 0);
+ });
+
+ it("should render a FluentOrText", () => {
+ wrapper.setProps({ header: { title: "Foo" } });
+
+ assert.equal(
+ wrapper.find(".ds-navigation").children().at(0).type(),
+ FluentOrText
+ );
+ });
+
+ it("should render 2 Topics", () => {
+ wrapper.setProps({
+ links: [
+ { url: "https://foo.com", name: "foo" },
+ { url: "https://bar.com", name: "bar" },
+ ],
+ });
+
+ assert.lengthOf(wrapper.find("ul").children(), 2);
+ });
+
+ it("should render 2 extra Topics", () => {
+ wrapper.setProps({
+ newFooterSection: true,
+ links: [
+ { url: "https://foo.com", name: "foo" },
+ { url: "https://bar.com", name: "bar" },
+ ],
+ extraLinks: [
+ { url: "https://foo.com", name: "foo" },
+ { url: "https://bar.com", name: "bar" },
+ ],
+ });
+
+ assert.lengthOf(wrapper.find("ul").children(), 4);
+ });
+});
+
+describe("<Topic>", () => {
+ let wrapper;
+ let sandbox;
+
+ beforeEach(() => {
+ wrapper = shallow(<Topic url="https://foo.com" name="foo" />);
+ sandbox = sinon.createSandbox();
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should pass onLinkClick prop", () => {
+ assert.propertyVal(
+ wrapper.at(0).props(),
+ "onLinkClick",
+ wrapper.instance().onLinkClick
+ );
+ });
+
+ it("should render", () => {
+ assert.ok(wrapper.exists());
+ assert.equal(wrapper.type(), SafeAnchor);
+ });
+
+ describe("onLinkClick", () => {
+ let dispatch;
+
+ beforeEach(() => {
+ dispatch = sandbox.stub();
+ wrapper = shallow(<Topic dispatch={dispatch} {...DEFAULT_PROPS} />);
+ wrapper.setState({ isSeen: true });
+ });
+
+ it("should call dispatch", () => {
+ wrapper.instance().onLinkClick({ target: { text: `Must Reads` } });
+
+ assert.calledOnce(dispatch);
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/PrivacyLink.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/PrivacyLink.test.jsx
new file mode 100644
index 0000000000..285cc16c0e
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/PrivacyLink.test.jsx
@@ -0,0 +1,29 @@
+import { PrivacyLink } from "content-src/components/DiscoveryStreamComponents/PrivacyLink/PrivacyLink";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<PrivacyLink>", () => {
+ let wrapper;
+ let sandbox;
+
+ beforeEach(() => {
+ sandbox = sinon.createSandbox();
+ wrapper = shallow(
+ <PrivacyLink
+ properties={{
+ url: "url",
+ title: "Privacy Link",
+ }}
+ />
+ );
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should render", () => {
+ assert.ok(wrapper.exists());
+ assert.ok(wrapper.find(".ds-privacy-link").exists());
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/SafeAnchor.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/SafeAnchor.test.jsx
new file mode 100644
index 0000000000..5d643869b8
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/SafeAnchor.test.jsx
@@ -0,0 +1,56 @@
+import React from "react";
+import { SafeAnchor } from "content-src/components/DiscoveryStreamComponents/SafeAnchor/SafeAnchor";
+import { shallow } from "enzyme";
+
+describe("Discovery Stream <SafeAnchor>", () => {
+ let warnStub;
+ let sandbox;
+ beforeEach(() => {
+ warnStub = sinon.stub(console, "warn");
+ sandbox = sinon.createSandbox();
+ });
+ afterEach(() => {
+ warnStub.restore();
+ sandbox.restore();
+ });
+ it("should render with anchor", () => {
+ const wrapper = shallow(<SafeAnchor />);
+ assert.lengthOf(wrapper.find("a"), 1);
+ });
+ it("should render with anchor target for http", () => {
+ const wrapper = shallow(<SafeAnchor url="http://example.com" />);
+ assert.equal(wrapper.find("a").prop("href"), "http://example.com");
+ });
+ it("should render with anchor target for https", () => {
+ const wrapper = shallow(<SafeAnchor url="https://example.com" />);
+ assert.equal(wrapper.find("a").prop("href"), "https://example.com");
+ });
+ it("should not allow javascript: URIs", () => {
+ const wrapper = shallow(<SafeAnchor url="javascript:foo()" />); // eslint-disable-line no-script-url
+ assert.equal(wrapper.find("a").prop("href"), "");
+ assert.calledOnce(warnStub);
+ });
+ it("should not warn if the URL is falsey ", () => {
+ const wrapper = shallow(<SafeAnchor url="" />);
+ assert.equal(wrapper.find("a").prop("href"), "");
+ assert.notCalled(warnStub);
+ });
+ it("should dispatch an event on click", () => {
+ const dispatchStub = sandbox.stub();
+ const fakeEvent = { preventDefault: sandbox.stub(), currentTarget: {} };
+ const wrapper = shallow(<SafeAnchor dispatch={dispatchStub} />);
+
+ wrapper.find("a").simulate("click", fakeEvent);
+
+ assert.calledOnce(dispatchStub);
+ assert.calledOnce(fakeEvent.preventDefault);
+ });
+ it("should call onLinkClick if provided", () => {
+ const onLinkClickStub = sandbox.stub();
+ const wrapper = shallow(<SafeAnchor onLinkClick={onLinkClickStub} />);
+
+ wrapper.find("a").simulate("click");
+
+ assert.calledOnce(onLinkClickStub);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/SectionTitle.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/SectionTitle.test.jsx
new file mode 100644
index 0000000000..b5ea007022
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/SectionTitle.test.jsx
@@ -0,0 +1,22 @@
+import React from "react";
+import { SectionTitle } from "content-src/components/DiscoveryStreamComponents/SectionTitle/SectionTitle";
+import { shallow } from "enzyme";
+
+describe("<SectionTitle>", () => {
+ let wrapper;
+
+ beforeEach(() => {
+ wrapper = shallow(<SectionTitle header={{}} />);
+ });
+
+ it("should render", () => {
+ assert.ok(wrapper.exists());
+ assert.ok(wrapper.find(".ds-section-title").exists());
+ });
+
+ it("should render a subtitle", () => {
+ wrapper.setProps({ header: { title: "Foo", subtitle: "Bar" } });
+
+ assert.equal(wrapper.find(".subtitle").text(), "Bar");
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/TopicsWidget.test.jsx b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/TopicsWidget.test.jsx
new file mode 100644
index 0000000000..f879600a8f
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/TopicsWidget.test.jsx
@@ -0,0 +1,238 @@
+import { combineReducers, createStore } from "redux";
+import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs";
+import { Provider } from "react-redux";
+import {
+ _TopicsWidget as TopicsWidgetBase,
+ TopicsWidget,
+} from "content-src/components/DiscoveryStreamComponents/TopicsWidget/TopicsWidget";
+import { SafeAnchor } from "content-src/components/DiscoveryStreamComponents/SafeAnchor/SafeAnchor";
+import {
+ actionCreators as ac,
+ actionTypes as at,
+} from "common/Actions.sys.mjs";
+import { mount } from "enzyme";
+import React from "react";
+
+describe("Discovery Stream <TopicsWidget>", () => {
+ let sandbox;
+ let wrapper;
+ let dispatch;
+ let fakeWindow;
+
+ beforeEach(() => {
+ sandbox = sinon.createSandbox();
+ dispatch = sandbox.stub();
+ fakeWindow = {
+ innerWidth: 1000,
+ innerHeight: 900,
+ };
+
+ wrapper = mount(
+ <TopicsWidgetBase
+ dispatch={dispatch}
+ source="CARDGRID_WIDGET"
+ position={2}
+ id={1}
+ windowObj={fakeWindow}
+ DiscoveryStream={{
+ experimentData: {
+ utmCampaign: "utmCampaign",
+ utmContent: "utmContent",
+ utmSource: "utmSource",
+ },
+ }}
+ />
+ );
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should render", () => {
+ assert.ok(wrapper.exists());
+ assert.ok(wrapper.find(".ds-topics-widget").exists());
+ });
+
+ it("should connect with DiscoveryStream store", () => {
+ let store = createStore(combineReducers(reducers), INITIAL_STATE);
+ wrapper = mount(
+ <Provider store={store}>
+ <TopicsWidget />
+ </Provider>
+ );
+
+ const topicsWidget = wrapper.find(TopicsWidgetBase);
+ assert.ok(topicsWidget.exists());
+ assert.lengthOf(topicsWidget, 1);
+ assert.deepEqual(
+ topicsWidget.props().DiscoveryStream.experimentData,
+ INITIAL_STATE.DiscoveryStream.experimentData
+ );
+ });
+
+ describe("dispatch", () => {
+ it("should dispatch loaded event", () => {
+ assert.callCount(dispatch, 1);
+ const [first] = dispatch.getCalls();
+ assert.calledWith(
+ first,
+ ac.DiscoveryStreamLoadedContent({
+ source: "CARDGRID_WIDGET",
+ tiles: [
+ {
+ id: 1,
+ pos: 2,
+ },
+ ],
+ })
+ );
+ });
+
+ it("should dispatch click event for technology", () => {
+ // Click technology topic.
+ wrapper.find(SafeAnchor).at(0).simulate("click");
+
+ // First call is DiscoveryStreamLoadedContent, which is already tested.
+ const [second, third, fourth] = dispatch.getCalls().slice(1, 4);
+
+ assert.callCount(dispatch, 4);
+ assert.calledWith(
+ second,
+ ac.OnlyToMain({
+ type: at.OPEN_LINK,
+ data: {
+ event: {
+ altKey: undefined,
+ button: undefined,
+ ctrlKey: undefined,
+ metaKey: undefined,
+ shiftKey: undefined,
+ },
+ referrer: "https://getpocket.com/recommendations",
+ url: "https://getpocket.com/explore/technology?utm_source=utmSource&utm_content=utmContent&utm_campaign=utmCampaign",
+ },
+ })
+ );
+ assert.calledWith(
+ third,
+ ac.DiscoveryStreamUserEvent({
+ event: "CLICK",
+ source: "CARDGRID_WIDGET",
+ action_position: 2,
+ value: {
+ card_type: "topics_widget",
+ topic: "technology",
+ position_in_card: 0,
+ },
+ })
+ );
+ assert.calledWith(
+ fourth,
+ ac.ImpressionStats({
+ click: 0,
+ source: "CARDGRID_WIDGET",
+ tiles: [{ id: 1, pos: 2 }],
+ window_inner_width: 1000,
+ window_inner_height: 900,
+ })
+ );
+ });
+
+ it("should dispatch click event for must reads", () => {
+ // Click must reads topic.
+ wrapper.find(SafeAnchor).at(8).simulate("click");
+
+ // First call is DiscoveryStreamLoadedContent, which is already tested.
+ const [second, third, fourth] = dispatch.getCalls().slice(1, 4);
+
+ assert.callCount(dispatch, 4);
+ assert.calledWith(
+ second,
+ ac.OnlyToMain({
+ type: at.OPEN_LINK,
+ data: {
+ event: {
+ altKey: undefined,
+ button: undefined,
+ ctrlKey: undefined,
+ metaKey: undefined,
+ shiftKey: undefined,
+ },
+ referrer: "https://getpocket.com/recommendations",
+ url: "https://getpocket.com/collections?utm_source=utmSource&utm_content=utmContent&utm_campaign=utmCampaign",
+ },
+ })
+ );
+ assert.calledWith(
+ third,
+ ac.DiscoveryStreamUserEvent({
+ event: "CLICK",
+ source: "CARDGRID_WIDGET",
+ action_position: 2,
+ value: {
+ card_type: "topics_widget",
+ topic: "must-reads",
+ position_in_card: 8,
+ },
+ })
+ );
+ assert.calledWith(
+ fourth,
+ ac.ImpressionStats({
+ click: 0,
+ source: "CARDGRID_WIDGET",
+ tiles: [{ id: 1, pos: 2 }],
+ window_inner_width: 1000,
+ window_inner_height: 900,
+ })
+ );
+ });
+
+ it("should dispatch click event for more topics", () => {
+ // Click more-topics.
+ wrapper.find(SafeAnchor).at(9).simulate("click");
+
+ // First call is DiscoveryStreamLoadedContent, which is already tested.
+ const [second, third, fourth] = dispatch.getCalls().slice(1, 4);
+
+ assert.callCount(dispatch, 4);
+ assert.calledWith(
+ second,
+ ac.OnlyToMain({
+ type: at.OPEN_LINK,
+ data: {
+ event: {
+ altKey: undefined,
+ button: undefined,
+ ctrlKey: undefined,
+ metaKey: undefined,
+ shiftKey: undefined,
+ },
+ referrer: "https://getpocket.com/recommendations",
+ url: "https://getpocket.com/?utm_source=utmSource&utm_content=utmContent&utm_campaign=utmCampaign",
+ },
+ })
+ );
+ assert.calledWith(
+ third,
+ ac.DiscoveryStreamUserEvent({
+ event: "CLICK",
+ source: "CARDGRID_WIDGET",
+ action_position: 2,
+ value: { card_type: "topics_widget", topic: "more-topics" },
+ })
+ );
+ assert.calledWith(
+ fourth,
+ ac.ImpressionStats({
+ click: 0,
+ source: "CARDGRID_WIDGET",
+ tiles: [{ id: 1, pos: 2 }],
+ window_inner_width: 1000,
+ window_inner_height: 900,
+ })
+ );
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/ErrorBoundary.test.jsx b/browser/components/newtab/test/unit/content-src/components/ErrorBoundary.test.jsx
new file mode 100644
index 0000000000..99cc8b0ca7
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/ErrorBoundary.test.jsx
@@ -0,0 +1,110 @@
+import { A11yLinkButton } from "content-src/components/A11yLinkButton/A11yLinkButton";
+import {
+ ErrorBoundary,
+ ErrorBoundaryFallback,
+} from "content-src/components/ErrorBoundary/ErrorBoundary";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<ErrorBoundary>", () => {
+ it("should render its children if componentDidCatch wasn't called", () => {
+ const wrapper = shallow(
+ <ErrorBoundary>
+ <div className="kids" />
+ </ErrorBoundary>
+ );
+
+ assert.lengthOf(wrapper.find(".kids"), 1);
+ });
+
+ it("should render ErrorBoundaryFallback if componentDidCatch called", () => {
+ const wrapper = shallow(<ErrorBoundary />);
+
+ wrapper.instance().componentDidCatch();
+ // since shallow wrappers don't automatically manage lifecycle semantics:
+ wrapper.update();
+
+ assert.lengthOf(wrapper.find(ErrorBoundaryFallback), 1);
+ });
+
+ it("should render the given FallbackComponent if componentDidCatch called", () => {
+ class TestFallback extends React.PureComponent {
+ render() {
+ return <div className="my-fallback">doh!</div>;
+ }
+ }
+
+ const wrapper = shallow(<ErrorBoundary FallbackComponent={TestFallback} />);
+ wrapper.instance().componentDidCatch();
+ // since shallow wrappers don't automatically manage lifecycle semantics:
+ wrapper.update();
+
+ assert.lengthOf(wrapper.find(TestFallback), 1);
+ });
+
+ it("should pass the given className prop to the FallbackComponent", () => {
+ class TestFallback extends React.PureComponent {
+ render() {
+ return <div className={this.props.className}>doh!</div>;
+ }
+ }
+
+ const wrapper = shallow(
+ <ErrorBoundary FallbackComponent={TestFallback} className="sheep" />
+ );
+ wrapper.instance().componentDidCatch();
+ // since shallow wrappers don't automatically manage lifecycle semantics:
+ wrapper.update();
+
+ assert.lengthOf(wrapper.find(".sheep"), 1);
+ });
+});
+
+describe("ErrorBoundaryFallback", () => {
+ it("should render a <div> with a class of as-error-fallback", () => {
+ const wrapper = shallow(<ErrorBoundaryFallback />);
+
+ assert.lengthOf(wrapper.find("div.as-error-fallback"), 1);
+ });
+
+ it("should render a <div> with the props.className and .as-error-fallback", () => {
+ const wrapper = shallow(<ErrorBoundaryFallback className="monkeys" />);
+
+ assert.lengthOf(wrapper.find("div.monkeys.as-error-fallback"), 1);
+ });
+
+ it("should call window.location.reload(true) if .reload-button clicked", () => {
+ const fakeWindow = { location: { reload: sinon.spy() } };
+ const wrapper = shallow(<ErrorBoundaryFallback windowObj={fakeWindow} />);
+
+ wrapper.find(".reload-button").simulate("click");
+
+ assert.calledOnce(fakeWindow.location.reload);
+ assert.calledWithExactly(fakeWindow.location.reload, true);
+ });
+
+ it("should render .reload-button as an <A11yLinkButton>", () => {
+ const wrapper = shallow(<ErrorBoundaryFallback />);
+
+ assert.lengthOf(wrapper.find("A11yLinkButton.reload-button"), 1);
+ });
+
+ it("should render newtab-error-fallback-refresh-link node", () => {
+ const wrapper = shallow(<ErrorBoundaryFallback />);
+
+ const msgWrapper = wrapper.find(
+ '[data-l10n-id="newtab-error-fallback-refresh-link"]'
+ );
+ assert.lengthOf(msgWrapper, 1);
+ assert.isTrue(msgWrapper.is(A11yLinkButton));
+ });
+
+ it("should render newtab-error-fallback-info node", () => {
+ const wrapper = shallow(<ErrorBoundaryFallback />);
+
+ const msgWrapper = wrapper.find(
+ '[data-l10n-id="newtab-error-fallback-info"]'
+ );
+ assert.lengthOf(msgWrapper, 1);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/FluentOrText.test.jsx b/browser/components/newtab/test/unit/content-src/components/FluentOrText.test.jsx
new file mode 100644
index 0000000000..165f2a6dcf
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/FluentOrText.test.jsx
@@ -0,0 +1,68 @@
+import { FluentOrText } from "content-src/components/FluentOrText/FluentOrText";
+import React from "react";
+import { shallow, mount } from "enzyme";
+
+describe("<FluentOrText>", () => {
+ it("should create span with no children", () => {
+ const wrapper = shallow(<FluentOrText />);
+
+ assert.ok(wrapper.find("span").exists());
+ });
+ it("should set plain text", () => {
+ const wrapper = shallow(<FluentOrText message={"hello"} />);
+
+ assert.equal(wrapper.text(), "hello");
+ });
+ it("should use fluent id on automatic span", () => {
+ const wrapper = shallow(<FluentOrText message={{ id: "fluent" }} />);
+
+ assert.ok(wrapper.find("span[data-l10n-id='fluent']").exists());
+ });
+ it("should also allow string_id", () => {
+ const wrapper = shallow(<FluentOrText message={{ string_id: "fluent" }} />);
+
+ assert.ok(wrapper.find("span[data-l10n-id='fluent']").exists());
+ });
+ it("should use fluent id on child", () => {
+ const wrapper = shallow(
+ <FluentOrText message={{ id: "fluent" }}>
+ <p />
+ </FluentOrText>
+ );
+
+ assert.ok(wrapper.find("p[data-l10n-id='fluent']").exists());
+ });
+ it("should set args for fluent", () => {
+ const wrapper = mount(<FluentOrText message={{ args: { num: 5 } }} />);
+ const { attributes } = wrapper.getDOMNode();
+ const args = attributes.getNamedItem("data-l10n-args").value;
+ assert.equal(JSON.parse(args).num, 5);
+ });
+ it("should also allow values", () => {
+ const wrapper = mount(<FluentOrText message={{ values: { num: 5 } }} />);
+ const { attributes } = wrapper.getDOMNode();
+ const args = attributes.getNamedItem("data-l10n-args").value;
+ assert.equal(JSON.parse(args).num, 5);
+ });
+ it("should preserve original children with fluent", () => {
+ const wrapper = shallow(
+ <FluentOrText message={{ id: "fluent" }}>
+ <p>
+ <b data-l10n-name="bold" />
+ </p>
+ </FluentOrText>
+ );
+
+ assert.ok(wrapper.find("b[data-l10n-name='bold']").exists());
+ });
+ it("should only allow a single child", () => {
+ assert.throws(() =>
+ shallow(
+ <FluentOrText>
+ <p />
+ <p />
+ </FluentOrText>
+ )
+ );
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/LinkMenu.test.jsx b/browser/components/newtab/test/unit/content-src/components/LinkMenu.test.jsx
new file mode 100644
index 0000000000..be7ac219d6
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/LinkMenu.test.jsx
@@ -0,0 +1,667 @@
+import { ContextMenu } from "content-src/components/ContextMenu/ContextMenu";
+import { _LinkMenu as LinkMenu } from "content-src/components/LinkMenu/LinkMenu";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<LinkMenu>", () => {
+ let wrapper;
+ beforeEach(() => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "" }}
+ options={["CheckPinTopSite", "CheckBookmark", "OpenInNewWindow"]}
+ dispatch={() => {}}
+ />
+ );
+ });
+ it("should render a ContextMenu element", () => {
+ assert.ok(wrapper.find(ContextMenu).exists());
+ });
+ it("should pass onUpdate, and options to ContextMenu", () => {
+ assert.ok(wrapper.find(ContextMenu).exists());
+ const contextMenuProps = wrapper.find(ContextMenu).props();
+ ["onUpdate", "options"].forEach(prop =>
+ assert.property(contextMenuProps, prop)
+ );
+ });
+ it("should give ContextMenu the correct tabbable options length for a11y", () => {
+ const { options } = wrapper.find(ContextMenu).props();
+ const [firstItem] = options;
+ const lastItem = options[options.length - 1];
+
+ // first item should have {first: true}
+ assert.isTrue(firstItem.first);
+ assert.ok(!firstItem.last);
+
+ // last item should have {last: true}
+ assert.isTrue(lastItem.last);
+ assert.ok(!lastItem.first);
+
+ // middle items should have neither
+ for (let i = 1; i < options.length - 1; i++) {
+ assert.ok(!options[i].first && !options[i].last);
+ }
+ });
+ it("should show the correct options for default sites", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", isDefault: true }}
+ options={["CheckBookmark"]}
+ source={"TOP_SITES"}
+ isPrivateBrowsingEnabled={true}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ let i = 0;
+ assert.propertyVal(options[i++], "id", "newtab-menu-pin");
+ assert.propertyVal(options[i++], "id", "newtab-menu-edit-topsites");
+ assert.propertyVal(options[i++], "type", "separator");
+ assert.propertyVal(options[i++], "id", "newtab-menu-open-new-window");
+ assert.propertyVal(
+ options[i++],
+ "id",
+ "newtab-menu-open-new-private-window"
+ );
+ assert.propertyVal(options[i++], "type", "separator");
+ assert.propertyVal(options[i++], "id", "newtab-menu-dismiss");
+ assert.propertyVal(options, "length", i);
+ // Double check that delete options are not included for default top sites
+ options
+ .filter(o => o.type !== "separator")
+ .forEach(o => {
+ assert.notInclude(["newtab-menu-delete-history"], o.id);
+ });
+ });
+ it("should show Unpin option for a pinned site if CheckPinTopSite in options list", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", isPinned: true }}
+ source={"TOP_SITES"}
+ options={["CheckPinTopSite"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(options.find(o => o.id && o.id === "newtab-menu-unpin"));
+ });
+ it("should show Pin option for an unpinned site if CheckPinTopSite in options list", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", isPinned: false }}
+ source={"TOP_SITES"}
+ options={["CheckPinTopSite"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(options.find(o => o.id && o.id === "newtab-menu-pin"));
+ });
+ it("should show Unbookmark option for a bookmarked site if CheckBookmark in options list", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", bookmarkGuid: 1234 }}
+ source={"TOP_SITES"}
+ options={["CheckBookmark"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-remove-bookmark")
+ );
+ });
+ it("should show Bookmark option for an unbookmarked site if CheckBookmark in options list", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", bookmarkGuid: 0 }}
+ source={"TOP_SITES"}
+ options={["CheckBookmark"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-bookmark")
+ );
+ });
+ it("should show Save to Pocket option for an unsaved Pocket item if CheckSavedToPocket in options list", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", bookmarkGuid: 0 }}
+ source={"HIGHLIGHTS"}
+ options={["CheckSavedToPocket"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-save-to-pocket")
+ );
+ });
+ it("should show Delete from Pocket option for a saved Pocket item if CheckSavedToPocket in options list", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", pocket_id: 1234 }}
+ source={"HIGHLIGHTS"}
+ options={["CheckSavedToPocket"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-delete-pocket")
+ );
+ });
+ it("should show Archive from Pocket option for a saved Pocket item if CheckBookmarkOrArchive", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", pocket_id: 1234 }}
+ source={"HIGHLIGHTS"}
+ options={["CheckBookmarkOrArchive"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-archive-pocket")
+ );
+ });
+ it("should show Bookmark option for an unbookmarked site if CheckBookmarkOrArchive in options list and no pocket_id", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "" }}
+ source={"HIGHLIGHTS"}
+ options={["CheckBookmarkOrArchive"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-bookmark")
+ );
+ });
+ it("should show Unbookmark option for a bookmarked site if CheckBookmarkOrArchive in options list and no pocket_id", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", bookmarkGuid: 1234 }}
+ source={"HIGHLIGHTS"}
+ options={["CheckBookmarkOrArchive"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-remove-bookmark")
+ );
+ });
+ it("should show Archive from Pocket option for a saved Pocket item if CheckArchiveFromPocket", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", pocket_id: 1234 }}
+ source={"TOP_STORIES"}
+ options={["CheckArchiveFromPocket"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-archive-pocket")
+ );
+ });
+ it("should show empty from no Pocket option for no saved Pocket item if CheckArchiveFromPocket", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "" }}
+ source={"TOP_STORIES"}
+ options={["CheckArchiveFromPocket"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isUndefined(
+ options.find(o => o.id && o.id === "newtab-menu-archive-pocket")
+ );
+ });
+ it("should show Delete from Pocket option for a saved Pocket item if CheckDeleteFromPocket", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", pocket_id: 1234 }}
+ source={"TOP_STORIES"}
+ options={["CheckDeleteFromPocket"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-delete-pocket")
+ );
+ });
+ it("should show empty from Pocket option for no saved Pocket item if CheckDeleteFromPocket", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "" }}
+ source={"TOP_STORIES"}
+ options={["CheckDeleteFromPocket"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isUndefined(
+ options.find(o => o.id && o.id === "newtab-menu-archive-pocket")
+ );
+ });
+ it("should show Open File option for a downloaded item", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", type: "download", path: "foo" }}
+ source={"HIGHLIGHTS"}
+ options={["OpenFile"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-open-file")
+ );
+ });
+ it("should show Show File option for a downloaded item on a default platform", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", type: "download", path: "foo" }}
+ source={"HIGHLIGHTS"}
+ options={["ShowFile"]}
+ platform={"default"}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-show-file")
+ );
+ });
+ it("should show Copy Downlad Link option for a downloaded item when CopyDownloadLink", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", type: "download" }}
+ source={"HIGHLIGHTS"}
+ options={["CopyDownloadLink"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-copy-download-link")
+ );
+ });
+ it("should show Go To Download Page option for a downloaded item when GoToDownloadPage", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", type: "download", referrer: "foo" }}
+ source={"HIGHLIGHTS"}
+ options={["GoToDownloadPage"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-go-to-download-page")
+ );
+ assert.isFalse(options[0].disabled);
+ });
+ it("should show Go To Download Page option as disabled for a downloaded item when GoToDownloadPage if no referrer exists", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", type: "download", referrer: null }}
+ source={"HIGHLIGHTS"}
+ options={["GoToDownloadPage"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-go-to-download-page")
+ );
+ assert.isTrue(options[0].disabled);
+ });
+ it("should show Remove Download Link option for a downloaded item when RemoveDownload", () => {
+ wrapper = shallow(
+ <LinkMenu
+ site={{ url: "", type: "download" }}
+ source={"HIGHLIGHTS"}
+ options={["RemoveDownload"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ assert.isDefined(
+ options.find(o => o.id && o.id === "newtab-menu-remove-download")
+ );
+ });
+ it("should show Edit option", () => {
+ const props = { url: "foo", label: "label" };
+ const index = 5;
+ wrapper = shallow(
+ <LinkMenu
+ site={props}
+ index={5}
+ source={"TOP_SITES"}
+ options={["EditTopSite"]}
+ dispatch={() => {}}
+ />
+ );
+ const { options } = wrapper.find(ContextMenu).props();
+ const option = options.find(
+ o => o.id && o.id === "newtab-menu-edit-topsites"
+ );
+ assert.isDefined(option);
+ assert.equal(option.action.data.index, index);
+ });
+ describe(".onClick", () => {
+ const FAKE_EVENT = {};
+ const FAKE_INDEX = 3;
+ const FAKE_SOURCE = "TOP_SITES";
+ const FAKE_SITE = {
+ bookmarkGuid: 1234,
+ hostname: "foo",
+ path: "foo",
+ pocket_id: "1234",
+ referrer: "https://foo.com/ref",
+ title: "bar",
+ type: "bookmark",
+ typedBonus: true,
+ url: "https://foo.com",
+ sponsored_tile_id: 12345,
+ };
+ const dispatch = sinon.stub();
+ const propOptions = [
+ "ShowFile",
+ "CopyDownloadLink",
+ "GoToDownloadPage",
+ "RemoveDownload",
+ "Separator",
+ "ShowPrivacyInfo",
+ "RemoveBookmark",
+ "AddBookmark",
+ "OpenInNewWindow",
+ "OpenInPrivateWindow",
+ "BlockUrl",
+ "DeleteUrl",
+ "PinTopSite",
+ "UnpinTopSite",
+ "SaveToPocket",
+ "DeleteFromPocket",
+ "ArchiveFromPocket",
+ "WebExtDismiss",
+ ];
+ const expectedActionData = {
+ "newtab-menu-remove-bookmark": FAKE_SITE.bookmarkGuid,
+ "newtab-menu-bookmark": {
+ url: FAKE_SITE.url,
+ title: FAKE_SITE.title,
+ type: FAKE_SITE.type,
+ },
+ "newtab-menu-open-new-window": {
+ url: FAKE_SITE.url,
+ referrer: FAKE_SITE.referrer,
+ typedBonus: FAKE_SITE.typedBonus,
+ sponsored_tile_id: FAKE_SITE.sponsored_tile_id,
+ },
+ "newtab-menu-open-new-private-window": {
+ url: FAKE_SITE.url,
+ referrer: FAKE_SITE.referrer,
+ },
+ "newtab-menu-dismiss": [
+ {
+ url: FAKE_SITE.url,
+ pocket_id: FAKE_SITE.pocket_id,
+ isSponsoredTopSite: undefined,
+ position: 3,
+ tile_id: 12345,
+ is_pocket_card: false,
+ },
+ ],
+ menu_action_webext_dismiss: {
+ source: "TOP_SITES",
+ url: FAKE_SITE.url,
+ action_position: 3,
+ },
+ "newtab-menu-delete-history": {
+ url: FAKE_SITE.url,
+ pocket_id: FAKE_SITE.pocket_id,
+ forceBlock: FAKE_SITE.bookmarkGuid,
+ },
+ "newtab-menu-pin": { site: FAKE_SITE, index: FAKE_INDEX },
+ "newtab-menu-unpin": { site: { url: FAKE_SITE.url } },
+ "newtab-menu-save-to-pocket": {
+ site: { url: FAKE_SITE.url, title: FAKE_SITE.title },
+ },
+ "newtab-menu-delete-pocket": { pocket_id: "1234" },
+ "newtab-menu-archive-pocket": { pocket_id: "1234" },
+ "newtab-menu-show-file": { url: FAKE_SITE.url },
+ "newtab-menu-copy-download-link": { url: FAKE_SITE.url },
+ "newtab-menu-go-to-download-page": { url: FAKE_SITE.referrer },
+ "newtab-menu-remove-download": { url: FAKE_SITE.url },
+ };
+ const { options } = shallow(
+ <LinkMenu
+ site={FAKE_SITE}
+ siteInfo={{ value: { card_type: FAKE_SITE.type } }}
+ dispatch={dispatch}
+ index={FAKE_INDEX}
+ isPrivateBrowsingEnabled={true}
+ platform={"default"}
+ options={propOptions}
+ source={FAKE_SOURCE}
+ shouldSendImpressionStats={true}
+ />
+ )
+ .find(ContextMenu)
+ .props();
+ afterEach(() => dispatch.reset());
+ options
+ .filter(o => o.type !== "separator")
+ .forEach(option => {
+ it(`should fire a ${option.action.type} action for ${option.id} with the expected data`, () => {
+ option.onClick(FAKE_EVENT);
+
+ if (option.impression && option.userEvent) {
+ assert.calledThrice(dispatch);
+ } else if (option.impression || option.userEvent) {
+ assert.calledTwice(dispatch);
+ } else {
+ assert.calledOnce(dispatch);
+ }
+
+ // option.action is dispatched
+ assert.ok(dispatch.firstCall.calledWith(option.action));
+
+ // option.action has correct data
+ // (delete is a special case as it dispatches a nested DIALOG_OPEN-type action)
+ // in the case of this FAKE_SITE, we send a bookmarkGuid therefore we also want
+ // to block this if we delete it
+ if (option.id === "newtab-menu-delete-history") {
+ assert.deepEqual(
+ option.action.data.onConfirm[0].data,
+ expectedActionData[option.id]
+ );
+ // Test UserEvent send correct meta about item deleted
+ assert.propertyVal(
+ option.action.data.onConfirm[1].data,
+ "action_position",
+ FAKE_INDEX
+ );
+ assert.propertyVal(
+ option.action.data.onConfirm[1].data,
+ "source",
+ FAKE_SOURCE
+ );
+ } else {
+ assert.deepEqual(option.action.data, expectedActionData[option.id]);
+ }
+ });
+ it(`should fire a UserEvent action for ${option.id} if configured`, () => {
+ if (option.userEvent) {
+ option.onClick(FAKE_EVENT);
+ const [action] = dispatch.secondCall.args;
+ assert.isUserEventAction(action);
+ assert.propertyVal(action.data, "source", FAKE_SOURCE);
+ assert.propertyVal(action.data, "action_position", FAKE_INDEX);
+ assert.propertyVal(action.data.value, "card_type", FAKE_SITE.type);
+ }
+ });
+ it(`should send impression stats for ${option.id}`, () => {
+ if (option.impression) {
+ option.onClick(FAKE_EVENT);
+ const [action] = dispatch.thirdCall.args;
+ assert.deepEqual(action, option.impression);
+ }
+ });
+ });
+ it(`should not send impression stats if not configured`, () => {
+ const fakeOptions = shallow(
+ <LinkMenu
+ site={FAKE_SITE}
+ dispatch={dispatch}
+ index={FAKE_INDEX}
+ options={propOptions}
+ source={FAKE_SOURCE}
+ shouldSendImpressionStats={false}
+ />
+ )
+ .find(ContextMenu)
+ .props().options;
+
+ fakeOptions
+ .filter(o => o.type !== "separator")
+ .forEach(option => {
+ if (option.impression) {
+ option.onClick(FAKE_EVENT);
+ assert.calledTwice(dispatch);
+ assert.notEqual(dispatch.firstCall.args[0], option.impression);
+ assert.notEqual(dispatch.secondCall.args[0], option.impression);
+ dispatch.reset();
+ }
+ });
+ });
+ it(`should pin a SPOC with all of the site details sent`, () => {
+ const pinSpocTopSite = "PinTopSite";
+ const { options: spocOptions } = shallow(
+ <LinkMenu
+ site={FAKE_SITE}
+ siteInfo={{ value: { card_type: FAKE_SITE.type } }}
+ dispatch={dispatch}
+ index={FAKE_INDEX}
+ isPrivateBrowsingEnabled={true}
+ platform={"default"}
+ options={[pinSpocTopSite]}
+ source={FAKE_SOURCE}
+ shouldSendImpressionStats={true}
+ />
+ )
+ .find(ContextMenu)
+ .props();
+
+ const [pinSpocOption] = spocOptions;
+ pinSpocOption.onClick(FAKE_EVENT);
+
+ if (pinSpocOption.impression && pinSpocOption.userEvent) {
+ assert.calledThrice(dispatch);
+ } else if (pinSpocOption.impression || pinSpocOption.userEvent) {
+ assert.calledTwice(dispatch);
+ } else {
+ assert.calledOnce(dispatch);
+ }
+
+ // option.action is dispatched
+ assert.ok(dispatch.firstCall.calledWith(pinSpocOption.action));
+
+ assert.deepEqual(pinSpocOption.action.data, {
+ site: FAKE_SITE,
+ index: FAKE_INDEX,
+ });
+ });
+ it(`should create a proper BLOCK_URL action for a sponsored tile`, () => {
+ const site = {
+ hostname: "foo",
+ path: "foo",
+ referrer: "https://foo.com/ref",
+ title: "bar",
+ type: "bookmark",
+ typedBonus: true,
+ url: "https://foo.com",
+ sponsored_position: 1,
+ };
+ const { options: blockOptions } = shallow(
+ <LinkMenu
+ site={site}
+ siteInfo={{ value: { card_type: site.type } }}
+ dispatch={dispatch}
+ index={FAKE_INDEX}
+ isPrivateBrowsingEnabled={true}
+ platform={"default"}
+ options={["BlockUrl"]}
+ source={FAKE_SOURCE}
+ shouldSendImpressionStats={true}
+ />
+ )
+ .find(ContextMenu)
+ .props();
+ const [blockUrlOption] = blockOptions;
+
+ blockUrlOption.onClick(FAKE_EVENT);
+
+ assert.calledThrice(dispatch);
+ assert.ok(dispatch.firstCall.calledWith(blockUrlOption.action));
+ const expected = {
+ url: site.url,
+ pocket_id: undefined,
+ advertiser_name: site.hostname,
+ isSponsoredTopSite: 1,
+ position: 3,
+ is_pocket_card: false,
+ };
+ assert.deepEqual(blockUrlOption.action.data[0], expected);
+ });
+ it(`should create a proper BLOCK_URL action for a pocket item`, () => {
+ const site = {
+ hostname: "foo",
+ path: "foo",
+ referrer: "https://foo.com/ref",
+ title: "bar",
+ type: "CardGrid",
+ typedBonus: true,
+ url: "https://foo.com",
+ };
+ const { options: blockOptions } = shallow(
+ <LinkMenu
+ site={site}
+ siteInfo={{ value: { card_type: site.type } }}
+ dispatch={dispatch}
+ index={FAKE_INDEX}
+ isPrivateBrowsingEnabled={true}
+ platform={"default"}
+ options={["BlockUrl"]}
+ source={FAKE_SOURCE}
+ shouldSendImpressionStats={true}
+ />
+ )
+ .find(ContextMenu)
+ .props();
+ const [blockUrlOption] = blockOptions;
+
+ blockUrlOption.onClick(FAKE_EVENT);
+
+ assert.calledThrice(dispatch);
+ assert.ok(dispatch.firstCall.calledWith(blockUrlOption.action));
+ const expected = {
+ url: site.url,
+ pocket_id: undefined,
+ isSponsoredTopSite: undefined,
+ position: 3,
+ is_pocket_card: true,
+ };
+ assert.deepEqual(blockUrlOption.action.data[0], expected);
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/MoreRecommendations.test.jsx b/browser/components/newtab/test/unit/content-src/components/MoreRecommendations.test.jsx
new file mode 100644
index 0000000000..2b3c06b6bf
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/MoreRecommendations.test.jsx
@@ -0,0 +1,24 @@
+import { MoreRecommendations } from "content-src/components/MoreRecommendations/MoreRecommendations";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<MoreRecommendations>", () => {
+ it("should render a MoreRecommendations element", () => {
+ const wrapper = shallow(<MoreRecommendations />);
+ assert.ok(wrapper.exists());
+ });
+ it("should render a link when provided with read_more_endpoint prop", () => {
+ const wrapper = shallow(
+ <MoreRecommendations read_more_endpoint="https://endpoint.com" />
+ );
+
+ const link = wrapper.find(".more-recommendations");
+ assert.lengthOf(link, 1);
+ });
+ it("should not render a link when provided with read_more_endpoint prop", () => {
+ const wrapper = shallow(<MoreRecommendations read_more_endpoint="" />);
+
+ const link = wrapper.find(".more-recommendations");
+ assert.lengthOf(link, 0);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/PocketLoggedInCta.test.jsx b/browser/components/newtab/test/unit/content-src/components/PocketLoggedInCta.test.jsx
new file mode 100644
index 0000000000..31a5e7be4d
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/PocketLoggedInCta.test.jsx
@@ -0,0 +1,46 @@
+import { combineReducers, createStore } from "redux";
+import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs";
+import { mount, shallow } from "enzyme";
+import {
+ PocketLoggedInCta,
+ _PocketLoggedInCta as PocketLoggedInCtaRaw,
+} from "content-src/components/PocketLoggedInCta/PocketLoggedInCta";
+import { Provider } from "react-redux";
+import React from "react";
+
+function mountSectionWithProps(props) {
+ const store = createStore(combineReducers(reducers), INITIAL_STATE);
+ return mount(
+ <Provider store={store}>
+ <PocketLoggedInCta {...props} />
+ </Provider>
+ );
+}
+
+describe("<PocketLoggedInCta>", () => {
+ it("should render a PocketLoggedInCta element", () => {
+ const wrapper = mountSectionWithProps({});
+ assert.ok(wrapper.exists());
+ });
+ it("should render Fluent spans when rendered without props", () => {
+ const wrapper = mountSectionWithProps({});
+
+ const message = wrapper.find("span[data-l10n-id]");
+ assert.lengthOf(message, 2);
+ });
+ it("should not render Fluent spans when rendered with props", () => {
+ const wrapper = shallow(
+ <PocketLoggedInCtaRaw
+ Pocket={{
+ pocketCta: {
+ ctaButton: "button",
+ ctaText: "text",
+ },
+ }}
+ />
+ );
+
+ const message = wrapper.find("span[data-l10n-id]");
+ assert.lengthOf(message, 0);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/Search.test.jsx b/browser/components/newtab/test/unit/content-src/components/Search.test.jsx
new file mode 100644
index 0000000000..54a3b611cc
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/Search.test.jsx
@@ -0,0 +1,179 @@
+import { GlobalOverrider } from "test/unit/utils";
+import { mount, shallow } from "enzyme";
+import React from "react";
+import { _Search as Search } from "content-src/components/Search/Search";
+
+const DEFAULT_PROPS = {
+ dispatch() {},
+ Prefs: { values: { featureConfig: {} } },
+};
+
+describe("<Search>", () => {
+ let globals;
+ let sandbox;
+ beforeEach(() => {
+ globals = new GlobalOverrider();
+ sandbox = globals.sandbox;
+
+ global.ContentSearchUIController.prototype = { search: sandbox.spy() };
+ });
+ afterEach(() => {
+ globals.restore();
+ });
+
+ it("should render a Search element", () => {
+ const wrapper = shallow(<Search {...DEFAULT_PROPS} />);
+ assert.ok(wrapper.exists());
+ });
+ it("should not use a <form> element", () => {
+ const wrapper = mount(<Search {...DEFAULT_PROPS} />);
+
+ assert.equal(wrapper.find("form").length, 0);
+ });
+ it("should listen for ContentSearchClient on render", () => {
+ const spy = globals.set("addEventListener", sandbox.spy());
+
+ const wrapper = mount(<Search {...DEFAULT_PROPS} />);
+
+ assert.calledOnce(spy.withArgs("ContentSearchClient", wrapper.instance()));
+ });
+ it("should stop listening for ContentSearchClient on unmount", () => {
+ const spy = globals.set("removeEventListener", sandbox.spy());
+ const wrapper = mount(<Search {...DEFAULT_PROPS} />);
+ // cache the instance as we can't call this method after unmount is called
+ const instance = wrapper.instance();
+
+ wrapper.unmount();
+
+ assert.calledOnce(spy.withArgs("ContentSearchClient", instance));
+ });
+ it("should add gContentSearchController as a global", () => {
+ // current about:home tests need gContentSearchController to exist as a global
+ // so let's test it here too to ensure we don't break this behaviour
+ mount(<Search {...DEFAULT_PROPS} />);
+ assert.property(window, "gContentSearchController");
+ assert.ok(window.gContentSearchController);
+ });
+ it("should pass along search when clicking the search button", () => {
+ const wrapper = mount(<Search {...DEFAULT_PROPS} />);
+
+ wrapper.find(".search-button").simulate("click");
+
+ const { search } = window.gContentSearchController;
+ assert.calledOnce(search);
+ assert.propertyVal(search.firstCall.args[0], "type", "click");
+ });
+ it("should send a UserEvent action", () => {
+ global.ContentSearchUIController.prototype.search = () => {
+ dispatchEvent(
+ new CustomEvent("ContentSearchClient", { detail: { type: "Search" } })
+ );
+ };
+ const dispatch = sinon.spy();
+ const wrapper = mount(<Search {...DEFAULT_PROPS} dispatch={dispatch} />);
+
+ wrapper.find(".search-button").simulate("click");
+
+ assert.calledOnce(dispatch);
+ const [action] = dispatch.firstCall.args;
+ assert.isUserEventAction(action);
+ assert.propertyVal(action.data, "event", "SEARCH");
+ });
+ it("should show our logo when the prop exists.", () => {
+ const showLogoProps = Object.assign({}, DEFAULT_PROPS, { showLogo: true });
+
+ const wrapper = shallow(<Search {...showLogoProps} />);
+ assert.lengthOf(wrapper.find(".logo-and-wordmark"), 1);
+ });
+ it("should not show our logo when the prop does not exist.", () => {
+ const hideLogoProps = Object.assign({}, DEFAULT_PROPS, { showLogo: false });
+
+ const wrapper = shallow(<Search {...hideLogoProps} />);
+ assert.lengthOf(wrapper.find(".logo-and-wordmark"), 0);
+ });
+
+ describe("Search Hand-off", () => {
+ it("should render a Search element when hand-off is enabled", () => {
+ const wrapper = shallow(
+ <Search {...DEFAULT_PROPS} handoffEnabled={true} />
+ );
+ assert.ok(wrapper.exists());
+ assert.equal(wrapper.find(".search-handoff-button").length, 1);
+ });
+ it("should hand-off search when button is clicked", () => {
+ const dispatch = sinon.spy();
+ const wrapper = shallow(
+ <Search {...DEFAULT_PROPS} handoffEnabled={true} dispatch={dispatch} />
+ );
+ wrapper
+ .find(".search-handoff-button")
+ .simulate("click", { preventDefault: () => {} });
+ assert.calledThrice(dispatch);
+ assert.calledWith(dispatch, {
+ data: { text: undefined },
+ meta: {
+ from: "ActivityStream:Content",
+ skipLocal: true,
+ to: "ActivityStream:Main",
+ },
+ type: "HANDOFF_SEARCH_TO_AWESOMEBAR",
+ });
+ assert.calledWith(dispatch, { type: "FAKE_FOCUS_SEARCH" });
+ const [action] = dispatch.thirdCall.args;
+ assert.isUserEventAction(action);
+ assert.propertyVal(action.data, "event", "SEARCH_HANDOFF");
+ });
+ it("should hand-off search on paste", () => {
+ const dispatch = sinon.spy();
+ const wrapper = mount(
+ <Search {...DEFAULT_PROPS} handoffEnabled={true} dispatch={dispatch} />
+ );
+ wrapper.instance()._searchHandoffButton = { contains: () => true };
+ wrapper.instance().onSearchHandoffPaste({
+ clipboardData: {
+ getData: () => "some copied text",
+ },
+ preventDefault: () => {},
+ });
+ assert.equal(dispatch.callCount, 4);
+ assert.calledWith(dispatch, {
+ data: { text: "some copied text" },
+ meta: {
+ from: "ActivityStream:Content",
+ skipLocal: true,
+ to: "ActivityStream:Main",
+ },
+ type: "HANDOFF_SEARCH_TO_AWESOMEBAR",
+ });
+ assert.calledWith(dispatch, { type: "DISABLE_SEARCH" });
+ const [action] = dispatch.thirdCall.args;
+ assert.isUserEventAction(action);
+ assert.propertyVal(action.data, "event", "SEARCH_HANDOFF");
+ });
+ it("should properly handle drop events", () => {
+ const dispatch = sinon.spy();
+ const wrapper = mount(
+ <Search {...DEFAULT_PROPS} handoffEnabled={true} dispatch={dispatch} />
+ );
+ const preventDefault = sinon.spy();
+ wrapper.find(".fake-editable").simulate("drop", {
+ dataTransfer: { getData: () => "dropped text" },
+ preventDefault,
+ });
+ assert.equal(dispatch.callCount, 4);
+ assert.calledWith(dispatch, {
+ data: { text: "dropped text" },
+ meta: {
+ from: "ActivityStream:Content",
+ skipLocal: true,
+ to: "ActivityStream:Main",
+ },
+ type: "HANDOFF_SEARCH_TO_AWESOMEBAR",
+ });
+ assert.calledWith(dispatch, { type: "DISABLE_SEARCH" });
+ const [action] = dispatch.thirdCall.args;
+ assert.isUserEventAction(action);
+ assert.propertyVal(action.data, "event", "SEARCH_HANDOFF");
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/Sections.test.jsx b/browser/components/newtab/test/unit/content-src/components/Sections.test.jsx
new file mode 100644
index 0000000000..9f4008369a
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/Sections.test.jsx
@@ -0,0 +1,600 @@
+import { combineReducers, createStore } from "redux";
+import { INITIAL_STATE, reducers } from "common/Reducers.sys.mjs";
+import {
+ Section,
+ SectionIntl,
+ _Sections as Sections,
+} from "content-src/components/Sections/Sections";
+import { actionTypes as at } from "common/Actions.sys.mjs";
+import { mount, shallow } from "enzyme";
+import { PlaceholderCard } from "content-src/components/Card/Card";
+import { PocketLoggedInCta } from "content-src/components/PocketLoggedInCta/PocketLoggedInCta";
+import { Provider } from "react-redux";
+import React from "react";
+import { Topics } from "content-src/components/Topics/Topics";
+import { TopSites } from "content-src/components/TopSites/TopSites";
+
+function mountSectionWithProps(props) {
+ const store = createStore(combineReducers(reducers), INITIAL_STATE);
+ return mount(
+ <Provider store={store}>
+ <Section {...props} />
+ </Provider>
+ );
+}
+
+function mountSectionIntlWithProps(props) {
+ const store = createStore(combineReducers(reducers), INITIAL_STATE);
+ return mount(
+ <Provider store={store}>
+ <SectionIntl {...props} />
+ </Provider>
+ );
+}
+
+describe("<Sections>", () => {
+ let wrapper;
+ let FAKE_SECTIONS;
+ beforeEach(() => {
+ FAKE_SECTIONS = new Array(5).fill(null).map((v, i) => ({
+ id: `foo_bar_${i}`,
+ title: `Foo Bar ${i}`,
+ enabled: !!(i % 2),
+ rows: [],
+ }));
+ wrapper = shallow(
+ <Sections
+ Sections={FAKE_SECTIONS}
+ Prefs={{
+ values: { sectionOrder: FAKE_SECTIONS.map(i => i.id).join(",") },
+ }}
+ />
+ );
+ });
+ it("should render a Sections element", () => {
+ assert.ok(wrapper.exists());
+ });
+ it("should render a Section for each one passed in props.Sections with .enabled === true", () => {
+ const sectionElems = wrapper.find(SectionIntl);
+ assert.lengthOf(sectionElems, 2);
+ sectionElems.forEach((section, i) => {
+ assert.equal(section.props().id, FAKE_SECTIONS[2 * i + 1].id);
+ assert.equal(section.props().enabled, true);
+ });
+ });
+ it("should render Top Sites if feeds.topsites pref is true", () => {
+ wrapper = shallow(
+ <Sections
+ Sections={FAKE_SECTIONS}
+ Prefs={{
+ values: {
+ "feeds.topsites": true,
+ sectionOrder: "topsites,topstories,highlights",
+ },
+ }}
+ />
+ );
+ assert.equal(wrapper.find(TopSites).length, 1);
+ });
+ it("should NOT render Top Sites if feeds.topsites pref is false", () => {
+ wrapper = shallow(
+ <Sections
+ Sections={FAKE_SECTIONS}
+ Prefs={{
+ values: {
+ "feeds.topsites": false,
+ sectionOrder: "topsites,topstories,highlights",
+ },
+ }}
+ />
+ );
+ assert.equal(wrapper.find(TopSites).length, 0);
+ });
+ it("should render the sections in the order specifed by sectionOrder pref", () => {
+ wrapper = shallow(
+ <Sections
+ Sections={FAKE_SECTIONS}
+ Prefs={{ values: { sectionOrder: "foo_bar_1,foo_bar_3" } }}
+ />
+ );
+ let sections = wrapper.find(SectionIntl);
+ assert.lengthOf(sections, 2);
+ assert.equal(sections.first().props().id, "foo_bar_1");
+ assert.equal(sections.last().props().id, "foo_bar_3");
+ wrapper = shallow(
+ <Sections
+ Sections={FAKE_SECTIONS}
+ Prefs={{ values: { sectionOrder: "foo_bar_3,foo_bar_1" } }}
+ />
+ );
+ sections = wrapper.find(SectionIntl);
+ assert.lengthOf(sections, 2);
+ assert.equal(sections.first().props().id, "foo_bar_3");
+ assert.equal(sections.last().props().id, "foo_bar_1");
+ });
+});
+
+describe("<Section>", () => {
+ let wrapper;
+ let FAKE_SECTION;
+
+ beforeEach(() => {
+ FAKE_SECTION = {
+ id: `foo_bar_1`,
+ pref: { collapsed: false },
+ title: `Foo Bar 1`,
+ rows: [{ link: "http://localhost", index: 0 }],
+ emptyState: {
+ icon: "check",
+ message: "Some message",
+ },
+ rowsPref: "section.rows",
+ maxRows: 4,
+ Prefs: { values: { "section.rows": 2 } },
+ };
+ wrapper = mountSectionIntlWithProps(FAKE_SECTION);
+ });
+
+ describe("placeholders", () => {
+ const CARDS_PER_ROW = 3;
+ const fakeSite = { link: "http://localhost" };
+ function renderWithSites(rows) {
+ const store = createStore(combineReducers(reducers), INITIAL_STATE);
+ return mount(
+ <Provider store={store}>
+ <Section {...FAKE_SECTION} rows={rows} />
+ </Provider>
+ );
+ }
+
+ it("should return 2 row of placeholders if realRows is 0", () => {
+ wrapper = renderWithSites([]);
+ assert.lengthOf(wrapper.find(PlaceholderCard), 6);
+ });
+ it("should fill in the rest of the rows", () => {
+ wrapper = renderWithSites(new Array(CARDS_PER_ROW).fill(fakeSite));
+ assert.lengthOf(
+ wrapper.find(PlaceholderCard),
+ CARDS_PER_ROW,
+ "CARDS_PER_ROW"
+ );
+
+ wrapper = renderWithSites(new Array(CARDS_PER_ROW + 1).fill(fakeSite));
+ assert.lengthOf(wrapper.find(PlaceholderCard), 2, "CARDS_PER_ROW + 1");
+
+ wrapper = renderWithSites(new Array(CARDS_PER_ROW + 2).fill(fakeSite));
+ assert.lengthOf(wrapper.find(PlaceholderCard), 1, "CARDS_PER_ROW + 2");
+
+ wrapper = renderWithSites(
+ new Array(2 * CARDS_PER_ROW - 1).fill(fakeSite)
+ );
+ assert.lengthOf(wrapper.find(PlaceholderCard), 1, "CARDS_PER_ROW - 1");
+ });
+ it("should not add placeholders all the rows are full", () => {
+ wrapper = renderWithSites(new Array(2 * CARDS_PER_ROW).fill(fakeSite));
+ assert.lengthOf(wrapper.find(PlaceholderCard), 0, "2 rows");
+ });
+ });
+
+ describe("empty state", () => {
+ beforeEach(() => {
+ Object.assign(FAKE_SECTION, {
+ initialized: true,
+ dispatch: () => {},
+ rows: [],
+ emptyState: {
+ message: "Some message",
+ },
+ });
+ wrapper = shallow(<Section {...FAKE_SECTION} />);
+ });
+ it("should be shown when rows is empty and initialized is true", () => {
+ assert.ok(wrapper.find(".empty-state").exists());
+ });
+ it("should not be shown in initialized is false", () => {
+ Object.assign(FAKE_SECTION, {
+ initialized: false,
+ rows: [],
+ emptyState: {
+ message: "Some message",
+ },
+ });
+ wrapper = shallow(<Section {...FAKE_SECTION} />);
+ assert.isFalse(wrapper.find(".empty-state").exists());
+ });
+ it("no icon should be shown", () => {
+ assert.lengthOf(wrapper.find(".icon"), 0);
+ });
+ });
+
+ describe("topics component", () => {
+ let TOP_STORIES_SECTION;
+ beforeEach(() => {
+ TOP_STORIES_SECTION = {
+ id: "topstories",
+ title: "TopStories",
+ pref: { collapsed: false },
+ rows: [{ guid: 1, link: "http://localhost", isDefault: true }],
+ topics: [],
+ read_more_endpoint: "http://localhost/read-more",
+ maxRows: 1,
+ eventSource: "TOP_STORIES",
+ };
+ });
+ it("should not render for empty topics", () => {
+ wrapper = mountSectionIntlWithProps(TOP_STORIES_SECTION);
+
+ assert.lengthOf(wrapper.find(".topic"), 0);
+ });
+ it("should render for non-empty topics", () => {
+ TOP_STORIES_SECTION.topics = [{ name: "topic1", url: "topic-url1" }];
+ wrapper = shallow(
+ <Section
+ Pocket={{ pocketCta: { useCta: true }, isUserLoggedIn: true }}
+ {...TOP_STORIES_SECTION}
+ />
+ );
+
+ assert.lengthOf(wrapper.find(Topics), 1);
+ assert.lengthOf(wrapper.find(PocketLoggedInCta), 0);
+ });
+ it("should delay render of third rec to give time for potential spoc", async () => {
+ TOP_STORIES_SECTION.rows = [
+ { guid: 1, link: "http://localhost" },
+ { guid: 2, link: "http://localhost" },
+ { guid: 3, link: "http://localhost" },
+ ];
+ wrapper = shallow(
+ <Section
+ Pocket={{ waitingForSpoc: true, pocketCta: {} }}
+ {...TOP_STORIES_SECTION}
+ />
+ );
+ assert.lengthOf(wrapper.find(PlaceholderCard), 1);
+
+ wrapper.setProps({
+ Pocket: {
+ waitingForSpoc: false,
+ pocketCta: {},
+ },
+ });
+ assert.lengthOf(wrapper.find(PlaceholderCard), 0);
+ });
+ it("should render container for uninitialized topics to ensure content doesn't shift", () => {
+ delete TOP_STORIES_SECTION.topics;
+
+ wrapper = mountSectionIntlWithProps(TOP_STORIES_SECTION);
+
+ assert.lengthOf(wrapper.find(".top-stories-bottom-container"), 1);
+ assert.lengthOf(wrapper.find(Topics), 0);
+ assert.lengthOf(wrapper.find(PocketLoggedInCta), 0);
+ });
+
+ it("should render a pocket cta if not logged in and set to display cta", () => {
+ TOP_STORIES_SECTION.topics = [{ name: "topic1", url: "topic-url1" }];
+ wrapper = shallow(
+ <Section
+ Pocket={{ pocketCta: { useCta: true }, isUserLoggedIn: false }}
+ {...TOP_STORIES_SECTION}
+ />
+ );
+
+ assert.lengthOf(wrapper.find(Topics), 0);
+ assert.lengthOf(wrapper.find(PocketLoggedInCta), 1);
+ });
+ it("should render nothing while loading to avoid a flicker of log in state", () => {
+ TOP_STORIES_SECTION.topics = [{ name: "topic1", url: "topic-url1" }];
+ wrapper = shallow(
+ <Section
+ Pocket={{ pocketCta: { useCta: false } }}
+ {...TOP_STORIES_SECTION}
+ />
+ );
+
+ assert.lengthOf(wrapper.find(Topics), 0);
+ assert.lengthOf(wrapper.find(PocketLoggedInCta), 0);
+ });
+ it("should render a topics list if set to not display cta with either logged or out", () => {
+ TOP_STORIES_SECTION.topics = [{ name: "topic1", url: "topic-url1" }];
+ wrapper = shallow(
+ <Section
+ Pocket={{ pocketCta: { useCta: false }, isUserLoggedIn: false }}
+ {...TOP_STORIES_SECTION}
+ />
+ );
+
+ assert.lengthOf(wrapper.find(Topics), 1);
+ assert.lengthOf(wrapper.find(PocketLoggedInCta), 0);
+
+ wrapper = shallow(
+ <Section
+ Pocket={{ pocketCta: { useCta: false }, isUserLoggedIn: true }}
+ {...TOP_STORIES_SECTION}
+ />
+ );
+
+ assert.lengthOf(wrapper.find(Topics), 1);
+ assert.lengthOf(wrapper.find(PocketLoggedInCta), 0);
+ });
+ it("should render nothing if set to display a cta and not logged in or out (waiting for state)", () => {
+ TOP_STORIES_SECTION.topics = [{ name: "topic1", url: "topic-url1" }];
+ wrapper = shallow(
+ <Section
+ Pocket={{ pocketCta: { useCta: true } }}
+ {...TOP_STORIES_SECTION}
+ />
+ );
+
+ assert.lengthOf(wrapper.find(Topics), 0);
+ assert.lengthOf(wrapper.find(PocketLoggedInCta), 0);
+ });
+ });
+
+ describe("impression stats", () => {
+ const FAKE_TOPSTORIES_SECTION_PROPS = {
+ id: "TopStories",
+ title: "Foo Bar 1",
+ pref: { collapsed: false },
+ maxRows: 1,
+ rows: [{ guid: 1 }, { guid: 2 }],
+ shouldSendImpressionStats: true,
+
+ document: {
+ visibilityState: "visible",
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub(),
+ },
+ eventSource: "TOP_STORIES",
+ options: { personalized: false },
+ };
+
+ function renderSection(props = {}) {
+ return shallow(<Section {...FAKE_TOPSTORIES_SECTION_PROPS} {...props} />);
+ }
+
+ it("should send impression with the right stats when the page loads", () => {
+ const dispatch = sinon.spy();
+ renderSection({ dispatch });
+
+ assert.calledOnce(dispatch);
+
+ const [action] = dispatch.firstCall.args;
+ assert.equal(action.type, at.TELEMETRY_IMPRESSION_STATS);
+ assert.equal(action.data.source, "TOP_STORIES");
+ assert.deepEqual(action.data.tiles, [{ id: 1 }, { id: 2 }]);
+ });
+ it("should not send impression stats if not configured", () => {
+ const dispatch = sinon.spy();
+ const props = Object.assign({}, FAKE_TOPSTORIES_SECTION_PROPS, {
+ shouldSendImpressionStats: false,
+ dispatch,
+ });
+ renderSection(props);
+ assert.notCalled(dispatch);
+ });
+ it("should not send impression stats if the section is collapsed", () => {
+ const dispatch = sinon.spy();
+ const props = Object.assign({}, FAKE_TOPSTORIES_SECTION_PROPS, {
+ pref: { collapsed: true },
+ });
+ renderSection(props);
+ assert.notCalled(dispatch);
+ });
+ it("should send 1 impression when the page becomes visibile after loading", () => {
+ const props = {
+ dispatch: sinon.spy(),
+ document: {
+ visibilityState: "hidden",
+ addEventListener: sinon.spy(),
+ removeEventListener: sinon.spy(),
+ },
+ };
+
+ renderSection(props);
+
+ // Was the event listener added?
+ assert.calledWith(props.document.addEventListener, "visibilitychange");
+
+ // Make sure dispatch wasn't called yet
+ assert.notCalled(props.dispatch);
+
+ // Simulate a visibilityChange event
+ const [, listener] = props.document.addEventListener.firstCall.args;
+ props.document.visibilityState = "visible";
+ listener();
+
+ // Did we actually dispatch an event?
+ assert.calledOnce(props.dispatch);
+ assert.equal(
+ props.dispatch.firstCall.args[0].type,
+ at.TELEMETRY_IMPRESSION_STATS
+ );
+
+ // Did we remove the event listener?
+ assert.calledWith(
+ props.document.removeEventListener,
+ "visibilitychange",
+ listener
+ );
+ });
+ it("should remove visibility change listener when section is removed", () => {
+ const props = {
+ dispatch: sinon.spy(),
+ document: {
+ visibilityState: "hidden",
+ addEventListener: sinon.spy(),
+ removeEventListener: sinon.spy(),
+ },
+ };
+
+ const section = renderSection(props);
+ assert.calledWith(props.document.addEventListener, "visibilitychange");
+ const [, listener] = props.document.addEventListener.firstCall.args;
+
+ section.unmount();
+ assert.calledWith(
+ props.document.removeEventListener,
+ "visibilitychange",
+ listener
+ );
+ });
+ it("should send an impression if props are updated and props.rows are different", () => {
+ const props = { dispatch: sinon.spy() };
+ wrapper = renderSection(props);
+ props.dispatch.resetHistory();
+
+ // New rows
+ wrapper.setProps(
+ Object.assign({}, FAKE_TOPSTORIES_SECTION_PROPS, {
+ rows: [{ guid: 123 }],
+ })
+ );
+
+ assert.calledOnce(props.dispatch);
+ });
+ it("should not send an impression if props are updated but props.rows are the same", () => {
+ const props = { dispatch: sinon.spy() };
+ wrapper = renderSection(props);
+ props.dispatch.resetHistory();
+
+ // Only update the disclaimer prop
+ wrapper.setProps(
+ Object.assign({}, FAKE_TOPSTORIES_SECTION_PROPS, {
+ disclaimer: { id: "bar" },
+ })
+ );
+
+ assert.notCalled(props.dispatch);
+ });
+ it("should not send an impression if props are updated and props.rows are the same but section is collapsed", () => {
+ const props = { dispatch: sinon.spy() };
+ wrapper = renderSection(props);
+ props.dispatch.resetHistory();
+
+ // New rows and collapsed
+ wrapper.setProps(
+ Object.assign({}, FAKE_TOPSTORIES_SECTION_PROPS, {
+ rows: [{ guid: 123 }],
+ pref: { collapsed: true },
+ })
+ );
+
+ assert.notCalled(props.dispatch);
+
+ // Expand the section. Now the impression stats should be sent
+ wrapper.setProps(
+ Object.assign({}, FAKE_TOPSTORIES_SECTION_PROPS, {
+ rows: [{ guid: 123 }],
+ pref: { collapsed: false },
+ })
+ );
+
+ assert.calledOnce(props.dispatch);
+ });
+ it("should not send an impression if props are updated but GUIDs are the same", () => {
+ const props = { dispatch: sinon.spy() };
+ wrapper = renderSection(props);
+ props.dispatch.resetHistory();
+
+ wrapper.setProps(
+ Object.assign({}, FAKE_TOPSTORIES_SECTION_PROPS, {
+ rows: [{ guid: 1 }, { guid: 2 }],
+ })
+ );
+
+ assert.notCalled(props.dispatch);
+ });
+ it("should only send the latest impression on a visibility change", () => {
+ const listeners = new Set();
+ const props = {
+ dispatch: sinon.spy(),
+ document: {
+ visibilityState: "hidden",
+ addEventListener: (ev, cb) => listeners.add(cb),
+ removeEventListener: (ev, cb) => listeners.delete(cb),
+ },
+ };
+
+ wrapper = renderSection(props);
+
+ // Update twice
+ wrapper.setProps(Object.assign({}, props, { rows: [{ guid: 123 }] }));
+ wrapper.setProps(Object.assign({}, props, { rows: [{ guid: 2432 }] }));
+
+ assert.notCalled(props.dispatch);
+
+ // Simulate listeners getting called
+ props.document.visibilityState = "visible";
+ listeners.forEach(l => l());
+
+ // Make sure we only sent the latest event
+ assert.calledOnce(props.dispatch);
+ const [action] = props.dispatch.firstCall.args;
+ assert.deepEqual(action.data.tiles, [{ id: 2432 }]);
+ });
+ });
+
+ describe("tab rehydrated", () => {
+ it("should fire NEW_TAB_REHYDRATED event", () => {
+ const dispatch = sinon.spy();
+ const TOP_STORIES_SECTION = {
+ id: "topstories",
+ title: "TopStories",
+ pref: { collapsed: false },
+ initialized: false,
+ rows: [{ guid: 1, link: "http://localhost", isDefault: true }],
+ topics: [],
+ read_more_endpoint: "http://localhost/read-more",
+ maxRows: 1,
+ eventSource: "TOP_STORIES",
+ };
+ wrapper = shallow(
+ <Section
+ Pocket={{ waitingForSpoc: true, pocketCta: {} }}
+ {...TOP_STORIES_SECTION}
+ dispatch={dispatch}
+ />
+ );
+ assert.notCalled(dispatch);
+
+ wrapper.setProps({ initialized: true });
+
+ assert.calledOnce(dispatch);
+ const [action] = dispatch.firstCall.args;
+ assert.equal("NEW_TAB_REHYDRATED", action.type);
+ });
+ });
+
+ describe("#numRows", () => {
+ it("should return maxRows if there is no rowsPref set", () => {
+ delete FAKE_SECTION.rowsPref;
+ wrapper = mountSectionIntlWithProps(FAKE_SECTION);
+ assert.equal(
+ wrapper.find(Section).instance().numRows,
+ FAKE_SECTION.maxRows
+ );
+ });
+
+ it("should return number of rows set in Pref if rowsPref is set", () => {
+ const numRows = 2;
+ Object.assign(FAKE_SECTION, {
+ rowsPref: "section.rows",
+ maxRows: 4,
+ Prefs: { values: { "section.rows": numRows } },
+ });
+ wrapper = mountSectionWithProps(FAKE_SECTION);
+ assert.equal(wrapper.find(Section).instance().numRows, numRows);
+ });
+
+ it("should return number of rows set in Pref even if higher than maxRows value", () => {
+ const numRows = 10;
+ Object.assign(FAKE_SECTION, {
+ rowsPref: "section.rows",
+ maxRows: 4,
+ Prefs: { values: { "section.rows": numRows } },
+ });
+ wrapper = mountSectionWithProps(FAKE_SECTION);
+ assert.equal(wrapper.find(Section).instance().numRows, numRows);
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/TopSites.test.jsx b/browser/components/newtab/test/unit/content-src/components/TopSites.test.jsx
new file mode 100644
index 0000000000..1977066f0d
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/TopSites.test.jsx
@@ -0,0 +1,1930 @@
+import {
+ actionCreators as ac,
+ actionTypes as at,
+} from "common/Actions.sys.mjs";
+import { GlobalOverrider } from "test/unit/utils";
+import { MIN_RICH_FAVICON_SIZE } from "content-src/components/TopSites/TopSitesConstants";
+import {
+ TOP_SITES_DEFAULT_ROWS,
+ TOP_SITES_MAX_SITES_PER_ROW,
+} from "common/Reducers.sys.mjs";
+import {
+ TopSite,
+ TopSiteLink,
+ _TopSiteList as TopSiteList,
+ TopSitePlaceholder,
+} from "content-src/components/TopSites/TopSite";
+import {
+ INTERSECTION_RATIO,
+ TopSiteImpressionWrapper,
+} from "content-src/components/TopSites/TopSiteImpressionWrapper";
+import { A11yLinkButton } from "content-src/components/A11yLinkButton/A11yLinkButton";
+import { LinkMenu } from "content-src/components/LinkMenu/LinkMenu";
+import React from "react";
+import { mount, shallow } from "enzyme";
+import { TopSiteForm } from "content-src/components/TopSites/TopSiteForm";
+import { TopSiteFormInput } from "content-src/components/TopSites/TopSiteFormInput";
+import { _TopSites as TopSites } from "content-src/components/TopSites/TopSites";
+import { ContextMenuButton } from "content-src/components/ContextMenu/ContextMenuButton";
+
+const perfSvc = {
+ mark() {},
+ getMostRecentAbsMarkStartByName() {},
+};
+
+const DEFAULT_PROPS = {
+ Prefs: { values: { featureConfig: {} } },
+ TopSites: { initialized: true, rows: [] },
+ TopSitesRows: TOP_SITES_DEFAULT_ROWS,
+ topSiteIconType: () => "no_image",
+ dispatch() {},
+ perfSvc,
+};
+
+const DEFAULT_BLOB_URL = "blob://test";
+
+describe("<TopSites>", () => {
+ let sandbox;
+
+ beforeEach(() => {
+ sandbox = sinon.createSandbox();
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should render a TopSites element", () => {
+ const wrapper = shallow(<TopSites {...DEFAULT_PROPS} />);
+ assert.ok(wrapper.exists());
+ });
+ describe("#_dispatchTopSitesStats", () => {
+ let globals;
+ let wrapper;
+ let dispatchStatsSpy;
+
+ beforeEach(() => {
+ globals = new GlobalOverrider();
+ sandbox.stub(DEFAULT_PROPS, "dispatch");
+ wrapper = shallow(<TopSites {...DEFAULT_PROPS} />, {
+ disableLifecycleMethods: true,
+ });
+ dispatchStatsSpy = sandbox.spy(
+ wrapper.instance(),
+ "_dispatchTopSitesStats"
+ );
+ });
+ afterEach(() => {
+ globals.restore();
+ sandbox.restore();
+ });
+ it("should call _dispatchTopSitesStats on componentDidMount", () => {
+ wrapper.instance().componentDidMount();
+
+ assert.calledOnce(dispatchStatsSpy);
+ });
+ it("should call _dispatchTopSitesStats on componentDidUpdate", () => {
+ wrapper.instance().componentDidUpdate();
+
+ assert.calledOnce(dispatchStatsSpy);
+ });
+ it("should dispatch SAVE_SESSION_PERF_DATA", () => {
+ wrapper.instance()._dispatchTopSitesStats();
+
+ assert.calledOnce(DEFAULT_PROPS.dispatch);
+ assert.calledWithExactly(
+ DEFAULT_PROPS.dispatch,
+ ac.AlsoToMain({
+ type: at.SAVE_SESSION_PERF_DATA,
+ data: {
+ topsites_icon_stats: {
+ custom_screenshot: 0,
+ screenshot: 0,
+ tippytop: 0,
+ rich_icon: 0,
+ no_image: 0,
+ },
+ topsites_pinned: 0,
+ topsites_search_shortcuts: 0,
+ },
+ })
+ );
+ });
+ it("should correctly count TopSite images - just screenshot", () => {
+ const rows = [{ screenshot: true }];
+ sandbox.stub(DEFAULT_PROPS.TopSites, "rows").value(rows);
+ wrapper.instance()._dispatchTopSitesStats();
+
+ assert.calledOnce(DEFAULT_PROPS.dispatch);
+ assert.calledWithExactly(
+ DEFAULT_PROPS.dispatch,
+ ac.AlsoToMain({
+ type: at.SAVE_SESSION_PERF_DATA,
+ data: {
+ topsites_icon_stats: {
+ custom_screenshot: 0,
+ screenshot: 1,
+ tippytop: 0,
+ rich_icon: 0,
+ no_image: 0,
+ },
+ topsites_pinned: 0,
+ topsites_search_shortcuts: 0,
+ },
+ })
+ );
+ });
+ it("should correctly count TopSite images - custom_screenshot", () => {
+ const rows = [{ customScreenshotURL: true }];
+ sandbox.stub(DEFAULT_PROPS.TopSites, "rows").value(rows);
+ wrapper.instance()._dispatchTopSitesStats();
+
+ assert.calledOnce(DEFAULT_PROPS.dispatch);
+ assert.calledWithExactly(
+ DEFAULT_PROPS.dispatch,
+ ac.AlsoToMain({
+ type: at.SAVE_SESSION_PERF_DATA,
+ data: {
+ topsites_icon_stats: {
+ custom_screenshot: 1,
+ screenshot: 0,
+ tippytop: 0,
+ rich_icon: 0,
+ no_image: 0,
+ },
+ topsites_pinned: 0,
+ topsites_search_shortcuts: 0,
+ },
+ })
+ );
+ });
+ it("should correctly count TopSite images - rich_icon", () => {
+ const rows = [{ faviconSize: MIN_RICH_FAVICON_SIZE }];
+ sandbox.stub(DEFAULT_PROPS.TopSites, "rows").value(rows);
+ wrapper.instance()._dispatchTopSitesStats();
+
+ assert.calledOnce(DEFAULT_PROPS.dispatch);
+ assert.calledWithExactly(
+ DEFAULT_PROPS.dispatch,
+ ac.AlsoToMain({
+ type: at.SAVE_SESSION_PERF_DATA,
+ data: {
+ topsites_icon_stats: {
+ custom_screenshot: 0,
+ screenshot: 0,
+ tippytop: 0,
+ rich_icon: 1,
+ no_image: 0,
+ },
+ topsites_pinned: 0,
+ topsites_search_shortcuts: 0,
+ },
+ })
+ );
+ });
+ it("should correctly count TopSite images - tippytop", () => {
+ const rows = [
+ { tippyTopIcon: "foo" },
+ { faviconRef: "tippytop" },
+ { faviconRef: "foobar" },
+ ];
+ sandbox.stub(DEFAULT_PROPS.TopSites, "rows").value(rows);
+ wrapper.instance()._dispatchTopSitesStats();
+
+ assert.calledOnce(DEFAULT_PROPS.dispatch);
+ assert.calledWithExactly(
+ DEFAULT_PROPS.dispatch,
+ ac.AlsoToMain({
+ type: at.SAVE_SESSION_PERF_DATA,
+ data: {
+ topsites_icon_stats: {
+ custom_screenshot: 0,
+ screenshot: 0,
+ tippytop: 2,
+ rich_icon: 0,
+ no_image: 1,
+ },
+ topsites_pinned: 0,
+ topsites_search_shortcuts: 0,
+ },
+ })
+ );
+ });
+ it("should correctly count TopSite images - no image", () => {
+ const rows = [{}];
+ sandbox.stub(DEFAULT_PROPS.TopSites, "rows").value(rows);
+ wrapper.instance()._dispatchTopSitesStats();
+
+ assert.calledOnce(DEFAULT_PROPS.dispatch);
+ assert.calledWithExactly(
+ DEFAULT_PROPS.dispatch,
+ ac.AlsoToMain({
+ type: at.SAVE_SESSION_PERF_DATA,
+ data: {
+ topsites_icon_stats: {
+ custom_screenshot: 0,
+ screenshot: 0,
+ tippytop: 0,
+ rich_icon: 0,
+ no_image: 1,
+ },
+ topsites_pinned: 0,
+ topsites_search_shortcuts: 0,
+ },
+ })
+ );
+ });
+ it("should correctly count pinned Top Sites", () => {
+ const rows = [
+ { isPinned: true },
+ { isPinned: false },
+ { isPinned: true },
+ ];
+ sandbox.stub(DEFAULT_PROPS.TopSites, "rows").value(rows);
+ wrapper.instance()._dispatchTopSitesStats();
+
+ assert.calledOnce(DEFAULT_PROPS.dispatch);
+ assert.calledWithExactly(
+ DEFAULT_PROPS.dispatch,
+ ac.AlsoToMain({
+ type: at.SAVE_SESSION_PERF_DATA,
+ data: {
+ topsites_icon_stats: {
+ custom_screenshot: 0,
+ screenshot: 0,
+ tippytop: 0,
+ rich_icon: 0,
+ no_image: 3,
+ },
+ topsites_pinned: 2,
+ topsites_search_shortcuts: 0,
+ },
+ })
+ );
+ });
+ it("should correctly count search shortcut Top Sites", () => {
+ const rows = [{ searchTopSite: true }, { searchTopSite: true }];
+ sandbox.stub(DEFAULT_PROPS.TopSites, "rows").value(rows);
+ wrapper.instance()._dispatchTopSitesStats();
+
+ assert.calledOnce(DEFAULT_PROPS.dispatch);
+ assert.calledWithExactly(
+ DEFAULT_PROPS.dispatch,
+ ac.AlsoToMain({
+ type: at.SAVE_SESSION_PERF_DATA,
+ data: {
+ topsites_icon_stats: {
+ custom_screenshot: 0,
+ screenshot: 0,
+ tippytop: 0,
+ rich_icon: 0,
+ no_image: 2,
+ },
+ topsites_pinned: 0,
+ topsites_search_shortcuts: 2,
+ },
+ })
+ );
+ });
+ it("should only count visible top sites on wide layout", () => {
+ globals.set("matchMedia", () => ({ matches: true }));
+ const rows = [
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ ];
+ sandbox.stub(DEFAULT_PROPS.TopSites, "rows").value(rows);
+
+ wrapper.instance()._dispatchTopSitesStats();
+ assert.calledOnce(DEFAULT_PROPS.dispatch);
+ assert.calledWithExactly(
+ DEFAULT_PROPS.dispatch,
+ ac.AlsoToMain({
+ type: at.SAVE_SESSION_PERF_DATA,
+ data: {
+ topsites_icon_stats: {
+ custom_screenshot: 0,
+ screenshot: 0,
+ tippytop: 0,
+ rich_icon: 0,
+ no_image: 8,
+ },
+ topsites_pinned: 0,
+ topsites_search_shortcuts: 0,
+ },
+ })
+ );
+ });
+ it("should only count visible top sites on normal layout", () => {
+ globals.set("matchMedia", () => ({ matches: false }));
+ const rows = [
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ {},
+ ];
+ sandbox.stub(DEFAULT_PROPS.TopSites, "rows").value(rows);
+ wrapper.instance()._dispatchTopSitesStats();
+ assert.calledOnce(DEFAULT_PROPS.dispatch);
+ assert.calledWithExactly(
+ DEFAULT_PROPS.dispatch,
+ ac.AlsoToMain({
+ type: at.SAVE_SESSION_PERF_DATA,
+ data: {
+ topsites_icon_stats: {
+ custom_screenshot: 0,
+ screenshot: 0,
+ tippytop: 0,
+ rich_icon: 0,
+ no_image: 6,
+ },
+ topsites_pinned: 0,
+ topsites_search_shortcuts: 0,
+ },
+ })
+ );
+ });
+ });
+});
+
+describe("<TopSiteLink>", () => {
+ let globals;
+ let link;
+ let url;
+ beforeEach(() => {
+ globals = new GlobalOverrider();
+ url = {
+ createObjectURL: globals.sandbox.stub().returns(DEFAULT_BLOB_URL),
+ revokeObjectURL: globals.sandbox.spy(),
+ };
+ globals.set("URL", url);
+ link = { url: "https://foo.com", screenshot: "foo.jpg", hostname: "foo" };
+ });
+ afterEach(() => globals.restore());
+ it("should add the right url", () => {
+ link.url = "https://www.foobar.org";
+ const wrapper = shallow(<TopSiteLink link={link} />);
+ assert.propertyVal(
+ wrapper.find("a").props(),
+ "href",
+ "https://www.foobar.org"
+ );
+ });
+ it("should not add the url to the href if it a search shortcut", () => {
+ link.searchTopSite = true;
+ const wrapper = shallow(<TopSiteLink link={link} />);
+ assert.isUndefined(wrapper.find("a").props().href);
+ });
+ it("should have rtl direction automatically set for text", () => {
+ const wrapper = shallow(<TopSiteLink link={link} />);
+
+ assert.isTrue(!!wrapper.find("[dir='auto']").length);
+ });
+ it("should render a title", () => {
+ const wrapper = shallow(<TopSiteLink link={link} title="foobar" />);
+ const titleEl = wrapper.find(".title");
+
+ assert.equal(titleEl.text(), "foobar");
+ });
+ it("should have only the title as the text of the link", () => {
+ const wrapper = shallow(<TopSiteLink link={link} title="foobar" />);
+
+ assert.equal(wrapper.find("a").text(), "foobar");
+ });
+ it("should render the pin icon for pinned links", () => {
+ link.isPinned = true;
+ link.pinnedIndex = 7;
+ const wrapper = shallow(<TopSiteLink link={link} />);
+ assert.equal(wrapper.find(".icon-pin-small").length, 1);
+ });
+ it("should not render the pin icon for non pinned links", () => {
+ link.isPinned = false;
+ const wrapper = shallow(<TopSiteLink link={link} />);
+ assert.equal(wrapper.find(".icon-pin-small").length, 0);
+ });
+ it("should render the first letter of the title as a fallback for missing icons", () => {
+ const wrapper = shallow(<TopSiteLink link={link} title={"foo"} />);
+ assert.equal(wrapper.find(".icon-wrapper").prop("data-fallback"), "f");
+ });
+ it("should render the tippy top icon if provided and not a small icon", () => {
+ link.tippyTopIcon = "foo.png";
+ link.backgroundColor = "#FFFFFF";
+ const wrapper = shallow(<TopSiteLink link={link} />);
+ assert.lengthOf(wrapper.find(".screenshot"), 0);
+ assert.lengthOf(wrapper.find(".default-icon"), 0);
+ const tippyTop = wrapper.find(".rich-icon");
+ assert.propertyVal(
+ tippyTop.props().style,
+ "backgroundImage",
+ "url(foo.png)"
+ );
+ assert.propertyVal(tippyTop.props().style, "backgroundColor", "#FFFFFF");
+ });
+ it("should render a rich icon if provided and not a small icon", () => {
+ link.favicon = "foo.png";
+ link.faviconSize = 196;
+ link.backgroundColor = "#FFFFFF";
+ const wrapper = shallow(<TopSiteLink link={link} />);
+ assert.lengthOf(wrapper.find(".screenshot"), 0);
+ assert.lengthOf(wrapper.find(".default-icon"), 0);
+ const richIcon = wrapper.find(".rich-icon");
+ assert.propertyVal(
+ richIcon.props().style,
+ "backgroundImage",
+ "url(foo.png)"
+ );
+ assert.propertyVal(richIcon.props().style, "backgroundColor", "#FFFFFF");
+ });
+ it("should not render a rich icon if it is smaller than 96x96", () => {
+ link.favicon = "foo.png";
+ link.faviconSize = 48;
+ link.backgroundColor = "#FFFFFF";
+ const wrapper = shallow(<TopSiteLink link={link} />);
+ assert.lengthOf(wrapper.find(".default-icon"), 1);
+ assert.equal(wrapper.find(".rich-icon").length, 0);
+ });
+ it("should apply just the default class name to the outer link if props.className is falsey", () => {
+ const wrapper = shallow(<TopSiteLink className={false} />);
+ assert.ok(wrapper.find("li").hasClass("top-site-outer"));
+ });
+ it("should add props.className to the outer link element", () => {
+ const wrapper = shallow(<TopSiteLink className="foo bar" />);
+ assert.ok(wrapper.find("li").hasClass("top-site-outer foo bar"));
+ });
+ describe("#_allowDrop", () => {
+ let wrapper;
+ let event;
+ beforeEach(() => {
+ event = {
+ dataTransfer: {
+ types: ["text/topsite-index"],
+ },
+ };
+ wrapper = shallow(
+ <TopSiteLink isDraggable={true} onDragEvent={() => {}} />
+ );
+ });
+ it("should be droppable for basic case", () => {
+ const result = wrapper.instance()._allowDrop(event);
+ assert.isTrue(result);
+ });
+ it("should not be droppable for sponsored_position", () => {
+ wrapper.setProps({ link: { sponsored_position: 1 } });
+ const result = wrapper.instance()._allowDrop(event);
+ assert.isFalse(result);
+ });
+ it("should not be droppable for link.type", () => {
+ wrapper.setProps({ link: { type: "SPOC" } });
+ const result = wrapper.instance()._allowDrop(event);
+ assert.isFalse(result);
+ });
+ });
+ describe("#onDragEvent", () => {
+ let simulate;
+ let wrapper;
+ beforeEach(() => {
+ wrapper = shallow(
+ <TopSiteLink isDraggable={true} onDragEvent={() => {}} />
+ );
+ simulate = type => {
+ const event = {
+ dataTransfer: { setData() {}, types: { includes() {} } },
+ preventDefault() {
+ this.prevented = true;
+ },
+ target: { blur() {} },
+ type,
+ };
+ wrapper.simulate(type, event);
+ return event;
+ };
+ });
+ it("should allow clicks without dragging", () => {
+ simulate("mousedown");
+ simulate("mouseup");
+
+ const event = simulate("click");
+
+ assert.notOk(event.prevented);
+ });
+ it("should prevent clicks after dragging", () => {
+ simulate("mousedown");
+ simulate("dragstart");
+ simulate("dragenter");
+ simulate("drop");
+ simulate("dragend");
+ simulate("mouseup");
+
+ const event = simulate("click");
+
+ assert.ok(event.prevented);
+ });
+ it("should allow clicks after dragging then clicking", () => {
+ simulate("mousedown");
+ simulate("dragstart");
+ simulate("dragenter");
+ simulate("drop");
+ simulate("dragend");
+ simulate("mouseup");
+ simulate("click");
+
+ simulate("mousedown");
+ simulate("mouseup");
+
+ const event = simulate("click");
+
+ assert.notOk(event.prevented);
+ });
+ it("should prevent dragging with sponsored_position from dragstart", () => {
+ const preventDefault = sinon.stub();
+ const blur = sinon.stub();
+ wrapper.setProps({ link: { sponsored_position: 1 } });
+ wrapper.instance().onDragEvent({
+ type: "dragstart",
+ preventDefault,
+ target: { blur },
+ });
+ assert.calledOnce(preventDefault);
+ assert.calledOnce(blur);
+ assert.isUndefined(wrapper.instance().dragged);
+ });
+ it("should prevent dragging with link.shim from dragstart", () => {
+ const preventDefault = sinon.stub();
+ const blur = sinon.stub();
+ wrapper.setProps({ link: { type: "SPOC" } });
+ wrapper.instance().onDragEvent({
+ type: "dragstart",
+ preventDefault,
+ target: { blur },
+ });
+ assert.calledOnce(preventDefault);
+ assert.calledOnce(blur);
+ assert.isUndefined(wrapper.instance().dragged);
+ });
+ });
+
+ describe("#generateColor", () => {
+ let colors;
+ beforeEach(() => {
+ colors = "#0090ED,#FF4F5F,#2AC3A2";
+ });
+
+ it("should generate a random color but always pick the same color for the same string", async () => {
+ let wrapper = shallow(
+ <TopSiteLink colors={colors} title={"food"} link={link} />
+ );
+
+ assert.equal(wrapper.find(".icon-wrapper").prop("data-fallback"), "f");
+ assert.equal(
+ wrapper.find(".icon-wrapper").prop("style").backgroundColor,
+ colors.split(",")[1]
+ );
+ assert.ok(true);
+ });
+
+ it("should generate a different random color", async () => {
+ let wrapper = shallow(
+ <TopSiteLink colors={colors} title={"fam"} link={link} />
+ );
+
+ assert.equal(
+ wrapper.find(".icon-wrapper").prop("style").backgroundColor,
+ colors.split(",")[2]
+ );
+ assert.ok(true);
+ });
+
+ it("should generate a third random color", async () => {
+ let wrapper = shallow(<TopSiteLink colors={colors} title={"foo"} />);
+
+ assert.equal(wrapper.find(".icon-wrapper").prop("data-fallback"), "f");
+ assert.equal(
+ wrapper.find(".icon-wrapper").prop("style").backgroundColor,
+ colors.split(",")[0]
+ );
+ assert.ok(true);
+ });
+ });
+});
+
+describe("<TopSite>", () => {
+ let link;
+ beforeEach(() => {
+ link = { url: "https://foo.com", screenshot: "foo.jpg", hostname: "foo" };
+ });
+
+ // Build IntersectionObserver class with the arg `entries` for the intersect callback.
+ function buildIntersectionObserver(entries) {
+ return class {
+ constructor(callback) {
+ this.callback = callback;
+ }
+
+ observe() {
+ this.callback(entries);
+ }
+
+ unobserve() {}
+ };
+ }
+
+ it("should render a TopSite", () => {
+ const wrapper = shallow(<TopSite link={link} />);
+ assert.ok(wrapper.exists());
+ });
+
+ it("should render a shortened title based off the url", () => {
+ link.url = "https://www.foobar.org";
+ link.hostname = "foobar";
+ link.eTLD = "org";
+ const wrapper = shallow(<TopSite link={link} />);
+
+ assert.equal(wrapper.find(TopSiteLink).props().title, "foobar");
+ });
+
+ it("should parse args for fluent correctly", () => {
+ const title = '"fluent"';
+ link.hostname = title;
+
+ const wrapper = mount(<TopSite link={link} />);
+ const button = wrapper.find(
+ "button[data-l10n-id='newtab-menu-content-tooltip']"
+ );
+ assert.equal(button.prop("data-l10n-args"), JSON.stringify({ title }));
+ });
+
+ it("should have .active class, on top-site-outer if context menu is open", () => {
+ const wrapper = shallow(<TopSite link={link} index={1} activeIndex={1} />);
+ wrapper.setState({ showContextMenu: true });
+
+ assert.equal(wrapper.find(TopSiteLink).props().className.trim(), "active");
+ });
+ it("should not add .active class, on top-site-outer if context menu is closed", () => {
+ const wrapper = shallow(<TopSite link={link} index={1} />);
+ wrapper.setState({ showContextMenu: false, activeTile: 1 });
+ assert.equal(wrapper.find(TopSiteLink).props().className, "");
+ });
+ it("should render a context menu button", () => {
+ const wrapper = shallow(<TopSite link={link} />);
+ assert.equal(wrapper.find(ContextMenuButton).length, 1);
+ });
+ it("should render a link menu", () => {
+ const wrapper = shallow(<TopSite link={link} />);
+ assert.equal(wrapper.find(LinkMenu).length, 1);
+ });
+ it("should pass onUpdate, site, options, and index to LinkMenu", () => {
+ const wrapper = shallow(<TopSite link={link} />);
+ const linkMenuProps = wrapper.find(LinkMenu).props();
+ ["onUpdate", "site", "index", "options"].forEach(prop =>
+ assert.property(linkMenuProps, prop)
+ );
+ });
+ it("should pass through the correct menu options to LinkMenu", () => {
+ const wrapper = shallow(<TopSite link={link} />);
+ const linkMenuProps = wrapper.find(LinkMenu).props();
+ assert.deepEqual(linkMenuProps.options, [
+ "CheckPinTopSite",
+ "EditTopSite",
+ "Separator",
+ "OpenInNewWindow",
+ "OpenInPrivateWindow",
+ "Separator",
+ "BlockUrl",
+ "DeleteUrl",
+ ]);
+ });
+ it("should record impressions for visible organic Top Sites", () => {
+ const dispatch = sinon.stub();
+ const wrapper = shallow(
+ <TopSite
+ link={link}
+ index={3}
+ dispatch={dispatch}
+ IntersectionObserver={buildIntersectionObserver([
+ {
+ isIntersecting: true,
+ intersectionRatio: INTERSECTION_RATIO,
+ },
+ ])}
+ document={{
+ visibilityState: "visible",
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub(),
+ }}
+ />
+ );
+ const linkWrapper = wrapper.find(TopSiteLink).dive();
+ assert.ok(linkWrapper.exists());
+ const impressionWrapper = linkWrapper.find(TopSiteImpressionWrapper).dive();
+ assert.ok(impressionWrapper.exists());
+
+ assert.calledOnce(dispatch);
+
+ let [action] = dispatch.firstCall.args;
+ assert.equal(action.type, at.TOP_SITES_ORGANIC_IMPRESSION_STATS);
+
+ assert.propertyVal(action.data, "type", "impression");
+ assert.propertyVal(action.data, "source", "newtab");
+ assert.propertyVal(action.data, "position", 3);
+ });
+ it("should record impressions for visible sponsored Top Sites", () => {
+ const dispatch = sinon.stub();
+ const wrapper = shallow(
+ <TopSite
+ link={Object.assign({}, link, {
+ sponsored_position: 2,
+ sponsored_tile_id: 12345,
+ sponsored_impression_url: "http://impression.example.com/",
+ })}
+ index={3}
+ dispatch={dispatch}
+ IntersectionObserver={buildIntersectionObserver([
+ {
+ isIntersecting: true,
+ intersectionRatio: INTERSECTION_RATIO,
+ },
+ ])}
+ document={{
+ visibilityState: "visible",
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub(),
+ }}
+ />
+ );
+ const linkWrapper = wrapper.find(TopSiteLink).dive();
+ assert.ok(linkWrapper.exists());
+ const impressionWrapper = linkWrapper.find(TopSiteImpressionWrapper).dive();
+ assert.ok(impressionWrapper.exists());
+
+ assert.calledOnce(dispatch);
+
+ let [action] = dispatch.firstCall.args;
+ assert.equal(action.type, at.TOP_SITES_SPONSORED_IMPRESSION_STATS);
+
+ assert.propertyVal(action.data, "type", "impression");
+ assert.propertyVal(action.data, "tile_id", 12345);
+ assert.propertyVal(action.data, "source", "newtab");
+ assert.propertyVal(action.data, "position", 3);
+ assert.propertyVal(
+ action.data,
+ "reporting_url",
+ "http://impression.example.com/"
+ );
+ assert.propertyVal(action.data, "advertiser", "foo");
+ });
+
+ describe("#onLinkClick", () => {
+ it("should call dispatch when the link is clicked", () => {
+ const dispatch = sinon.stub();
+ const wrapper = shallow(
+ <TopSite link={link} index={3} dispatch={dispatch} />
+ );
+
+ wrapper.find(TopSiteLink).simulate("click", { preventDefault() {} });
+
+ let [action] = dispatch.firstCall.args;
+ assert.isUserEventAction(action);
+
+ assert.propertyVal(action.data, "event", "CLICK");
+ assert.propertyVal(action.data, "source", "TOP_SITES");
+ assert.propertyVal(action.data, "action_position", 3);
+
+ [action] = dispatch.secondCall.args;
+ assert.propertyVal(action, "type", at.OPEN_LINK);
+
+ // Organic Top Site click event.
+ [action] = dispatch.thirdCall.args;
+ assert.equal(action.type, at.TOP_SITES_ORGANIC_IMPRESSION_STATS);
+
+ assert.propertyVal(action.data, "type", "click");
+ assert.propertyVal(action.data, "source", "newtab");
+ assert.propertyVal(action.data, "position", 3);
+ });
+ it("should dispatch a UserEventAction with the right data", () => {
+ const dispatch = sinon.stub();
+ const wrapper = shallow(
+ <TopSite
+ link={Object.assign({}, link, {
+ iconType: "rich_icon",
+ isPinned: true,
+ })}
+ index={3}
+ dispatch={dispatch}
+ />
+ );
+
+ wrapper.find(TopSiteLink).simulate("click", { preventDefault() {} });
+
+ const [action] = dispatch.firstCall.args;
+ assert.isUserEventAction(action);
+
+ assert.propertyVal(action.data, "event", "CLICK");
+ assert.propertyVal(action.data, "source", "TOP_SITES");
+ assert.propertyVal(action.data, "action_position", 3);
+ assert.propertyVal(action.data.value, "card_type", "pinned");
+ assert.propertyVal(action.data.value, "icon_type", "rich_icon");
+ });
+ it("should dispatch a UserEventAction with the right data for search top site", () => {
+ const dispatch = sinon.stub();
+ const siteInfo = {
+ iconType: "tippytop",
+ isPinned: true,
+ searchTopSite: true,
+ hostname: "google",
+ label: "@google",
+ };
+ const wrapper = shallow(
+ <TopSite
+ link={Object.assign({}, link, siteInfo)}
+ index={3}
+ dispatch={dispatch}
+ />
+ );
+
+ wrapper.find(TopSiteLink).simulate("click", { preventDefault() {} });
+
+ const [action] = dispatch.firstCall.args;
+ assert.isUserEventAction(action);
+
+ assert.propertyVal(action.data, "event", "CLICK");
+ assert.propertyVal(action.data, "source", "TOP_SITES");
+ assert.propertyVal(action.data, "action_position", 3);
+ assert.propertyVal(action.data.value, "card_type", "search");
+ assert.propertyVal(action.data.value, "icon_type", "tippytop");
+ assert.propertyVal(action.data.value, "search_vendor", "google");
+ });
+ it("should dispatch a UserEventAction with the right data for SPOC top site", () => {
+ const dispatch = sinon.stub();
+ const siteInfo = {
+ id: 1,
+ iconType: "custom_screenshot",
+ type: "SPOC",
+ pos: 1,
+ label: "test advertiser",
+ shim: { click: "shim_click_id" },
+ };
+ const wrapper = shallow(
+ <TopSite
+ link={Object.assign({}, link, siteInfo)}
+ index={0}
+ dispatch={dispatch}
+ />
+ );
+
+ wrapper.find(TopSiteLink).simulate("click", { preventDefault() {} });
+
+ let [action] = dispatch.firstCall.args;
+ assert.isUserEventAction(action);
+
+ assert.propertyVal(action.data, "event", "CLICK");
+ assert.propertyVal(action.data, "source", "TOP_SITES");
+ assert.propertyVal(action.data, "action_position", 0);
+ assert.propertyVal(action.data.value, "card_type", "spoc");
+ assert.propertyVal(action.data.value, "icon_type", "custom_screenshot");
+
+ // Pocket SPOC click event.
+ [action] = dispatch.getCall(2).args;
+ assert.equal(action.type, at.TELEMETRY_IMPRESSION_STATS);
+
+ assert.propertyVal(action.data, "click", 0);
+ assert.propertyVal(action.data, "source", "TOP_SITES");
+
+ [action] = dispatch.getCall(3).args;
+ assert.equal(action.type, at.DISCOVERY_STREAM_USER_EVENT);
+
+ assert.propertyVal(action.data, "event", "CLICK");
+ assert.propertyVal(action.data, "action_position", 1);
+ assert.propertyVal(action.data, "source", "TOP_SITES");
+ assert.propertyVal(action.data.value, "card_type", "spoc");
+ assert.propertyVal(action.data.value, "tile_id", 1);
+ assert.propertyVal(action.data.value, "shim", "shim_click_id");
+
+ // Topsite SPOC click event.
+ [action] = dispatch.getCall(4).args;
+ assert.equal(action.type, at.TOP_SITES_SPONSORED_IMPRESSION_STATS);
+
+ assert.propertyVal(action.data, "type", "click");
+ assert.propertyVal(action.data, "tile_id", 1);
+ assert.propertyVal(action.data, "source", "newtab");
+ assert.propertyVal(action.data, "position", 1);
+ assert.propertyVal(action.data, "advertiser", "test advertiser");
+ });
+ it("should dispatch OPEN_LINK with the right data", () => {
+ const dispatch = sinon.stub();
+ const wrapper = shallow(
+ <TopSite
+ link={Object.assign({}, link, { typedBonus: true })}
+ index={3}
+ dispatch={dispatch}
+ />
+ );
+
+ wrapper.find(TopSiteLink).simulate("click", { preventDefault() {} });
+
+ const [action] = dispatch.secondCall.args;
+ assert.propertyVal(action, "type", at.OPEN_LINK);
+ assert.propertyVal(action.data, "typedBonus", true);
+ });
+ });
+});
+
+describe("<TopSiteForm>", () => {
+ let wrapper;
+ let sandbox;
+
+ function setup(props = {}) {
+ sandbox = sinon.createSandbox();
+ const customProps = Object.assign(
+ {},
+ { onClose: sandbox.spy(), dispatch: sandbox.spy() },
+ props
+ );
+ wrapper = mount(<TopSiteForm {...customProps} />);
+ }
+
+ describe("validateForm", () => {
+ beforeEach(() => setup({ site: { url: "http://foo" } }));
+
+ it("should return true for a correct URL", () => {
+ wrapper.setState({ url: "foo" });
+
+ assert.isTrue(wrapper.instance().validateForm());
+ });
+
+ it("should return false for a incorrect URL", () => {
+ wrapper.setState({ url: " " });
+
+ assert.isNull(wrapper.instance().validateForm());
+ assert.isTrue(wrapper.state().validationError);
+ });
+
+ it("should return true for a correct custom screenshot URL", () => {
+ wrapper.setState({ customScreenshotUrl: "foo" });
+
+ assert.isTrue(wrapper.instance().validateForm());
+ });
+
+ it("should return false for a incorrect custom screenshot URL", () => {
+ wrapper.setState({ customScreenshotUrl: " " });
+
+ assert.isNull(wrapper.instance().validateForm());
+ });
+
+ it("should return true for an empty custom screenshot URL", () => {
+ wrapper.setState({ customScreenshotUrl: "" });
+
+ assert.isTrue(wrapper.instance().validateForm());
+ });
+
+ it("should return false for file: protocol", () => {
+ wrapper.setState({ customScreenshotUrl: "file:///C:/Users/foo" });
+
+ assert.isFalse(wrapper.instance().validateForm());
+ });
+ });
+
+ describe("#previewButton", () => {
+ beforeEach(() =>
+ setup({
+ site: { customScreenshotURL: "http://foo.com" },
+ previewResponse: null,
+ })
+ );
+
+ it("should render the preview button on invalid urls", () => {
+ assert.equal(0, wrapper.find(".preview").length);
+
+ wrapper.setState({ customScreenshotUrl: " " });
+
+ assert.equal(1, wrapper.find(".preview").length);
+ });
+
+ it("should render the preview button when input value updated", () => {
+ assert.equal(0, wrapper.find(".preview").length);
+
+ wrapper.setState({
+ customScreenshotUrl: "http://baz.com",
+ screenshotPreview: null,
+ });
+
+ assert.equal(1, wrapper.find(".preview").length);
+ });
+ });
+
+ describe("preview request", () => {
+ beforeEach(() => {
+ setup({
+ site: { customScreenshotURL: "http://foo.com", url: "http://foo.com" },
+ previewResponse: null,
+ });
+ });
+
+ it("shouldn't dispatch a request for invalid urls", () => {
+ wrapper.setState({ customScreenshotUrl: " ", url: "foo" });
+
+ wrapper.find(".preview").simulate("click");
+
+ assert.notCalled(wrapper.props().dispatch);
+ });
+
+ it("should dispatch a PREVIEW_REQUEST", () => {
+ wrapper.setState({ customScreenshotUrl: "screenshot" });
+ wrapper.find(".preview").simulate("submit");
+
+ assert.calledTwice(wrapper.props().dispatch);
+ assert.calledWith(
+ wrapper.props().dispatch,
+ ac.AlsoToMain({
+ type: at.PREVIEW_REQUEST,
+ data: { url: "http://screenshot" },
+ })
+ );
+ assert.calledWith(
+ wrapper.props().dispatch,
+ ac.UserEvent({
+ event: "PREVIEW_REQUEST",
+ source: "TOP_SITES",
+ })
+ );
+ });
+ });
+
+ describe("#TopSiteLink", () => {
+ beforeEach(() => {
+ setup();
+ });
+
+ it("should display a TopSiteLink preview", () => {
+ assert.equal(wrapper.find(TopSiteLink).length, 1);
+ });
+
+ it("should display an icon for tippyTop sites", () => {
+ wrapper.setProps({ site: { tippyTopIcon: "bar" } });
+
+ assert.equal(
+ wrapper.find(".top-site-icon").getDOMNode().style["background-image"],
+ 'url("bar")'
+ );
+ });
+
+ it("should not display a preview screenshot", () => {
+ wrapper.setProps({ previewResponse: "foo", previewUrl: "foo" });
+
+ assert.lengthOf(wrapper.find(".screenshot"), 0);
+ });
+
+ it("should not render any icon on error", () => {
+ wrapper.setProps({ previewResponse: "" });
+
+ assert.equal(wrapper.find(".top-site-icon").length, 0);
+ });
+
+ it("should render the search icon when searchTopSite is true", () => {
+ wrapper.setProps({ site: { tippyTopIcon: "bar", searchTopSite: true } });
+
+ assert.equal(
+ wrapper.find(".rich-icon").getDOMNode().style["background-image"],
+ 'url("bar")'
+ );
+ assert.isTrue(wrapper.find(".search-topsite").exists());
+ });
+ });
+
+ describe("#addMode", () => {
+ beforeEach(() => setup());
+
+ it("should render the component", () => {
+ assert.ok(wrapper.find(TopSiteForm).exists());
+ });
+ it("should have the correct header", () => {
+ assert.equal(
+ wrapper.findWhere(
+ n =>
+ n.length &&
+ n.prop("data-l10n-id") === "newtab-topsites-add-shortcut-header"
+ ).length,
+ 1
+ );
+ });
+ it("should have the correct button text", () => {
+ assert.equal(
+ wrapper.findWhere(
+ n =>
+ n.length && n.prop("data-l10n-id") === "newtab-topsites-save-button"
+ ).length,
+ 0
+ );
+ assert.equal(
+ wrapper.findWhere(
+ n =>
+ n.length && n.prop("data-l10n-id") === "newtab-topsites-add-button"
+ ).length,
+ 1
+ );
+ });
+ it("should not render a preview button", () => {
+ assert.equal(0, wrapper.find(".custom-image-input-container").length);
+ });
+ it("should call onClose if Cancel button is clicked", () => {
+ wrapper.find(".cancel").simulate("click");
+ assert.calledOnce(wrapper.instance().props.onClose);
+ });
+ it("should set validationError if url is empty", () => {
+ assert.equal(wrapper.state().validationError, false);
+ wrapper.find(".done").simulate("submit");
+ assert.equal(wrapper.state().validationError, true);
+ });
+ it("should set validationError if url is invalid", () => {
+ wrapper.setState({ url: "not valid" });
+ assert.equal(wrapper.state().validationError, false);
+ wrapper.find(".done").simulate("submit");
+ assert.equal(wrapper.state().validationError, true);
+ });
+ it("should call onClose and dispatch with right args if URL is valid", () => {
+ wrapper.setState({ url: "valid.com", label: "a label" });
+ wrapper.find(".done").simulate("submit");
+ assert.calledOnce(wrapper.instance().props.onClose);
+ assert.calledWith(wrapper.instance().props.dispatch, {
+ data: {
+ site: { label: "a label", url: "http://valid.com" },
+ index: -1,
+ },
+ meta: { from: "ActivityStream:Content", to: "ActivityStream:Main" },
+ type: at.TOP_SITES_PIN,
+ });
+ assert.calledWith(wrapper.instance().props.dispatch, {
+ data: {
+ action_position: -1,
+ source: "TOP_SITES",
+ event: "TOP_SITES_EDIT",
+ },
+ meta: { from: "ActivityStream:Content", to: "ActivityStream:Main" },
+ type: at.TELEMETRY_USER_EVENT,
+ });
+ });
+ it("should not pass empty string label in dispatch data", () => {
+ wrapper.setState({ url: "valid.com", label: "" });
+ wrapper.find(".done").simulate("submit");
+ assert.calledWith(wrapper.instance().props.dispatch, {
+ data: { site: { url: "http://valid.com" }, index: -1 },
+ meta: { from: "ActivityStream:Content", to: "ActivityStream:Main" },
+ type: at.TOP_SITES_PIN,
+ });
+ });
+ it("should open the custom screenshot input", () => {
+ assert.isFalse(wrapper.state().showCustomScreenshotForm);
+
+ wrapper.find(A11yLinkButton).simulate("click");
+
+ assert.isTrue(wrapper.state().showCustomScreenshotForm);
+ });
+ });
+
+ describe("edit existing Topsite", () => {
+ beforeEach(() =>
+ setup({
+ site: {
+ url: "https://foo.bar",
+ label: "baz",
+ customScreenshotURL: "http://foo",
+ },
+ index: 7,
+ })
+ );
+
+ it("should render the component", () => {
+ assert.ok(wrapper.find(TopSiteForm).exists());
+ });
+ it("should have the correct header", () => {
+ assert.equal(
+ wrapper.findWhere(
+ n => n.prop("data-l10n-id") === "newtab-topsites-edit-shortcut-header"
+ ).length,
+ 1
+ );
+ });
+ it("should have the correct button text", () => {
+ assert.equal(
+ wrapper.findWhere(
+ n => n.prop("data-l10n-id") === "newtab-topsites-add-button"
+ ).length,
+ 0
+ );
+ assert.equal(
+ wrapper.findWhere(
+ n => n.prop("data-l10n-id") === "newtab-topsites-save-button"
+ ).length,
+ 1
+ );
+ });
+ it("should call onClose if Cancel button is clicked", () => {
+ wrapper.find(".cancel").simulate("click");
+ assert.calledOnce(wrapper.instance().props.onClose);
+ });
+ it("should show error and not call onClose or dispatch if URL is empty", () => {
+ wrapper.setState({ url: "" });
+ assert.equal(wrapper.state().validationError, false);
+ wrapper.find(".done").simulate("submit");
+ assert.equal(wrapper.state().validationError, true);
+ assert.notCalled(wrapper.instance().props.onClose);
+ assert.notCalled(wrapper.instance().props.dispatch);
+ });
+ it("should show error and not call onClose or dispatch if URL is invalid", () => {
+ wrapper.setState({ url: "not valid" });
+ assert.equal(wrapper.state().validationError, false);
+ wrapper.find(".done").simulate("submit");
+ assert.equal(wrapper.state().validationError, true);
+ assert.notCalled(wrapper.instance().props.onClose);
+ assert.notCalled(wrapper.instance().props.dispatch);
+ });
+ it("should call onClose and dispatch with right args if URL is valid", () => {
+ wrapper.find(".done").simulate("submit");
+ assert.calledOnce(wrapper.instance().props.onClose);
+ assert.calledTwice(wrapper.instance().props.dispatch);
+ assert.calledWith(wrapper.instance().props.dispatch, {
+ data: {
+ site: {
+ label: "baz",
+ url: "https://foo.bar",
+ customScreenshotURL: "http://foo",
+ },
+ index: 7,
+ },
+ meta: { from: "ActivityStream:Content", to: "ActivityStream:Main" },
+ type: at.TOP_SITES_PIN,
+ });
+ assert.calledWith(wrapper.instance().props.dispatch, {
+ data: {
+ action_position: 7,
+ source: "TOP_SITES",
+ event: "TOP_SITES_EDIT",
+ },
+ meta: { from: "ActivityStream:Content", to: "ActivityStream:Main" },
+ type: at.TELEMETRY_USER_EVENT,
+ });
+ });
+ it("should set customScreenshotURL to null if it was removed", () => {
+ wrapper.setState({ customScreenshotUrl: "" });
+
+ wrapper.find(".done").simulate("submit");
+
+ assert.calledWith(wrapper.instance().props.dispatch, {
+ data: {
+ site: {
+ label: "baz",
+ url: "https://foo.bar",
+ customScreenshotURL: null,
+ },
+ index: 7,
+ },
+ meta: { from: "ActivityStream:Content", to: "ActivityStream:Main" },
+ type: at.TOP_SITES_PIN,
+ });
+ });
+ it("should call onClose and dispatch with right args if URL is valid (negative index)", () => {
+ wrapper.setProps({ index: -1 });
+ wrapper.find(".done").simulate("submit");
+ assert.calledOnce(wrapper.instance().props.onClose);
+ assert.calledTwice(wrapper.instance().props.dispatch);
+ assert.calledWith(wrapper.instance().props.dispatch, {
+ data: {
+ site: {
+ label: "baz",
+ url: "https://foo.bar",
+ customScreenshotURL: "http://foo",
+ },
+ index: -1,
+ },
+ meta: { from: "ActivityStream:Content", to: "ActivityStream:Main" },
+ type: at.TOP_SITES_PIN,
+ });
+ });
+ it("should not pass empty string label in dispatch data", () => {
+ wrapper.setState({ label: "" });
+ wrapper.find(".done").simulate("submit");
+ assert.calledWith(wrapper.instance().props.dispatch, {
+ data: {
+ site: { url: "https://foo.bar", customScreenshotURL: "http://foo" },
+ index: 7,
+ },
+ meta: { from: "ActivityStream:Content", to: "ActivityStream:Main" },
+ type: at.TOP_SITES_PIN,
+ });
+ });
+ it("should render the save button if custom screenshot request finished", () => {
+ wrapper.setState({
+ customScreenshotUrl: "foo",
+ screenshotPreview: "custom",
+ });
+ assert.equal(0, wrapper.find(".preview").length);
+ assert.equal(1, wrapper.find(".done").length);
+ });
+ it("should render the save button if custom screenshot url was cleared", () => {
+ wrapper.setState({ customScreenshotUrl: "" });
+ wrapper.setProps({ site: { customScreenshotURL: "foo" } });
+ assert.equal(0, wrapper.find(".preview").length);
+ assert.equal(1, wrapper.find(".done").length);
+ });
+ });
+
+ describe("#previewMode", () => {
+ beforeEach(() => setup({ previewResponse: null }));
+
+ it("should transition from save to preview", () => {
+ wrapper.setProps({
+ site: { url: "https://foo.bar", customScreenshotURL: "baz" },
+ index: 7,
+ });
+
+ assert.equal(
+ wrapper.findWhere(
+ n =>
+ n.length && n.prop("data-l10n-id") === "newtab-topsites-save-button"
+ ).length,
+ 1
+ );
+
+ wrapper.setState({ customScreenshotUrl: "foo" });
+
+ assert.equal(
+ wrapper.findWhere(
+ n =>
+ n.length &&
+ n.prop("data-l10n-id") === "newtab-topsites-preview-button"
+ ).length,
+ 1
+ );
+ });
+
+ it("should transition from add to preview", () => {
+ assert.equal(
+ wrapper.findWhere(
+ n =>
+ n.length && n.prop("data-l10n-id") === "newtab-topsites-add-button"
+ ).length,
+ 1
+ );
+
+ wrapper.setState({ customScreenshotUrl: "foo" });
+
+ assert.equal(
+ wrapper.findWhere(
+ n =>
+ n.length &&
+ n.prop("data-l10n-id") === "newtab-topsites-preview-button"
+ ).length,
+ 1
+ );
+ });
+ });
+
+ describe("#validateUrl", () => {
+ it("should properly validate URLs", () => {
+ setup();
+ assert.ok(wrapper.instance().validateUrl("mozilla.org"));
+ assert.ok(wrapper.instance().validateUrl("https://mozilla.org"));
+ assert.ok(wrapper.instance().validateUrl("http://mozilla.org"));
+ assert.ok(
+ wrapper
+ .instance()
+ .validateUrl(
+ "https://mozilla.invisionapp.com/d/main/#/projects/prototypes"
+ )
+ );
+ assert.ok(wrapper.instance().validateUrl("httpfoobar"));
+ assert.ok(wrapper.instance().validateUrl("httpsfoo.bar"));
+ assert.isNull(wrapper.instance().validateUrl("mozilla org"));
+ assert.isNull(wrapper.instance().validateUrl(""));
+ });
+ });
+
+ describe("#cleanUrl", () => {
+ it("should properly prepend http:// to URLs when required", () => {
+ setup();
+ assert.equal(
+ "http://mozilla.org",
+ wrapper.instance().cleanUrl("mozilla.org")
+ );
+ assert.equal(
+ "http://https.org",
+ wrapper.instance().cleanUrl("https.org")
+ );
+ assert.equal("http://httpcom", wrapper.instance().cleanUrl("httpcom"));
+ assert.equal(
+ "http://mozilla.org",
+ wrapper.instance().cleanUrl("http://mozilla.org")
+ );
+ assert.equal(
+ "https://firefox.com",
+ wrapper.instance().cleanUrl("https://firefox.com")
+ );
+ });
+ });
+});
+
+describe("<TopSiteList>", () => {
+ const APP = { isForStartupCache: false };
+
+ it("should render a TopSiteList element", () => {
+ const wrapper = shallow(<TopSiteList {...DEFAULT_PROPS} App={{ APP }} />);
+ assert.ok(wrapper.exists());
+ });
+ it("should render a TopSite for each link with the right url", () => {
+ const rows = [{ url: "https://foo.com" }, { url: "https://bar.com" }];
+ const wrapper = shallow(
+ <TopSiteList {...DEFAULT_PROPS} TopSites={{ rows }} App={{ APP }} />
+ );
+ const links = wrapper.find(TopSite);
+ assert.lengthOf(links, 2);
+ rows.forEach((row, i) =>
+ assert.equal(links.get(i).props.link.url, row.url)
+ );
+ });
+ it("should slice the TopSite rows to the TopSitesRows pref", () => {
+ const rows = [];
+ for (
+ let i = 0;
+ i < TOP_SITES_DEFAULT_ROWS * TOP_SITES_MAX_SITES_PER_ROW + 3;
+ i++
+ ) {
+ rows.push({ url: `https://foo${i}.com` });
+ }
+ const wrapper = shallow(
+ <TopSiteList
+ {...DEFAULT_PROPS}
+ TopSites={{ rows }}
+ TopSitesRows={TOP_SITES_DEFAULT_ROWS}
+ App={{ APP }}
+ />
+ );
+ const links = wrapper.find(TopSite);
+ assert.lengthOf(
+ links,
+ TOP_SITES_DEFAULT_ROWS * TOP_SITES_MAX_SITES_PER_ROW
+ );
+ });
+ it("should fill with placeholders if TopSites rows is less than TopSitesRows", () => {
+ const rows = [{ url: "https://foo.com" }, { url: "https://bar.com" }];
+ const wrapper = shallow(
+ <TopSiteList
+ {...DEFAULT_PROPS}
+ TopSites={{ rows }}
+ TopSitesRows={1}
+ App={{ APP }}
+ />
+ );
+ assert.lengthOf(wrapper.find(TopSite), 2, "topSites");
+ assert.lengthOf(
+ wrapper.find(TopSitePlaceholder),
+ TOP_SITES_MAX_SITES_PER_ROW - 2,
+ "placeholders"
+ );
+ });
+ it("should fill sponsored top sites with placeholders while rendering for startup cache", () => {
+ const rows = [
+ { url: "https://sponsored01.com", sponsored_position: 1 },
+ { url: "https://sponsored02.com", sponsored_position: 2 },
+ { url: "https://sponsored03.com", type: "SPOC" },
+ { url: "https://foo.com" },
+ { url: "https://bar.com" },
+ ];
+ const wrapper = shallow(
+ <TopSiteList
+ {...DEFAULT_PROPS}
+ TopSites={{ rows }}
+ TopSitesRows={1}
+ App={{ isForStartupCache: true }}
+ />
+ );
+ assert.lengthOf(wrapper.find(TopSite), 2, "topSites");
+ assert.lengthOf(
+ wrapper.find(TopSitePlaceholder),
+ TOP_SITES_MAX_SITES_PER_ROW - 2,
+ "placeholders"
+ );
+ });
+ it("should fill any holes in TopSites with placeholders", () => {
+ const rows = [{ url: "https://foo.com" }];
+ rows[3] = { url: "https://bar.com" };
+ const wrapper = shallow(
+ <TopSiteList
+ {...DEFAULT_PROPS}
+ TopSites={{ rows }}
+ TopSitesRows={1}
+ App={{ APP }}
+ />
+ );
+ assert.lengthOf(wrapper.find(TopSite), 2, "topSites");
+ assert.lengthOf(
+ wrapper.find(TopSitePlaceholder),
+ TOP_SITES_MAX_SITES_PER_ROW - 2,
+ "placeholders"
+ );
+ });
+ it("should update state onDragStart and clear it onDragEnd", () => {
+ const wrapper = shallow(<TopSiteList {...DEFAULT_PROPS} App={{ APP }} />);
+ const instance = wrapper.instance();
+ const index = 7;
+ const link = { url: "https://foo.com" };
+ const title = "foo";
+ instance.onDragEvent({ type: "dragstart" }, index, link, title);
+ assert.equal(instance.state.draggedIndex, index);
+ assert.equal(instance.state.draggedSite, link);
+ assert.equal(instance.state.draggedTitle, title);
+ instance.onDragEvent({ type: "dragend" });
+ assert.deepEqual(instance.state, TopSiteList.DEFAULT_STATE);
+ });
+ it("should clear state when new props arrive after a drop", () => {
+ const site1 = { url: "https://foo.com" };
+ const site2 = { url: "https://bar.com" };
+ const rows = [site1, site2];
+ const wrapper = shallow(
+ <TopSiteList {...DEFAULT_PROPS} TopSites={{ rows }} App={{ APP }} />
+ );
+ const instance = wrapper.instance();
+ instance.setState({
+ draggedIndex: 1,
+ draggedSite: site2,
+ draggedTitle: "bar",
+ topSitesPreview: [],
+ });
+ wrapper.setProps({ TopSites: { rows: [site2, site1] } });
+ assert.deepEqual(instance.state, TopSiteList.DEFAULT_STATE);
+ });
+ it("should dispatch events on drop", () => {
+ const dispatch = sinon.spy();
+ const wrapper = shallow(
+ <TopSiteList {...DEFAULT_PROPS} dispatch={dispatch} App={{ APP }} />
+ );
+ const instance = wrapper.instance();
+ const index = 7;
+ const link = { url: "https://foo.com", customScreenshotURL: "foo" };
+ const title = "foo";
+ instance.onDragEvent({ type: "dragstart" }, index, link, title);
+ dispatch.resetHistory();
+ instance.onDragEvent({ type: "drop" }, 3);
+ assert.calledTwice(dispatch);
+ assert.calledWith(dispatch, {
+ data: {
+ draggedFromIndex: 7,
+ index: 3,
+ site: {
+ label: "foo",
+ url: "https://foo.com",
+ customScreenshotURL: "foo",
+ },
+ },
+ meta: { from: "ActivityStream:Content", to: "ActivityStream:Main" },
+ type: "TOP_SITES_INSERT",
+ });
+ assert.calledWith(dispatch, {
+ data: { action_position: 3, event: "DROP", source: "TOP_SITES" },
+ meta: { from: "ActivityStream:Content", to: "ActivityStream:Main" },
+ type: "TELEMETRY_USER_EVENT",
+ });
+ });
+ it("should make a topSitesPreview onDragEnter", () => {
+ const wrapper = shallow(<TopSiteList {...DEFAULT_PROPS} App={{ APP }} />);
+ const instance = wrapper.instance();
+ const site = { url: "https://foo.com" };
+ instance.setState({
+ draggedIndex: 4,
+ draggedSite: site,
+ draggedTitle: "foo",
+ });
+ const draggedSite = Object.assign({}, site, {
+ isPinned: true,
+ isDragged: true,
+ });
+ instance.onDragEvent({ type: "dragenter" }, 2);
+ assert.ok(instance.state.topSitesPreview);
+ assert.deepEqual(instance.state.topSitesPreview[2], draggedSite);
+ });
+ it("should _makeTopSitesPreview correctly", () => {
+ const site1 = { url: "https://foo.com" };
+ const site2 = { url: "https://bar.com" };
+ const site3 = { url: "https://baz.com" };
+ const rows = [site1, site2, site3];
+ let wrapper = shallow(
+ <TopSiteList
+ {...DEFAULT_PROPS}
+ TopSites={{ rows }}
+ TopSitesRows={1}
+ App={{ APP }}
+ />
+ );
+ let instance = wrapper.instance();
+ instance.setState({
+ draggedIndex: 0,
+ draggedSite: site1,
+ draggedTitle: "foo",
+ });
+ let draggedSite = Object.assign({}, site1, {
+ isPinned: true,
+ isDragged: true,
+ });
+ assert.deepEqual(instance._makeTopSitesPreview(1), [
+ site2,
+ draggedSite,
+ site3,
+ null,
+ null,
+ null,
+ null,
+ null,
+ ]);
+ assert.deepEqual(instance._makeTopSitesPreview(2), [
+ site2,
+ site3,
+ draggedSite,
+ null,
+ null,
+ null,
+ null,
+ null,
+ ]);
+ assert.deepEqual(instance._makeTopSitesPreview(3), [
+ site2,
+ site3,
+ null,
+ draggedSite,
+ null,
+ null,
+ null,
+ null,
+ ]);
+ site2.isPinned = true;
+ assert.deepEqual(instance._makeTopSitesPreview(1), [
+ site2,
+ draggedSite,
+ site3,
+ null,
+ null,
+ null,
+ null,
+ null,
+ ]);
+ assert.deepEqual(instance._makeTopSitesPreview(2), [
+ site3,
+ site2,
+ draggedSite,
+ null,
+ null,
+ null,
+ null,
+ null,
+ ]);
+ site3.isPinned = true;
+ assert.deepEqual(instance._makeTopSitesPreview(1), [
+ site2,
+ draggedSite,
+ site3,
+ null,
+ null,
+ null,
+ null,
+ null,
+ ]);
+ assert.deepEqual(instance._makeTopSitesPreview(2), [
+ site2,
+ site3,
+ draggedSite,
+ null,
+ null,
+ null,
+ null,
+ null,
+ ]);
+ site2.isPinned = false;
+ assert.deepEqual(instance._makeTopSitesPreview(1), [
+ site2,
+ draggedSite,
+ site3,
+ null,
+ null,
+ null,
+ null,
+ null,
+ ]);
+ assert.deepEqual(instance._makeTopSitesPreview(2), [
+ site2,
+ site3,
+ draggedSite,
+ null,
+ null,
+ null,
+ null,
+ null,
+ ]);
+ site3.isPinned = false;
+ instance.setState({
+ draggedIndex: 1,
+ draggedSite: site2,
+ draggedTitle: "bar",
+ });
+ draggedSite = Object.assign({}, site2, { isPinned: true, isDragged: true });
+ assert.deepEqual(instance._makeTopSitesPreview(0), [
+ draggedSite,
+ site1,
+ site3,
+ null,
+ null,
+ null,
+ null,
+ null,
+ ]);
+ assert.deepEqual(instance._makeTopSitesPreview(2), [
+ site1,
+ site3,
+ draggedSite,
+ null,
+ null,
+ null,
+ null,
+ null,
+ ]);
+ site2.type = "SPOC";
+ instance.setState({
+ draggedIndex: 2,
+ draggedSite: site3,
+ draggedTitle: "baz",
+ });
+ draggedSite = Object.assign({}, site3, { isPinned: true, isDragged: true });
+ assert.deepEqual(instance._makeTopSitesPreview(0), [
+ draggedSite,
+ site2,
+ site1,
+ null,
+ null,
+ null,
+ null,
+ null,
+ ]);
+ site2.type = "";
+ site2.sponsored_position = 2;
+ instance.setState({
+ draggedIndex: 2,
+ draggedSite: site3,
+ draggedTitle: "baz",
+ });
+ draggedSite = Object.assign({}, site3, { isPinned: true, isDragged: true });
+ assert.deepEqual(instance._makeTopSitesPreview(0), [
+ draggedSite,
+ site2,
+ site1,
+ null,
+ null,
+ null,
+ null,
+ null,
+ ]);
+ });
+ it("should add a className hide-for-narrow to sites after 6/row", () => {
+ const rows = [];
+ for (let i = 0; i < TOP_SITES_MAX_SITES_PER_ROW; i++) {
+ rows.push({ url: `https://foo${i}.com` });
+ }
+ const wrapper = mount(
+ <TopSiteList
+ {...DEFAULT_PROPS}
+ TopSites={{ rows }}
+ TopSitesRows={1}
+ App={{ APP }}
+ />
+ );
+ assert.lengthOf(wrapper.find("li.hide-for-narrow"), 2);
+ });
+});
+
+describe("TopSitePlaceholder", () => {
+ it("should dispatch a TOP_SITES_EDIT action when edit-button is clicked", () => {
+ const dispatch = sinon.spy();
+ const wrapper = shallow(
+ <TopSitePlaceholder dispatch={dispatch} index={7} />
+ );
+
+ wrapper.find(".edit-button").first().simulate("click");
+
+ assert.calledOnce(dispatch);
+ assert.calledWithExactly(dispatch, {
+ type: at.TOP_SITES_EDIT,
+ data: { index: 7 },
+ });
+ });
+});
+
+describe("#TopSiteFormInput", () => {
+ let wrapper;
+ let onChangeStub;
+
+ describe("no errors", () => {
+ beforeEach(() => {
+ onChangeStub = sinon.stub();
+
+ wrapper = mount(
+ <TopSiteFormInput
+ titleId="newtab-topsites-title-label"
+ placeholderId="newtab-topsites-title-input"
+ errorMessageId="newtab-topsites-url-validation"
+ onChange={onChangeStub}
+ value="foo"
+ />
+ );
+ });
+
+ it("should render the provided title", () => {
+ const title = wrapper.find("span");
+ assert.propertyVal(
+ title.props(),
+ "data-l10n-id",
+ "newtab-topsites-title-label"
+ );
+ });
+
+ it("should render the provided value", () => {
+ const input = wrapper.find("input");
+
+ assert.equal(input.getDOMNode().value, "foo");
+ });
+
+ it("should render the clear button if cb is provided", () => {
+ assert.equal(wrapper.find(".icon-clear-input").length, 0);
+
+ wrapper.setProps({ onClear: sinon.stub() });
+
+ assert.equal(wrapper.find(".icon-clear-input").length, 1);
+ });
+
+ it("should show the loading indicator", () => {
+ assert.equal(wrapper.find(".loading-container").length, 0);
+
+ wrapper.setProps({ loading: true });
+
+ assert.equal(wrapper.find(".loading-container").length, 1);
+ });
+ it("should disable the input when loading indicator is present", () => {
+ assert.isFalse(wrapper.find("input").getDOMNode().disabled);
+
+ wrapper.setProps({ loading: true });
+
+ assert.isTrue(wrapper.find("input").getDOMNode().disabled);
+ });
+ });
+
+ describe("with error", () => {
+ beforeEach(() => {
+ onChangeStub = sinon.stub();
+
+ wrapper = mount(
+ <TopSiteFormInput
+ titleId="newtab-topsites-title-label"
+ placeholderId="newtab-topsites-title-input"
+ onChange={onChangeStub}
+ validationError={true}
+ errorMessageId="newtab-topsites-url-validation"
+ value="foo"
+ />
+ );
+ });
+
+ it("should render the error message", () => {
+ assert.equal(
+ wrapper.findWhere(
+ n => n.prop("data-l10n-id") === "newtab-topsites-url-validation"
+ ).length,
+ 1
+ );
+ });
+
+ it("should reset the error state on value change", () => {
+ wrapper.find("input").simulate("change", { target: { value: "bar" } });
+
+ assert.isFalse(wrapper.state().validationError);
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/TopSites/SearchShortcutsForm.test.jsx b/browser/components/newtab/test/unit/content-src/components/TopSites/SearchShortcutsForm.test.jsx
new file mode 100644
index 0000000000..22c4e8192a
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/TopSites/SearchShortcutsForm.test.jsx
@@ -0,0 +1,56 @@
+import {
+ SearchShortcutsForm,
+ SelectableSearchShortcut,
+} from "content-src/components/TopSites/SearchShortcutsForm";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<SearchShortcutsForm>", () => {
+ let wrapper;
+ let sandbox;
+ let dispatchStub;
+
+ beforeEach(() => {
+ sandbox = sinon.createSandbox();
+ dispatchStub = sandbox.stub();
+ const defaultProps = { rows: [], searchShortcuts: [] };
+ wrapper = shallow(
+ <SearchShortcutsForm TopSites={defaultProps} dispatch={dispatchStub} />
+ );
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ it("should render", () => {
+ assert.ok(wrapper.exists());
+ assert.ok(wrapper.find(".topsite-form").exists());
+ });
+
+ it("should render SelectableSearchShortcut components", () => {
+ wrapper.setState({ shortcuts: [{}, {}] });
+
+ assert.lengthOf(
+ wrapper.find(".search-shortcuts-container div").children(),
+ 2
+ );
+ assert.equal(
+ wrapper.find(".search-shortcuts-container div").children().at(0).type(),
+ SelectableSearchShortcut
+ );
+ });
+
+ it("should render SelectableSearchShortcut components", () => {
+ const onCloseStub = sandbox.stub();
+ const fakeEvent = { preventDefault: sandbox.stub() };
+ wrapper.setState({ shortcuts: [{}, {}] });
+ wrapper.setProps({ onClose: onCloseStub });
+
+ wrapper.find(".done").simulate("click", fakeEvent);
+
+ assert.calledOnce(dispatchStub);
+ assert.calledOnce(fakeEvent.preventDefault);
+ assert.calledOnce(onCloseStub);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/TopSites/TopSiteImpressionWrapper.test.jsx b/browser/components/newtab/test/unit/content-src/components/TopSites/TopSiteImpressionWrapper.test.jsx
new file mode 100644
index 0000000000..3f7e725de0
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/TopSites/TopSiteImpressionWrapper.test.jsx
@@ -0,0 +1,148 @@
+import {
+ TopSiteImpressionWrapper,
+ INTERSECTION_RATIO,
+} from "content-src/components/TopSites/TopSiteImpressionWrapper";
+import { actionTypes as at } from "common/Actions.sys.mjs";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<TopSiteImpressionWrapper>", () => {
+ const FullIntersectEntries = [
+ { isIntersecting: true, intersectionRatio: INTERSECTION_RATIO },
+ ];
+ const ZeroIntersectEntries = [
+ { isIntersecting: false, intersectionRatio: 0 },
+ ];
+ const PartialIntersectEntries = [
+ { isIntersecting: true, intersectionRatio: INTERSECTION_RATIO / 2 },
+ ];
+
+ // Build IntersectionObserver class with the arg `entries` for the intersect callback.
+ function buildIntersectionObserver(entries) {
+ return class {
+ constructor(callback) {
+ this.callback = callback;
+ }
+
+ observe() {
+ this.callback(entries);
+ }
+
+ unobserve() {}
+ };
+ }
+
+ const DEFAULT_PROPS = {
+ actionType: at.TOP_SITES_SPONSORED_IMPRESSION_STATS,
+ tile: {
+ tile_id: 1,
+ position: 1,
+ reporting_url: "https://test.reporting.com",
+ advertiser: "test_advertiser",
+ },
+ IntersectionObserver: buildIntersectionObserver(FullIntersectEntries),
+ document: {
+ visibilityState: "visible",
+ addEventListener: sinon.stub(),
+ removeEventListener: sinon.stub(),
+ },
+ };
+
+ const InnerEl = () => <div>Inner Element</div>;
+
+ function renderTopSiteImpressionWrapper(props = {}) {
+ return shallow(
+ <TopSiteImpressionWrapper {...DEFAULT_PROPS} {...props}>
+ <InnerEl />
+ </TopSiteImpressionWrapper>
+ );
+ }
+
+ it("should render props.children", () => {
+ const wrapper = renderTopSiteImpressionWrapper();
+ assert.ok(wrapper.contains(<InnerEl />));
+ });
+ it("should not send impression when the wrapped item is visbible but below the ratio", () => {
+ const dispatch = sinon.spy();
+ const props = {
+ dispatch,
+ IntersectionObserver: buildIntersectionObserver(PartialIntersectEntries),
+ };
+ renderTopSiteImpressionWrapper(props);
+
+ assert.notCalled(dispatch);
+ });
+ it("should send an impression when the page is visible and the wrapped item meets the visibility ratio", () => {
+ const dispatch = sinon.spy();
+ const props = {
+ dispatch,
+ IntersectionObserver: buildIntersectionObserver(FullIntersectEntries),
+ };
+ renderTopSiteImpressionWrapper(props);
+
+ assert.calledOnce(dispatch);
+
+ let [action] = dispatch.firstCall.args;
+ assert.equal(action.type, at.TOP_SITES_SPONSORED_IMPRESSION_STATS);
+ assert.deepEqual(action.data, {
+ type: "impression",
+ ...DEFAULT_PROPS.tile,
+ });
+ });
+ it("should send an impression when the wrapped item transiting from invisible to visible", () => {
+ const dispatch = sinon.spy();
+ const props = {
+ dispatch,
+ IntersectionObserver: buildIntersectionObserver(ZeroIntersectEntries),
+ };
+ const wrapper = renderTopSiteImpressionWrapper(props);
+
+ assert.notCalled(dispatch);
+
+ dispatch.resetHistory();
+ wrapper.instance().impressionObserver.callback(FullIntersectEntries);
+
+ // For the impression
+ assert.calledOnce(dispatch);
+
+ const [action] = dispatch.firstCall.args;
+ assert.equal(action.type, at.TOP_SITES_SPONSORED_IMPRESSION_STATS);
+ assert.deepEqual(action.data, {
+ type: "impression",
+ ...DEFAULT_PROPS.tile,
+ });
+ });
+ it("should remove visibility change listener when the wrapper is removed", () => {
+ const props = {
+ dispatch: sinon.spy(),
+ document: {
+ visibilityState: "hidden",
+ addEventListener: sinon.spy(),
+ removeEventListener: sinon.spy(),
+ },
+ IntersectionObserver,
+ };
+
+ const wrapper = renderTopSiteImpressionWrapper(props);
+ assert.calledWith(props.document.addEventListener, "visibilitychange");
+ const [, listener] = props.document.addEventListener.firstCall.args;
+
+ wrapper.unmount();
+ assert.calledWith(
+ props.document.removeEventListener,
+ "visibilitychange",
+ listener
+ );
+ });
+ it("should unobserve the intersection observer when the wrapper is removed", () => {
+ const IntersectionObserver =
+ buildIntersectionObserver(ZeroIntersectEntries);
+ const spy = sinon.spy(IntersectionObserver.prototype, "unobserve");
+ const props = { dispatch: sinon.spy(), IntersectionObserver };
+
+ const wrapper = renderTopSiteImpressionWrapper(props);
+ wrapper.unmount();
+
+ assert.calledOnce(spy);
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/components/Topics.test.jsx b/browser/components/newtab/test/unit/content-src/components/Topics.test.jsx
new file mode 100644
index 0000000000..91d15c5d4e
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/Topics.test.jsx
@@ -0,0 +1,22 @@
+import { Topic, Topics } from "content-src/components/Topics/Topics";
+import React from "react";
+import { shallow } from "enzyme";
+
+describe("<Topics>", () => {
+ it("should render a Topics element", () => {
+ const wrapper = shallow(<Topics topics={[]} />);
+ assert.ok(wrapper.exists());
+ });
+ it("should render a Topic element for each topic with the right url", () => {
+ const data = [
+ { name: "topic1", url: "https://topic1.com" },
+ { name: "topic2", url: "https://topic2.com" },
+ ];
+
+ const wrapper = shallow(<Topics topics={data} />);
+
+ const topics = wrapper.find(Topic);
+ assert.lengthOf(topics, 2);
+ topics.forEach((topic, i) => assert.equal(topic.props().url, data[i].url));
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/lib/detect-user-session-start.test.js b/browser/components/newtab/test/unit/content-src/lib/detect-user-session-start.test.js
new file mode 100644
index 0000000000..5a7fad7cc0
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/lib/detect-user-session-start.test.js
@@ -0,0 +1,120 @@
+import {
+ actionCreators as ac,
+ actionTypes as at,
+} from "common/Actions.sys.mjs";
+import { DetectUserSessionStart } from "content-src/lib/detect-user-session-start";
+
+describe("detectUserSessionStart", () => {
+ let store;
+ class PerfService {
+ getMostRecentAbsMarkStartByName() {
+ return 1234;
+ }
+ mark() {}
+ }
+
+ beforeEach(() => {
+ store = { dispatch: () => {} };
+ });
+ describe("#sendEventOrAddListener", () => {
+ it("should call ._sendEvent immediately if the document is visible", () => {
+ const mockDocument = { visibilityState: "visible" };
+ const instance = new DetectUserSessionStart(store, {
+ document: mockDocument,
+ });
+ sinon.stub(instance, "_sendEvent");
+
+ instance.sendEventOrAddListener();
+
+ assert.calledOnce(instance._sendEvent);
+ });
+ it("should add an event listener on visibility changes the document is not visible", () => {
+ const mockDocument = {
+ visibilityState: "hidden",
+ addEventListener: sinon.spy(),
+ };
+ const instance = new DetectUserSessionStart(store, {
+ document: mockDocument,
+ });
+ sinon.stub(instance, "_sendEvent");
+
+ instance.sendEventOrAddListener();
+
+ assert.notCalled(instance._sendEvent);
+ assert.calledWith(
+ mockDocument.addEventListener,
+ "visibilitychange",
+ instance._onVisibilityChange
+ );
+ });
+ });
+ describe("#_sendEvent", () => {
+ it("should dispatch an action with the SAVE_SESSION_PERF_DATA", () => {
+ const dispatch = sinon.spy(store, "dispatch");
+ const instance = new DetectUserSessionStart(store);
+
+ instance._sendEvent();
+
+ assert.calledWith(
+ dispatch,
+ ac.AlsoToMain({
+ type: at.SAVE_SESSION_PERF_DATA,
+ data: { visibility_event_rcvd_ts: sinon.match.number },
+ })
+ );
+ });
+
+ it("shouldn't send a message if getMostRecentAbsMarkStartByName throws", () => {
+ let perfService = new PerfService();
+ sinon.stub(perfService, "getMostRecentAbsMarkStartByName").throws();
+ const dispatch = sinon.spy(store, "dispatch");
+ const instance = new DetectUserSessionStart(store, { perfService });
+
+ instance._sendEvent();
+
+ assert.notCalled(dispatch);
+ });
+
+ it('should call perfService.mark("visibility_event_rcvd_ts")', () => {
+ let perfService = new PerfService();
+ sinon.stub(perfService, "mark");
+ const instance = new DetectUserSessionStart(store, { perfService });
+
+ instance._sendEvent();
+
+ assert.calledWith(perfService.mark, "visibility_event_rcvd_ts");
+ });
+ });
+
+ describe("_onVisibilityChange", () => {
+ it("should not send an event if visiblity is not visible", () => {
+ const instance = new DetectUserSessionStart(store, {
+ document: { visibilityState: "hidden" },
+ });
+ sinon.stub(instance, "_sendEvent");
+
+ instance._onVisibilityChange();
+
+ assert.notCalled(instance._sendEvent);
+ });
+ it("should send an event and remove the event listener if visibility is visible", () => {
+ const mockDocument = {
+ visibilityState: "visible",
+ removeEventListener: sinon.spy(),
+ };
+ const instance = new DetectUserSessionStart(store, {
+ document: mockDocument,
+ });
+ sinon.stub(instance, "_sendEvent");
+
+ instance._onVisibilityChange();
+
+ assert.calledOnce(instance._sendEvent);
+ assert.calledWith(
+ mockDocument.removeEventListener,
+ "visibilitychange",
+ instance._onVisibilityChange
+ );
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/lib/init-store.test.js b/browser/components/newtab/test/unit/content-src/lib/init-store.test.js
new file mode 100644
index 0000000000..0dd510ef1a
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/lib/init-store.test.js
@@ -0,0 +1,155 @@
+import {
+ actionCreators as ac,
+ actionTypes as at,
+} from "common/Actions.sys.mjs";
+import { addNumberReducer, GlobalOverrider } from "test/unit/utils";
+import {
+ INCOMING_MESSAGE_NAME,
+ initStore,
+ MERGE_STORE_ACTION,
+ OUTGOING_MESSAGE_NAME,
+ rehydrationMiddleware,
+} from "content-src/lib/init-store";
+
+describe("initStore", () => {
+ let globals;
+ let store;
+ beforeEach(() => {
+ globals = new GlobalOverrider();
+ globals.set("RPMSendAsyncMessage", globals.sandbox.spy());
+ globals.set("RPMAddMessageListener", globals.sandbox.spy());
+ store = initStore({ number: addNumberReducer });
+ });
+ afterEach(() => globals.restore());
+ it("should create a store with the provided reducers", () => {
+ assert.ok(store);
+ assert.property(store.getState(), "number");
+ });
+ it("should add a listener that dispatches actions", () => {
+ assert.calledWith(global.RPMAddMessageListener, INCOMING_MESSAGE_NAME);
+ const [, listener] = global.RPMAddMessageListener.firstCall.args;
+ globals.sandbox.spy(store, "dispatch");
+ const message = { name: INCOMING_MESSAGE_NAME, data: { type: "FOO" } };
+
+ listener(message);
+
+ assert.calledWith(store.dispatch, message.data);
+ });
+ it("should not throw if RPMAddMessageListener is not defined", () => {
+ // Note: this is being set/restored by GlobalOverrider
+ delete global.RPMAddMessageListener;
+
+ assert.doesNotThrow(() => initStore({ number: addNumberReducer }));
+ });
+ it("should log errors from failed messages", () => {
+ const [, callback] = global.RPMAddMessageListener.firstCall.args;
+ globals.sandbox.stub(global.console, "error");
+ globals.sandbox.stub(store, "dispatch").throws(Error("failed"));
+
+ const message = {
+ name: INCOMING_MESSAGE_NAME,
+ data: { type: MERGE_STORE_ACTION },
+ };
+ callback(message);
+
+ assert.calledOnce(global.console.error);
+ });
+ it("should replace the state if a MERGE_STORE_ACTION is dispatched", () => {
+ store.dispatch({ type: MERGE_STORE_ACTION, data: { number: 42 } });
+ assert.deepEqual(store.getState(), { number: 42 });
+ });
+ it("should call .send and update the local store if an AlsoToMain action is dispatched", () => {
+ const subscriber = sinon.spy();
+ const action = ac.AlsoToMain({ type: "FOO" });
+
+ store.subscribe(subscriber);
+ store.dispatch(action);
+
+ assert.calledWith(
+ global.RPMSendAsyncMessage,
+ OUTGOING_MESSAGE_NAME,
+ action
+ );
+ assert.calledOnce(subscriber);
+ });
+ it("should call .send but not update the local store if an OnlyToMain action is dispatched", () => {
+ const subscriber = sinon.spy();
+ const action = ac.OnlyToMain({ type: "FOO" });
+
+ store.subscribe(subscriber);
+ store.dispatch(action);
+
+ assert.calledWith(
+ global.RPMSendAsyncMessage,
+ OUTGOING_MESSAGE_NAME,
+ action
+ );
+ assert.notCalled(subscriber);
+ });
+ it("should not send out other types of actions", () => {
+ store.dispatch({ type: "FOO" });
+ assert.notCalled(global.RPMSendAsyncMessage);
+ });
+ describe("rehydrationMiddleware", () => {
+ it("should allow NEW_TAB_STATE_REQUEST to go through", () => {
+ const action = ac.AlsoToMain({ type: at.NEW_TAB_STATE_REQUEST });
+ const next = sinon.spy();
+ rehydrationMiddleware(store)(next)(action);
+ assert.calledWith(next, action);
+ });
+ it("should dispatch an additional NEW_TAB_STATE_REQUEST if INIT was received after a request", () => {
+ const requestAction = ac.AlsoToMain({ type: at.NEW_TAB_STATE_REQUEST });
+ const next = sinon.spy();
+ const dispatch = rehydrationMiddleware(store)(next);
+
+ dispatch(requestAction);
+ next.resetHistory();
+ dispatch({ type: at.INIT });
+
+ assert.calledWith(next, requestAction);
+ });
+ it("should allow MERGE_STORE_ACTION to go through", () => {
+ const action = { type: MERGE_STORE_ACTION };
+ const next = sinon.spy();
+ rehydrationMiddleware(store)(next)(action);
+ assert.calledWith(next, action);
+ });
+ it("should not allow actions from main to go through before MERGE_STORE_ACTION was received", () => {
+ const next = sinon.spy();
+ const dispatch = rehydrationMiddleware(store)(next);
+
+ dispatch(ac.BroadcastToContent({ type: "FOO" }));
+ dispatch(ac.AlsoToOneContent({ type: "FOO" }, 123));
+
+ assert.notCalled(next);
+ });
+ it("should allow all local actions to go through", () => {
+ const action = { type: "FOO" };
+ const next = sinon.spy();
+ rehydrationMiddleware(store)(next)(action);
+ assert.calledWith(next, action);
+ });
+ it("should allow actions from main to go through after MERGE_STORE_ACTION has been received", () => {
+ const next = sinon.spy();
+ const dispatch = rehydrationMiddleware(store)(next);
+
+ dispatch({ type: MERGE_STORE_ACTION });
+ next.resetHistory();
+
+ const action = ac.AlsoToOneContent({ type: "FOO" }, 123);
+ dispatch(action);
+ assert.calledWith(next, action);
+ });
+ it("should not let startup actions go through for the preloaded about:home document", () => {
+ globals.set("__FROM_STARTUP_CACHE__", true);
+ const next = sinon.spy();
+ const dispatch = rehydrationMiddleware(store)(next);
+ const action = ac.BroadcastToContent(
+ { type: "FOO", meta: { isStartup: true } },
+ 123
+ );
+ dispatch(action);
+ assert.notCalled(next);
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/lib/perf-service.test.js b/browser/components/newtab/test/unit/content-src/lib/perf-service.test.js
new file mode 100644
index 0000000000..9cabfb5029
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/lib/perf-service.test.js
@@ -0,0 +1,89 @@
+/* globals assert, beforeEach, describe, it */
+import { _PerfService } from "content-src/lib/perf-service";
+import { FakePerformance } from "test/unit/utils.js";
+
+let perfService;
+
+describe("_PerfService", () => {
+ let sandbox;
+ let fakePerfObj;
+
+ beforeEach(() => {
+ sandbox = sinon.createSandbox();
+ fakePerfObj = new FakePerformance();
+ perfService = new _PerfService({ performanceObj: fakePerfObj });
+ });
+
+ afterEach(() => {
+ sandbox.restore();
+ });
+
+ describe("#absNow", () => {
+ it("should return a number > the time origin", () => {
+ const absNow = perfService.absNow();
+
+ assert.isAbove(absNow, perfService.timeOrigin);
+ });
+ });
+ describe("#getEntriesByName", () => {
+ it("should call getEntriesByName on the appropriate Window.performance", () => {
+ sandbox.spy(fakePerfObj, "getEntriesByName");
+
+ perfService.getEntriesByName("monkey", "mark");
+
+ assert.calledOnce(fakePerfObj.getEntriesByName);
+ assert.calledWithExactly(fakePerfObj.getEntriesByName, "monkey", "mark");
+ });
+
+ it("should return entries with the given name", () => {
+ sandbox.spy(fakePerfObj, "getEntriesByName");
+ perfService.mark("monkey");
+ perfService.mark("dog");
+
+ let marks = perfService.getEntriesByName("monkey", "mark");
+
+ assert.isArray(marks);
+ assert.lengthOf(marks, 1);
+ assert.propertyVal(marks[0], "name", "monkey");
+ });
+ });
+
+ describe("#getMostRecentAbsMarkStartByName", () => {
+ it("should throw an error if there is no mark with the given name", () => {
+ function bogusGet() {
+ perfService.getMostRecentAbsMarkStartByName("rheeeet");
+ }
+
+ assert.throws(bogusGet, Error, /No marks with the name/);
+ });
+
+ it("should return the Number from the most recent mark with the given name + the time origin", () => {
+ perfService.mark("dog");
+ perfService.mark("dog");
+
+ let absMarkStart = perfService.getMostRecentAbsMarkStartByName("dog");
+
+ // 2 because we want the result of the 2nd call to mark, and an instance
+ // of FakePerformance just returns the number of time mark has been
+ // called.
+ assert.equal(absMarkStart - perfService.timeOrigin, 2);
+ });
+ });
+
+ describe("#mark", () => {
+ it("should call the wrapped version of mark", () => {
+ sandbox.spy(fakePerfObj, "mark");
+
+ perfService.mark("monkey");
+
+ assert.calledOnce(fakePerfObj.mark);
+ assert.calledWithExactly(fakePerfObj.mark, "monkey");
+ });
+ });
+
+ describe("#timeOrigin", () => {
+ it("should get the origin of the wrapped performance object", () => {
+ assert.equal(perfService.timeOrigin, fakePerfObj.timeOrigin);
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/lib/screenshot-utils.test.js b/browser/components/newtab/test/unit/content-src/lib/screenshot-utils.test.js
new file mode 100644
index 0000000000..ef7e7cf5f6
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/lib/screenshot-utils.test.js
@@ -0,0 +1,147 @@
+import { GlobalOverrider } from "test/unit/utils";
+import { ScreenshotUtils } from "content-src/lib/screenshot-utils";
+
+const DEFAULT_BLOB_URL = "blob://test";
+
+describe("ScreenshotUtils", () => {
+ let globals;
+ let url;
+ beforeEach(() => {
+ globals = new GlobalOverrider();
+ url = {
+ createObjectURL: globals.sandbox.stub().returns(DEFAULT_BLOB_URL),
+ revokeObjectURL: globals.sandbox.spy(),
+ };
+ globals.set("URL", url);
+ });
+ afterEach(() => globals.restore());
+ describe("#createLocalImageObject", () => {
+ it("should return null if no remoteImage is supplied", () => {
+ let localImageObject = ScreenshotUtils.createLocalImageObject(null);
+
+ assert.notCalled(url.createObjectURL);
+ assert.equal(localImageObject, null);
+ });
+ it("should create a local image object with the correct properties if remoteImage is a blob", () => {
+ let localImageObject = ScreenshotUtils.createLocalImageObject({
+ path: "/path1",
+ data: new Blob([0]),
+ });
+
+ assert.calledOnce(url.createObjectURL);
+ assert.deepEqual(localImageObject, {
+ path: "/path1",
+ url: DEFAULT_BLOB_URL,
+ });
+ });
+ it("should create a local image object with the correct properties if remoteImage is a normal image", () => {
+ const imageUrl = "https://test-url";
+ let localImageObject = ScreenshotUtils.createLocalImageObject(imageUrl);
+
+ assert.notCalled(url.createObjectURL);
+ assert.deepEqual(localImageObject, { url: imageUrl });
+ });
+ });
+ describe("#maybeRevokeBlobObjectURL", () => {
+ // Note that we should also ensure that all the tests for #isBlob are green.
+ it("should call revokeObjectURL if image is a blob", () => {
+ ScreenshotUtils.maybeRevokeBlobObjectURL({
+ path: "/path1",
+ url: "blob://test",
+ });
+
+ assert.calledOnce(url.revokeObjectURL);
+ });
+ it("should not call revokeObjectURL if image is not a blob", () => {
+ ScreenshotUtils.maybeRevokeBlobObjectURL({ url: "https://test-url" });
+
+ assert.notCalled(url.revokeObjectURL);
+ });
+ });
+ describe("#isRemoteImageLocal", () => {
+ it("should return true if both propsImage and stateImage are not present", () => {
+ assert.isTrue(ScreenshotUtils.isRemoteImageLocal(null, null));
+ });
+ it("should return false if propsImage is present and stateImage is not present", () => {
+ assert.isFalse(ScreenshotUtils.isRemoteImageLocal(null, {}));
+ });
+ it("should return false if propsImage is not present and stateImage is present", () => {
+ assert.isFalse(ScreenshotUtils.isRemoteImageLocal({}, null));
+ });
+ it("should return true if both propsImage and stateImage are equal blobs", () => {
+ const blobPath = "/test-blob-path/test.png";
+ assert.isTrue(
+ ScreenshotUtils.isRemoteImageLocal(
+ { path: blobPath, url: "blob://test" }, // state
+ { path: blobPath, data: new Blob([0]) } // props
+ )
+ );
+ });
+ it("should return false if both propsImage and stateImage are different blobs", () => {
+ assert.isFalse(
+ ScreenshotUtils.isRemoteImageLocal(
+ { path: "/path1", url: "blob://test" }, // state
+ { path: "/path2", data: new Blob([0]) } // props
+ )
+ );
+ });
+ it("should return true if both propsImage and stateImage are equal normal images", () => {
+ assert.isTrue(
+ ScreenshotUtils.isRemoteImageLocal(
+ { url: "test url" }, // state
+ "test url" // props
+ )
+ );
+ });
+ it("should return false if both propsImage and stateImage are different normal images", () => {
+ assert.isFalse(
+ ScreenshotUtils.isRemoteImageLocal(
+ { url: "test url 1" }, // state
+ "test url 2" // props
+ )
+ );
+ });
+ it("should return false if both propsImage and stateImage are different type of images", () => {
+ assert.isFalse(
+ ScreenshotUtils.isRemoteImageLocal(
+ { path: "/path1", url: "blob://test" }, // state
+ "test url 2" // props
+ )
+ );
+ assert.isFalse(
+ ScreenshotUtils.isRemoteImageLocal(
+ { url: "https://test-url" }, // state
+ { path: "/path1", data: new Blob([0]) } // props
+ )
+ );
+ });
+ });
+ describe("#isBlob", () => {
+ let state = {
+ blobImage: { path: "/test", url: "blob://test" },
+ normalImage: { url: "https://test-url" },
+ };
+ let props = {
+ blobImage: { path: "/test", data: new Blob([0]) },
+ normalImage: "https://test-url",
+ };
+ it("should return false if image is null", () => {
+ assert.isFalse(ScreenshotUtils.isBlob(true, null));
+ assert.isFalse(ScreenshotUtils.isBlob(false, null));
+ });
+ it("should return true if image is a blob and type matches", () => {
+ assert.isTrue(ScreenshotUtils.isBlob(true, state.blobImage));
+ assert.isTrue(ScreenshotUtils.isBlob(false, props.blobImage));
+ });
+ it("should return false if image is not a blob and type matches", () => {
+ assert.isFalse(ScreenshotUtils.isBlob(true, state.normalImage));
+ assert.isFalse(ScreenshotUtils.isBlob(false, props.normalImage));
+ });
+ it("should return false if type does not match", () => {
+ assert.isFalse(ScreenshotUtils.isBlob(false, state.blobImage));
+ assert.isFalse(ScreenshotUtils.isBlob(false, state.normalImage));
+ assert.isFalse(ScreenshotUtils.isBlob(true, props.blobImage));
+ assert.isFalse(ScreenshotUtils.isBlob(true, props.normalImage));
+ });
+ });
+});
diff --git a/browser/components/newtab/test/unit/content-src/lib/selectLayoutRender.test.js b/browser/components/newtab/test/unit/content-src/lib/selectLayoutRender.test.js
new file mode 100644
index 0000000000..233f31b6ca
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/lib/selectLayoutRender.test.js
@@ -0,0 +1,576 @@
+import { combineReducers, createStore } from "redux";
+import { actionTypes as at } from "common/Actions.sys.mjs";
+import { GlobalOverrider } from "test/unit/utils";
+import { reducers } from "common/Reducers.sys.mjs";
+import { selectLayoutRender } from "content-src/lib/selectLayoutRender";
+const FAKE_LAYOUT = [
+ {
+ width: 3,
+ components: [
+ { type: "foo", feed: { url: "foo.com" }, properties: { items: 2 } },
+ ],
+ },
+];
+const FAKE_FEEDS = {
+ "foo.com": { data: { recommendations: [{ id: "foo" }, { id: "bar" }] } },
+};
+
+describe("selectLayoutRender", () => {
+ let store;
+ let globals;
+
+ beforeEach(() => {
+ globals = new GlobalOverrider();
+ store = createStore(combineReducers(reducers));
+ });
+
+ afterEach(() => {
+ globals.restore();
+ });
+
+ it("should return an empty array given initial state", () => {
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ prefs: {},
+ rollCache: [],
+ });
+ assert.deepEqual(layoutRender, []);
+ });
+
+ it("should add .data property from feeds to each compontent in .layout", () => {
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: FAKE_LAYOUT },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: { feed: FAKE_FEEDS["foo.com"], url: "foo.com" },
+ });
+ store.dispatch({ type: at.DISCOVERY_STREAM_FEEDS_UPDATE });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ assert.lengthOf(layoutRender, 1);
+ assert.propertyVal(layoutRender[0], "width", 3);
+ assert.deepEqual(layoutRender[0].components[0], {
+ type: "foo",
+ feed: { url: "foo.com" },
+ properties: { items: 2 },
+ data: {
+ recommendations: [
+ { id: "foo", pos: 0 },
+ { id: "bar", pos: 1 },
+ ],
+ },
+ });
+ });
+
+ it("should return layout with placeholder data if feed doesn't have data", () => {
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: FAKE_LAYOUT },
+ });
+ store.dispatch({ type: at.DISCOVERY_STREAM_FEEDS_UPDATE });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ assert.lengthOf(layoutRender, 1);
+ assert.propertyVal(layoutRender[0], "width", 3);
+ assert.deepEqual(layoutRender[0].components[0].data.recommendations, [
+ { placeholder: true },
+ { placeholder: true },
+ ]);
+ });
+
+ it("should return layout with empty spocs data if feed isn't defined but spocs is", () => {
+ const fakeLayout = [
+ {
+ width: 3,
+ components: [{ type: "foo", spocs: { positions: [{ index: 2 }] } }],
+ },
+ ];
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: fakeLayout },
+ });
+ store.dispatch({ type: at.DISCOVERY_STREAM_FEEDS_UPDATE });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ assert.lengthOf(layoutRender, 1);
+ assert.propertyVal(layoutRender[0], "width", 3);
+ assert.deepEqual(layoutRender[0].components[0].data.spocs, []);
+ });
+
+ it("should return layout with spocs data if feed isn't defined but spocs is", () => {
+ const fakeLayout = [
+ {
+ width: 3,
+ components: [{ type: "foo", spocs: { positions: [{ index: 0 }] } }],
+ },
+ ];
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: fakeLayout },
+ });
+ store.dispatch({ type: at.DISCOVERY_STREAM_FEEDS_UPDATE });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_SPOCS_UPDATE,
+ data: {
+ lastUpdated: 0,
+ spocs: {
+ spocs: {
+ items: [{ id: 1 }, { id: 2 }, { id: 3 }],
+ },
+ },
+ },
+ });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ assert.lengthOf(layoutRender, 1);
+ assert.propertyVal(layoutRender[0], "width", 3);
+ assert.deepEqual(layoutRender[0].components[0].data.spocs, [
+ { id: 1, pos: 0 },
+ { id: 2, pos: 1 },
+ { id: 3, pos: 2 },
+ ]);
+ });
+
+ it("should return layout with no spocs data if feed and spocs are unavailable", () => {
+ const fakeLayout = [
+ {
+ width: 3,
+ components: [{ type: "foo", spocs: { positions: [{ index: 0 }] } }],
+ },
+ ];
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: fakeLayout },
+ });
+ store.dispatch({ type: at.DISCOVERY_STREAM_FEEDS_UPDATE });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_SPOCS_UPDATE,
+ data: {
+ lastUpdated: 0,
+ spocs: {
+ spocs: {
+ items: [],
+ },
+ },
+ },
+ });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ assert.lengthOf(layoutRender, 1);
+ assert.propertyVal(layoutRender[0], "width", 3);
+ assert.equal(layoutRender[0].components[0].data.spocs.length, 0);
+ });
+
+ it("should return feed data offset by layout set prop", () => {
+ const fakeLayout = [
+ {
+ width: 3,
+ components: [
+ { type: "foo", properties: { offset: 1 }, feed: { url: "foo.com" } },
+ ],
+ },
+ ];
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: fakeLayout },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: { feed: FAKE_FEEDS["foo.com"], url: "foo.com" },
+ });
+ store.dispatch({ type: at.DISCOVERY_STREAM_FEEDS_UPDATE });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ assert.deepEqual(layoutRender[0].components[0].data, {
+ recommendations: [{ id: "bar" }],
+ });
+ });
+
+ it("should return spoc result when there are more positions than spocs", () => {
+ const fakeSpocConfig = {
+ positions: [{ index: 0 }, { index: 1 }, { index: 2 }],
+ };
+ const fakeLayout = [
+ {
+ width: 3,
+ components: [
+ { type: "foo", feed: { url: "foo.com" }, spocs: fakeSpocConfig },
+ ],
+ },
+ ];
+ const fakeSpocsData = {
+ lastUpdated: 0,
+ spocs: { spocs: { items: ["fooSpoc", "barSpoc"] } },
+ };
+
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: fakeLayout },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: { feed: FAKE_FEEDS["foo.com"], url: "foo.com" },
+ });
+ store.dispatch({ type: at.DISCOVERY_STREAM_FEEDS_UPDATE });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_SPOCS_UPDATE,
+ data: fakeSpocsData,
+ });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ assert.lengthOf(layoutRender, 1);
+ assert.deepEqual(
+ layoutRender[0].components[0].data.recommendations[0],
+ "fooSpoc"
+ );
+ assert.deepEqual(
+ layoutRender[0].components[0].data.recommendations[1],
+ "barSpoc"
+ );
+ assert.deepEqual(layoutRender[0].components[0].data.recommendations[2], {
+ id: "foo",
+ });
+ assert.deepEqual(layoutRender[0].components[0].data.recommendations[3], {
+ id: "bar",
+ });
+ });
+
+ it("should return a layout with feeds of items length with positions", () => {
+ const fakeLayout = [
+ {
+ width: 3,
+ components: [
+ { type: "foo", properties: { items: 3 }, feed: { url: "foo.com" } },
+ ],
+ },
+ ];
+ const fakeRecommendations = [
+ { name: "item1" },
+ { name: "item2" },
+ { name: "item3" },
+ { name: "item4" },
+ ];
+ const fakeFeeds = {
+ "foo.com": { data: { recommendations: fakeRecommendations } },
+ };
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: fakeLayout },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: { feed: fakeFeeds["foo.com"], url: "foo.com" },
+ });
+ store.dispatch({ type: at.DISCOVERY_STREAM_FEEDS_UPDATE });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ const { recommendations } = layoutRender[0].components[0].data;
+ assert.equal(recommendations.length, 4);
+ assert.equal(recommendations[0].pos, 0);
+ assert.equal(recommendations[1].pos, 1);
+ assert.equal(recommendations[2].pos, 2);
+ assert.equal(recommendations[3].pos, undefined);
+ });
+ it("should stop rendering feeds if we hit one that's not ready", () => {
+ const fakeLayout = [
+ {
+ width: 3,
+ components: [
+ { type: "foo1" },
+ { type: "foo2", properties: { items: 3 }, feed: { url: "foo2.com" } },
+ { type: "foo3", properties: { items: 3 }, feed: { url: "foo3.com" } },
+ { type: "foo4", properties: { items: 3 }, feed: { url: "foo4.com" } },
+ { type: "foo5" },
+ ],
+ },
+ ];
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: fakeLayout },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: { feed: { data: { recommendations: [] } }, url: "foo2.com" },
+ });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ assert.equal(layoutRender[0].components[0].type, "foo1");
+ assert.equal(layoutRender[0].components[1].type, "foo2");
+ assert.isTrue(
+ layoutRender[0].components[2].data.recommendations[0].placeholder
+ );
+ assert.lengthOf(layoutRender[0].components, 3);
+ assert.isUndefined(layoutRender[0].components[3]);
+ });
+ it("should render everything if everything is ready", () => {
+ const fakeLayout = [
+ {
+ width: 3,
+ components: [
+ { type: "foo1" },
+ { type: "foo2", properties: { items: 3 }, feed: { url: "foo2.com" } },
+ { type: "foo3", properties: { items: 3 }, feed: { url: "foo3.com" } },
+ { type: "foo4", properties: { items: 3 }, feed: { url: "foo4.com" } },
+ { type: "foo5" },
+ ],
+ },
+ ];
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: fakeLayout },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: { feed: { data: { recommendations: [] } }, url: "foo2.com" },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: { feed: { data: { recommendations: [] } }, url: "foo3.com" },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: { feed: { data: { recommendations: [] } }, url: "foo4.com" },
+ });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ assert.equal(layoutRender[0].components[0].type, "foo1");
+ assert.equal(layoutRender[0].components[1].type, "foo2");
+ assert.equal(layoutRender[0].components[2].type, "foo3");
+ assert.equal(layoutRender[0].components[3].type, "foo4");
+ assert.equal(layoutRender[0].components[4].type, "foo5");
+ });
+ it("should stop rendering feeds if we hit a not ready spoc", () => {
+ const fakeLayout = [
+ {
+ width: 3,
+ components: [
+ { type: "foo1" },
+ { type: "foo2", properties: { items: 3 }, feed: { url: "foo2.com" } },
+ {
+ type: "foo3",
+ properties: { items: 3 },
+ feed: { url: "foo3.com" },
+ spocs: { positions: [{ index: 0 }] },
+ },
+ { type: "foo4", properties: { items: 3 }, feed: { url: "foo4.com" } },
+ { type: "foo5" },
+ ],
+ },
+ ];
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: fakeLayout },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: { feed: { data: { recommendations: [] } }, url: "foo2.com" },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: { feed: { data: { recommendations: [] } }, url: "foo3.com" },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: { feed: { data: { recommendations: [] } }, url: "foo4.com" },
+ });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ assert.equal(layoutRender[0].components[0].type, "foo1");
+ assert.equal(layoutRender[0].components[1].type, "foo2");
+ assert.deepEqual(layoutRender[0].components[2].data.recommendations, [
+ { placeholder: true },
+ { placeholder: true },
+ { placeholder: true },
+ ]);
+ });
+ it("should not render a spoc if there are no available spocs", () => {
+ const fakeLayout = [
+ {
+ width: 3,
+ components: [
+ { type: "foo1" },
+ { type: "foo2", properties: { items: 3 }, feed: { url: "foo2.com" } },
+ {
+ type: "foo3",
+ properties: { items: 3 },
+ feed: { url: "foo3.com" },
+ spocs: { positions: [{ index: 0 }] },
+ },
+ { type: "foo4", properties: { items: 3 }, feed: { url: "foo4.com" } },
+ { type: "foo5" },
+ ],
+ },
+ ];
+ const fakeSpocsData = { lastUpdated: 0, spocs: { spocs: [] } };
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: fakeLayout },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: { feed: { data: { recommendations: [] } }, url: "foo2.com" },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: {
+ feed: { data: { recommendations: [{ name: "rec" }] } },
+ url: "foo3.com",
+ },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: { feed: { data: { recommendations: [] } }, url: "foo4.com" },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_SPOCS_UPDATE,
+ data: fakeSpocsData,
+ });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ assert.deepEqual(layoutRender[0].components[2].data.recommendations[0], {
+ name: "rec",
+ pos: 0,
+ });
+ });
+ it("should not render a row if no components exist after filter in that row", () => {
+ const fakeLayout = [
+ {
+ width: 3,
+ components: [{ type: "TopSites" }],
+ },
+ {
+ width: 3,
+ components: [{ type: "Message" }],
+ },
+ ];
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: fakeLayout },
+ });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ prefs: { "feeds.topsites": true },
+ });
+
+ assert.equal(layoutRender[0].components[0].type, "TopSites");
+ assert.equal(layoutRender[1], undefined);
+ });
+ it("should not render a component if filtered", () => {
+ const fakeLayout = [
+ {
+ width: 3,
+ components: [{ type: "Message" }, { type: "TopSites" }],
+ },
+ ];
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: fakeLayout },
+ });
+
+ const { layoutRender } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ prefs: { "feeds.topsites": true },
+ });
+
+ assert.equal(layoutRender[0].components[0].type, "TopSites");
+ assert.equal(layoutRender[0].components[1], undefined);
+ });
+ it("should skip rendering a spoc in position if that spoc is blocked for that session", () => {
+ const fakeLayout = [
+ {
+ width: 3,
+ components: [
+ {
+ type: "foo1",
+ properties: { items: 3 },
+ feed: { url: "foo1.com" },
+ spocs: { positions: [{ index: 0 }] },
+ },
+ ],
+ },
+ ];
+ const fakeSpocsData = {
+ lastUpdated: 0,
+ spocs: {
+ spocs: { items: [{ name: "spoc", url: "https://foo.com" }] },
+ },
+ };
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_LAYOUT_UPDATE,
+ data: { layout: fakeLayout },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_FEED_UPDATE,
+ data: {
+ feed: { data: { recommendations: [{ name: "rec" }] } },
+ url: "foo1.com",
+ },
+ });
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_SPOCS_UPDATE,
+ data: fakeSpocsData,
+ });
+
+ const { layoutRender: layout1 } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ store.dispatch({
+ type: at.DISCOVERY_STREAM_SPOC_BLOCKED,
+ data: { url: "https://foo.com" },
+ });
+
+ const { layoutRender: layout2 } = selectLayoutRender({
+ state: store.getState().DiscoveryStream,
+ });
+
+ assert.deepEqual(layout1[0].components[0].data.recommendations[0], {
+ name: "spoc",
+ url: "https://foo.com",
+ pos: 0,
+ });
+ assert.deepEqual(layout2[0].components[0].data.recommendations[0], {
+ name: "rec",
+ pos: 0,
+ });
+ });
+});