From ece5d9420cd1fc762f7d1a7eede7875ebfaf3efe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Tue, 8 Oct 2019 15:37:11 +0000 Subject: [PATCH] Bug 1577446 - Part 2: Add tests for showing icons in the manifest r=Ola Differential Revision: https://phabricator.services.mozilla.com/D46306 --HG-- rename : devtools/client/themes/images/aboutdebugging-firefox-nightly.svg => devtools/client/application/test/browser/resources/manifest/icon.svg extra : moz-landing-system : lando --- .../application/test/browser/browser.ini | 2 + ...wser_application_panel_manifest-display.js | 39 ++++++- .../test/browser/resources/manifest/icon.svg | 4 + .../resources/manifest/load-ok-icons.html | 9 ++ .../components/fixtures/data/constants.js | 34 +++++- ...ts_application_panel-Manifest.test.js.snap | 84 +++++++++++--- ...cation_panel-ManifestIconItem.test.js.snap | 106 ++++++++++++++++++ ...pplication_panel-ManifestPage.test.js.snap | 11 +- ...ponents_application_panel-Manifest.test.js | 6 + ...application_panel-ManifestIconItem.test.js | 48 ++++++++ 10 files changed, 322 insertions(+), 21 deletions(-) create mode 100644 devtools/client/application/test/browser/resources/manifest/icon.svg create mode 100644 devtools/client/application/test/browser/resources/manifest/load-ok-icons.html create mode 100644 devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestIconItem.test.js.snap create mode 100644 devtools/client/application/test/components/manifest/components_application_panel-ManifestIconItem.test.js diff --git a/devtools/client/application/test/browser/browser.ini b/devtools/client/application/test/browser/browser.ini index 4362ffb17186..a941705d2edd 100644 --- a/devtools/client/application/test/browser/browser.ini +++ b/devtools/client/application/test/browser/browser.ini @@ -4,8 +4,10 @@ subsuite = devtools skip-if = serviceworker_e10s support-files = head.js + resources/manifest/icon.svg resources/manifest/load-fail.html resources/manifest/load-no-manifest.html + resources/manifest/load-ok-icons.html resources/manifest/load-ok-json-error.html resources/manifest/load-ok-manifest-link.html resources/manifest/load-ok-warnings.html diff --git a/devtools/client/application/test/browser/browser_application_panel_manifest-display.js b/devtools/client/application/test/browser/browser_application_panel_manifest-display.js index 3720542fdae8..4161c79d3f49 100644 --- a/devtools/client/application/test/browser/browser_application_panel_manifest-display.js +++ b/devtools/client/application/test/browser/browser_application_panel_manifest-display.js @@ -95,10 +95,45 @@ add_task(async function() { await BrowserTestUtils.removeTab(tab); }); -function checkManifestMember(doc, member, expectedValue) { - const itemEl = [...doc.querySelectorAll(".js-manifest-item")].find(x => +add_task(async function() { + info("Test that we are displaying correctly a manifest with icons"); + const url = URL_ROOT + "resources/manifest/load-ok-icons.html"; + + await enableApplicationPanel(); + const { panel, tab } = await openNewTabAndApplicationPanel(url); + const doc = panel.panelWin.document; + + selectPage(panel, "manifest"); + + info("Waiting for the manifest to be displayed"); + await waitUntil(() => doc.querySelector(".js-manifest") !== null); + ok(true, "Manifest is being displayed"); + + // assert manifest icon is being displayed + const iconEl = findMemberByLabel(doc, "128x128image/svg"); + ok(iconEl !== null, "Icon label is being displayed with size and image type"); + const imgEl = iconEl.querySelector(".js-manifest-item-content img"); + ok( + imgEl && imgEl.src === URL_ROOT + "resources/manifest/icon.svg", + "An image is being displayed with the icon url as source" + ); + const iconTextContent = iconEl.querySelector(".js-manifest-item-content") + .textContent; + ok(iconTextContent.includes("any"), "Purpose is being displayed"); + + // close the tab + info("Closing the tab."); + await BrowserTestUtils.removeTab(tab); +}); + +function findMemberByLabel(doc, member) { + return [...doc.querySelectorAll(".js-manifest-item")].find(x => x.querySelector(".js-manifest-item-label").textContent.startsWith(member) ); +} + +function checkManifestMember(doc, member, expectedValue) { + const itemEl = findMemberByLabel(doc, member); ok( itemEl.querySelector(".js-manifest-item-content").textContent === expectedValue, diff --git a/devtools/client/application/test/browser/resources/manifest/icon.svg b/devtools/client/application/test/browser/resources/manifest/icon.svg new file mode 100644 index 000000000000..bfed2982bc9c --- /dev/null +++ b/devtools/client/application/test/browser/resources/manifest/icon.svg @@ -0,0 +1,4 @@ + +firefox-logo-nightly diff --git a/devtools/client/application/test/browser/resources/manifest/load-ok-icons.html b/devtools/client/application/test/browser/resources/manifest/load-ok-icons.html new file mode 100644 index 000000000000..539e5d22471d --- /dev/null +++ b/devtools/client/application/test/browser/resources/manifest/load-ok-icons.html @@ -0,0 +1,9 @@ + + + + Manifest successful load (with icons) + + + +

