Bug 1566007 - Part 3: Add tests (jest + mochitest) r=Ola

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

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

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

@@ -49,8 +49,14 @@ class ManifestLoader extends PureComponent {
 
   renderResult() {
     return this.state.hasManifest
-      ? Localized({ id: "manifest-loaded-ok" }, p({}))
-      : Localized({ id: "manifest-non-existing" }, p({}));
+      ? Localized(
+          { id: "manifest-loaded-ok" },
+          p({ className: "js-manifest-loaded-ok" })
+        )
+      : Localized(
+          { id: "manifest-non-existing" },
+          p({ className: "js-manifest-non-existing" })
+        );
   }
 
   renderError() {
@@ -62,7 +68,7 @@ class ManifestLoader extends PureComponent {
           id: "manifest-loaded-error",
           key: "manifest-error-label",
         },
-        p({})
+        p({ className: "js-manifest-loaded-error" })
       ),
       p({ className: "technical-text", key: "manifest-error-message" }, error),
     ];

devtools/client/application/test/browser/browser.ini

@@ -4,6 +4,9 @@ subsuite = devtools
 skip-if = serviceworker_e10s
 support-files =
   head.js
+  resources/manifest/load-fail.html
+  resources/manifest/load-no-manifest.html
+  resources/manifest/load-ok.html
   resources/service-workers/debug-sw.js
   resources/service-workers/debug.html
   resources/service-workers/dynamic-registration.html
@@ -29,6 +32,7 @@ skip-if = (os == "mac" && debug) # Bug 1559591
 [browser_application_panel_list-workers-empty.js]
 [browser_application_panel_list-unicode.js]
 skip-if = (os == "mac" && debug) # Bug 1559591
+[browser_application_panel_manifest-load.js]
 [browser_application_panel_open-links.js]
 skip-if = true # Bug 1467256, 1559591
 [browser_application_panel_unregister-worker.js]

devtools/client/application/test/browser/browser_application_panel_manifest-load.js

@@ -0,0 +1,69 @@
+/* Any copyright is dedicated to the Public Domain.
+   http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+/**
+ * Check that the application panel fetches a manifest when in the Manifest Page
+ */
+
+add_task(async function() {
+  info("Test that manifest page loads the manifest successfully");
+  const url = URL_ROOT + "resources/manifest/load-ok.html";
+
+  await enableApplicationPanel();
+  const { panel, tab } = await openNewTabAndApplicationPanel(url);
+  const doc = panel.panelWin.document;
+
+  selectPage(panel, "manifest");
+
+  info("Waiting for the manifest to load");
+  await waitUntil(() => doc.querySelector(".js-manifest-loaded-ok") !== null);
+  ok(true, "Manifest loaded successfully");
+
+  // close the tab
+  info("Closing the tab.");
+  await BrowserTestUtils.removeTab(tab);
+});
+
+add_task(async function() {
+  info("Test that manifest page shows an error when failing to load");
+  const url = URL_ROOT + "resources/manifest/load-fail.html";
+
+  await enableApplicationPanel();
+  const { panel, tab } = await openNewTabAndApplicationPanel(url);
+  const doc = panel.panelWin.document;
+
+  selectPage(panel, "manifest");
+
+  info("Waiting for the manifest to fail to load");
+  await waitUntil(
+    () => doc.querySelector(".js-manifest-loaded-error") !== null
+  );
+  ok(true, "Manifest page displays loading error");
+
+  // close the tab
+  info("Closing the tab.");
+  await BrowserTestUtils.removeTab(tab);
+});
+
+add_task(async function() {
+  info("Test that manifest page shows a message when there is no manifest");
+  const url = URL_ROOT + "resources/manifest/load-no-manifest.html";
+
+  await enableApplicationPanel();
+  const { panel, tab } = await openNewTabAndApplicationPanel(url);
+  const doc = panel.panelWin.document;
+
+  selectPage(panel, "manifest");
+
+  info("Waiting for the 'no manifest' message to appear");
+  await waitUntil(
+    () => doc.querySelector(".js-manifest-non-existing") !== null
+  );
+  ok(true, "Manifest page displays a 'no manifest' message");
+
+  // close the tab
+  info("Closing the tab.");
+  await BrowserTestUtils.removeTab(tab);
+});

devtools/client/application/test/browser/resources/manifest/load-fail.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<head>
+  <meta charset="utf-8">
+  <title>Manifest 404 not found</title>
+  <link rel="manifest" href='nowhere.json'>
+</head>
+<body>
+<h1>Manifest error 404 not found</h1>
+</body>

devtools/client/application/test/browser/resources/manifest/load-no-manifest.html

@@ -0,0 +1,8 @@
+<!doctype html>
+<head>
+  <meta charset="utf-8">
+  <title>No manifest link</title>
+</head>
+<body>
+<h1>No manifest <code>link</code> tag.</h1>
+</body>

devtools/client/application/test/browser/resources/manifest/load-ok.html

@@ -0,0 +1,9 @@
+<!doctype html>
+<head>
+  <meta charset="utf-8">
+  <title>Manifest successful load</title>
+  <link rel="manifest" href='data:application/manifest+json,{"name": "Foo"}'>
+</head>
+<body>
+<h1>Manifest OK</h1>
+</body>

devtools/client/application/test/components/helpers/helpers.js

