Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
/* Any copyright is dedicated to the Public Domain.
"use strict";
// Tests that the contextual menu shows the right items when clicking on a link
// in aria attributes.
const TEST_URL = URL_ROOT + "doc_markup_links_aria_attributes.html";
// The test case array contains objects with the following properties:
// - selector: css selector for the node to select in the inspector
// - attributeName: name of the attribute to test
// - links: an array of id strings that are expected to be in the attribute
const TEST_DATA = [
{
selector: "#aria-activedescendant",
attributeName: "aria-activedescendant",
links: [{ id: "activedescendant01" }],
},
{
selector: "#aria-controls",
attributeName: "aria-controls",
links: [{ id: "controls01" }, { id: "controls02" }],
},
{
selector: "#aria-describedby",
attributeName: "aria-describedby",
links: [{ id: "describedby01" }, { id: "describedby02" }],
},
{
selector: "#aria-details",
attributeName: "aria-details",
links: [{ id: "details01" }, { id: "details02" }],
},
{
selector: "#aria-errormessage",
attributeName: "aria-errormessage",
links: [{ id: "errormessage01" }],
},
{
selector: "#aria-flowto",
attributeName: "aria-flowto",
links: [{ id: "flowto01" }, { id: "flowto02" }],
},
{
selector: "#aria-labelledby",
attributeName: "aria-labelledby",
links: [{ id: "labelledby01" }, { id: "labelledby02" }],
},
{
selector: "#aria-owns",
attributeName: "aria-owns",
links: [{ id: "owns01" }, { id: "owns02" }],
},
{
getContainer: async inspector => {
info("Find and expand the test-component shadow DOM host.");
const hostFront = await getNodeFront("test-component", inspector);
const hostContainer = inspector.markup.getContainer(hostFront);
await expandContainer(inspector, hostContainer);
info("Expand the shadow root");
const shadowRootContainer = hostContainer.getChildContainers()[0];
await expandContainer(inspector, shadowRootContainer);
info("Expand the slot");
const slotContainer = shadowRootContainer.getChildContainers()[0];
is(
slotContainer.elt
.querySelector(`[data-attr="id"]`)
.getAttribute("data-value"),
"aria-describedby-shadow-dom",
`This is the container for button#aria-describedby-shadow-dom`
);
// The test expect the node to be selected
const updated = inspector.once("inspector-updated");
inspector.selection.setNodeFront(slotContainer.node, { reason: "test" });
await updated;
return slotContainer;
},
attributeName: "aria-describedby",
links: [{ id: "describedby01", valid: false }, { id: "describedbyshadow" }],
},
{
selector: "#empty-attributes",
attributeName: "aria-activedescendant",
links: [],
},
{
selector: "#empty-attributes",
attributeName: "aria-details",
links: [],
},
];
add_task(async function () {
const { inspector } = await openInspectorForURL(TEST_URL);
for (const test of TEST_DATA) {
let editor;
if (typeof test.getContainer === "function") {
({ editor } = await test.getContainer(inspector));
} else {
info("Selecting test node " + test.selector);
await selectNode(test.selector, inspector);
info("Finding the popupNode to anchor the context-menu to");
({ editor } = await getContainerForSelector(test.selector, inspector));
}
const attributeEl = editor.attrElements.get(test.attributeName);
const linksEl = attributeEl.querySelectorAll(".link");
is(
linksEl.length,
test.links.length,
"We have the expected number of links in attribute " + test.attributeName
);
for (let i = 0; i < test.links.length; i++) {
info(`Checking link # ${i} for attribute "${test.attributeName}"`);
const linkEl = linksEl[i];
ok(linkEl, "Found the link");
info("Simulating a context click on the link");
const allMenuItems = openContextMenuAndGetAllItems(inspector, {
target: linkEl,
});
const linkFollow = allMenuItems.find(
({ id }) => id === "node-menu-link-follow"
);
const linkCopy = allMenuItems.find(
({ id }) => id === "node-menu-link-copy"
);
is(linkFollow.visible, true, "The follow-link item is visible");
is(linkCopy.visible, false, "The copy-link item is not visible");
const { id: expectedReferencedNodeId } = test.links[i];
const linkFollowItemLabel = INSPECTOR_L10N.getFormatStr(
"inspector.menu.selectElement.label",
expectedReferencedNodeId
);
is(
linkFollow.label,
linkFollowItemLabel,
"the follow-link label is correct"
);
info("Check that select node button is displayed");
const buttonEl = linkEl.querySelector("button.select-node");
ok(buttonEl, "Found the select node button");
is(
buttonEl.getAttribute("title"),
linkFollowItemLabel,
"Button has expected title"
);
if (test.links[i].valid !== false) {
info("Check that clicking on button selects the associated node");
const onSelection = inspector.selection.once("new-node-front");
buttonEl.click();
await onSelection;
is(
inspector.selection.nodeFront.id,
expectedReferencedNodeId,
"The expected new node was selected"
);
} else {
info(
"Check that clicking on button triggers idref-attribute-link-failed event"
);
const onIdrefAttributeLinkFailed = inspector.markup.once(
"idref-attribute-link-failed"
);
const onSelection = inspector.selection.once("new-node-front");
const onTimeout = wait(500).then(() => "TIMEOUT");
buttonEl.click();
await onIdrefAttributeLinkFailed;
ok(true, "Got expected idref-attribute-link-failed event");
const res = await Promise.race([onSelection, onTimeout]);
is(res, "TIMEOUT", "Clicking the button did not select a new node");
}
}
}
});