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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
/**
* Makes sure Pie Charts have the right internal structure.
*/
add_task(async function () {
const { monitor } = await initNetMonitor(HTTPS_SIMPLE_URL, {
requestCount: 1,
});
info("Starting test... ");
const { document, windowRequire } = monitor.panelWin;
const { Chart } = windowRequire("devtools/client/shared/widgets/Chart");
const wait = waitForNetworkEvents(monitor, 1);
await navigateTo(HTTPS_SIMPLE_URL);
await wait;
const pie = Chart.Pie(document, {
width: 100,
height: 100,
data: [
{
size: 1,
label: "foo",
},
{
size: 2,
label: "bar",
},
{
size: 3,
label: "baz",
},
],
});
const { node } = pie;
const slicesContainer = node.querySelectorAll(".pie-chart-slice-container");
const slices = node.querySelectorAll(".pie-chart-slice");
const labels = node.querySelectorAll(".pie-chart-label");
ok(
node.classList.contains("pie-chart-container") &&
node.classList.contains("generic-chart-container"),
"A pie chart container was created successfully."
);
is(
node.getAttribute("aria-label"),
"Pie chart representing the size of each type of request in proportion to each other",
"pie chart container has expected aria-label"
);
is(
slicesContainer.length,
3,
"There should be 3 pie chart slices container created."
);
is(slices.length, 3, "There should be 3 pie chart slices created.");
ok(
slices[0]
.getAttribute("d")
.match(
/\s*M 50,50 L 49\.\d+,97\.\d+ A 47\.5,47\.5 0 0 1 49\.\d+,2\.5\d* Z/
),
"The first slice has the correct data."
);
ok(
slices[1]
.getAttribute("d")
.match(
/\s*M 50,50 L 91\.\d+,26\.\d+ A 47\.5,47\.5 0 0 1 49\.\d+,97\.\d+ Z/
),
"The second slice has the correct data."
);
ok(
slices[2]
.getAttribute("d")
.match(
/\s*M 50,50 L 50\.\d+,2\.5\d* A 47\.5,47\.5 0 0 1 91\.\d+,26\.\d+ Z/
),
"The third slice has the correct data."
);
is(
slicesContainer[0].getAttribute("aria-label"),
"baz: 50%",
"First slice container has expected aria-label"
);
is(
slicesContainer[1].getAttribute("aria-label"),
"bar: 33.33%",
"Second slice container has expected aria-label"
);
is(
slicesContainer[2].getAttribute("aria-label"),
"foo: 16.67%",
"Third slice container has expected aria-label"
);
ok(
slices[0].hasAttribute("largest"),
"The first slice should be the largest one."
);
ok(
slices[2].hasAttribute("smallest"),
"The third slice should be the smallest one."
);
is(
slices[0].getAttribute("data-statistic-name"),
"baz",
"The first slice's name is correct."
);
is(
slices[1].getAttribute("data-statistic-name"),
"bar",
"The first slice's name is correct."
);
is(
slices[2].getAttribute("data-statistic-name"),
"foo",
"The first slice's name is correct."
);
is(labels.length, 3, "There should be 3 pie chart labels created.");
is(labels[0].textContent, "baz", "The first label's text is correct.");
is(labels[1].textContent, "bar", "The first label's text is correct.");
is(labels[2].textContent, "foo", "The first label's text is correct.");
is(
labels[0].getAttribute("aria-hidden"),
"true",
"The first label has aria-hidden."
);
is(
labels[1].getAttribute("aria-hidden"),
"true",
"The first label has aria-hidden."
);
is(
labels[2].getAttribute("aria-hidden"),
"true",
"The first label has aria-hidden."
);
await teardown(monitor);
});
|
