Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-27 23:02:20 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1587690: Add a test for CSS property issues. r=ladybenko

Browse Source 
Depends on D48949

Differential Revision: https://phabricator.services.mozilla.com/D48950

--HG--
rename : devtools/client/inspector/compatibility/test/.eslintrc.js => devtools/client/inspector/compatibility/test/browser/.eslintrc.js
extra : moz-landing-system : lando
This commit is contained in:
Daisuke Akatsuka 2019-10-15 14:02:34 +00:00
parent b09ad6a127
commit 4d4cbd6fa5
5 changed files with 87 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
devtools/client/inspector/compatibility/components/IssueItem.js
View File

@ -17,10 +17,21 @@ class IssueItem extends PureComponent {
}
render() {
const { property, type } = this.props;
return dom.li(
{ key: `${this.props.property}:${this.props.type}` },
{
key: `${property}:${type}`,
"data-qa-property": property,
},
Object.entries(this.props).map(([key, value]) =>
dom.div({ key }, `${key}:${value}`)
dom.div(
{
key,
"data-qa-key": key,
"data-qa-value": `${value}`,
},
`${key}:${value}`
)
)
);
}

2
devtools/client/inspector/compatibility/test/.eslintrc.js → devtools/client/inspector/compatibility/test/browser/.eslintrc.js
View File

@ -2,5 +2,5 @@
module.exports = {
// Extend from the shared list of defined globals for mochitests.
"extends": "../../../../.eslintrc.mochitests.js",
"extends": "../../../../../.eslintrc.mochitests.js",
};

1
devtools/client/inspector/compatibility/test/browser/browser.ini
View File

@ -10,4 +10,5 @@ support-files =
!/devtools/client/shared/test/test-actor.js
!/devtools/client/shared/test/test-actor-registry.js
[browser_compatibility_css-property_issue.js]
[browser_compatibility_preference.js]

61
devtools/client/inspector/compatibility/test/browser/browser_compatibility_css-property_issue.js Normal file
View File

@ -0,0 +1,61 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test whether the deprecated CSS property is shown as issue correctly or not.
const MDNCompatibility = require("devtools/client/inspector/compatibility/lib/MDNCompatibility");
const TEST_URI = `
<style>
body {
color: blue;
border-block-color: lime;
user-modify: read-only;
}
</style>
<body></body>
`;
const TEST_DATA = [
{
type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY,
property: "border-block-color",
url: "https://developer.mozilla.org/docs/Web/CSS/border-block-color",
deprecated: false,
experimental: true,
unsupportedBrowsers: [],
},
{
type: MDNCompatibility.ISSUE_TYPE.CSS_PROPERTY_ALIASES,
property: "user-modify",
url: "https://developer.mozilla.org/docs/Web/CSS/user-modify",
aliases: ["user-modify"],
deprecated: true,
experimental: false,
unsupportedBrowsers: [],
},
];
add_task(async function() {
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
const { panel } = await openCompatibilityView();
info("Check the content of the issue item");
for (const testData of TEST_DATA) {
await waitUntil(() =>
panel.querySelector(`[data-qa-property=${testData.property}]`)
);
const issueEl = panel.querySelector(
`[data-qa-property=${testData.property}]`
);
ok(issueEl, `The element for ${testData.property} is displayed`);
for (const [key, value] of Object.entries(testData)) {
const fieldEl = issueEl.querySelector(`[data-qa-key=${key}]`);
ok(fieldEl, `The element for ${key} is displayed`);
is(fieldEl.dataset.qaValue, `${value}`, "The value is correct");
}
}
});

11
devtools/client/inspector/compatibility/test/browser/head.js
View File

@ -10,3 +10,14 @@ Services.scriptloader.loadSubScript(
"chrome://mochitests/content/browser/devtools/client/inspector/test/head.js",
this
);
async function openCompatibilityView() {
info("Open the compatibility view");
await pushPref("devtools.inspector.compatibility.enabled", true);
const { inspector } = await openInspectorSidebarTab("compatibilityview");
const panel = inspector.panelDoc.querySelector(
"#compatibilityview-panel .inspector-tabpanel"
);
return { panel };
}