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
|
<!DOCTYPE HTML>
<html>
<!--
Test the fxaccounts-button component
-->
<head>
<meta charset="utf-8">
<title>Test the fxaccounts-button component</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<script type="module" src="chrome://browser/content/aboutlogins/components/fxaccounts-button.mjs"></script>
<script src="aboutlogins_common.js"></script>
<link rel="stylesheet" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<p id="display">
</p>
<div id="content" style="display: none">
<iframe id="templateFrame" src="chrome://browser/content/aboutlogins/aboutLogins.html"
sandbox="allow-same-origin"></iframe>
</div>
<pre id="test">
</pre>
<script>
/** Test the fxaccounts-button component **/
const TEST_AVATAR_URL = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==";
let gFxAccountsButton;
add_setup(async () => {
let templateFrame = document.getElementById("templateFrame");
let displayEl = document.getElementById("display");
await importDependencies(templateFrame, displayEl);
gFxAccountsButton = document.createElement("fxaccounts-button");
displayEl.appendChild(gFxAccountsButton);
});
add_task(async function test_default_state() {
ok(gFxAccountsButton, "FxAccountsButton exists");
ok(!isHidden(gFxAccountsButton.shadowRoot.querySelector(".logged-out-view")),
"logged-out-view view is visible by default");
ok(isHidden(gFxAccountsButton.shadowRoot.querySelector(".logged-in-view")),
"logged-in-view view is hidden by default");
});
add_task(async function test_logged_in_without_login_syncing() {
gFxAccountsButton.updateState({
fxAccountsEnabled: true,
loggedIn: true,
loginSyncingEnabled: false,
});
ok(isHidden(gFxAccountsButton.shadowRoot.querySelector(".logged-out-view")),
"logged-out-view view is hidden");
ok(!isHidden(gFxAccountsButton.shadowRoot.querySelector(".logged-in-view")),
"logged-in-view view is visible");
});
add_task(async function test_logged_in_with_login_syncing() {
const TEST_EMAIL = "test@example.com";
gFxAccountsButton.updateState({
fxAccountsEnabled: true,
loggedIn: true,
loginSyncingEnabled: true,
email: TEST_EMAIL,
avatarURL: TEST_AVATAR_URL,
});
ok(isHidden(gFxAccountsButton.shadowRoot.querySelector(".logged-out-view")),
"logged-out-view view is hidden");
ok(!isHidden(gFxAccountsButton.shadowRoot.querySelector(".logged-in-view")),
"logged-in-view view is visible");
is(gFxAccountsButton.shadowRoot.querySelector(".fxaccount-email").textContent,
TEST_EMAIL,
"email should be shown");
is(gFxAccountsButton.shadowRoot.querySelector(".fxaccounts-avatar-button").style.getPropertyValue("--avatar-url"),
`url(${TEST_AVATAR_URL})`,
"--avatar-url should be set");
});
add_task(async function test_fxaccounts_disabled() {
gFxAccountsButton.updateState({
fxAccountsEnabled: false,
});
ok(isHidden(gFxAccountsButton),
"the whole button is hidden when fxaccounts are disabled");
});
</script>
</body>
</html>
|