@@ -14,6 +14,15 @@ function setupStore({ preloadedState } = {}) {
   return store;
 }
 
+/**
+ * This gives an opportunity to Promises to resolve in tests, even if they are
+ * resolve immediately (since they are microtasks)
+ */
+async function flushPromises() {
+  return new Promise(resolve => resolve());
+}
+
 module.exports = {
+  flushPromises,
   setupStore,
 };

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

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ManifestLoader triggers loading a manifest and renders 'Loading' message 1`] = `
+<aside>
+  <Localized
+    id="manifest-loading"
+  >
+    <p />
+  </Localized>
+</aside>
+`;
+
+exports[`ManifestLoader updates the state and renders a message when manifest has failed to load 1`] = `
+<aside>
+  <Localized
+    id="manifest-loaded-error"
+    key="manifest-error-label"
+  >
+    <p
+      className="js-manifest-loaded-error"
+    />
+  </Localized>
+  <p
+    className="technical-text"
+    key="manifest-error-message"
+  >
+    lorem ipsum
+  </p>
+</aside>
+`;
+
+exports[`ManifestLoader updates the state and renders a message when manifest has loaded OK 1`] = `
+<aside>
+  <Localized
+    id="manifest-loaded-ok"
+  >
+    <p
+      className="js-manifest-loaded-ok"
+    />
+  </Localized>
+</aside>
+`;
+
+exports[`ManifestLoader updates the state and renders a message when page has no manifest 1`] = `
+<aside>
+  <Localized
+    id="manifest-non-existing"
+  >
+    <p
+      className="js-manifest-non-existing"
+    />
+  </Localized>
+</aside>
+`;

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

@@ -0,0 +1,129 @@
+/* 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 {
+  flushPromises,
+  setupStore,
+} = require("devtools/client/application/test/components/helpers/helpers");
+
+// Import app modules
+const {
+  services,
+} = require("devtools/client/application/src/modules/services");
+const {
+  UPDATE_MANIFEST,
+} = require("devtools/client/application/src/constants");
+
+const ManifestLoader = createFactory(
+  require("devtools/client/application/src/components/manifest/ManifestLoader")
+);
+
+/**
+ * Test for ManifestPage.js component
+ */
+
+describe("ManifestLoader", () => {
+  const store = setupStore({
+    preloadedState: {
+      manifest: {
+        manifest: null,
+        errorMesssage: "",
+      },
+    },
+  });
+
+  let fetchManifestSpy;
+  let dispatchSpy;
+
+  beforeAll(() => {
+    fetchManifestSpy = jest.spyOn(services, "fetchManifest");
+    dispatchSpy = jest.spyOn(store, "dispatch");
+  });
+
+  beforeEach(() => {
+    fetchManifestSpy.mockReset();
+    dispatchSpy.mockReset();
+  });
+
+  it("triggers loading a manifest and renders 'Loading' message", () => {
+    fetchManifestSpy.mockImplementation(() => new Promise(() => {}));
+    const wrapper = shallow(ManifestLoader({ store })).dive();
+
+    expect(wrapper.state("hasLoaded")).toBe(false);
+    expect(wrapper.state("hasManifest")).toBe(false);
+    expect(wrapper.state("error")).toBe("");
+    expect(services.fetchManifest).toHaveBeenCalled();
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("updates the state and renders a message when manifest has loaded OK", async () => {
+    fetchManifestSpy.mockResolvedValue({
+      manifest: { name: "foo" },
+      errorMessage: "",
+    });
+
+    const wrapper = shallow(ManifestLoader({ store })).dive();
+    await flushPromises();
+
+    expect(wrapper.state("hasLoaded")).toBe(true);
+    expect(wrapper.state("hasManifest")).toBe(true);
+    expect(wrapper.state("error")).toBe("");
+    expect(store.dispatch).toHaveBeenCalledWith({
+      type: UPDATE_MANIFEST,
+      manifest: { name: "foo" },
+      errorMessage: "",
+    });
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("updates the state and renders a message when manifest has failed to load", async () => {
+    fetchManifestSpy.mockResolvedValue({
+      manifest: null,
+      errorMessage: "lorem ipsum",
+    });
+
+    const wrapper = shallow(ManifestLoader({ store })).dive();
+    await flushPromises();
+
+    expect(wrapper.state("hasLoaded")).toBe(true);
+    expect(wrapper.state("hasManifest")).toBe(false);
+    expect(wrapper.state("error")).toBe("lorem ipsum");
+    expect(store.dispatch).toHaveBeenCalledWith({
+      type: UPDATE_MANIFEST,
+      manifest: null,
+      errorMessage: "lorem ipsum",
+    });
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("updates the state and renders a message when page has no manifest", async () => {
+    fetchManifestSpy.mockResolvedValue({
+      manifest: null,
+      errorMessage: "",
+    });
+
+    const wrapper = shallow(ManifestLoader({ store })).dive();
+    await flushPromises();
+
+    expect(wrapper.state("hasLoaded")).toBe(true);
+    expect(wrapper.state("hasManifest")).toBe(false);
+    expect(wrapper.state("error")).toBe("");
+    expect(store.dispatch).toHaveBeenCalledWith({
+      type: UPDATE_MANIFEST,
+      manifest: null,
+      errorMessage: "",
+    });
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  afterAll(() => {
+    fetchManifestSpy.mockRestore();
+    dispatchSpy.mockRestore();
+  });
+});