mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

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
This commit is contained in:
Belén Albeza 2019-10-08 15:37:11 +00:00
Родитель 43493194a2
Коммит ece5d9420c
10 изменённых файлов: 322 добавлений и 21 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
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

39
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,

4
devtools/client/application/test/browser/resources/manifest/icon.svg Normal file
Просмотреть файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны
Режим "рядом"

После

Ширина:  |  Высота:  |  Размер: 19 KiB

9
devtools/client/application/test/browser/resources/manifest/load-ok-icons.html Normal file
Просмотреть файл

@ -0,0 +1,9 @@
<!doctype html>
<head>
<meta charset="utf-8">
<title>Manifest successful load (with icons)</title>
<link rel="manifest" href='data:application/manifest+json,{"name": "Foo", "background_color": "%23ff0000", "icons": [{ "sizes": "128x128", "src": "http://example.com/browser/devtools/client/application/test/browser/resources/manifest/icon.svg", "type": "image/svg"}]}'>
</head>
<body>
<h1>Manifest OK (with icons)</h1>
</body>

34
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,

84
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"
>
<table>
<tbody>
<ManifestItem
key="1x1"
label="1x1"
>
something.png
</ManifestItem>
</tbody>
<tbody />
</table>
</ManifestSection>
</article>
@ -129,18 +122,81 @@ exports[`Manifest does render the issues section when the manifest is not valid
</tbody>
</table>
</ManifestSection>
<ManifestSection
key="manifest-section-3"
title="manifest-item-icons"
>
<table>
<tbody />
</table>
</ManifestSection>
</article>
`;
exports[`Manifest renders the expected snapshop 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>
<ManifestItem
key="1x1"
label="1x1"
>
something.png
</ManifestItem>
<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>

106
devtools/client/application/test/components/manifest/__snapshots__/components_application_panel-ManifestIconItem.test.js.snap Normal file
Просмотреть файл

@ -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>
`;

11
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",
},
},
]
}

6
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();

48
devtools/client/application/test/components/manifest/components_application_panel-ManifestIconItem.test.js Normal file
Просмотреть файл

@ -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();
});
});