Manifest OK (with icons)

+ diff --git a/devtools/client/application/test/components/fixtures/data/constants.js b/devtools/client/application/test/components/fixtures/data/constants.js index 7087466d8107..92640f92a706 100644 --- a/devtools/client/application/test/components/fixtures/data/constants.js +++ b/devtools/client/application/test/components/fixtures/data/constants.js @@ -84,7 +84,13 @@ const MULTIPLE_WORKER_MIXED_DOMAINS_LIST = [ // props for a simple manifest const MANIFEST_SIMPLE = { - icons: [{ key: "1x1", value: "something.png" }], + icons: [ + { + key: { sizes: "1x1", contentType: "image/png" }, + value: { src: "something.png", purpose: "any" }, + type: "icon", + }, + ], identity: [{ key: "name", value: "foo", type: "string" }], presentation: [ { key: "lorem", value: "ipsum", type: "string" }, @@ -93,6 +99,7 @@ const MANIFEST_SIMPLE = { validation: [{ level: "warning", message: "This is a warning" }], }; +// props for a manifest with string values const MANIFEST_STRING_MEMBERS = { icons: [], identity: [{ key: "name", value: "foo", type: "string" }], @@ -111,6 +118,26 @@ const MANIFEST_COLOR_MEMBERS = { validation: [], }; +// props for a manifest with icon values +const MANIFEST_ICON_MEMBERS = { + icons: [ + { + key: { sizes: "1x1", contentType: "image/png" }, + value: { src: "something.png", purpose: "any" }, + type: "icon", + }, + { + key: { sizes: "", contentType: "" }, + value: { src: "something.svg", purpose: "any maskable" }, + type: "icon", + }, + ], + identity: [], + presentation: [], + validation: [], +}; + +// props for a manifest with values that have an unrecognized type const MANIFEST_UNKNOWN_TYPE_MEMBERS = { icons: [], identity: [{ key: "lorem", value: "ipsum", type: "foo" }], @@ -119,7 +146,7 @@ const MANIFEST_UNKNOWN_TYPE_MEMBERS = { }; const MANIFEST_WITH_ISSUES = { - icons: [{ key: "1x1", value: "something.png" }], + icons: [], identity: [{ key: "name", value: "foo", type: "string" }], presentation: [ { key: "lorem", value: "ipsum", type: "string" }, @@ -130,7 +157,7 @@ const MANIFEST_WITH_ISSUES = { // props for a manifest with no validation issues const MANIFEST_NO_ISSUES = { - icons: [{ key: "1x1", value: "something.png" }], + icons: [], identity: [{ key: "name", value: "foo", type: "string" }], presentation: [ { key: "lorem", value: "ipsum", type: "string" }, @@ -147,6 +174,7 @@ module.exports = { MANIFEST_WITH_ISSUES, MANIFEST_SIMPLE, MANIFEST_COLOR_MEMBERS, + MANIFEST_ICON_MEMBERS, MANIFEST_STRING_MEMBERS, MANIFEST_UNKNOWN_TYPE_MEMBERS, MULTIPLE_WORKER_LIST, diff --git a/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-Manifest.test.js.snap b/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-Manifest.test.js.snap index 73d78cc60a84..f6cac76df17d 100644 --- a/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-Manifest.test.js.snap +++ b/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-Manifest.test.js.snap @@ -53,14 +53,7 @@ exports[`Manifest does not render the issues section when the manifest is valid title="manifest-item-icons" > - - - something.png - - +
@@ -129,18 +122,81 @@ exports[`Manifest does render the issues section when the manifest is not valid + + + +
+ + +`; + +exports[`Manifest renders the expected snapshop for a manifest with icon members 1`] = ` +
+ +

+ + + + + +
+ + + + +
+ - - something.png - + +
diff --git a/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestIconItem.test.js.snap b/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestIconItem.test.js.snap new file mode 100644 index 000000000000..200c6306dee3 --- /dev/null +++ b/devtools/client/application/test/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`] = ` + + + + +
+ } + id="manifest-icon-purpose" + > + + + +`; + +exports[`ManifestIconItem renders the expected snapshop when all label members are missing 1`] = ` + + + + +
+ } + id="manifest-icon-purpose" + > + + + +`; + +exports[`ManifestIconItem renders the expected snapshot for a fully populated icon item 1`] = ` +, + "image/png", + ] + } +> + + + +
+ } + id="manifest-icon-purpose" + > + + + +`; diff --git a/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestPage.test.js.snap b/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestPage.test.js.snap index 6544a9f0ebc0..4700ccf935a1 100644 --- a/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestPage.test.js.snap +++ b/devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestPage.test.js.snap @@ -24,8 +24,15 @@ exports[`ManifestPage renders the expected snapshot when there is a manifest 1`] icons={ Array [ Object { - "key": "1x1", - "value": "something.png", + "key": Object { + "contentType": "image/png", + "sizes": "1x1", + }, + "type": "icon", + "value": Object { + "purpose": "any", + "src": "something.png", + }, }, ] } diff --git a/devtools/client/application/test/components/manifest/components_application_panel-Manifest.test.js b/devtools/client/application/test/components/manifest/components_application_panel-Manifest.test.js index 8f90a05fe560..54d3df80781d 100644 --- a/devtools/client/application/test/components/manifest/components_application_panel-Manifest.test.js +++ b/devtools/client/application/test/components/manifest/components_application_panel-Manifest.test.js @@ -13,6 +13,7 @@ const Manifest = createFactory( const { MANIFEST_COLOR_MEMBERS, + MANIFEST_ICON_MEMBERS, MANIFEST_STRING_MEMBERS, MANIFEST_UNKNOWN_TYPE_MEMBERS, MANIFEST_NO_ISSUES, @@ -39,6 +40,11 @@ describe("Manifest", () => { expect(wrapper).toMatchSnapshot(); }); + it("renders the expected snapshop for a manifest with icon members", () => { + const wrapper = shallow(Manifest(MANIFEST_ICON_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(); diff --git a/devtools/client/application/test/components/manifest/components_application_panel-ManifestIconItem.test.js b/devtools/client/application/test/components/manifest/components_application_panel-ManifestIconItem.test.js new file mode 100644 index 000000000000..79fcc0ad669c --- /dev/null +++ b/devtools/client/application/test/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("devtools/client/application/src/components/manifest/ManifestIconItem") +); + +/* + * 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(); + }); +});