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
|
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<!DOCTYPE HTML>
<html>
<!--
Test that List renders correctly.
-->
<head>
<meta charset="utf-8">
<title>List component test</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
<link rel="stylesheet" href="chrome://devtools/skin/light-theme.css" type="text/css">
</head>
<body>
<pre id="test">
<script src="head.js" type="application/javascript"></script>
<script src="list.snapshots.js" type="application/javascript"></script>
<script type="application/javascript">
"use strict";
window.onload = async function() {
try {
const { div } = require("devtools/client/shared/vendor/react-dom-factories");
const React = browserRequire("devtools/client/shared/vendor/react");
const {
Simulate,
renderIntoDocument,
findRenderedDOMComponentWithClass,
scryRenderedDOMComponentsWithTag,
scryRenderedComponentsWithType,
} = browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
const { List, ListItem } =
browserRequire("devtools/client/shared/components/List");
const testItems = [
{
component: div({ className: "item-1" }, "Test List Item 1"),
className: "list-item-1",
key: "list-item-1",
},
{
component: div({ className: "item-2" }, "Test List Item 2"),
className: "list-item-2",
key: "list-item-2",
},
{
component: div({ className: "item-3" }, "Test List Item 3"),
className: "list-item-3",
key: "list-item-3",
},
];
const listReactEl = React.createElement(List, {
items: testItems,
labelledBy: "test-labelledby",
});
const list = renderIntoDocument(listReactEl);
const listEl = findRenderedDOMComponentWithClass(list, "list");
const items = scryRenderedComponentsWithType(list, ListItem);
const itemEls = scryRenderedDOMComponentsWithTag(list, "li");
function testCurrent(index) {
is(list.state.current, index, "Correct current item.");
is(listEl.getAttribute("aria-activedescendant"), testItems[index].key,
"Correct active descendant.");
}
is(items.length, 3, "Correct number of list item components in tree.");
is(itemEls.length, 3, "Correct number of list items is rendered.");
info("Testing initial tree properties.");
for (let index = 0; index < items.length; index++) {
const item = items[index];
const itemEl = itemEls[index];
const { active, current, item: itemProp } = item.props;
const content = itemEl.querySelector(".list-item-content");
is(active, false, "Correct active state.");
is(current, false, "Correct current state.");
is(itemProp, testItems[index], "Correct rendered item.");
is(item.contentRef.current, content, "Correct content ref.");
is(itemEl.className, testItems[index].className, "Correct list item class.");
is(itemEl.id, testItems[index].key, "Correct list item it.");
is(content.getAttribute("role"), "presentation", "Correct content role.");
is(content.innerHTML,
`<div class="item-${index + 1}">Test List Item ${index + 1}</div>`,
"Content rendered correctly.");
}
is(list.state.current, null, "Current item is not set by default.");
is(list.state.active, null, "Active item is not set by default.");
is(list.listRef.current, listEl, "Correct list ref.");
is(listEl.className, "list", "Correct list class.");
is(listEl.tabIndex, 0, "List is focusable.");
ok(!listEl.hasAttribute("aria-label"), "List has no label.");
is(listEl.getAttribute("aria-labelledby"), "test-labelledby",
"Correct list labelled by attribute.");
ok(!listEl.hasAttribute("aria-activedescendant"),
"No active descendant set by default.");
Simulate.focus(listEl);
testCurrent(0);
Simulate.click(itemEls[2]);
testCurrent(2);
Simulate.blur(listEl);
testCurrent(2);
Simulate.focus(listEl);
testCurrent(2);
} catch (e) {
ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
} finally {
SimpleTest.finish();
}
};
</script>
</pre>
</body>
</html>
|
