1 files changed, 238 insertions, 0 deletions
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,
+        })
+      );
+    });
+  });
+});