Bug 1575872 - Part 2: Add Jest tests r=Ola

Differential Revision: https://phabricator.services.mozilla.com/D43638

--HG--
extra : moz-landing-system : lando

devtools/client/application/src/components/manifest/ManifestIssueList.js

@@ -43,7 +43,10 @@ class ManifestIssueList extends PureComponent {
 
     return groups.map((list, listIndex) => {
       return ul(
-        { className: "manifest-issues", key: `issuelist-${listIndex}` },
+        {
+          className: "manifest-issues js-manifest-issues",
+          key: `issuelist-${listIndex}`,
+        },
         list.map((issue, issueIndex) =>
           ManifestIssue({
             className: "manifest-issues__item",

devtools/client/application/test/components/fixtures/data/constants.js

@@ -93,10 +93,22 @@ const MANIFEST_SIMPLE = {
   validation: [{ level: "warning", message: "This is a warning" }],
 };
 
+// props for a manifest with no validation issues
+const MANIFEST_NO_ISSUES = {
+  icons: [{ key: "1x1", value: "something.png" }],
+  identity: [{ key: "name", value: "foo" }],
+  presentation: [
+    { key: "lorem", value: "ipsum" },
+    { key: "foo", value: "bar" },
+  ],
+  validation: [],
+};
+
 module.exports = {
   EMPTY_WORKER_LIST,
   SINGLE_WORKER_DEFAULT_DOMAIN_LIST,
   SINGLE_WORKER_DIFFERENT_DOMAIN_LIST,
+  MANIFEST_NO_ISSUES,
   MANIFEST_SIMPLE,
   MULTIPLE_WORKER_LIST,
   MULTIPLE_WORKER_MIXED_DOMAINS_LIST,

devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-Manifest.test.js.snap

@@ -1,6 +1,69 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Manifest renders the expected snapshot 1`] = `
+exports[`Manifest does not render the issues section when the manifest is valid 1`] = `
+<article>
+  <Localized
+    id="manifest-view-header"
+  >
+    <h1
+      className="app-page__title"
+    />
+  </Localized>
+  <ManifestSection
+    key="manifest-section-1"
+    title="manifest-item-identity"
+  >
+    <table>
+      <tbody>
+        <ManifestItem
+          key="name"
+          label="name"
+        >
+          foo
+        </ManifestItem>
+      </tbody>
+    </table>
+  </ManifestSection>
+  <ManifestSection
+    key="manifest-section-2"
+    title="manifest-item-presentation"
+  >
+    <table>
+      <tbody>
+        <ManifestItem
+          key="lorem"
+          label="lorem"
+        >
+          ipsum
+        </ManifestItem>
+        <ManifestItem
+          key="foo"
+          label="foo"
+        >
+          bar
+        </ManifestItem>
+      </tbody>
+    </table>
+  </ManifestSection>
+  <ManifestSection
+    key="manifest-section-3"
+    title="manifest-item-icons"
+  >
+    <table>
+      <tbody>
+        <ManifestItem
+          key="1x1"
+          label="1x1"
+        >
+          something.png
+        </ManifestItem>
+      </tbody>
+    </table>
+  </ManifestSection>
+</article>
+`;
+
+exports[`Manifest renders the expected snapshot for a simple manifest 1`] = `
 <article>
   <Localized
     id="manifest-view-header"

devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestIssue.test.js.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestIssue renders the expected snapshot for a warning 1`] = `
+<li
+  className="manifest-warning "
+>
+  <Localized
+    attrs={
+      Object {
+        "alt": true,
+        "title": true,
+      }
+    }
+    id="icon-warning"
+  >
+    <img
+      className="manifest-issue__icon manifest-issue__icon--warning"
+      src="chrome://devtools/skin/images/alert-small.svg"
+    />
+  </Localized>
+  <span>
+    Lorem ipsum
+  </span>
+</li>
+`;
+
+exports[`ManifestIssue renders the expected snapshot for an error 1`] = `
+<li
+  className="manifest-warning "
+>
+  <Localized
+    attrs={
+      Object {
+        "alt": true,
+        "title": true,
+      }
+    }
+    id="icon-error"
+  >
+    <img
+      className="manifest-issue__icon manifest-issue__icon--error"
+      src="chrome://devtools/skin/images/error-small.svg"
+    />
+  </Localized>
+  <span>
+    Lorem ipsum
+  </span>
+</li>
+`;

devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestIssueList.test.js.snap

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestIssueList groups issues by level and shows errors first 1`] = `
+Array [
+  <ul
+    className="manifest-issues js-manifest-issues"
+    key="issuelist-0"
+  >
+    <ManifestIssue
+      className="manifest-issues__item"
+      key="issue-0"
+      level="error"
+      message="An error"
+    />
+  </ul>,
+  <ul
+    className="manifest-issues js-manifest-issues"
+    key="issuelist-1"
+  >
+    <ManifestIssue
+      className="manifest-issues__item"
+      key="issue-0"
+      level="warning"
+      message="A warning"
+    />
+    <ManifestIssue
+      className="manifest-issues__item"
+      key="issue-1"
+      level="warning"
+      message="Another warning"
+    />
+  </ul>,
+]
+`;
+
+exports[`ManifestIssueList renders nothing for empty issues 1`] = `null`;
+
+exports[`ManifestIssueList renders the expected snapshot for a populated list 1`] = `
+Array [
+  <ul
+    className="manifest-issues js-manifest-issues"
+    key="issuelist-0"
+  >
+    <ManifestIssue
+      className="manifest-issues__item"
+      key="issue-0"
+      level="error"
+      message="Foo"
+    />
+  </ul>,
+  <ul
+    className="manifest-issues js-manifest-issues"
+    key="issuelist-1"
+  >
+    <ManifestIssue
+      className="manifest-issues__item"
+      key="issue-0"
+      level="warning"
+      message="Foo"
+    />
+    <ManifestIssue
+      className="manifest-issues__item"
+      key="issue-1"
+      level="warning"
+      message="Bar"
+    />
+  </ul>,
+]
+`;
+
+exports[`ManifestIssueList skips rendering empty level groups 1`] = `
+<ul
+  className="manifest-issues js-manifest-issues"
+  key="issuelist-0"
+>
+  <ManifestIssue
+    className="manifest-issues__item"
+    key="issue-0"
+    level="warning"
+    message="A warning"
+  />
+  <ManifestIssue
+    className="manifest-issues__item"
+    key="issue-1"
+    level="warning"
+    message="Another warning"
+  />
+</ul>
+`;

devtools/client/application/test/components/manifest/components_application_panel-Manifest.test.js

@@ -11,15 +11,28 @@ const Manifest = createFactory(
   require("devtools/client/application/src/components/manifest/Manifest")
 );
 
-const { MANIFEST_SIMPLE } = require("../fixtures/data/constants");
+const {
+  MANIFEST_NO_ISSUES,
+  MANIFEST_SIMPLE,
+} = require("../fixtures/data/constants");
 
 /*
  * Test for Manifest component
  */
 
 describe("Manifest", () => {
-  it("renders the expected snapshot", () => {
+  it("renders the expected snapshot for a simple manifest", () => {
     const wrapper = shallow(Manifest(MANIFEST_SIMPLE));
     expect(wrapper).toMatchSnapshot();
   });
+
+  it("does not render the issues section when the manifest is valid", () => {
+    const wrapper = shallow(Manifest(MANIFEST_NO_ISSUES));
+    expect(wrapper).toMatchSnapshot();
+
+    const sections = wrapper.find("ManifestSection");
+    expect(sections).toHaveLength(3);
+    expect(sections.get(0).props.title).not.toBe("manifest-item-warnings");
+    expect(sections.contains("ManifestIssueList")).toBe(false);
+  });
 });

devtools/client/application/test/components/manifest/components_application_panel-ManifestIssue.test.js

@@ -0,0 +1,30 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Import libs
+const { shallow } = require("enzyme");
+const { createFactory } = require("react");
+
+const ManifestIssue = createFactory(
+  require("devtools/client/application/src/components/manifest/ManifestIssue")
+);
+
+/*
+ * Tests for the ManifestIssue component
+ */
+
+describe("ManifestIssue", () => {
+  it("renders the expected snapshot for a warning", () => {
+    const issue = { level: "warning", message: "Lorem ipsum" };
+    const wrapper = shallow(ManifestIssue(issue));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot for an error", () => {
+    const issue = { level: "error", message: "Lorem ipsum" };
+    const wrapper = shallow(ManifestIssue(issue));
+    expect(wrapper).toMatchSnapshot();
+  });
+});

devtools/client/application/test/components/manifest/components_application_panel-ManifestIssueList.test.js

@@ -0,0 +1,59 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Import libs
+const { shallow } = require("enzyme");
+const { createFactory } = require("react");
+
+const ManifestIssueList = createFactory(
+  require("devtools/client/application/src/components/manifest/ManifestIssueList")
+);
+
+/*
+ * Tests for the ManifestIssue component
+ */
+
+describe("ManifestIssueList", () => {
+  it("renders the expected snapshot for a populated list", () => {
+    const issues = [
+      { level: "error", message: "Foo" },
+      { level: "warning", message: "Foo" },
+      { level: "warning", message: "Bar" },
+    ];
+    const wrapper = shallow(ManifestIssueList({ issues }));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("groups issues by level and shows errors first", () => {
+    const issues = [
+      { level: "warning", message: "A warning" },
+      { level: "error", message: "An error" },
+      { level: "warning", message: "Another warning" },
+    ];
+    const wrapper = shallow(ManifestIssueList({ issues }));
+    expect(wrapper).toMatchSnapshot();
+
+    expect(wrapper.find("ManifestIssue").get(0).props.level).toBe("error");
+    expect(wrapper.find("ManifestIssue").get(1).props.level).toBe("warning");
+    expect(wrapper.find("ManifestIssue").get(2).props.level).toBe("warning");
+  });
+
+  it("skips rendering empty level groups", () => {
+    const issues = [
+      { level: "warning", message: "A warning" },
+      { level: "warning", message: "Another warning" },
+    ];
+    const wrapper = shallow(ManifestIssueList({ issues }));
+    expect(wrapper).toMatchSnapshot();
+
+    const lists = wrapper.find(".js-manifest-issues");
+    expect(lists).toHaveLength(1);
+  });
+
+  it("renders nothing for empty issues", () => {
+    const wrapper = shallow(ManifestIssueList({ issues: [] }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});