mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-23 02:05:42 +00:00
Bug 1588961: Add a test for the event that the selected node is changed. r=rcaliman
Depends on D49377 Differential Revision: https://phabricator.services.mozilla.com/D49378 --HG-- extra : moz-landing-system : lando
This commit is contained in:
parent
0e91f94568
commit
1cfc17bb27
@ -11,4 +11,5 @@ support-files =
|
||||
!/devtools/client/shared/test/test-actor-registry.js
|
||||
|
||||
[browser_compatibility_css-property_issue.js]
|
||||
[browser_compatibility_event_new-node.js]
|
||||
[browser_compatibility_preference.js]
|
||||
|
@ -43,19 +43,6 @@ add_task(async function() {
|
||||
|
||||
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");
|
||||
}
|
||||
}
|
||||
info("Check the content of the issue list");
|
||||
await assertIssueList(panel, TEST_DATA);
|
||||
});
|
||||
|
@ -0,0 +1,57 @@
|
||||
/* Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/ */
|
||||
|
||||
"use strict";
|
||||
|
||||
// Test whether the content of the issue list will be changed when the new node is selected.
|
||||
|
||||
const TEST_URI = `
|
||||
<style>
|
||||
body {
|
||||
border-block-color: lime;
|
||||
}
|
||||
|
||||
.has-issue {
|
||||
border-inline-color: lime;
|
||||
user-modify: read-only;
|
||||
}
|
||||
|
||||
.no-issue {
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div class="has-issue">has issue</div>
|
||||
<div class="no-issue">no issue</div>
|
||||
</body>
|
||||
`;
|
||||
|
||||
const TEST_DATA = [
|
||||
{
|
||||
selector: ".has-issue",
|
||||
expectedIssues: [
|
||||
{ property: "user-modify" },
|
||||
{ property: "border-inline-color" },
|
||||
],
|
||||
},
|
||||
{
|
||||
selector: ".no-issue",
|
||||
expectedIssues: [],
|
||||
},
|
||||
{
|
||||
selector: "body",
|
||||
expectedIssues: [{ property: "border-block-color" }],
|
||||
},
|
||||
];
|
||||
|
||||
add_task(async function() {
|
||||
await addTab("data:text/html;charset=utf-8," + encodeURIComponent(TEST_URI));
|
||||
|
||||
const { inspector, panel } = await openCompatibilityView();
|
||||
|
||||
for (const { selector, expectedIssues } of TEST_DATA) {
|
||||
info(`Check the issue list for ${selector} node`);
|
||||
await selectNode(selector, inspector);
|
||||
await assertIssueList(panel, expectedIssues);
|
||||
}
|
||||
});
|
@ -19,5 +19,43 @@ async function openCompatibilityView() {
|
||||
const panel = inspector.panelDoc.querySelector(
|
||||
"#compatibilityview-panel .inspector-tabpanel"
|
||||
);
|
||||
return { panel };
|
||||
return { inspector, panel };
|
||||
}
|
||||
|
||||
/**
|
||||
* Check whether the content of issue item element is matched with the expected values.
|
||||
*
|
||||
* @param {Element} panel
|
||||
* The Compatibility panel container element
|
||||
* @param {Array} expectedIssues
|
||||
* Array of the issue expected.
|
||||
* For the structure of issue items, see types.js.
|
||||
*/
|
||||
async function assertIssueList(panel, expectedIssues) {
|
||||
info("Check the number of issues");
|
||||
await waitUntil(
|
||||
() =>
|
||||
panel.querySelectorAll("[data-qa-property]").length ===
|
||||
expectedIssues.length
|
||||
);
|
||||
ok(true, "The number of issues is correct");
|
||||
|
||||
if (expectedIssues.length === 0) {
|
||||
// No issue.
|
||||
return;
|
||||
}
|
||||
|
||||
for (const expectedIssue of expectedIssues) {
|
||||
info(`Check the issue for ${expectedIssue.property}`);
|
||||
const issueEl = panel.querySelector(
|
||||
`[data-qa-property=${expectedIssue.property}]`
|
||||
);
|
||||
ok(issueEl, `The element for ${expectedIssue.property} is displayed`);
|
||||
|
||||
for (const [key, value] of Object.entries(expectedIssue)) {
|
||||
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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user