Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-19 08:15:31 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1553799 - Part 2: Move rendering of workers to their own root component r=Ola

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D39373

--HG--
rename : devtools/client/application/test/components/components_application_panel-WorkerList.test.js => devtools/client/application/test/components/service-workers/components_application_panel-WorkerList.test.js
rename : devtools/client/application/test/components/components_application_panel-WorkerListEmpty.test.js => devtools/client/application/test/components/service-workers/components_application_panel-WorkerListEmpty.test.js
rename : devtools/client/application/test/components/components_application_panel-App.test.js => devtools/client/application/test/components/service-workers/components_application_panel-WorkersPage.test.js
extra : moz-landing-system : lando
This commit is contained in:
Belén Albeza 2019-07-29 12:52:02 +00:00
parent 244f7f3e3b
commit 7286fc89e3
15 changed files with 473 additions and 550 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
devtools/client/application/application.css
View File

@ -14,6 +14,7 @@
@import "resource://devtools/client/application/src/components/service-workers/Worker.css";
@import "resource://devtools/client/application/src/components/service-workers/WorkerList.css";
@import "resource://devtools/client/application/src/components/service-workers/WorkerListEmpty.css";
@import "resource://devtools/client/application/src/components/service-workers/WorkersPage.css";
@import "resource://devtools/client/application/src/components/ui/UIButton.css";
html,

29
devtools/client/application/src/components/App.css
View File

@ -12,32 +12,3 @@ a.disabled-link:visited {
opacity: 0.5;
cursor: not-allowed;
}
/*
* The current layout of the application panel is
*
* +---------------------------------------------+
* | (header) "Service workers" |
* +---------------------------------------------+
* | Service worker 1 |
* | (...) |
* | Service worker N (see Worker.css) |
* +---------------------------------------------+
* | Link to about:debugging |
* +---------------------------------------------+
*/
.application {
height: 100vh;
padding: 0 2rem;
display: grid;
-moz-user-select: none;
}
.application--empty {
align-items: center;
justify-content: center;
}
.application:not(.application--empty) {
grid-template-rows: 1fr auto;
}

52
devtools/client/application/src/components/App.js
View File

@ -9,16 +9,12 @@ const {
createFactory,
PureComponent,
} = require("devtools/client/shared/vendor/react");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const { main } = require("devtools/client/shared/vendor/react-dom-factories");
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
const WorkerList = createFactory(require("./service-workers/WorkerList"));
const WorkerListEmpty = createFactory(
require("./service-workers/WorkerListEmpty")
);
const WorkersPage = createFactory(require("./service-workers/WorkersPage"));
/**
* This is the main component for the application panel.
@ -26,58 +22,26 @@ const WorkerListEmpty = createFactory(
class App extends PureComponent {
static get propTypes() {
return {
// mapped from state
canDebugWorkers: PropTypes.bool.isRequired,
client: PropTypes.object.isRequired,
// mapped from state
domain: PropTypes.string.isRequired,
fluentBundles: PropTypes.array.isRequired,
serviceContainer: PropTypes.object.isRequired,
// mapped from state
workers: PropTypes.array.isRequired,
};
}
render() {
const {
canDebugWorkers,
client,
domain,
fluentBundles,
serviceContainer,
workers,
} = this.props;
// Filter out workers from other domains
const domainWorkers = workers.filter(
x => new URL(x.url).hostname === domain
);
const isWorkerListEmpty = domainWorkers.length === 0;
const { client, fluentBundles, serviceContainer } = this.props;
return LocalizationProvider(
{ messages: fluentBundles },
main(
{
className: `application ${
isWorkerListEmpty ? "application--empty" : ""
}`,
},
isWorkerListEmpty
? WorkerListEmpty({ serviceContainer })
: WorkerList({ canDebugWorkers, client, workers: domainWorkers })
{ className: `application` },
WorkersPage({
client,
serviceContainer,
})
)
);
}
}
function mapStateToProps(state) {
return {
canDebugWorkers: state.workers.canDebugWorkers,
domain: state.page.domain,
workers: state.workers.list,
};
}
// Exports
module.exports = connect(mapStateToProps)(App);
module.exports = App;

32
devtools/client/application/src/components/service-workers/WorkersPage.css Normal file
View File

@ -0,0 +1,32 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. *
/*
* The current layout of the workers page is
*
* +---------------------------------------------+
* | (header) "Service workers" |
* +---------------------------------------------+
* | Service worker 1 |
* | (...) |
* | Service worker N (see Worker.css) |
* +---------------------------------------------+
* | Link to about:debugging |
* +---------------------------------------------+
*/
.workers-page {
height: 100vh;
padding: 0 2rem;
display: grid;
-moz-user-select: none;
}
.workers-page--empty {
align-items: center;
justify-content: center;
}
.workers-page:not(.workers-page--empty) {
grid-template-rows: 1fr auto;
}

