summaryrefslogtreecommitdiffstats
path: root/devtools/shared/commands/inspector/tests/browser_inspector_command_getSuggestionsForQuery.js
blob: e7b765b1d0ff66e1d01e057a81a6087477130bd1 (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
/* Any copyright is dedicated to the Public Domain.
 http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

add_task(async () => {
  // Build a test page with a remote iframe, using two distinct origins .com and .org
  const iframeHtml = encodeURIComponent(`<div id="iframe"></div>`);
  const html = encodeURIComponent(
    `<div class="foo bar">
       <div id="child"></div>
     </div>
     <iframe src="https://example.org/document-builder.sjs?html=${iframeHtml}"></iframe>`
  );
  const tab = await addTab(
    "https://example.com/document-builder.sjs?html=" + html
  );

  const commands = await CommandsFactory.forTab(tab);
  await commands.targetCommand.startListening();

  info(
    "Suggestions for 'di' with tag search, will match the two <div> elements in top document and the one in the iframe"
  );
  await assertSuggestion(
    commands,
    { query: "", firstPart: "di", state: "tag" },
    [
      {
        suggestion: "div",
        count: 3, // Matches the two <div> in the top document and the one in the iframe
        type: "tag",
      },
    ]
  );

  info(
    "Suggestions for 'ifram' with id search, will only match the <div> within the iframe"
  );
  await assertSuggestion(
    commands,
    { query: "", firstPart: "ifram", state: "id" },
    [
      {
        suggestion: "#iframe",
        count: 1,
        type: "id",
      },
    ]
  );

  info(
    "Suggestions for 'fo' with tag search, will match the class of the top <div> element"
  );
  await assertSuggestion(
    commands,
    { query: "", firstPart: "fo", state: "tag" },
    [
      {
        suggestion: ".foo",
        count: 1,
        type: "class",
      },
    ]
  );

  info(
    "Suggestions for classes, based on div elements, will match the two classes of top <div> element"
  );
  await assertSuggestion(
    commands,
    { query: "div", firstPart: "", state: "class" },
    [
      {
        suggestion: ".bar",
        count: 1,
        type: "class",
      },
      {
        suggestion: ".foo",
        count: 1,
        type: "class",
      },
    ]
  );

  info("Suggestion for non-existent tag names will return no suggestion");
  await assertSuggestion(
    commands,
    { query: "", firstPart: "marquee", state: "tag" },
    []
  );

  await commands.destroy();
});

async function assertSuggestion(
  commands,
  { query, firstPart, state },
  expectedSuggestions
) {
  const suggestions = await commands.inspectorCommand.getSuggestionsForQuery(
    query,
    firstPart,
    state
  );
  is(
    suggestions.length,
    expectedSuggestions.length,
    "Got the expected number of suggestions"
  );
  for (let i = 0; i < expectedSuggestions.length; i++) {
    info(` ## Asserting suggestion #${i}:`);
    const expectedSuggestion = expectedSuggestions[i];
    const [suggestion, count, type] = suggestions[i];
    is(
      suggestion,
      expectedSuggestion.suggestion,
      "The suggested string is valid"
    );
    is(count, expectedSuggestion.count, "The number of matches is valid");
    is(type, expectedSuggestion.type, "The type of match is valid");
  }
}