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:
Daisuke Akatsuka 2019-10-17 01:30:56 +00:00
parent 0e91f94568
commit 1cfc17bb27
4 changed files with 99 additions and 16 deletions

View File

@ -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]

View File

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

View File

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

View File

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