Bug 1459962 - Part 5: Add Jest tests for Worker and Registration components r=jdescottes
authorBelén Albeza <balbeza@mozilla.com>
Fri, 24 Apr 2020 15:47:17 +0000
changeset 525975 1428daf2817dde088b023963a4c39068f2bb2761
parent 525974 55485522c1b06d5e79acc9fac9230d73f8bab4ba
child 525976 14f317d6d48da415875038fec1ec7ef36008f6d8
push id113985
push userbalbeza@mozilla.com
push dateFri, 24 Apr 2020 17:36:19 +0000
treeherderautoland@1428daf2817d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersjdescottes
bugs1459962
milestone77.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1459962 - Part 5: Add Jest tests for Worker and Registration components r=jdescottes And this should be the last commit of the stack - just Jest tests Differential Revision: https://phabricator.services.mozilla.com/D72372
devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Registration.test.js.snap
devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Worker.test.js.snap
devtools/client/application/test/node/components/service-workers/components_application_panel-Registration.test.js
devtools/client/application/test/node/components/service-workers/components_application_panel-Worker.test.js
devtools/client/application/test/node/fixtures/data/constants.js
new file mode 100644
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Registration.test.js.snap
@@ -0,0 +1,178 @@
+// 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"
+    >
+      <span
+        className="registration__scope js-sw-scope"
+        title="SCOPE 123"
+      >
+        SCOPE 123
+      </span>
+      <aside>
+        <Localized
+          id="serviceworker-worker-unregister"
+        >
+          <UIButton
+            className="js-unregister-button"
+            onClick={[Function]}
+          />
+        </Localized>
+      </aside>
+    </header>
+    <ul
+      className="registration__workers"
+    >
+      <li
+        className="registration__workers-item"
+        key="id-worker-1-example"
+      >
+        <Worker
+          isDebugEnabled={true}
+          worker={
+            Object {
+              "id": "id-worker-1-example",
+              "isActive": true,
+              "state": 4,
+              "stateText": "activated",
+              "url": "http://example.com/worker.js",
+              "workerTargetFront": "",
+            }
+          }
+        />
+      </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"
+    >
+      <span
+        className="registration__scope js-sw-scope"
+        title="SCOPE 123"
+      >
+        SCOPE 123
+      </span>
+      <aside>
+        <Localized
+          id="serviceworker-worker-unregister"
+        >
+          <UIButton
+            className="js-unregister-button"
+            onClick={[Function]}
+          />
+        </Localized>
+      </aside>
+    </header>
+    <ul
+      className="registration__workers"
+    >
+      <li
+        className="registration__workers-item"
+        key="id-worker-1-example"
+      >
+        <Worker
+          isDebugEnabled={true}
+          worker={
+            Object {
+              "id": "id-worker-1-example",
+              "isActive": true,
+              "state": 4,
+              "stateText": "activated",
+              "url": "http://example.com/worker.js",
+              "workerTargetFront": "",
+            }
+          }
+        />
+      </li>
+      <li
+        className="registration__workers-item"
+        key="id-worker-2-example"
+      >
+        <Worker
+          isDebugEnabled={true}
+          worker={
+            Object {
+              "id": "id-worker-2-example",
+              "isActive": false,
+              "state": 2,
+              "stateText": "installed",
+              "url": "http://example.com/worker.js",
+              "workerTargetFront": "",
+            }
+          }
+        />
+      </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"
+    >
+      <span
+        className="registration__scope js-sw-scope"
+        title="SCOPE 123"
+      >
+        SCOPE 123
+      </span>
+      <aside>
+        <Localized
+          id="serviceworker-worker-unregister"
+        >
+          <UIButton
+            className="js-unregister-button"
+            onClick={[Function]}
+          />
+        </Localized>
+      </aside>
+    </header>
+    <ul
+      className="registration__workers"
+    >
+      <li
+        className="registration__workers-item"
+        key="id-worker-1-example"
+      >
+        <Worker
+          isDebugEnabled={false}
+          worker={
+            Object {
+              "id": "id-worker-1-example",
+              "isActive": true,
+              "state": 4,
+              "stateText": "activated",
+              "url": "http://example.com/worker.js",
+              "workerTargetFront": "",
+            }
+          }
+        />
+      </li>
+    </ul>
+  </article>
+</li>
+`;
new file mode 100644
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Worker.test.js.snap
@@ -0,0 +1,187 @@
+// 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"
+>
+  <dl
+    className="worker__data"
+  >
+    <Localized
+      id="serviceworker-worker-source"
+    >
+      <dt
+        className="worker__meta-name"
+      />
+    </Localized>
+    <dd>
+      <span
+        className="worker__source-url js-source-url"
+        title="http://example.com/worker.js"
+      >
+        worker.js
+      </span>
+       
+      <Localized
+        attrs={
+          Object {
+            "title": true,
+          }
+        }
+        id="serviceworker-worker-debug"
+      >
+        <UIButton
+          className="js-debug-button"
+          disabled={true}
+          onClick={[Function]}
+          size="micro"
+        />
+      </Localized>
+    </dd>
+    <Localized
+      id="serviceworker-worker-status"
+    >
+      <dt
+        className="worker__meta-name"
+      />
+    </Localized>
+    <dd>
+      <span
+        className="js-worker-status worker__status"
+      >
+        installed
+      </span>
+       
+    </dd>
+  </dl>
+</section>
+`;
+
+exports[`Worker Renders the expected snapshot for a running worker 1`] = `
+<section
+  className="worker js-sw-worker"
+>
+  <dl
+    className="worker__data"
+  >
+    <Localized
+      id="serviceworker-worker-source"
+    >
+      <dt
+        className="worker__meta-name"
+      />
+    </Localized>
+    <dd>
+      <span
+        className="worker__source-url js-source-url"
+        title="http://example.com/worker.js"
+      >
+        worker.js
+      </span>
+       
+      <Localized
+        attrs={
+          Object {
+            "title": false,
+          }
+        }
+        id="serviceworker-worker-debug"
+      >
+        <UIButton
+          className="js-debug-button"
+          disabled={false}
+          onClick={[Function]}
+          size="micro"
+        />
+      </Localized>
+    </dd>
+    <Localized
+      id="serviceworker-worker-status"
+    >
+      <dt
+        className="worker__meta-name"
+      />
+    </Localized>
+    <dd>
+      <span
+        className="js-worker-status worker__status"
+      >
+        serviceworker-worker-status-running
+      </span>
+       
+    </dd>
+  </dl>
+</section>
+`;
+
+exports[`Worker Renders the expected snapshot for a stopped worker 1`] = `
+<section
+  className="worker js-sw-worker"
+>
+  <dl
+    className="worker__data"
+  >
+    <Localized
+      id="serviceworker-worker-source"
+    >
+      <dt
+        className="worker__meta-name"
+      />
+    </Localized>
+    <dd>
+      <span
+        className="worker__source-url js-source-url"
+        title="http://example.com/worker.js"
+      >
+        worker.js
+      </span>
+       
+      <Localized
+        attrs={
+          Object {
+            "title": true,
+          }
+        }
+        id="serviceworker-worker-debug"
+      >
+        <UIButton
+          className="js-debug-button"
+          disabled={true}
+          onClick={[Function]}
+          size="micro"
+        />
+      </Localized>
+    </dd>
+    <Localized
+      id="serviceworker-worker-status"
+    >
+      <dt
+        className="worker__meta-name"
+      />
+    </Localized>
+    <dd>
+      <span
+        className="js-worker-status worker__status"
+      >
+        serviceworker-worker-status-stopped
+      </span>
+       
+      <Localized
+        attrs={
+          Object {
+            "title": true,
+          }
+        }
+        id="serviceworker-worker-start2"
+      >
+        <UIButton
+          className="js-start-button"
+          disabled={false}
+          onClick={[Function]}
+          size="micro"
+        />
+      </Localized>
+    </dd>
+  </dl>
+</section>
+`;
new file mode 100644
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/components_application_panel-Registration.test.js
@@ -0,0 +1,56 @@
+/* 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 {
+  REGISTRATION_SINGLE_WORKER,
+  REGISTRATION_MULTIPLE_WORKERS,
+} = require("devtools/client/application/test/node/fixtures/data/constants");
+
+const Registration = createFactory(
+  require("devtools/client/application/src/components/service-workers/Registration")
+);
+
+describe("Registration", () => {
+  it("Renders the expected snapshot for a registration with a worker", () => {
+    const wrapper = shallow(
+      Registration({
+        isDebugEnabled: true,
+        registration: REGISTRATION_SINGLE_WORKER,
+      })
+    );
+
+    expect(wrapper).toMatchSnapshot();
+    // ensure that we do have the proper amount of workers
+    expect(wrapper.find("Worker")).toHaveLength(1);
+  });
+
+  it("Renders the expected snapshot for a registration with multiple workers", () => {
+    const wrapper = shallow(
+      Registration({
+        isDebugEnabled: true,
+        registration: REGISTRATION_MULTIPLE_WORKERS,
+      })
+    );
+
+    expect(wrapper).toMatchSnapshot();
+    // ensure that we do have the proper amount of workers
+    expect(wrapper.find("Worker")).toHaveLength(2);
+  });
+
+  it("Renders the expected snapshot when sw debugging is disabled", () => {
+    const wrapper = shallow(
+      Registration({
+        isDebugEnabled: false,
+        registration: REGISTRATION_SINGLE_WORKER,
+      })
+    );
+
+    expect(wrapper).toMatchSnapshot();
+  });
+});
new file mode 100644
--- /dev/null
+++ b/devtools/client/application/test/node/components/service-workers/components_application_panel-Worker.test.js
@@ -0,0 +1,94 @@
+/* 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 {
+  WORKER_RUNNING,
+  WORKER_STOPPED,
+  WORKER_WAITING,
+} = require("devtools/client/application/test/node/fixtures/data/constants");
+
+const Worker = createFactory(
+  require("devtools/client/application/src/components/service-workers/Worker")
+);
+
+describe("Worker", () => {
+  it("Renders the expected snapshot for a running worker", () => {
+    const wrapper = shallow(
+      Worker({
+        isDebugEnabled: true,
+        worker: WORKER_RUNNING,
+      })
+    );
+
+    // 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 wrapper = shallow(
+      Worker({
+        isDebugEnabled: true,
+        worker: WORKER_STOPPED,
+      })
+    );
+
+    // ensure proper status
+    expect(wrapper.find(".js-worker-status").text()).toBe(
+      "serviceworker-worker-status-stopped"
+    );
+    // check that Start button is not available
+    expect(wrapper.find(".js-start-button")).toHaveLength(1);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Renders the expected snapshot for a non-active worker", () => {
+    const wrapper = shallow(
+      Worker({
+        isDebugEnabled: true,
+        worker: WORKER_WAITING,
+      })
+    );
+
+    // 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);
+
+    expect(wrapper).toMatchSnapshot();
+  });
+
+  it("Enables/disabled the debug button depending of debugging being available", () => {
+    // check disabled debugging
+    let wrapper = shallow(
+      Worker({
+        isDebugEnabled: false,
+        worker: WORKER_RUNNING,
+      })
+    );
+    expect(wrapper.find(".js-debug-button[disabled=true]")).toHaveLength(1);
+
+    // check enabled debugging
+    wrapper = shallow(
+      Worker({
+        isDebugEnabled: true,
+        worker: WORKER_RUNNING,
+      })
+    );
+    expect(wrapper.find(".js-debug-button[disabled=false]")).toHaveLength(1);
+  });
+});
--- a/devtools/client/application/test/node/fixtures/data/constants.js
+++ b/devtools/client/application/test/node/fixtures/data/constants.js
@@ -4,16 +4,83 @@
 
 "use strict";
 
 // NOTE: worker state values are defined in an enum in nsIServiceWorkerManager
 // https://searchfox.org/mozilla-central/source/dom/interfaces/base/nsIServiceWorkerManager.idl
 
 const EMPTY_WORKER_LIST = [];
 
+const WORKER_RUNNING = {
+  id: "id-worker-1-example",
+  isActive: true,
+  workerTargetFront: true,
+  url: "http://example.com/worker.js",
+  state: 4,
+  stateText: "activated",
+};
+
+const WORKER_STOPPED = {
+  id: "id-worker-1-example",
+  isActive: true,
+  workerTargetFront: false,
+  url: "http://example.com/worker.js",
+  state: 4,
+  stateText: "activated",
+};
+
+const WORKER_WAITING = {
+  id: "id-worker-1-example",
+  isActive: false,
+  workerTargetFront: false,
+  url: "http://example.com/worker.js",
+  state: 2,
+  stateText: "installed",
+};
+
+const REGISTRATION_SINGLE_WORKER = {
+  id: "id-reg-1-example",
+  scope: "SCOPE 123",
+  registrationFront: "",
+  workers: [
+    {
+      id: "id-worker-1-example",
+      isActive: true,
+      workerTargetFront: "",
+      url: "http://example.com/worker.js",
+      state: 4,
+      stateText: "activated",
+    },
+  ],
+};
+
+const REGISTRATION_MULTIPLE_WORKERS = {
+  id: "id-reg-1-example",
+  scope: "SCOPE 123",
+  registrationFront: "",
+  workers: [
+    {
+      id: "id-worker-1-example",
+      isActive: true,
+      workerTargetFront: "",
+      url: "http://example.com/worker.js",
+      state: 4,
+      stateText: "activated",
+    },
+    {
+      id: "id-worker-2-example",
+      isActive: false,
+      workerTargetFront: "",
+      url: "http://example.com/worker.js",
+      state: 2,
+      stateText: "installed",
+    },
+  ],
+};
+
 const SINGLE_WORKER_DEFAULT_DOMAIN_LIST = [
   {
     id: "id-reg-1-example",
     scope: "SCOPE 123",
     registrationFront: "",
     workers: [
       {
         id: "id-worker-1-example",
@@ -221,21 +288,28 @@ const MANIFEST_NO_ISSUES = {
   presentation: [
     { key: "lorem", value: "ipsum", type: "string" },
     { key: "foo", value: "bar", type: "string" },
   ],
   validation: [],
 };
 
 module.exports = {
+  // service worker related fixtures
   EMPTY_WORKER_LIST,
+  MULTIPLE_WORKER_LIST,
+  MULTIPLE_WORKER_MIXED_DOMAINS_LIST,
+  REGISTRATION_MULTIPLE_WORKERS,
+  REGISTRATION_SINGLE_WORKER,
   SINGLE_WORKER_DEFAULT_DOMAIN_LIST,
   SINGLE_WORKER_DIFFERENT_DOMAIN_LIST,
+  WORKER_RUNNING,
+  WORKER_STOPPED,
+  WORKER_WAITING,
+  // manifest related fixtures
   MANIFEST_NO_ISSUES,
   MANIFEST_WITH_ISSUES,
   MANIFEST_SIMPLE,
   MANIFEST_COLOR_MEMBERS,
   MANIFEST_ICON_MEMBERS,
   MANIFEST_STRING_MEMBERS,
   MANIFEST_UNKNOWN_TYPE_MEMBERS,
-  MULTIPLE_WORKER_LIST,
-  MULTIPLE_WORKER_MIXED_DOMAINS_LIST,
 };