summaryrefslogtreecommitdiffstats
path: root/browser/components/payments/test/mochitest/test_completion_error_page.html
blob: cb8e8097587aa5c713396df99dee5be5d3a770b9 (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
<!DOCTYPE HTML>
<html>
<!--
Test the completion-error-page component
-->
<head>
  <meta charset="utf-8">
  <title>Test the completion-error-page component</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="payments_common.js"></script>
  <script src="../../res/unprivileged-fallbacks.js"></script>

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
  <p id="display">
    <completion-error-page id="completion-timeout-error" class="illustrated"
            data-page-title="Sample Title"
            data-suggestion-heading="Sample suggestion heading"
            data-suggestion-1="Sample suggestion"
            data-suggestion-2="Sample suggestion"
            data-suggestion-3="Sample suggestion"
            data-branding-label="Sample Brand"
            data-done-button-label="OK"></completion-error-page>
  </p>
<div id="content" style="display: none">

</div>
<pre id="test">
</pre>
<script type="module">
/** Test the completion-error-page component **/

import "../../res/containers/completion-error-page.js";

let page = document.getElementById("completion-timeout-error");

add_task(async function test_no_values() {
  ok(page, "page exists");
  is(page.dataset.pageTitle, "Sample Title", "Title set on page");
  is(page.dataset.suggestionHeading, "Sample suggestion heading",
     "Suggestion heading set on page");
  is(page.dataset["suggestion-1"], "Sample suggestion",
     "Suggestion 1 set on page");
  is(page.dataset["suggestion-2"], "Sample suggestion",
     "Suggestion 2 set on page");
  is(page.dataset["suggestion-3"], "Sample suggestion",
     "Suggestion 3 set on page");
  is(page.dataset.brandingLabel, "Sample Brand", "Branding string set");

  page.dataset.pageTitle = "Oh noes! **host-name** is having an issue";
  page.dataset["suggestion-2"] = "You should probably blame **host-name**, not us";
  const displayHost = "allizom.com";
  let request = { topLevelPrincipal: { URI: { displayHost } } };
  await page.requestStore.setState({
    changesPrevented: false,
    request: Object.assign({}, request, {completeStatus: ""}),
    orderDetailsShowing: false,
    page: {
      id: "completion-timeout-error",
    },
  });
  await asyncElementRendered();

  is(page.requestStore.getState().request.topLevelPrincipal.URI.displayHost, displayHost,
     "State should have the displayHost set properly");
  is(page.querySelector("h2").textContent,
     `Oh noes! ${displayHost} is having an issue`,
     "Title includes host-name");
  is(page.querySelector("p").textContent,
     "Sample suggestion heading",
     "Suggestion heading set on page");
  is(page.querySelector("li:nth-child(1)").textContent, "Sample suggestion",
     "Suggestion 1 set on page");
  is(page.querySelector("li:nth-child(2)").textContent,
     `You should probably blame ${displayHost}, not us`,
     "Suggestion 2 includes host-name");
  is(page.querySelector(".branding").textContent,
     "Sample Brand",
     "Branding set on page");
  is(page.querySelector(".primary").textContent,
     "OK",
     "Primary button label set correctly");
});
</script>

</body>
</html>