Adding upstream version 115.7.0esr.upstream/115.7.0esr upstream

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-04-07 19:33:14 +0000
commit: 36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree: 105e8c98ddea1c1e4784a60a5a6410fa416be2de /devtools/client/application/test/node/components
parent: Initial commit. (diff)
download: firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz
firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip
42 files changed, 3020 insertions, 0 deletions
diff --git a/devtools/client/application/test/node/components/__snapshots__/components_application_panel-App.test.js.snap b/devtools/client/application/test/node/components/__snapshots__/components_application_panel-App.test.js.snap
new file mode 100644
index 0000000000..cef0e0a85d
--- /dev/null
+++ b/devtools/client/application/test/node/components/__snapshots__/components_application_panel-App.test.js.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`App renders the expected snapshot 1`] = `
+<LocalizationProvider>
+  <main
+    className="app"
+  >
+    <Connect(Sidebar) />
+    <Connect(PageSwitcher) />
+  </main>
+</LocalizationProvider>
+`;
diff --git a/devtools/client/application/test/node/components/components_application_panel-App.test.js b/devtools/client/application/test/node/components/components_application_panel-App.test.js
new file mode 100644
index 0000000000..fb003be26e
--- /dev/null
+++ b/devtools/client/application/test/node/components/components_application_panel-App.test.js
@@ -0,0 +1,26 @@
+/* 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");
+
+// Import & init localization
+const FluentReact = require("resource://devtools/client/shared/vendor/fluent-react.js");
+const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
+
+// Import component
+const App = createFactory(
+  require("resource://devtools/client/application/src/components/App.js")
+);
+
+describe("App", () => {
+  it("renders the expected snapshot", () => {
+    const wrapper = shallow(
+      LocalizationProvider({ bundles: [] }, App({}))
+    ).dive(); // dive to bypass the LocalizationProvider wrapper
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-Manifest.test.js.snap b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-Manifest.test.js.snap
new file mode 100644
index 0000000000..d46eb63334
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-Manifest.test.js.snap
@@ -0,0 +1,396 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Manifest does not render the issues section when the manifest is valid 1`] = `
+<article
+  className="js-manifest"
+>
+  <Localized
+    id="manifest-view-header"
+  >
+    <h1
+      className="app-page__title"
+    />
+  </Localized>
+  <ManifestJsonLink />
+  <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 />
+    </table>
+  </ManifestSection>
+</article>
+`;
+
+exports[`Manifest does render the issues section when the manifest is not valid 1`] = `
+<article
+  className="js-manifest"
+>
+  <Localized
+    id="manifest-view-header"
+  >
+    <h1
+      className="app-page__title"
+    />
+  </Localized>
+  <ManifestJsonLink />
+  <ManifestSection
+    key="manifest-section-0"
+    title="manifest-item-warnings"
+  >
+    <ManifestIssueList
+      issues={
+        Array [
+          Object {
+            "level": "warning",
+            "message": "This is a warning",
+          },
+        ]
+      }
+    />
+  </ManifestSection>
+  <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 />
+    </table>
+  </ManifestSection>
+</article>
+`;
+
+exports[`Manifest renders the expected snapshot for a manifest with color members 1`] = `
+<article
+  className="js-manifest"
+>
+  <Localized
+    id="manifest-view-header"
+  >
+    <h1
+      className="app-page__title"
+    />
+  </Localized>
+  <ManifestJsonLink />
+  <ManifestSection
+    key="manifest-section-1"
+    title="manifest-item-identity"
+  >
+    <table>
+      <tbody />
+    </table>
+  </ManifestSection>
+  <ManifestSection
+    key="manifest-section-2"
+    title="manifest-item-presentation"
+  >
+    <table>
+      <tbody>
+        <ManifestColorItem
+          key="background_color"
+          label="background_color"
+          value="red"
+        />
+        <ManifestColorItem
+          key="theme_color"
+          label="theme_color"
+          value="rgb(0, 0, 0)"
+        />
+      </tbody>
+    </table>
+  </ManifestSection>
+  <ManifestSection
+    key="manifest-section-3"
+    title="manifest-item-icons"
+  >
+    <table>
+      <tbody />
+    </table>
+  </ManifestSection>
+</article>
+`;
+
+exports[`Manifest renders the expected snapshot for a manifest with icon members 1`] = `
+<article
+  className="js-manifest"
+>
+  <Localized
+    id="manifest-view-header"
+  >
+    <h1
+      className="app-page__title"
+    />
+  </Localized>
+  <ManifestJsonLink />
+  <ManifestSection
+    key="manifest-section-1"
+    title="manifest-item-identity"
+  >
+    <table>
+      <tbody />
+    </table>
+  </ManifestSection>
+  <ManifestSection
+    key="manifest-section-2"
+    title="manifest-item-presentation"
+  >
+    <table>
+      <tbody />
+    </table>
+  </ManifestSection>
+  <ManifestSection
+    key="manifest-section-3"
+    title="manifest-item-icons"
+  >
+    <table>
+      <tbody>
+        <ManifestIconItem
+          key="0"
+          label={
+            Object {
+              "contentType": "image/png",
+              "sizes": "1x1",
+            }
+          }
+          value={
+            Object {
+              "purpose": "any",
+              "src": "something.png",
+            }
+          }
+        />
+        <ManifestIconItem
+          key="1"
+          label={
+            Object {
+              "contentType": "",
+              "sizes": "",
+            }
+          }
+          value={
+            Object {
+              "purpose": "any maskable",
+              "src": "something.svg",
+            }
+          }
+        />
+      </tbody>
+    </table>
+  </ManifestSection>
+</article>
+`;
+
+exports[`Manifest renders the expected snapshot for a manifest with string members 1`] = `
+<article
+  className="js-manifest"
+>
+  <Localized
+    id="manifest-view-header"
+  >
+    <h1
+      className="app-page__title"
+    />
+  </Localized>
+  <ManifestJsonLink />
+  <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 />
+    </table>
+  </ManifestSection>
+  <ManifestSection
+    key="manifest-section-3"
+    title="manifest-item-icons"
+  >
+    <table>
+      <tbody />
+    </table>
+  </ManifestSection>
+</article>
+`;
+
+exports[`Manifest renders the expected snapshot for a manifest with unknown types 1`] = `
+<article
+  className="js-manifest"
+>
+  <Localized
+    id="manifest-view-header"
+  >
+    <h1
+      className="app-page__title"
+    />
+  </Localized>
+  <ManifestJsonLink />
+  <ManifestSection
+    key="manifest-section-1"
+    title="manifest-item-identity"
+  >
+    <table>
+      <tbody>
+        <ManifestItem
+          key="lorem"
+          label="lorem"
+        >
+          ipsum
+        </ManifestItem>
+      </tbody>
+    </table>
+  </ManifestSection>
+  <ManifestSection
+    key="manifest-section-2"
+    title="manifest-item-presentation"
+  >
+    <table>
+      <tbody />
+    </table>
+  </ManifestSection>
+  <ManifestSection
+    key="manifest-section-3"
+    title="manifest-item-icons"
+  >
+    <table>
+      <tbody />
+    </table>
+  </ManifestSection>
+</article>
+`;
+
+exports[`Manifest renders the expected snapshot for a manifest with url members 1`] = `
+<article
+  className="js-manifest"
+>
+  <Localized
+    id="manifest-view-header"
+  >
+    <h1
+      className="app-page__title"
+    />
+  </Localized>
+  <ManifestJsonLink />
+  <ManifestSection
+    key="manifest-section-1"
+    title="manifest-item-identity"
+  >
+    <table>
+      <tbody />
+    </table>
+  </ManifestSection>
+  <ManifestSection
+    key="manifest-section-2"
+    title="manifest-item-presentation"
+  >
+    <table>
+      <tbody>
+        <ManifestUrlItem
+          key="start_url"
+          label="start_url"
+          value="https://example.com/"
+        />
+        <ManifestUrlItem
+          key="scope"
+          label="scope"
+          value="https://example.com/"
+        />
+      </tbody>
+    </table>
+  </ManifestSection>
+  <ManifestSection
+    key="manifest-section-3"
+    title="manifest-item-icons"
+  >
+    <table>
+      <tbody />
+    </table>
+  </ManifestSection>
+</article>
+`;
diff --git a/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestColorItem.test.js.snap b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestColorItem.test.js.snap
new file mode 100644
index 0000000000..4f3e485084
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestColorItem.test.js.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestColorItem does not strip translucent alpha from the displayed color 1`] = `
+<ManifestItem
+  label="foo"
+>
+  <div
+    className="manifest-item__color"
+    style={
+      Object {
+        "--color-value": "#00FF00FA",
+      }
+    }
+  >
+    #00FF00FA
+  </div>
+</ManifestItem>
+`;
+
+exports[`ManifestColorItem renders the expected snapshot for a populated color item 1`] = `
+<ManifestItem
+  label="foo"
+>
+  <div
+    className="manifest-item__color"
+    style={
+      Object {
+        "--color-value": "#ff0000",
+      }
+    }
+  >
+    #ff0000
+  </div>
+</ManifestItem>
+`;
+
+exports[`ManifestColorItem renders the expected snapshot for an empty color item 1`] = `
+<ManifestItem
+  label="foo"
+/>
+`;
+
+exports[`ManifestColorItem strips opaque alpha from the displayed color 1`] = `
+<ManifestItem
+  label="foo"
+>
+  <div
+    className="manifest-item__color"
+    style={
+      Object {
+        "--color-value": "#00FF00",
+      }
+    }
+  >
+    #00FF00
+  </div>
+</ManifestItem>
+`;
diff --git a/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestEmpty.test.js.snap b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestEmpty.test.js.snap
new file mode 100644
index 0000000000..bdc5e9ed60
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestEmpty.test.js.snap
@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestEmpty renders the expected snapshot 1`] = `
+<article
+  className="app-page__icon-container js-manifest-empty"
+>
+  <aside>
+    <Localized
+      attrs={
+        Object {
+          "alt": true,
+        }
+      }
+      id="sidebar-item-manifest"
+    >
+      <img
+        className="app-page__icon"
+        src="chrome://devtools/skin/images/application-manifest.svg"
+      />
+    </Localized>
+  </aside>
+  <div>
+    <Localized
+      id="manifest-empty-intro2"
+    >
+      <h1
+        className="app-page__title"
+      />
+    </Localized>
+    <p>
+      <Localized
+        id="manifest-empty-intro-link"
+      >
+        <a
+          onClick={[Function]}
+        />
+      </Localized>
+    </p>
+    <Localized
+      id="manifest-non-existing"
+    >
+      <p />
+    </Localized>
+  </div>
+</article>
+`;
diff --git a/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestIconItem.test.js.snap b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestIconItem.test.js.snap
new file mode 100644
index 0000000000..200c6306de
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestIconItem.test.js.snap
@@ -0,0 +1,106 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestIconItem renders the expected snapshop when a label member is missing 1`] = `
+<ManifestItem
+  label={
+    Array [
+      null,
+      null,
+      "image/png",
+    ]
+  }
+>
+  <Localized
+    attrs={
+      Object {
+        "alt": true,
+      }
+    }
+    id="manifest-icon-img"
+  >
+    <img
+      className="manifest-item__icon"
+      src="icon.png"
+      title="manifest-icon-img-title-no-sizes"
+    />
+  </Localized>
+  <br />
+  <Localized
+    $purpose="any"
+    code={<code />}
+    id="manifest-icon-purpose"
+  >
+    <span />
+  </Localized>
+</ManifestItem>
+`;
+
+exports[`ManifestIconItem renders the expected snapshop when all label members are missing 1`] = `
+<ManifestItem
+  label={
+    Array [
+      null,
+      null,
+      null,
+    ]
+  }
+>
+  <Localized
+    attrs={
+      Object {
+        "alt": true,
+      }
+    }
+    id="manifest-icon-img"
+  >
+    <img
+      className="manifest-item__icon"
+      src="icon.png"
+      title="manifest-icon-img-title-no-sizes"
+    />
+  </Localized>
+  <br />
+  <Localized
+    $purpose="any"
+    code={<code />}
+    id="manifest-icon-purpose"
+  >
+    <span />
+  </Localized>
+</ManifestItem>
+`;
+
+exports[`ManifestIconItem renders the expected snapshot for a fully populated icon item 1`] = `
+<ManifestItem
+  label={
+    Array [
+      "128x128",
+      <br />,
+      "image/png",
+    ]
+  }
+>
+  <Localized
+    attrs={
+      Object {
+        "alt": true,
+      }
+    }
+    id="manifest-icon-img"
+  >
+    <img
+      className="manifest-item__icon"
+      src="icon.png"
+      title="manifest-icon-img-title__{\\"sizes\\":\\"128x128\\"}"
+    />
+  </Localized>
+  <br />
+  <Localized
+    $purpose="any"
+    code={<code />}
+    id="manifest-icon-purpose"
+  >
+    <span />
+  </Localized>
+</ManifestItem>
+`;
diff --git a/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestIssue.test.js.snap b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestIssue.test.js.snap
new file mode 100644
index 0000000000..3cf46f07b1
--- /dev/null
+++ b/devtools/client/application/test/node/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="js-manifest-issue "
+>
+  <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="js-manifest-issue "
+>
+  <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>
+`;
diff --git a/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestIssueList.test.js.snap b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestIssueList.test.js.snap
new file mode 100644
index 0000000000..edbf2d07c9
--- /dev/null
+++ b/devtools/client/application/test/node/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>
+`;
diff --git a/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestItem.test.js.snap b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestItem.test.js.snap
new file mode 100644
index 0000000000..69d983d308
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestItem.test.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestItem renders the expected snapshot for a populated item 1`] = `
+<tr
+  className="manifest-item js-manifest-item"
+>
+  <th
+    className="manifest-item__label js-manifest-item-label"
+    scope="row"
+  >
+    foo
+  </th>
+  <td
+    className="manifest-item__value js-manifest-item-content"
+  >
+    bar
+  </td>
+</tr>
+`;
+
+exports[`ManifestItem renders the expected snapshot for an empty item 1`] = `
+<tr
+  className="manifest-item js-manifest-item"
+>
+  <th
+    className="manifest-item__label js-manifest-item-label"
+    scope="row"
+  >
+    foo
+  </th>
+  <td
+    className="manifest-item__value js-manifest-item-content"
+  />
+</tr>
+`;
diff --git a/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestJsonLink.test.js.snap b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestJsonLink.test.js.snap
new file mode 100644
index 0000000000..061578b846
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestJsonLink.test.js.snap
@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestJsonLink renders the expected snapshot when given a data URL 1`] = `
+<p
+  className="manifest-json-link"
+>
+  <Localized
+    id="manifest-json-link-data-url"
+  />
+</p>
+`;
+
+exports[`ManifestJsonLink renders the expected snapshot when given a regular URL 1`] = `
+<p
+  className="manifest-json-link"
+>
+  <a
+    className="js-manifest-json-link devtools-ellipsis-text"
+    href="#"
+    onClick={[Function]}
+    title="https://example.com/manifest.json"
+  >
+    https://example.com/manifest.json
+  </a>
+</p>
+`;
diff --git a/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestLoader.test.js.snap b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestLoader.test.js.snap
new file mode 100644
index 0000000000..16c885cf80
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestLoader.test.js.snap
@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestLoader renders a message when it is loading 1`] = `
+<aside
+  className="manifest-loader"
+>
+  <Localized
+    id="manifest-loading"
+  >
+    <p
+      className="manifest-loader__load js-manifest-loading"
+    />
+  </Localized>
+</aside>
+`;
+
+exports[`ManifestLoader renders a message when manifest has failed to load 1`] = `
+<aside
+  className="manifest-loader"
+>
+  <Localized
+    id="manifest-loaded-error"
+    key="manifest-error-label"
+  >
+    <h1
+      className="js-manifest-loaded-error app-page__title"
+    />
+  </Localized>
+  <p
+    className="technical-text"
+    key="manifest-error-message"
+  >
+    lorem ipsum
+  </p>
+</aside>
+`;
+
+exports[`ManifestLoader renders a message when manifest has loaded OK 1`] = `
+<aside
+  className="manifest-loader"
+>
+  <Localized
+    id="manifest-loaded-ok"
+  >
+    <p
+      className="js-manifest-loaded-ok"
+    />
+  </Localized>
+</aside>
+`;
diff --git a/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestPage.test.js.snap b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestPage.test.js.snap
new file mode 100644
index 0000000000..4700ccf935
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestPage.test.js.snap
@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestPage renders the expected snapshot when the manifest is loading 1`] = `
+<section
+  className="app-page js-manifest-page app-page--empty"
+>
+  <Connect(ManifestLoader) />
+</section>
+`;
+
+exports[`ManifestPage renders the expected snapshot when the manifest needs to load 1`] = `
+<section
+  className="app-page js-manifest-page app-page--empty"
+>
+  <Connect(ManifestLoader) />
+</section>
+`;
+
+exports[`ManifestPage renders the expected snapshot when there is a manifest 1`] = `
+<section
+  className="app-page js-manifest-page "
+>
+  <Manifest
+    icons={
+      Array [
+        Object {
+          "key": Object {
+            "contentType": "image/png",
+            "sizes": "1x1",
+          },
+          "type": "icon",
+          "value": Object {
+            "purpose": "any",
+            "src": "something.png",
+          },
+        },
+      ]
+    }
+    identity={
+      Array [
+        Object {
+          "key": "name",
+          "type": "string",
+          "value": "foo",
+        },
+      ]
+    }
+    presentation={
+      Array [
+        Object {
+          "key": "lorem",
+          "type": "string",
+          "value": "ipsum",
+        },
+        Object {
+          "key": "foo",
+          "type": "string",
+          "value": "bar",
+        },
+      ]
+    }
+    validation={
+      Array [
+        Object {
+          "level": "warning",
+          "message": "This is a warning",
+        },
+      ]
+    }
+  />
+</section>
+`;
+
+exports[`ManifestPage renders the expected snapshot when there is no manifest 1`] = `
+<section
+  className="app-page js-manifest-page app-page--empty"
+>
+  <ManifestEmpty />
+</section>
+`;
diff --git a/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestSection.test.js.snap b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestSection.test.js.snap
new file mode 100644
index 0000000000..e8ea10867f
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestSection.test.js.snap
@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestSection renders the expected snapshot for a populated section 1`] = `
+<section
+  className="manifest-section "
+>
+  <h2
+    className="manifest-section__title"
+  >
+    Lorem ipsum
+  </h2>
+  <tr>
+    <td>
+      foo
+    </td>
+  </tr>
+</section>
+`;
+
+exports[`ManifestSection renders the expected snapshot for a section with no children 1`] = `
+<section
+  className="manifest-section manifest-section--empty"
+>
+  <h2
+    className="manifest-section__title"
+  >
+    Lorem ipsum
+  </h2>
+</section>
+`;
diff --git a/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestUrlItem.test.js.snap b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestUrlItem.test.js.snap
new file mode 100644
index 0000000000..62f4fdfe11
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/__snapshots__/components_application_panel-ManifestUrlItem.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestUrlItem renders the expected snapshot for a populated url 1`] = `
+<ManifestItem
+  label="foo"
+>
+  <div
+    className="manifest-item__url"
+  />
+</ManifestItem>
+`;
+
+exports[`ManifestUrlItem renders the expected snapshot for an empty url 1`] = `
+<ManifestItem
+  label="foo"
+>
+  <div
+    className="manifest-item__url"
+  />
+</ManifestItem>
+`;
diff --git a/devtools/client/application/test/node/components/manifest/components_application_panel-Manifest.test.js b/devtools/client/application/test/node/components/manifest/components_application_panel-Manifest.test.js
new file mode 100644
index 0000000000..0b554fbdd2
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/components_application_panel-Manifest.test.js
@@ -0,0 +1,73 @@
+/* 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 Manifest = createFactory(
+  require("resource://devtools/client/application/src/components/manifest/Manifest.js")
+);
+
+const {
+  MANIFEST_COLOR_MEMBERS,
+  MANIFEST_ICON_MEMBERS,
+  MANIFEST_STRING_MEMBERS,
+  MANIFEST_UNKNOWN_TYPE_MEMBERS,
+  MANIFEST_URL_MEMBERS,
+  MANIFEST_NO_ISSUES,
+  MANIFEST_WITH_ISSUES,
+} = require("resource://devtools/client/application/test/node/fixtures/data/constants.js");
+
+/*
+ * Test for Manifest component
+ */
+
+describe("Manifest", () => {
+  it("renders the expected snapshot for a manifest with string members", () => {
+    const wrapper = shallow(Manifest(MANIFEST_STRING_MEMBERS));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot for a manifest with color members", () => {
+    const wrapper = shallow(Manifest(MANIFEST_COLOR_MEMBERS));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot for a manifest with unknown types", () => {
+    const wrapper = shallow(Manifest(MANIFEST_UNKNOWN_TYPE_MEMBERS));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot for a manifest with icon members", () => {
+    const wrapper = shallow(Manifest(MANIFEST_ICON_MEMBERS));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot for a manifest with url members", () => {
+    const wrapper = shallow(Manifest(MANIFEST_URL_MEMBERS));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("does render the issues section when the manifest is not valid", () => {
+    const wrapper = shallow(Manifest(MANIFEST_WITH_ISSUES));
+    expect(wrapper).toMatchSnapshot();
+
+    const sections = wrapper.find("ManifestSection");
+    expect(sections).toHaveLength(4);
+    expect(sections.get(0).props.title).toBe("manifest-item-warnings");
+    expect(sections.find("ManifestIssueList")).toHaveLength(1);
+  });
+
+  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.find("ManifestIssueList")).toHaveLength(0);
+  });
+});
diff --git a/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestColorItem.test.js b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestColorItem.test.js
new file mode 100644
index 0000000000..eac67ec195
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestColorItem.test.js
@@ -0,0 +1,48 @@
+/* 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 ManifestColorItem = createFactory(
+  require("resource://devtools/client/application/src/components/manifest/ManifestColorItem.js")
+);
+
+/*
+ * Unit tests for the ManifestItem component
+ */
+
+describe("ManifestColorItem", () => {
+  it("renders the expected snapshot for a populated color item", () => {
+    const wrapper = shallow(
+      ManifestColorItem({ label: "foo", value: "#ff0000" })
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot for an empty color item", () => {
+    const wrapper = shallow(ManifestColorItem({ label: "foo" }));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("strips opaque alpha from the displayed color", () => {
+    const wrapper = shallow(
+      ManifestColorItem({ label: "foo", value: "#00FF00FF" })
+    );
+    expect(wrapper).toMatchSnapshot();
+
+    expect(wrapper.find(".manifest-item__color").text()).toBe("#00FF00");
+  });
+
+  it("does not strip translucent alpha from the displayed color", () => {
+    const wrapper = shallow(
+      ManifestColorItem({ label: "foo", value: "#00FF00FA" })
+    );
+    expect(wrapper).toMatchSnapshot();
+
+    expect(wrapper.find(".manifest-item__color").text()).toBe("#00FF00FA");
+  });
+});
diff --git a/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestEmpty.test.js b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestEmpty.test.js
new file mode 100644
index 0000000000..de27a56ec5
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestEmpty.test.js
@@ -0,0 +1,23 @@
+/* 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 ManifestEmpty = createFactory(
+  require("resource://devtools/client/application/src/components/manifest/ManifestEmpty.js")
+);
+
+/**
+ * Test for ManifestEmpty component
+ */
+
+describe("ManifestEmpty", () => {
+  it("renders the expected snapshot", () => {
+    const wrapper = shallow(ManifestEmpty({}));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestIconItem.test.js b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestIconItem.test.js
new file mode 100644
index 0000000000..e3ea293c82
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestIconItem.test.js
@@ -0,0 +1,48 @@
+/* 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 ManifestIconItem = createFactory(
+  require("resource://devtools/client/application/src/components/manifest/ManifestIconItem.js")
+);
+
+/*
+ * Unit tests for the ManifestIconItem component
+ */
+
+describe("ManifestIconItem", () => {
+  it("renders the expected snapshot for a fully populated icon item", () => {
+    const wrapper = shallow(
+      ManifestIconItem({
+        label: { sizes: "128x128", contentType: "image/png" },
+        value: { src: "icon.png", purpose: "any" },
+      })
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshop when a label member is missing", () => {
+    const wrapper = shallow(
+      ManifestIconItem({
+        label: { sizes: undefined, contentType: "image/png" },
+        value: { src: "icon.png", purpose: "any" },
+      })
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshop when all label members are missing", () => {
+    const wrapper = shallow(
+      ManifestIconItem({
+        label: { sizes: undefined, contentType: undefined },
+        value: { src: "icon.png", purpose: "any" },
+      })
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestIssue.test.js b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestIssue.test.js
new file mode 100644
index 0000000000..41350557be
--- /dev/null
+++ b/devtools/client/application/test/node/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("resource://devtools/client/application/src/components/manifest/ManifestIssue.js")
+);
+
+/*
+ * 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();
+  });
+});
diff --git a/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestIssueList.test.js b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestIssueList.test.js
new file mode 100644
index 0000000000..71d59d3e07
--- /dev/null
+++ b/devtools/client/application/test/node/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("resource://devtools/client/application/src/components/manifest/ManifestIssueList.js")
+);
+
+/*
+ * 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();
+  });
+});
diff --git a/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestItem.test.js b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestItem.test.js
new file mode 100644
index 0000000000..ca9303aab4
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestItem.test.js
@@ -0,0 +1,28 @@
+/* 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 ManifestItem = createFactory(
+  require("resource://devtools/client/application/src/components/manifest/ManifestItem.js")
+);
+
+/*
+ * Unit tests for the ManifestItem component
+ */
+
+describe("ManifestItem", () => {
+  it("renders the expected snapshot for a populated item", () => {
+    const wrapper = shallow(ManifestItem({ label: "foo" }, "bar"));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot for an empty item", () => {
+    const wrapper = shallow(ManifestItem({ label: "foo" }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestJsonLink.test.js b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestJsonLink.test.js
new file mode 100644
index 0000000000..fccab31b9d
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestJsonLink.test.js
@@ -0,0 +1,36 @@
+/* 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 ManifestJsonLink = createFactory(
+  require("resource://devtools/client/application/src/components/manifest/ManifestJsonLink.js")
+);
+
+/*
+ * Test for the ManifestJsonLink component
+ */
+
+describe("ManifestJsonLink", () => {
+  it("renders the expected snapshot when given a regular URL", () => {
+    const wrapper = shallow(
+      ManifestJsonLink({ url: "https://example.com/manifest.json" })
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot when given a data URL", () => {
+    const wrapper = shallow(
+      ManifestJsonLink({
+        url: `data:application/manifest+json,{"name": "Foo"}`,
+      })
+    );
+    expect(wrapper).toMatchSnapshot();
+    // assert there's no link for data URLs
+    expect(wrapper.find("a").length).toBe(0);
+  });
+});
diff --git a/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestLoader.test.js b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestLoader.test.js
new file mode 100644
index 0000000000..d3cc8595ce
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestLoader.test.js
@@ -0,0 +1,82 @@
+/* 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");
+// Import test helpers
+const {
+  setupStore,
+} = require("resource://devtools/client/application/test/node/helpers.js");
+// Import fixtures
+const {
+  MANIFEST_NO_ISSUES,
+} = require("resource://devtools/client/application/test/node/fixtures/data/constants.js");
+
+const manifestActions = require("resource://devtools/client/application/src/actions/manifest.js");
+// NOTE: we need to spy on the action before we load the component, so it gets
+//       bound to the spy, not the original implementation
+const fetchManifestActionSpy = jest.spyOn(manifestActions, "fetchManifest");
+
+const ManifestLoader = createFactory(
+  require("resource://devtools/client/application/src/components/manifest/ManifestLoader.js")
+);
+
+describe("ManifestLoader", () => {
+  function buildStore({ manifest, errorMessage, isLoading }) {
+    const manifestState = Object.assign(
+      {
+        manifest: null,
+        errorMessage: "",
+        isLoading: false,
+      },
+      { manifest, errorMessage, isLoading }
+    );
+
+    return setupStore({ manifest: manifestState });
+  }
+
+  afterAll(() => {
+    fetchManifestActionSpy.mockRestore();
+  });
+
+  it("loads a manifest when mounted", async () => {
+    fetchManifestActionSpy.mockReturnValue({ type: "foo" });
+
+    const store = buildStore({});
+
+    shallow(ManifestLoader({ store })).dive();
+
+    expect(manifestActions.fetchManifest).toHaveBeenCalled();
+    fetchManifestActionSpy.mockReset();
+  });
+
+  it("renders a message when it is loading", async () => {
+    const store = buildStore({ isLoading: true });
+    const wrapper = shallow(ManifestLoader({ store })).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders a message when manifest has loaded OK", async () => {
+    const store = buildStore({
+      isLoading: false,
+      manifest: MANIFEST_NO_ISSUES,
+      errorMessage: "",
+    });
+    const wrapper = shallow(ManifestLoader({ store })).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders a message when manifest has failed to load", async () => {
+    const store = buildStore({
+      manifest: null,
+      isLoading: false,
+      errorMessage: "lorem ipsum",
+    });
+    const wrapper = shallow(ManifestLoader({ store })).dive();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestPage.test.js b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestPage.test.js
new file mode 100644
index 0000000000..b479882924
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestPage.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 {
+  setupStore,
+} = require("resource://devtools/client/application/test/node/helpers.js");
+const {
+  MANIFEST_SIMPLE,
+} = require("resource://devtools/client/application/test/node/fixtures/data/constants.js");
+
+const ManifestPage = createFactory(
+  require("resource://devtools/client/application/src/components/manifest/ManifestPage.js")
+);
+
+/**
+ * Test for ManifestPage.js component
+ */
+
+describe("ManifestPage", () => {
+  function buildStoreWithManifest(manifest, isLoading = false) {
+    return setupStore({
+      manifest: {
+        manifest,
+        errorMessage: "",
+        isLoading,
+      },
+    });
+  }
+
+  it("renders the expected snapshot when there is a manifest", () => {
+    const store = buildStoreWithManifest(MANIFEST_SIMPLE);
+    const wrapper = shallow(ManifestPage({ store })).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot when the manifest needs to load", () => {
+    const store = buildStoreWithManifest(undefined);
+    const wrapper = shallow(ManifestPage({ store })).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot when the manifest is loading", () => {
+    const store = buildStoreWithManifest(undefined, true);
+    const wrapper = shallow(ManifestPage({ store })).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot when there is no manifest", () => {
+    const store = buildStoreWithManifest(null);
+    const wrapper = shallow(ManifestPage({ store })).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestSection.test.js b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestSection.test.js
new file mode 100644
index 0000000000..c117febb57
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestSection.test.js
@@ -0,0 +1,34 @@
+/* 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 {
+  td,
+  tr,
+} = require("resource://devtools/client/shared/vendor/react-dom-factories.js");
+
+const ManifestSection = createFactory(
+  require("resource://devtools/client/application/src/components/manifest/ManifestSection.js")
+);
+
+/*
+ * Unit tests for the ManifestSection component
+ */
+
+describe("ManifestSection", () => {
+  it("renders the expected snapshot for a populated section", () => {
+    const content = tr({}, td({}, "foo"));
+    const wrapper = shallow(ManifestSection({ title: "Lorem ipsum" }, content));
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot for a section with no children", () => {
+    const wrapper = shallow(ManifestSection({ title: "Lorem ipsum" }));
+    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find(".manifest-section--empty"));
+  });
+});
diff --git a/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestUrlItem.test.js b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestUrlItem.test.js
new file mode 100644
index 0000000000..1ef1504a3f
--- /dev/null
+++ b/devtools/client/application/test/node/components/manifest/components_application_panel-ManifestUrlItem.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 ManifestUrlItem = createFactory(
+  require("resource://devtools/client/application/src/components/manifest/ManifestUrlItem.js")
+);
+
+/*
+ * Unit tests for the ManifestUrlItem component
+ */
+
+describe("ManifestUrlItem", () => {
+  it("renders the expected snapshot for a populated url", () => {
+    const wrapper = shallow(
+      ManifestUrlItem({ label: "foo" }, "https://example.com")
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot for an empty url", () => {
+    const wrapper = shallow(ManifestUrlItem({ label: "foo" }));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/application/test/node/components/routing/__snapshots__/components_application_panel-PageSwitcher.test.js.snap b/devtools/client/application/test/node/components/routing/__snapshots__/components_application_panel-PageSwitcher.test.js.snap
new file mode 100644
index 0000000000..4fc899a511
--- /dev/null
+++ b/devtools/client/application/test/node/components/routing/__snapshots__/components_application_panel-PageSwitcher.test.js.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageSwitcher renders nothing when an invalid page is selected 1`] = `""`;
+
+exports[`PageSwitcher renders nothing when no page is selected 1`] = `""`;
+
+exports[`PageSwitcher renders the ManifestPage component when manifest page is selected 1`] = `<Connect(ManifestPage) />`;
+
+exports[`PageSwitcher renders the WorkersPage component when workers page is selected 1`] = `<Connect(WorkersPage) />`;
diff --git a/devtools/client/application/test/node/components/routing/__snapshots__/components_application_panel-Sidebar.test.js.snap b/devtools/client/application/test/node/components/routing/__snapshots__/components_application_panel-Sidebar.test.js.snap
new file mode 100644
index 0000000000..4348d7c5b9
--- /dev/null
+++ b/devtools/client/application/test/node/components/routing/__snapshots__/components_application_panel-Sidebar.test.js.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sidebar renders the expected snapshot when no page is selected 1`] = `
+<aside
+  className="sidebar js-sidebar"
+>
+  <ul
+    className="sidebar__list"
+  >
+    <Connect(SidebarItem)
+      isSelected={false}
+      key="sidebar-item-service-workers"
+      page="service-workers"
+    />
+    <Connect(SidebarItem)
+      isSelected={false}
+      key="sidebar-item-manifest"
+      page="manifest"
+    />
+  </ul>
+</aside>
+`;
+
+exports[`Sidebar renders the expected snapshot when the manifest page is selected 1`] = `
+<aside
+  className="sidebar js-sidebar"
+>
+  <ul
+    className="sidebar__list"
+  >
+    <Connect(SidebarItem)
+      isSelected={false}
+      key="sidebar-item-service-workers"
+      page="service-workers"
+    />
+    <Connect(SidebarItem)
+      isSelected={true}
+      key="sidebar-item-manifest"
+      page="manifest"
+    />
+  </ul>
+</aside>
+`;
+
+exports[`Sidebar renders the expected snapshot when the service workers page is selected 1`] = `
+<aside
+  className="sidebar js-sidebar"
+>
+  <ul
+    className="sidebar__list"
+  >
+    <Connect(SidebarItem)
+      isSelected={true}
+      key="sidebar-item-service-workers"
+      page="service-workers"
+    />
+    <Connect(SidebarItem)
+      isSelected={false}
+      key="sidebar-item-manifest"
+      page="manifest"
+    />
+  </ul>
+</aside>
+`;
diff --git a/devtools/client/application/test/node/components/routing/__snapshots__/components_application_panel-SidebarItem.test.js.snap b/devtools/client/application/test/node/components/routing/__snapshots__/components_application_panel-SidebarItem.test.js.snap
new file mode 100644
index 0000000000..c5f3122e6c
--- /dev/null
+++ b/devtools/client/application/test/node/components/routing/__snapshots__/components_application_panel-SidebarItem.test.js.snap
@@ -0,0 +1,141 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SidebarItem renders the expected snapshot when the manifest page is not selected 1`] = `
+<li
+  className="sidebar-item js-sidebar-manifest "
+  onClick={[Function]}
+  role="link"
+>
+  <Localized
+    attrs={
+      Object {
+        "alt": true,
+        "title": true,
+      }
+    }
+    id="sidebar-item-manifest"
+  >
+    <img
+      className="sidebar-item__icon"
+      src="chrome://devtools/skin/images/application-manifest.svg"
+    />
+  </Localized>
+  <Localized
+    attrs={
+      Object {
+        "title": true,
+      }
+    }
+    id="sidebar-item-manifest"
+  >
+    <span
+      className="devtools-ellipsis-text"
+    />
+  </Localized>
+</li>
+`;
+
+exports[`SidebarItem renders the expected snapshot when the manifest page is selected 1`] = `
+<li
+  className="sidebar-item js-sidebar-manifest sidebar-item--selected"
+  onClick={[Function]}
+  role="link"
+>
+  <Localized
+    attrs={
+      Object {
+        "alt": true,
+        "title": true,
+      }
+    }
+    id="sidebar-item-manifest"
+  >
+    <img
+      className="sidebar-item__icon"
+      src="chrome://devtools/skin/images/application-manifest.svg"
+    />
+  </Localized>
+  <Localized
+    attrs={
+      Object {
+        "title": true,
+      }
+    }
+    id="sidebar-item-manifest"
+  >
+    <span
+      className="devtools-ellipsis-text"
+    />
+  </Localized>
+</li>
+`;
+
+exports[`SidebarItem renders the expected snapshot when the service-workers page is not selected 1`] = `
+<li
+  className="sidebar-item js-sidebar-service-workers "
+  onClick={[Function]}
+  role="link"
+>
+  <Localized
+    attrs={
+      Object {
+        "alt": true,
+        "title": true,
+      }
+    }
+    id="sidebar-item-service-workers"
+  >
+    <img
+      className="sidebar-item__icon"
+      src="chrome://devtools/skin/images/debugging-workers.svg"
+    />
+  </Localized>
+  <Localized
+    attrs={
+      Object {
+        "title": true,
+      }
+    }
+    id="sidebar-item-service-workers"
+  >
+    <span
+      className="devtools-ellipsis-text"
+    />
+  </Localized>
+</li>
+`;
+
+exports[`SidebarItem renders the expected snapshot when the service-workers page is selected 1`] = `
+<li
+  className="sidebar-item js-sidebar-service-workers sidebar-item--selected"
+  onClick={[Function]}
+  role="link"
+>
+  <Localized
+    attrs={
+      Object {
+        "alt": true,
+        "title": true,
+      }
+    }
+    id="sidebar-item-service-workers"
+  >
+    <img
+      className="sidebar-item__icon"
+      src="chrome://devtools/skin/images/debugging-workers.svg"
+    />
+  </Localized>
+  <Localized
+    attrs={
+      Object {
+        "title": true,
+      }
+    }
+    id="sidebar-item-service-workers"
+  >
+    <span
+      className="devtools-ellipsis-text"
+    />
+  </Localized>
+</li>
+`;
diff --git a/devtools/client/application/test/node/components/routing/components_application_panel-PageSwitcher.test.js b/devtools/client/application/test/node/components/routing/components_application_panel-PageSwitcher.test.js
new file mode 100644
index 0000000000..1e69aa6869
--- /dev/null
+++ b/devtools/client/application/test/node/components/routing/components_application_panel-PageSwitcher.test.js
@@ -0,0 +1,73 @@
+/* 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");
+
+// Import setupStore with imported & combined reducers
+const {
+  setupStore,
+} = require("resource://devtools/client/application/test/node/helpers.js");
+
+const PageSwitcher = createFactory(
+  require("resource://devtools/client/application/src/components/routing/PageSwitcher.js")
+);
+
+const {
+  PAGE_TYPES,
+} = require("resource://devtools/client/application/src/constants.js");
+
+/**
+ * Test for workerListEmpty.js component
+ */
+
+describe("PageSwitcher", () => {
+  function buildStoreWithSelectedPage(selectedPage) {
+    return setupStore({
+      ui: {
+        selectedPage,
+      },
+    });
+  }
+
+  const consoleErrorSpy = jest
+    .spyOn(console, "error")
+    .mockImplementation(() => {});
+
+  beforeEach(() => {
+    console.error.mockClear();
+  });
+
+  afterAll(() => {
+    consoleErrorSpy.mockRestore();
+  });
+
+  it("renders the ManifestPage component when manifest page is selected", () => {
+    const store = buildStoreWithSelectedPage(PAGE_TYPES.MANIFEST);
+    const wrapper = shallow(PageSwitcher({ store })).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the WorkersPage component when workers page is selected", () => {
+    const store = buildStoreWithSelectedPage(PAGE_TYPES.SERVICE_WORKERS);
+    const wrapper = shallow(PageSwitcher({ store })).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders nothing when no page is selected", () => {
+    const store = buildStoreWithSelectedPage(null);
+    const wrapper = shallow(PageSwitcher({ store })).dive();
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders nothing when an invalid page is selected", () => {
+    const store = buildStoreWithSelectedPage("foo");
+    const wrapper = shallow(PageSwitcher({ store })).dive();
+    expect(console.error).toHaveBeenCalledTimes(1);
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/application/test/node/components/routing/components_application_panel-Sidebar.test.js b/devtools/client/application/test/node/components/routing/components_application_panel-Sidebar.test.js
new file mode 100644
index 0000000000..4593f702bc
--- /dev/null
+++ b/devtools/client/application/test/node/components/routing/components_application_panel-Sidebar.test.js
@@ -0,0 +1,51 @@
+/* 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 {
+  setupStore,
+} = require("resource://devtools/client/application/test/node/helpers.js");
+
+const {
+  PAGE_TYPES,
+} = require("resource://devtools/client/application/src/constants.js");
+
+const Sidebar = createFactory(
+  require("resource://devtools/client/application/src/components/routing/Sidebar.js")
+);
+
+/**
+ * Test for Sidebar.js component
+ */
+
+describe("Sidebar", () => {
+  function buildStoreWithSelectedPage(selectedPage) {
+    return setupStore({
+      ui: {
+        selectedPage,
+      },
+    });
+  }
+  it("renders the expected snapshot when the manifest page is selected", () => {
+    const store = buildStoreWithSelectedPage(PAGE_TYPES.MANIFEST);
+    const wrapper = shallow(Sidebar({ store })).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot when the service workers page is selected", () => {
+    const store = buildStoreWithSelectedPage(PAGE_TYPES.SERVICE_WORKERS);
+    const wrapper = shallow(Sidebar({ store })).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot when no page is selected", () => {
+    const store = buildStoreWithSelectedPage();
+    const wrapper = shallow(Sidebar({ store })).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/application/test/node/components/routing/components_application_panel-SidebarItem.test.js b/devtools/client/application/test/node/components/routing/components_application_panel-SidebarItem.test.js
new file mode 100644
index 0000000000..955c97acd2
--- /dev/null
+++ b/devtools/client/application/test/node/components/routing/components_application_panel-SidebarItem.test.js
@@ -0,0 +1,82 @@
+/* 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 {
+  setupStore,
+} = require("resource://devtools/client/application/test/node/helpers.js");
+
+const {
+  PAGE_TYPES,
+} = require("resource://devtools/client/application/src/constants.js");
+
+const SidebarItem = createFactory(
+  require("resource://devtools/client/application/src/components/routing/SidebarItem.js")
+);
+
+/**
+ * Test for SidebarItem.js component
+ */
+
+describe("SidebarItem", () => {
+  function buildStoreWithSelectedPage(selectedPage) {
+    return setupStore({
+      ui: {
+        selectedPage,
+      },
+    });
+  }
+
+  it("renders the expected snapshot when the manifest page is selected", () => {
+    const store = buildStoreWithSelectedPage(PAGE_TYPES.MANIFEST);
+    const wrapper = shallow(
+      SidebarItem({
+        store,
+        page: "manifest",
+        isSelected: true,
+      })
+    ).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot when the service-workers page is selected", () => {
+    const store = buildStoreWithSelectedPage(PAGE_TYPES.SERVICE_WORKERS);
+    const wrapper = shallow(
+      SidebarItem({
+        store,
+        isSelected: true,
+        page: "service-workers",
+      })
+    ).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot when the manifest page is not selected", () => {
+    const store = buildStoreWithSelectedPage(PAGE_TYPES.MANIFEST);
+    const wrapper = shallow(
+      SidebarItem({
+        store,
+        isSelected: false,
+        page: "manifest",
+      })
+    ).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot when the service-workers page is not selected", () => {
+    const store = buildStoreWithSelectedPage(PAGE_TYPES.SERVICE_WORKERS);
+    const wrapper = shallow(
+      SidebarItem({
+        store,
+        isSelected: false,
+        page: "service-workers",
+      })
+    ).dive();
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Registration.test.js.snap b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Registration.test.js.snap
new file mode 100644
index 0000000000..f85bf8b2a1
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Registration.test.js.snap
@@ -0,0 +1,180 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Registration Renders the expected snapshot for a registration with a worker 1`] = `
+<li
+  className=""
+>
+  <article
+    className="registration js-sw-container"
+  >
+    <header
+      className="registration__header"
+    >
+      <h2
+        className="registration__scope js-sw-scope devtools-ellipsis-text"
+        title="SCOPE 123"
+      >
+        SCOPE 123
+      </h2>
+    </header>
+    <aside
+      className="registration__controls"
+    >
+      <Localized
+        id="serviceworker-worker-unregister"
+      >
+        <UIButton
+          className="js-unregister-button"
+          onClick={[Function]}
+        />
+      </Localized>
+    </aside>
+    <ul
+      className="registration__workers"
+    >
+      <li
+        className="registration__workers-item"
+        key="id-worker-1-example"
+      >
+        <Connect(Worker)
+          isDebugEnabled={true}
+          worker={
+            Object {
+              "id": "id-worker-1-example",
+              "state": 4,
+              "stateText": "activated",
+              "url": "http://example.com/worker.js",
+              "workerDescriptorFront": "",
+            }
+          }
+        />
+      </li>
+    </ul>
+  </article>
+</li>
+`;
+
+exports[`Registration Renders the expected snapshot for a registration with multiple workers 1`] = `
+<li
+  className=""
+>
+  <article
+    className="registration js-sw-container"
+  >
+    <header
+      className="registration__header"
+    >
+      <h2
+        className="registration__scope js-sw-scope devtools-ellipsis-text"
+        title="SCOPE 123"
+      >
+        SCOPE 123
+      </h2>
+    </header>
+    <aside
+      className="registration__controls"
+    >
+      <Localized
+        id="serviceworker-worker-unregister"
+      >
+        <UIButton
+          className="js-unregister-button"
+          onClick={[Function]}
+        />
+      </Localized>
+    </aside>
+    <ul
+      className="registration__workers"
+    >
+      <li
+        className="registration__workers-item"
+        key="id-worker-1-example"
+      >
+        <Connect(Worker)
+          isDebugEnabled={true}
+          worker={
+            Object {
+              "id": "id-worker-1-example",
+              "state": 4,
+              "stateText": "activated",
+              "url": "http://example.com/worker.js",
+              "workerDescriptorFront": "",
+            }
+          }
+        />
+      </li>
+      <li
+        className="registration__workers-item"
+        key="id-worker-2-example"
+      >
+        <Connect(Worker)
+          isDebugEnabled={true}
+          worker={
+            Object {
+              "id": "id-worker-2-example",
+              "state": 2,
+              "stateText": "installed",
+              "url": "http://example.com/worker.js",
+              "workerDescriptorFront": "",
+            }
+          }
+        />
+      </li>
+    </ul>
+  </article>
+</li>
+`;
+
+exports[`Registration Renders the expected snapshot when sw debugging is disabled 1`] = `
+<li
+  className=""
+>
+  <article
+    className="registration js-sw-container"
+  >
+    <header
+      className="registration__header"
+    >
+      <h2
+        className="registration__scope js-sw-scope devtools-ellipsis-text"
+        title="SCOPE 123"
+      >
+        SCOPE 123
+      </h2>
+    </header>
+    <aside
+      className="registration__controls"
+    >
+      <Localized
+        id="serviceworker-worker-unregister"
+      >
+        <UIButton
+          className="js-unregister-button"
+          onClick={[Function]}
+        />
+      </Localized>
+    </aside>
+    <ul
+      className="registration__workers"
+    >
+      <li
+        className="registration__workers-item"
+        key="id-worker-1-example"
+      >
+        <Connect(Worker)
+          isDebugEnabled={false}
+          worker={
+            Object {
+              "id": "id-worker-1-example",
+              "state": 4,
+              "stateText": "activated",
+              "url": "http://example.com/worker.js",
+              "workerDescriptorFront": "",
+            }
+          }
+        />
+      </li>
+    </ul>
+  </article>
+</li>
+`;
diff --git a/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationList.test.js.snap b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationList.test.js.snap
new file mode 100644
index 0000000000..160bff7c8c
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationList.test.js.snap
@@ -0,0 +1,159 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RegistrationList renders the expected snapshot for a list with a single registration 1`] = `
+Array [
+  <article
+    className="registrations-container"
+    key="registrations-container"
+  >
+    <Localized
+      id="serviceworker-list-header"
+    >
+      <h1
+        className="app-page__title"
+      />
+    </Localized>
+    <ul
+      className="registrations-container__list"
+    >
+      <Connect(Registration)
+        className="registrations-container__item"
+        isDebugEnabled={true}
+        key="id-reg-1-example"
+        registration={
+          Object {
+            "id": "id-reg-1-example",
+            "registrationFront": "",
+            "scope": "SCOPE 123",
+            "workers": Array [
+              Object {
+                "id": "id-worker-1-example",
+                "state": 4,
+                "stateText": "activated",
+                "url": "http://example.com/worker.js",
+                "workerDescriptorFront": "",
+              },
+            ],
+          }
+        }
+      />
+    </ul>
+  </article>,
+  <footer
+    className="aboutdebugging-plug"
+  >
+    <Localized
+      a={
+        <a
+          className="aboutdebugging-plug__link"
+          onClick={[Function]}
+        />
+      }
+      id="serviceworker-list-aboutdebugging"
+      key="serviceworkerlist-footer"
+    >
+      <p />
+    </Localized>
+  </footer>,
+]
+`;
+
+exports[`RegistrationList renders the expected snapshot for a multiple registration list 1`] = `
+Array [
+  <article
+    className="registrations-container"
+    key="registrations-container"
+  >
+    <Localized
+      id="serviceworker-list-header"
+    >
+      <h1
+        className="app-page__title"
+      />
+    </Localized>
+    <ul
+      className="registrations-container__list"
+    >
+      <Connect(Registration)
+        className="registrations-container__item"
+        isDebugEnabled={true}
+        key="id-reg-1-example"
+        registration={
+          Object {
+            "id": "id-reg-1-example",
+            "registrationFront": "",
+            "scope": "SCOPE1",
+            "workers": Array [
+              Object {
+                "id": "id-worker-1-example",
+                "state": 4,
+                "stateText": "activated",
+                "url": "http://example.com/worker.js",
+                "workerDescriptorFront": "",
+              },
+            ],
+          }
+        }
+      />
+      <Connect(Registration)
+        className="registrations-container__item"
+        isDebugEnabled={true}
+        key="id-reg-1-example"
+        registration={
+          Object {
+            "id": "id-reg-1-example",
+            "registrationFront": "",
+            "scope": "SCOPE2",
+            "workers": Array [
+              Object {
+                "id": "id-worker-2-example",
+                "state": 2,
+                "stateText": "installed",
+                "url": "http://example.com/worker.js",
+                "workerDescriptorFront": "",
+              },
+            ],
+          }
+        }
+      />
+      <Connect(Registration)
+        className="registrations-container__item"
+        isDebugEnabled={true}
+        key="id-reg-3-example"
+        registration={
+          Object {
+            "id": "id-reg-3-example",
+            "registrationFront": "",
+            "scope": "SCOPE3",
+            "workers": Array [
+              Object {
+                "id": "id-worker-3-example",
+                "state": 4,
+                "stateText": "activated",
+                "url": "http://example.com/worker.js",
+                "workerDescriptorFront": "",
+              },
+            ],
+          }
+        }
+      />
+    </ul>
+  </article>,
+  <footer
+    className="aboutdebugging-plug"
+  >
+    <Localized
+      a={
+        <a
+          className="aboutdebugging-plug__link"
+          onClick={[Function]}
+        />
+      }
+      id="serviceworker-list-aboutdebugging"
+      key="serviceworkerlist-footer"
+    >
+      <p />
+    </Localized>
+  </footer>,
+]
+`;
diff --git a/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationListEmpty.test.js.snap b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationListEmpty.test.js.snap
new file mode 100644
index 0000000000..657c7164d7
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationListEmpty.test.js.snap
@@ -0,0 +1,66 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RegistrationListEmpty renders the expected snapshot 1`] = `
+<article
+  className="app-page__icon-container js-registration-list-empty"
+>
+  <aside>
+    <Localized
+      attrs={
+        Object {
+          "alt": true,
+        }
+      }
+      id="sidebar-item-service-workers"
+    >
+      <img
+        className="app-page__icon"
+        src="chrome://devtools/skin/images/debugging-workers.svg"
+      />
+    </Localized>
+  </aside>
+  <div>
+    <Localized
+      id="serviceworker-empty-intro2"
+    >
+      <h1
+        className="app-page__title"
+      />
+    </Localized>
+    <Localized
+      a={
+        <a
+          onClick={[Function]}
+        />
+      }
+      id="serviceworker-empty-suggestions2"
+      span={
+        <a
+          onClick={[Function]}
+        />
+      }
+    >
+      <p />
+    </Localized>
+    <p>
+      <Localized
+        id="serviceworker-empty-intro-link"
+      >
+        <a
+          onClick={[Function]}
+        />
+      </Localized>
+    </p>
+    <p>
+      <Localized
+        id="serviceworker-empty-suggestions-aboutdebugging2"
+      >
+        <a
+          className="js-trusted-link"
+          onClick={[Function]}
+        />
+      </Localized>
+    </p>
+  </div>
+</article>
+`;
diff --git a/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Worker.test.js.snap b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Worker.test.js.snap
new file mode 100644
index 0000000000..7e71765e90
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Worker.test.js.snap
@@ -0,0 +1,132 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Worker Renders the expected snapshot for a non-active worker 1`] = `
+<section
+  className="worker js-sw-worker"
+>
+  <p
+    className="worker__icon"
+  >
+    <img
+      className="worker__icon-image"
+      src="chrome://devtools/skin/images/debugging-workers.svg"
+    />
+  </p>
+  <p
+    className="worker__source"
+  >
+    <span
+      className="js-source-url"
+    >
+      worker.js
+    </span>
+  </p>
+  <p
+    className="worker__misc"
+  >
+    <span
+      className="js-worker-status worker__status worker__status--waiting"
+    >
+      installed
+    </span>
+     
+  </p>
+</section>
+`;
+
+exports[`Worker Renders the expected snapshot for a running worker 1`] = `
+<section
+  className="worker js-sw-worker"
+>
+  <p
+    className="worker__icon"
+  >
+    <img
+      className="worker__icon-image"
+      src="chrome://devtools/skin/images/debugging-workers.svg"
+    />
+  </p>
+  <p
+    className="worker__source"
+  >
+    <a
+      className="js-inspect-link"
+      href="#"
+      onClick={[Function]}
+      title="http://example.com/worker.js"
+    >
+      <span
+        className="js-source-url"
+      >
+        worker.js
+      </span>
+       
+      <Localized
+        attrs={
+          Object {
+            "alt": true,
+          }
+        }
+        id="serviceworker-worker-inspect-icon"
+      >
+        <img
+          src="chrome://devtools/skin/images/application-debug.svg"
+        />
+      </Localized>
+    </a>
+  </p>
+  <p
+    className="worker__misc"
+  >
+    <span
+      className="js-worker-status worker__status worker__status--active"
+    >
+      serviceworker-worker-status-running
+    </span>
+     
+  </p>
+</section>
+`;
+
+exports[`Worker Renders the expected snapshot for a stopped worker 1`] = `
+<section
+  className="worker js-sw-worker"
+>
+  <p
+    className="worker__icon"
+  >
+    <img
+      className="worker__icon-image"
+      src="chrome://devtools/skin/images/debugging-workers.svg"
+    />
+  </p>
+  <p
+    className="worker__source"
+  >
+    <span
+      className="js-source-url"
+    >
+      worker.js
+    </span>
+  </p>
+  <p
+    className="worker__misc"
+  >
+    <span
+      className="js-worker-status worker__status worker__status--active"
+    >
+      serviceworker-worker-status-stopped
+    </span>
+     
+    <Localized
+      id="serviceworker-worker-start3"
+    >
+      <UIButton
+        className="js-start-button"
+        onClick={[Function]}
+        size="micro"
+      />
+    </Localized>
+  </p>
+</section>
+`;
diff --git a/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-WorkersPage.test.js.snap b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-WorkersPage.test.js.snap
new file mode 100644
index 0000000000..5de3e33b4e
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-WorkersPage.test.js.snap
@@ -0,0 +1,143 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WorkersPage filters out workers from diferent domains 1`] = `
+<section
+  className="app-page js-service-workers-page "
+>
+  <RegistrationList
+    canDebugWorkers={true}
+    registrations={
+      Array [
+        Object {
+          "id": "id-reg-1-example",
+          "registrationFront": "",
+          "scope": "SCOPE1",
+          "workers": Array [
+            Object {
+              "id": "id-worker-1-example",
+              "state": 4,
+              "stateText": "activated",
+              "url": "http://example.com/worker.js",
+              "workerDescriptorFront": "",
+            },
+          ],
+        },
+        Object {
+          "id": "id-reg-2-example",
+          "registrationFront": "",
+          "scope": "SCOPE2",
+          "workers": Array [
+            Object {
+              "id": "id-worker-2-example",
+              "state": 4,
+              "stateText": "activated",
+              "url": "http://example.com/worker.js",
+              "workerDescriptorFront": "",
+            },
+          ],
+        },
+      ]
+    }
+  />
+</section>
+`;
+
+exports[`WorkersPage filters out workers from different domains and renders an empty list when there is none left 1`] = `
+<section
+  className="app-page js-service-workers-page app-page--empty"
+>
+  <RegistrationListEmpty />
+</section>
+`;
+
+exports[`WorkersPage it renders a list with a single element if there's just 1 worker 1`] = `
+<section
+  className="app-page js-service-workers-page "
+>
+  <RegistrationList
+    canDebugWorkers={true}
+    registrations={
+      Array [
+        Object {
+          "id": "id-reg-1-example",
+          "registrationFront": "",
+          "scope": "SCOPE 123",
+          "workers": Array [
+            Object {
+              "id": "id-worker-1-example",
+              "state": 4,
+              "stateText": "activated",
+              "url": "http://example.com/worker.js",
+              "workerDescriptorFront": "",
+            },
+          ],
+        },
+      ]
+    }
+  />
+</section>
+`;
+
+exports[`WorkersPage renders a list with multiple elements when there are multiple workers 1`] = `
+<section
+  className="app-page js-service-workers-page "
+>
+  <RegistrationList
+    canDebugWorkers={true}
+    registrations={
+      Array [
+        Object {
+          "id": "id-reg-1-example",
+          "registrationFront": "",
+          "scope": "SCOPE1",
+          "workers": Array [
+            Object {
+              "id": "id-worker-1-example",
+              "state": 4,
+              "stateText": "activated",
+              "url": "http://example.com/worker.js",
+              "workerDescriptorFront": "",
+            },
+          ],
+        },
+        Object {
+          "id": "id-reg-1-example",
+          "registrationFront": "",
+          "scope": "SCOPE2",
+          "workers": Array [
+            Object {
+              "id": "id-worker-2-example",
+              "state": 2,
+              "stateText": "installed",
+              "url": "http://example.com/worker.js",
+              "workerDescriptorFront": "",
+            },
+          ],
+        },
+        Object {
+          "id": "id-reg-3-example",
+          "registrationFront": "",
+          "scope": "SCOPE3",
+          "workers": Array [
+            Object {
+              "id": "id-worker-3-example",
+              "state": 4,
+              "stateText": "activated",
+              "url": "http://example.com/worker.js",
+              "workerDescriptorFront": "",
+            },
+          ],
+        },
+      ]
+    }
+  />
+</section>
+`;
+
+exports[`WorkersPage renders an empty list if there are no workers 1`] = `
+<section
+  className="app-page js-service-workers-page app-page--empty"
+>
+  <RegistrationListEmpty />
+</section>
+`;
diff --git a/devtools/client/application/test/node/components/service-workers/components_application_panel-Registration.test.js b/devtools/client/application/test/node/components/service-workers/components_application_panel-Registration.test.js
new file mode 100644
index 0000000000..7473a61d23
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/components_application_panel-Registration.test.js
@@ -0,0 +1,88 @@
+/* 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");
+// Import test helpers
+const {
+  setupStore,
+} = require("resource://devtools/client/application/test/node/helpers.js");
+
+const {
+  REGISTRATION_SINGLE_WORKER,
+  REGISTRATION_MULTIPLE_WORKERS,
+} = require("resource://devtools/client/application/test/node/fixtures/data/constants.js");
+
+const Registration = createFactory(
+  require("resource://devtools/client/application/src/components/service-workers/Registration.js")
+);
+
+describe("Registration", () => {
+  it("Renders the expected snapshot for a registration with a worker", () => {
+    const store = setupStore({});
+
+    const wrapper = shallow(
+      Registration({
+        isDebugEnabled: true,
+        registration: REGISTRATION_SINGLE_WORKER,
+        store,
+      })
+    ).dive();
+
+    expect(wrapper).toMatchSnapshot();
+    // ensure that we do have the proper amount of workers
+    expect(wrapper.find("Connect(Worker)")).toHaveLength(1);
+  });
+
+  it("Renders the expected snapshot for a registration with multiple workers", () => {
+    const store = setupStore({});
+
+    const wrapper = shallow(
+      Registration({
+        isDebugEnabled: true,
+        registration: REGISTRATION_MULTIPLE_WORKERS,
+        store,
+      })
+    ).dive();
+
+    expect(wrapper).toMatchSnapshot();
+    // ensure that we do have the proper amount of workers
+    expect(wrapper.find("Connect(Worker)")).toHaveLength(2);
+  });
+
+  it("Renders the expected snapshot when sw debugging is disabled", () => {
+    const store = setupStore({});
+
+    const wrapper = shallow(
+      Registration({
+        isDebugEnabled: false,
+        registration: REGISTRATION_SINGLE_WORKER,
+        store,
+      })
+    ).dive();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Removes the ending forward slash from the scope, when present", () => {
+    const store = setupStore({});
+
+    const registration = Object.assign({}, REGISTRATION_SINGLE_WORKER, {
+      scope: "https://example.com/something/",
+    });
+
+    const wrapper = shallow(
+      Registration({
+        isDebugEnabled: false,
+        registration,
+        store,
+      })
+    ).dive();
+
+    const scopeEl = wrapper.find(".js-sw-scope");
+    expect(scopeEl.text()).toBe("example.com/something");
+  });
+});
diff --git a/devtools/client/application/test/node/components/service-workers/components_application_panel-RegistrationList.test.js b/devtools/client/application/test/node/components/service-workers/components_application_panel-RegistrationList.test.js
new file mode 100644
index 0000000000..6bb202cd25
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/components_application_panel-RegistrationList.test.js
@@ -0,0 +1,43 @@
+/* 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");
+
+// Import constants
+const {
+  SINGLE_WORKER_DEFAULT_DOMAIN_LIST,
+  MULTIPLE_WORKER_LIST,
+} = require("resource://devtools/client/application/test/node/fixtures/data/constants.js");
+
+const RegistrationList = createFactory(
+  require("resource://devtools/client/application/src/components/service-workers/RegistrationList.js")
+);
+
+/**
+ * Test for RegistrationList.js component
+ */
+describe("RegistrationList", () => {
+  it("renders the expected snapshot for a list with a single registration", () => {
+    const wrapper = shallow(
+      RegistrationList({
+        registrations: SINGLE_WORKER_DEFAULT_DOMAIN_LIST,
+        canDebugWorkers: true,
+      })
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders the expected snapshot for a multiple registration list", () => {
+    const wrapper = shallow(
+      RegistrationList({
+        registrations: MULTIPLE_WORKER_LIST,
+        canDebugWorkers: true,
+      })
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/application/test/node/components/service-workers/components_application_panel-RegistrationListEmpty.test.js b/devtools/client/application/test/node/components/service-workers/components_application_panel-RegistrationListEmpty.test.js
new file mode 100644
index 0000000000..811535facc
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/components_application_panel-RegistrationListEmpty.test.js
@@ -0,0 +1,23 @@
+/* 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 RegistrationListEmpty = createFactory(
+  require("resource://devtools/client/application/src/components/service-workers/RegistrationListEmpty.js")
+);
+
+/**
+ * Test for RegistrationListEmpty.js component
+ */
+
+describe("RegistrationListEmpty", () => {
+  it("renders the expected snapshot", () => {
+    const wrapper = shallow(RegistrationListEmpty({}));
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/application/test/node/components/service-workers/components_application_panel-Worker.test.js b/devtools/client/application/test/node/components/service-workers/components_application_panel-Worker.test.js
new file mode 100644
index 0000000000..36a6acda0c
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/components_application_panel-Worker.test.js
@@ -0,0 +1,110 @@
+/* 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");
+// Import test helpers
+const {
+  setupStore,
+} = require("resource://devtools/client/application/test/node/helpers.js");
+
+const {
+  WORKER_RUNNING,
+  WORKER_STOPPED,
+  WORKER_WAITING,
+} = require("resource://devtools/client/application/test/node/fixtures/data/constants.js");
+
+const Worker = createFactory(
+  require("resource://devtools/client/application/src/components/service-workers/Worker.js")
+);
+
+describe("Worker", () => {
+  it("Renders the expected snapshot for a running worker", () => {
+    const store = setupStore({});
+
+    const wrapper = shallow(
+      Worker({
+        isDebugEnabled: true,
+        worker: WORKER_RUNNING,
+        store,
+      })
+    ).dive();
+
+    // ensure proper status
+    expect(wrapper.find(".js-worker-status").text()).toBe(
+      "serviceworker-worker-status-running"
+    );
+    // check that Start button is not available
+    expect(wrapper.find(".js-start-button")).toHaveLength(0);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Renders the expected snapshot for a stopped worker", () => {
+    const store = setupStore({});
+
+    const wrapper = shallow(
+      Worker({
+        isDebugEnabled: true,
+        worker: WORKER_STOPPED,
+        store,
+      })
+    ).dive();
+
+    // ensure proper status
+    expect(wrapper.find(".js-worker-status").text()).toBe(
+      "serviceworker-worker-status-stopped"
+    );
+    // check that Start button is available
+    expect(wrapper.find(".js-start-button")).toHaveLength(1);
+    // check that inspect link does not exist
+    expect(wrapper.find(".js-inspect-link")).toHaveLength(0);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Renders the start button even if debugging workers is disabled", () => {
+    const store = setupStore({});
+
+    const wrapper = shallow(
+      Worker({
+        isDebugEnabled: false,
+        worker: WORKER_STOPPED,
+        store,
+      })
+    ).dive();
+
+    // ensure proper status
+    expect(wrapper.find(".js-worker-status").text()).toBe(
+      "serviceworker-worker-status-stopped"
+    );
+    // check that Start button is available
+    expect(wrapper.find(".js-start-button")).toHaveLength(1);
+  });
+
+  it("Renders the expected snapshot for a non-active worker", () => {
+    const store = setupStore({});
+
+    const wrapper = shallow(
+      Worker({
+        isDebugEnabled: true,
+        worker: WORKER_WAITING,
+        store,
+      })
+    ).dive();
+
+    // ensure proper status
+    // NOTE: since non-active status are localized directly in the front, not
+    //       in the panel, we don't expect a localization ID here
+    expect(wrapper.find(".js-worker-status").text()).toBe("installed");
+    // check that Start button is not available
+    expect(wrapper.find(".js-start-button")).toHaveLength(0);
+    // check that Debug link does not exist
+    expect(wrapper.find(".js-inspect-link")).toHaveLength(0);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
diff --git a/devtools/client/application/test/node/components/service-workers/components_application_panel-WorkersPage.test.js b/devtools/client/application/test/node/components/service-workers/components_application_panel-WorkersPage.test.js
new file mode 100644
index 0000000000..be1b14f216
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/components_application_panel-WorkersPage.test.js
@@ -0,0 +1,82 @@
+/* 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");
+
+// Import fixtures
+const {
+  EMPTY_WORKER_LIST,
+  SINGLE_WORKER_DEFAULT_DOMAIN_LIST,
+  SINGLE_WORKER_DIFFERENT_DOMAIN_LIST,
+  MULTIPLE_WORKER_LIST,
+  MULTIPLE_WORKER_MIXED_DOMAINS_LIST,
+} = require("resource://devtools/client/application/test/node/fixtures/data/constants.js");
+
+// Import setupStore with imported & combined reducers
+const {
+  setupStore,
+} = require("resource://devtools/client/application/test/node/helpers.js");
+
+// Import component
+const WorkersPage = createFactory(
+  require("resource://devtools/client/application/src/components/service-workers/WorkersPage.js")
+);
+
+/**
+ * Test for App.js component
+ */
+describe("WorkersPage", () => {
+  const baseState = {
+    workers: { list: [], canDebugWorkers: true },
+    page: { domain: "example.com" },
+  };
+
+  function buildStoreWithWorkers(workerList) {
+    const workers = { list: workerList, canDebugWorkers: true };
+    const state = Object.assign({}, baseState, { workers });
+    return setupStore(state);
+  }
+
+  it("renders an empty list if there are no workers", () => {
+    const store = buildStoreWithWorkers(EMPTY_WORKER_LIST);
+    const wrapper = shallow(WorkersPage({ store })).dive();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("it renders a list with a single element if there's just 1 worker", () => {
+    const store = buildStoreWithWorkers(SINGLE_WORKER_DEFAULT_DOMAIN_LIST);
+    const wrapper = shallow(WorkersPage({ store })).dive();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("renders a list with multiple elements when there are multiple workers", () => {
+    const store = buildStoreWithWorkers(MULTIPLE_WORKER_LIST);
+    const wrapper = shallow(WorkersPage({ store })).dive();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("filters out workers from diferent domains", () => {
+    const store = buildStoreWithWorkers(MULTIPLE_WORKER_MIXED_DOMAINS_LIST);
+    const wrapper = shallow(WorkersPage({ store })).dive();
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it(
+    "filters out workers from different domains and renders an empty list when " +
+      "there is none left",
+    () => {
+      const store = buildStoreWithWorkers(SINGLE_WORKER_DIFFERENT_DOMAIN_LIST);
+      const wrapper = shallow(WorkersPage({ store })).dive();
+
+      expect(wrapper).toMatchSnapshot();
+    }
+  );
+});
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-04-07 19:33:14 +0000
commit	36d22d82aa202bb199967e9512281e9a53db42c9 (patch)
tree	105e8c98ddea1c1e4784a60a5a6410fa416be2de /devtools/client/application/test/node/components
parent	Initial commit. (diff)
download	firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip