1 files changed, 160 insertions, 0 deletions
diff --git a/browser/components/payments/test/mochitest/test_currency_amount.html b/browser/components/payments/test/mochitest/test_currency_amount.html
new file mode 100644
index 0000000000..dc1cbac8f2
--- /dev/null
+++ b/browser/components/payments/test/mochitest/test_currency_amount.html
@@ -0,0 +1,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>