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