1 files changed, 134 insertions, 0 deletions
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..3721508a59
--- /dev/null
+++ b/browser/components/newtab/test/unit/content-src/components/DiscoveryStreamComponents/CollectionCardGrid.test.jsx
@@ -0,0 +1,134 @@
+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");
+    assert.deepEqual(firstCall.args[0].data, [
+      { url: "123", pocket_id: undefined, isSponsoredTopSite: undefined },
+      { url: "456", pocket_id: undefined, isSponsoredTopSite: undefined },
+      { url: "789", pocket_id: undefined, isSponsoredTopSite: undefined },
+    ]);
+
+    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 },
+      ],
+    });
+  });
+});