summaryrefslogtreecommitdiffstats
path: root/devtools/client/inspector/markup/test/browser_markup_links_04.js
blob: fe77b4e8706626ffe351c4edf18b82d6af2500f4 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
/* Any copyright is dedicated to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Tests that the contextual menu shows the right items when clicking on a link
// in an attribute. Run the action to copy the link and check the clipboard.

const TEST_URL = URL_ROOT + "doc_markup_links.html";

const TOOLBOX_L10N = new LocalizationHelper(
  "devtools/client/locales/toolbox.properties"
);

// 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
// - popupNodeSelector: css selector for the element inside the attribute
//   element to use as the contextual menu anchor
// - isLinkFollowItemVisible: is the follow-link item expected to be displayed
// - isLinkCopyItemVisible: is the copy-link item expected to be displayed
// - linkFollowItemLabel: the expected label of the follow-link item
// - linkCopyItemLabel: the expected label of the copy-link item
const TEST_DATA = [
  {
    selector: "link",
    attributeName: "href",
    popupNodeSelector: ".link",
    isLinkFollowItemVisible: true,
    isLinkCopyItemVisible: true,
    linkFollowItemLabel: TOOLBOX_L10N.getStr(
      "toolbox.viewCssSourceInStyleEditor.label"
    ),
    linkCopyItemLabel: INSPECTOR_L10N.getStr(
      "inspector.menu.copyUrlToClipboard.label"
    ),
  },
  {
    selector: "link[rel=icon]",
    attributeName: "href",
    popupNodeSelector: ".link",
    isLinkFollowItemVisible: true,
    isLinkCopyItemVisible: true,
    linkFollowItemLabel: INSPECTOR_L10N.getStr(
      "inspector.menu.openUrlInNewTab.label"
    ),
    linkCopyItemLabel: INSPECTOR_L10N.getStr(
      "inspector.menu.copyUrlToClipboard.label"
    ),
  },
  {
    selector: "link",
    attributeName: "rel",
    popupNodeSelector: ".attr-value",
    isLinkFollowItemVisible: false,
    isLinkCopyItemVisible: false,
  },
  {
    selector: "output",
    attributeName: "for",
    popupNodeSelector: ".link",
    isLinkFollowItemVisible: true,
    isLinkCopyItemVisible: false,
    linkFollowItemLabel: INSPECTOR_L10N.getFormatStr(
      "inspector.menu.selectElement.label",
      "name"
    ),
  },
  {
    selector: "script",
    attributeName: "src",
    popupNodeSelector: ".link",
    isLinkFollowItemVisible: true,
    isLinkCopyItemVisible: true,
    linkFollowItemLabel: TOOLBOX_L10N.getStr(
      "toolbox.viewJsSourceInDebugger.label"
    ),
    linkCopyItemLabel: INSPECTOR_L10N.getStr(
      "inspector.menu.copyUrlToClipboard.label"
    ),
  },
  {
    selector: "p[for]",
    attributeName: "for",
    popupNodeSelector: ".attr-value",
    isLinkFollowItemVisible: false,
    isLinkCopyItemVisible: false,
  },
];

add_task(async function () {
  const { inspector } = await openInspectorForURL(TEST_URL);

  for (const test of TEST_DATA) {
    info("Selecting test node " + test.selector);
    await selectNode(test.selector, inspector);
    const nodeFront = inspector.selection.nodeFront;

    info("Finding the popupNode to anchor the context-menu to");
    const { editor } = await getContainerForSelector(test.selector, inspector);
    const popupNode = editor.attrElements
      .get(test.attributeName)
      .querySelector(test.popupNodeSelector);
    ok(popupNode, "Found the popupNode in attribute " + test.attributeName);

    info("Simulating a context click on the popupNode");
    const allMenuItems = openContextMenuAndGetAllItems(inspector, {
      target: popupNode,
    });

    const linkFollow = allMenuItems.find(i => i.id === "node-menu-link-follow");
    const linkCopy = allMenuItems.find(i => i.id === "node-menu-link-copy");

    is(
      linkFollow.visible,
      test.isLinkFollowItemVisible,
      "The follow-link item display is correct"
    );
    is(
      linkCopy.visible,
      test.isLinkCopyItemVisible,
      "The copy-link item display is correct"
    );

    if (test.isLinkFollowItemVisible) {
      is(
        linkFollow.label,
        test.linkFollowItemLabel,
        "the follow-link label is correct"
      );
    }
    if (test.isLinkCopyItemVisible) {
      is(
        linkCopy.label,
        test.linkCopyItemLabel,
        "the copy-link label is correct"
      );

      info("Get link from node attribute");
      const link = await nodeFront.getAttribute(test.attributeName);
      info("Resolve link to absolue URL");
      const expected = await inspector.inspectorFront.resolveRelativeURL(
        link,
        nodeFront
      );
      info("Check the clipboard to see if the correct URL was copied");
      await waitForClipboardPromise(() => linkCopy.click(), expected);
    }
  }
});