summaryrefslogtreecommitdiffstats
path: root/browser/components/payments/test/mochitest/test_currency_amount.html
blob: dc1cbac8f2a84916c2db20658cd5dfa0e019cd37 (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
151
152
153
154
155
156
157
158
159
160
<!DOCTYPE HTML>
<html>
<!--
Test the currency-amount component
-->
<head>
  <meta charset="utf-8">
  <title>Test the currency-amount component</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="payments_common.js"></script>

  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
  <p id="display">
    <currency-amount id="amount1"></currency-amount>
  </p>
<div id="content" style="display: none">

</div>
<pre id="test">
</pre>
<script type="module">
/** Test the currency-amount component **/

import "../../res/components/currency-amount.js";

let amount1 = document.getElementById("amount1");

add_task(async function test_no_value() {
  ok(amount1, "amount1 exists");
  is(amount1.textContent, "", "Initially empty");

  amount1.currency = "USD";
  await asyncElementRendered();
  is(amount1.getAttribute("currency"), "USD", "Check @currency");
  ok(!amount1.hasAttribute("value"), "Check @value");
  is(amount1.currency, "USD", "Check .currency");
  is(amount1.value, null, "Check .value");
  is(amount1.textContent, "", "Empty while missing an amount");

  amount1.currency = null;
  await asyncElementRendered();
  ok(!amount1.hasAttribute("currency"), "Setting to null should remove @currency");
  ok(!amount1.hasAttribute("value"), "Check @value");
  is(amount1.currency, null, "Check .currency");
  is(amount1.value, null, "Check .value");
});

add_task(async function test_no_value() {
  amount1.value = 1.23;
  await asyncElementRendered();

  is(amount1.getAttribute("value"), "1.23", "Check @value");
  ok(!amount1.hasAttribute("currency"), "Check @currency");
  is(amount1.currency, null, "Check .currency");
  is(amount1.value, "1.23", "Check .value");
  is(amount1.textContent, "", "Empty while missing a currency");

  amount1.value = null;
  await asyncElementRendered();
  ok(!amount1.hasAttribute("value"), "Setting to null should remove @value");
  is(amount1.currency, null, "Check .currency");
  is(amount1.value, null, "Check .value");
});

add_task(async function test_valid_currency_amount_cad() {
  amount1.value = 12.34;
  info("waiting to set second property");
  await asyncElementRendered();
  amount1.currency = "CAD";
  await asyncElementRendered();

  is(amount1.getAttribute("value"), "12.34", "Check @value");
  is(amount1.value, "12.34", "Check .value");
  is(amount1.getAttribute("currency"), "CAD", "Check @currency");
  is(amount1.currency, "CAD", "Check .currency");
  is(amount1.textContent, "CA$12.34", "Check output format");
});

add_task(async function test_valid_currency_amount_displayCode() {
  amount1.value = 12.34;
  info("showing the currency code");
  await asyncElementRendered();
  amount1.currency = "CAD";
  await asyncElementRendered();
  amount1.displayCode = true;
  await asyncElementRendered();

  is(amount1.getAttribute("value"), "12.34", "Check @value");
  is(amount1.value, "12.34", "Check .value");
  is(amount1.getAttribute("currency"), "CAD", "Check @currency");
  is(amount1.currency, "CAD", "Check .currency");
  is(amount1.textContent, "CA$12.34 CAD", "Check output format");

  amount1.displayCode = false;
  await asyncElementRendered();
});


add_task(async function test_valid_currency_amount_eur_batched_prop() {
  info("setting two properties in a row synchronously");
  amount1.value = 98.76;
  amount1.currency = "EUR";
  await asyncElementRendered();

  is(amount1.getAttribute("value"), "98.76", "Check @value");
  is(amount1.value, "98.76", "Check .value");
  is(amount1.getAttribute("currency"), "EUR", "Check @currency");
  is(amount1.currency, "EUR", "Check .currency");
  is(amount1.textContent, "€98.76", "Check output format");
});

add_task(async function test_valid_currency_amount_eur_batched_attr() {
  info("setting two attributes in a row synchronously");
  amount1.setAttribute("value", 11.88);
  amount1.setAttribute("currency", "CAD");
  await asyncElementRendered();

  is(amount1.getAttribute("value"), "11.88", "Check @value");
  is(amount1.value, "11.88", "Check .value");
  is(amount1.getAttribute("currency"), "CAD", "Check @currency");
  is(amount1.currency, "CAD", "Check .currency");
  is(amount1.textContent, "CA$11.88", "Check output format");
});

add_task(async function test_invalid_currency() {
  isnot(amount1.textContent, "", "Start with initial content");
  amount1.value = 33.33;
  amount1.currency = "__invalid__";
  await asyncElementRendered();

  is(amount1.getAttribute("value"), "33.33", "Check @value");
  is(amount1.value, "33.33", "Check .value");
  is(amount1.getAttribute("currency"), "__invalid__", "Check @currency");
  is(amount1.currency, "__invalid__", "Check .currency");
  is(amount1.textContent, "", "Invalid currency should clear output");
});

add_task(async function test_invalid_value() {
  info("setting some initial values");
  amount1.value = 4.56;
  amount1.currency = "GBP";
  await asyncElementRendered();
  isnot(amount1.textContent, "", "Start with initial content");

  info("setting an alphabetical invalid value");
  amount1.value = "abcdef";
  await asyncElementRendered();

  is(amount1.getAttribute("value"), "abcdef", "Check @value");
  is(amount1.value, "abcdef", "Check .value");
  is(amount1.getAttribute("currency"), "GBP", "Check @currency");
  is(amount1.currency, "GBP", "Check .currency");
  is(amount1.textContent, "", "Invalid value should clear output");
});
</script>

</body>
</html>