summaryrefslogtreecommitdiffstats
path: root/devtools/client/application/test/node/components/service-workers
diff options
context:
space:
mode:
Diffstat (limited to 'devtools/client/application/test/node/components/service-workers')
-rw-r--r--devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Registration.test.js.snap180
-rw-r--r--devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationList.test.js.snap159
-rw-r--r--devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-RegistrationListEmpty.test.js.snap66
-rw-r--r--devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-Worker.test.js.snap132
-rw-r--r--devtools/client/application/test/node/components/service-workers/__snapshots__/components_application_panel-WorkersPage.test.js.snap143
-rw-r--r--devtools/client/application/test/node/components/service-workers/components_application_panel-Registration.test.js88
-rw-r--r--devtools/client/application/test/node/components/service-workers/components_application_panel-RegistrationList.test.js43
-rw-r--r--devtools/client/application/test/node/components/service-workers/components_application_panel-RegistrationListEmpty.test.js23
-rw-r--r--devtools/client/application/test/node/components/service-workers/components_application_panel-Worker.test.js110
-rw-r--r--devtools/client/application/test/node/components/service-workers/components_application_panel-WorkersPage.test.js82
10 files changed, 1026 insertions, 0 deletions
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();
+ }
+ );
+});