74
devtools/client/application/src/components/service-workers/WorkersPage.js Normal file
View File

@ -0,0 +1,74 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
"use strict";
const {
createFactory,
PureComponent,
} = require("devtools/client/shared/vendor/react");
const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
const {
section,
} = require("devtools/client/shared/vendor/react-dom-factories");
const { connect } = require("devtools/client/shared/vendor/react-redux");
const WorkerList = createFactory(require("./WorkerList"));
const WorkerListEmpty = createFactory(require("./WorkerListEmpty"));
class WorkersPage extends PureComponent {
static get propTypes() {
return {
client: PropTypes.object.isRequired,
serviceContainer: PropTypes.object.isRequired,
// mapped from state
canDebugWorkers: PropTypes.bool.isRequired,
domain: PropTypes.string.isRequired,
workers: PropTypes.array.isRequired,
};
}
render() {
const {
canDebugWorkers,
client,
domain,
serviceContainer,
workers,
} = this.props;
// Filter out workers from other domains
const domainWorkers = workers.filter(
x => new URL(x.url).hostname === domain
);
const isWorkerListEmpty = domainWorkers.length === 0;
return section(
{
className: `workers-page ${
isWorkerListEmpty ? "workers-page--empty" : ""
}`,
},
isWorkerListEmpty
? WorkerListEmpty({ serviceContainer })
: WorkerList({
canDebugWorkers,
client,
workers: domainWorkers,
})
);
}
}
function mapStateToProps(state) {
return {
canDebugWorkers: state.workers.canDebugWorkers,
domain: state.page.domain,
workers: state.workers.list,
};
}
// Exports
module.exports = connect(mapStateToProps)(WorkersPage);

2
devtools/client/application/src/components/service-workers/moz.build
View File

@ -9,4 +9,6 @@ DevToolsModules(
'WorkerList.js',
'WorkerListEmpty.css',
'WorkerListEmpty.js',
'WorkersPage.css',
'WorkersPage.js',
)

340
devtools/client/application/test/components/__snapshots__/components_application_panel-App.test.js.snap
View File

