diff options
Diffstat (limited to 'devtools/client/application/test/node/components/manifest')
24 files changed, 1536 insertions, 0 deletions
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(); + }); +}); |