@ -1,337 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`App: renders the expected snapshot for an App with empty worker list 1`] = `
<Provider
store={
Object {
"dispatch": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
}
}
>
<LocalizationProvider
messages={Array []}
exports[`App renders the expected snapshot 1`] = `
<LocalizationProvider>
<main
className="application"
>
<Connect(App)
canDebugWorkers={true}
domain="domain"
fluentBundles={Array []}
serviceContainer={Object {}}
>
<App
canDebugWorkers={false}
dispatch={[Function]}
domain={null}
fluentBundles={Array []}
serviceContainer={Object {}}
workers={Array []}
>
<LocalizationProvider
messages={Array []}
>
<main
className="application application--empty"
>
<WorkerListEmpty
serviceContainer={Object {}}
>
<article
className="worker-list-empty js-worker-list-empty"
>
<Localized
a={
<a
className="external-link"
onClick={[Function]}
/>
}
id="serviceworker-empty-intro"
>
<p
className="worker-list-empty__title"
/>
</Localized>
<Localized
id="serviceworker-empty-suggestions"
>
<p />
</Localized>
<ul
className="worker-list-empty__tips"
>
<Localized
a={
<a
className="link"
onClick={[Function]}
/>
}
id="serviceworker-empty-suggestions-console"
>
<li
className="worker-list-empty__tips__item"
/>
</Localized>
<Localized
a={
<a
className="link"
onClick={[Function]}
/>
}
id="serviceworker-empty-suggestions-debugger"
>
<li
className="worker-list-empty__tips__item"
/>
</Localized>
<Localized
a={
<a
className="link js-trusted-link"
onClick={[Function]}
/>
}
id="serviceworker-empty-suggestions-aboutdebugging"
>
<li
className="worker-list-empty__tips__item"
/>
</Localized>
</ul>
</article>
</WorkerListEmpty>
</main>
</LocalizationProvider>
</App>
</Connect(App)>
</LocalizationProvider>
</Provider>
`;
exports[`App: renders the expected snapshot for an App with multiple workers list 1`] = `
<Provider
store={
Object {
"dispatch": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
}
}
>
<LocalizationProvider
messages={Array []}
>
<Connect(App)
canDebugWorkers={true}
domain="domain"
fluentBundles={Array []}
serviceContainer={Object {}}
>
<App
canDebugWorkers={false}
dispatch={[Function]}
domain={null}
fluentBundles={Array []}
serviceContainer={Object {}}
workers={Array []}
>
<LocalizationProvider
messages={Array []}
>
<main
className="application application--empty"
>
<WorkerListEmpty
serviceContainer={Object {}}
>
<article
className="worker-list-empty js-worker-list-empty"
>
<Localized
a={
<a
className="external-link"
onClick={[Function]}
/>
}
id="serviceworker-empty-intro"
>
<p
className="worker-list-empty__title"
/>
</Localized>
<Localized
id="serviceworker-empty-suggestions"
>
<p />
</Localized>
<ul
className="worker-list-empty__tips"
>
<Localized
a={
<a
className="link"
onClick={[Function]}
/>
}
id="serviceworker-empty-suggestions-console"
>
<li
className="worker-list-empty__tips__item"
/>
</Localized>
<Localized
a={
<a
className="link"
onClick={[Function]}
/>
}
id="serviceworker-empty-suggestions-debugger"
>
<li
className="worker-list-empty__tips__item"
/>
</Localized>
<Localized
a={
<a
className="link js-trusted-link"
onClick={[Function]}
/>
}
id="serviceworker-empty-suggestions-aboutdebugging"
>
<li
className="worker-list-empty__tips__item"
/>
</Localized>
</ul>
</article>
</WorkerListEmpty>
</main>
</LocalizationProvider>
</App>
</Connect(App)>
</LocalizationProvider>
</Provider>
`;
exports[`App: renders the expected snapshot for an App with single worker list 1`] = `
<Provider
store={
Object {
"dispatch": [Function],
"getState": [Function],
"replaceReducer": [Function],
"subscribe": [Function],
Symbol(observable): [Function],
}
}
>
<LocalizationProvider
messages={Array []}
>
<Connect(App)
canDebugWorkers={true}
domain="domain"
fluentBundles={Array []}
serviceContainer={Object {}}
>
<App
canDebugWorkers={false}
dispatch={[Function]}
domain={null}
fluentBundles={Array []}
serviceContainer={Object {}}
workers={Array []}
>
<LocalizationProvider
messages={Array []}
>
<main
className="application application--empty"
>
<WorkerListEmpty
serviceContainer={Object {}}
>
<article
className="worker-list-empty js-worker-list-empty"
>
<Localized
a={
<a
className="external-link"
onClick={[Function]}
/>
}
id="serviceworker-empty-intro"
>
<p
className="worker-list-empty__title"
/>
</Localized>
<Localized
id="serviceworker-empty-suggestions"
>
<p />
</Localized>
<ul
className="worker-list-empty__tips"
>
<Localized
a={
<a
className="link"
onClick={[Function]}
/>
}
id="serviceworker-empty-suggestions-console"
>
<li
className="worker-list-empty__tips__item"
/>
</Localized>
<Localized
a={
<a
className="link"
onClick={[Function]}
/>
}
id="serviceworker-empty-suggestions-debugger"
>
<li
className="worker-list-empty__tips__item"
/>
</Localized>
<Localized
a={
<a
className="link js-trusted-link"
onClick={[Function]}
/>
}
id="serviceworker-empty-suggestions-aboutdebugging"
>
<li
className="worker-list-empty__tips__item"
/>
</Localized>
</ul>
</article>
</WorkerListEmpty>
</main>
</LocalizationProvider>
</App>
</Connect(App)>
</LocalizationProvider>
</Provider>
<Connect(WorkersPage) />
</main>
</LocalizationProvider>
`;

74
devtools/client/application/test/components/components_application_panel-App.test.js
View File

@ -4,79 +4,23 @@
"use strict";
// Import libs
const { mount } = require("enzyme");
const React = require("react");
const Provider = React.createFactory(
require("devtools/client/shared/vendor/react-redux").Provider
);
const { shallow } = require("enzyme");
const { createFactory } = require("react");
// Import & init localization
const FluentReact = require("devtools/client/shared/vendor/fluent-react");
const LocalizationProvider = React.createFactory(
FluentReact.LocalizationProvider
);
// Import constants
const {
INITSTATE,
CLIENT,
EMPTY_WORKER_LIST,
SINGLE_WORKER_LIST,
MULTIPLE_WORKER_LIST,
} = require("devtools/client/application/test/components/fixtures/data/constants");
// Import setupStore with imported & combined reducers
const {
setupStore,
} = require("devtools/client/application/test/components/helpers/helpers");
const LocalizationProvider = createFactory(FluentReact.LocalizationProvider);
// Import component
const App = React.createFactory(
const App = createFactory(
require("devtools/client/application/src/components/App")
);
/**
* Test for App.js component
*/
describe("App:", () => {
const store = setupStore(INITSTATE, {
client: CLIENT,
worker: SINGLE_WORKER_LIST,
});
it("renders the expected snapshot for an App with empty worker list", () => {
const wrapper = mount(
Provider(
{ store },
LocalizationProvider(
{ messages: [] },
App(INITSTATE, { client: CLIENT, worker: EMPTY_WORKER_LIST })
)
)
);
expect(wrapper).toMatchSnapshot();
});
it("renders the expected snapshot for an App with single worker list", () => {
const wrapper = mount(
Provider(
{ store },
LocalizationProvider(
{ messages: [] },
App(INITSTATE, { client: CLIENT, worker: SINGLE_WORKER_LIST })
)
)
);
expect(wrapper).toMatchSnapshot();
});
it("renders the expected snapshot for an App with multiple workers list", () => {
const wrapper = mount(
Provider(
{ store },
LocalizationProvider(
{ messages: [] },
App(INITSTATE, { client: CLIENT, worker: MULTIPLE_WORKER_LIST })
)
)
);
describe("App", () => {
it("renders the expected snapshot", () => {
const wrapper = shallow(
LocalizationProvider({ messages: [] }, App({}))
).dive(); // dive to bypass the LocalizationProvider wrapper
expect(wrapper).toMatchSnapshot();
});
});

57
devtools/client/application/test/components/fixtures/data/constants.js
View File

@ -4,22 +4,27 @@
"use strict";
const INITSTATE = {
domain: "domain",
fluentBundles: [],
serviceContainer: {},
canDebugWorkers: true,
};
const CLIENT = {};
const EMPTY_WORKER_LIST = [];
const SINGLE_WORKER_LIST = [
const SINGLE_WORKER_DEFAULT_DOMAIN_LIST = [
{
active: true,
name: "worker1",
scope: "SCOPE 123",
registrationFront: "",
workerTargetFront: "",
url: "http://example.com/worker.js",
},
];
const SINGLE_WORKER_DIFFERENT_DOMAIN_LIST = [
{
active: true,
name: "worker1",
scope: "SCOPE 123",
registrationFront: "",
workerTargetFront: "",
url: "http://different-example.com/worker.js",
},
];
@ -30,6 +35,7 @@ const MULTIPLE_WORKER_LIST = [
scope: "SCOPE 123",
registrationFront: "",
workerTargetFront: "",
url: "http://example.com/worker.js",
},
{
active: false,
@ -37,6 +43,7 @@ const MULTIPLE_WORKER_LIST = [
scope: "SCOPE 456",
registrationFront: "",
workerTargetFront: "",
url: "http://example.com/worker.js",
},
{
active: true,
@ -44,13 +51,41 @@ const MULTIPLE_WORKER_LIST = [
scope: "SCOPE 789",
registrationFront: "",
workerTargetFront: "",
url: "http://example.com/worker.js",
},
];
const MULTIPLE_WORKER_MIXED_DOMAINS_LIST = [
{
active: true,
name: "worker1",
scope: "SCOPE 123",
registrationFront: "",
workerTargetFront: "",
url: "http://example.com/worker.js",
},
{
active: false,
name: "worker2",
scope: "SCOPE 456",
registrationFront: "",
workerTargetFront: "",
url: "http://example.com/worker.js",
},
{
active: true,
name: "worker3",
scope: "SCOPE 789",
registrationFront: "",
workerTargetFront: "",
url: "http://different-example.com/worker.js",
},
];
module.exports = {
INITSTATE,
CLIENT,
EMPTY_WORKER_LIST,
SINGLE_WORKER_LIST,
SINGLE_WORKER_DEFAULT_DOMAIN_LIST,
SINGLE_WORKER_DIFFERENT_DOMAIN_LIST,
MULTIPLE_WORKER_LIST,
MULTIPLE_WORKER_MIXED_DOMAINS_LIST,
};

100
devtools/client/application/test/components/__snapshots__/components_application_panel-WorkerList.test.js.snap → devtools/client/application/test/components/service-workers/__snapshots__/components_application_panel-WorkerList.test.js.snap
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Service Worker List: renders the expected snapshot for a workerList with multiple workers list 1`] = `
exports[`WorkerList renders the expected snapshot for a list with a single worker 1`] = `
Array [
<article
className="workers-container"
@ -16,81 +16,89 @@ Array [
<ul>
<Worker
client={Object {}}
isDebugEnabled={true}
worker={
Object {
"active": true,
"name": "worker1",
"registrationFront": "",
"scope": "SCOPE 123",
"url": "http://example.com/worker.js",
"workerTargetFront": "",
}
}
/>
</ul>
</article>,
<Localized
a={
<a
className="aboutdebugging-plug__link"
onClick={[Function]}
/>
}
id="serviceworker-list-aboutdebugging"
key="serviceworkerlist-footer"
>
<footer
className="aboutdebugging-plug"
/>
</Localized>,
]
`;
exports[`WorkerList renders the expected snapshot for a multiple workers list 1`] = `
Array [
<article
className="workers-container"
key="workers-container"
>
<Localized
id="serviceworker-list-header"
>
<h1
className="application--title"
/>
</Localized>
<ul>
<Worker
client={Object {}}
isDebugEnabled={true}
worker={
Object {
"active": true,
"name": "worker1",
"registrationFront": "",
"scope": "SCOPE 123",
"url": "http://example.com/worker.js",
"workerTargetFront": "",
}
}
/>
<Worker
client={Object {}}
isDebugEnabled={true}
worker={
Object {
"active": false,
"name": "worker2",
"registrationFront": "",
"scope": "SCOPE 456",
"url": "http://example.com/worker.js",
"workerTargetFront": "",
}
}
/>
<Worker
client={Object {}}
isDebugEnabled={true}
worker={
Object {
"active": true,
"name": "worker3",
"registrationFront": "",
"scope": "SCOPE 789",
"workerTargetFront": "",
}
}
/>
</ul>
</article>,
<Localized
a={
<a
className="aboutdebugging-plug__link"
onClick={[Function]}
/>
}
id="serviceworker-list-aboutdebugging"
key="serviceworkerlist-footer"
>
<footer
className="aboutdebugging-plug"
/>
</Localized>,
]
`;
exports[`Service Worker List: renders the expected snapshot for a workerList with single worker list 1`] = `
Array [
<article
className="workers-container"
key="workers-container"
>
<Localized
id="serviceworker-list-header"
>
<h1
className="application--title"
/>
</Localized>
<ul>
<Worker
client={Object {}}
worker={
Object {
"active": true,
"name": "worker1",
"registrationFront": "",
"scope": "SCOPE 123",
"url": "http://example.com/worker.js",
"workerTargetFront": "",
}
}

2
devtools/client/application/test/components/__snapshots__/components_application_panel-WorkerListEmpty.test.js.snap → devtools/client/application/test/components/service-workers/__snapshots__/components_application_panel-WorkerListEmpty.test.js.snap
View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Empty Service Worker List: renders the expected snapshot for a workerListEmpty with empty worker list 1`] = `
exports[`WorkerListEmpty renders the expected snapshot 1`] = `
<article
className="worker-list-empty js-worker-list-empty"
>

114
devtools/client/application/test/components/service-workers/__snapshots__/components_application_panel-WorkersPage.test.js.snap Normal file
View File

@ -0,0 +1,114 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`WorkersPage filters out workers from diferent domains 1`] = `
<section
className="workers-page "
>
<WorkerList
canDebugWorkers={true}
client={Object {}}
workers={
Array [
Object {
"active": true,
"name": "worker1",
"registrationFront": "",
"scope": "SCOPE 123",
"url": "http://example.com/worker.js",
"workerTargetFront": "",
},
Object {
"active": false,
"name": "worker2",
"registrationFront": "",
"scope": "SCOPE 456",
"url": "http://example.com/worker.js",
"workerTargetFront": "",
},
]
}
/>
</section>
`;
exports[`WorkersPage filters out workers from different domains and renders an empty list if there is none left 1`] = `
<section
className="workers-page workers-page--empty"
>
<WorkerListEmpty
serviceContainer={Object {}}
/>
</section>
`;
exports[`WorkersPage renders the expected snapshot for a WorkerPage with empty worker list 1`] = `
<section
className="workers-page workers-page--empty"
>
<WorkerListEmpty
serviceContainer={Object {}}
/>
</section>
`;
exports[`WorkersPage renders the expected snapshot for an App with multiple workers list 1`] = `
<section
className="workers-page "
>
<WorkerList
canDebugWorkers={true}
client={Object {}}
workers={
Array [
Object {
"active": true,
"name": "worker1",
"registrationFront": "",
"scope": "SCOPE 123",
"url": "http://example.com/worker.js",
"workerTargetFront": "",
},
Object {
"active": false,
"name": "worker2",
"registrationFront": "",
"scope": "SCOPE 456",
"url": "http://example.com/worker.js",
"workerTargetFront": "",
},
Object {
"active": true,
"name": "worker3",
"registrationFront": "",
"scope": "SCOPE 789",
"url": "http://example.com/worker.js",
"workerTargetFront": "",
},
]
}
/>
</section>
`;
exports[`WorkersPage renders the expected snapshot for an App with single worker list 1`] = `
<section
className="workers-page "
>
<WorkerList
canDebugWorkers={true}
client={Object {}}
workers={
Array [
Object {
"active": true,
"name": "worker1",
"registrationFront": "",
"scope": "SCOPE 123",
"url": "http://example.com/worker.js",
"workerTargetFront": "",
},
]
}
/>
</section>
`;

19
devtools/client/application/test/components/components_application_panel-WorkerList.test.js → devtools/client/application/test/components/service-workers/components_application_panel-WorkerList.test.js
View File

@ -9,8 +9,7 @@ const React = require("react");
// Import constants
const {
CLIENT,
SINGLE_WORKER_LIST,
SINGLE_WORKER_DEFAULT_DOMAIN_LIST,
MULTIPLE_WORKER_LIST,
} = require("devtools/client/application/test/components/fixtures/data/constants");
@ -21,24 +20,24 @@ const WorkerList = React.createFactory(
/**
* Test for workerList.js component
*/
describe("Service Worker List:", () => {
it("renders the expected snapshot for a workerList with single worker list", () => {
describe("WorkerList", () => {
it("renders the expected snapshot for a list with a single worker", () => {
const wrapper = shallow(
WorkerList({
client: CLIENT,
workers: SINGLE_WORKER_LIST,
isDebugEnabled: true,
client: {},
workers: SINGLE_WORKER_DEFAULT_DOMAIN_LIST,
canDebugWorkers: true,
})
);
expect(wrapper).toMatchSnapshot();
});
it("renders the expected snapshot for a workerList with multiple workers list", () => {
it("renders the expected snapshot for a multiple workers list", () => {
const wrapper = shallow(
WorkerList({
client: CLIENT,
client: {},
workers: MULTIPLE_WORKER_LIST,
isDebugEnabled: true,
canDebugWorkers: true,
})
);
expect(wrapper).toMatchSnapshot();

14
devtools/client/application/test/components/components_application_panel-WorkerListEmpty.test.js → devtools/client/application/test/components/service-workers/components_application_panel-WorkerListEmpty.test.js
View File

@ -7,12 +7,6 @@
const { shallow } = require("enzyme");
const React = require("react");
// Import constants
const {
CLIENT,
EMPTY_WORKER_LIST,
} = require("devtools/client/application/test/components/fixtures/data/constants");
const WorkerListEmpty = React.createFactory(
require("devtools/client/application/src/components/service-workers/WorkerListEmpty")
);
@ -21,13 +15,11 @@ const WorkerListEmpty = React.createFactory(
* Test for workerListEmpty.js component
*/
describe("Empty Service Worker List:", () => {
it("renders the expected snapshot for a workerListEmpty with empty worker list", () => {
describe("WorkerListEmpty", () => {
it("renders the expected snapshot", () => {
const wrapper = shallow(
WorkerListEmpty({
client: CLIENT,
workers: EMPTY_WORKER_LIST,
isDebugEnabled: true,
serviceContainer: {},
})
);
expect(wrapper).toMatchSnapshot();

113
devtools/client/application/test/components/service-workers/components_application_panel-WorkersPage.test.js Normal file
View File

@ -0,0 +1,113 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Import libs
const { shallow } = require("enzyme");
const React = 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("devtools/client/application/test/components/fixtures/data/constants");
// Import setupStore with imported & combined reducers
const {
setupStore,
} = require("devtools/client/application/test/components/helpers/helpers");
// Import component
const WorkersPage = React.createFactory(
require("devtools/client/application/src/components/service-workers/WorkersPage")
);
/**
* 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({ preloadedState: state });
}
it("renders an empty list if there are no workers", () => {
const store = buildStoreWithWorkers(EMPTY_WORKER_LIST);
const wrapper = shallow(
WorkersPage({ store, client: {}, serviceContainer: {} })
).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,
client: {},
serviceContainer: {},
})
).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,
client: {},
serviceContainer: {},
})
).dive();
expect(wrapper).toMatchSnapshot();
});
it("filters out workers from diferent domains", () => {
const store = buildStoreWithWorkers(MULTIPLE_WORKER_MIXED_DOMAINS_LIST);
const wrapper = shallow(
WorkersPage({
store,
client: {},
serviceContainer: {},
})
).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,
client: {},
serviceContainer: {},
})
).dive();
expect(wrapper).toMatchSnapshot();
}
);
});