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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test the content of device items in the modal.
const TEST_URL = "data:text/html;charset=utf-8,";
const {
parseUserAgent,
} = require("resource://devtools/client/responsive/utils/ua.js");
const L10N = new LocalizationHelper(
"devtools/client/locales/device.properties",
true
);
addRDMTask(
TEST_URL,
async function ({ ui }) {
const { toolWindow } = ui;
const { store, document } = toolWindow;
await openDeviceModal(ui);
const { devices } = store.getState();
ok(devices.types.length, "We have some device types");
for (const type of devices.types) {
const list = devices[type];
const header = document.querySelector(
`.device-type-${type} .device-header`
);
if (type == "custom") {
// we don't have custom devices, so there shouldn't be a header for it.
is(list.length, 0, `We don't have any custom devices`);
ok(!header, `There's no header for "custom"`);
continue;
}
ok(list.length, `We have ${type} devices`);
ok(header, `There's a header for ${type} devices`);
is(
header?.textContent,
L10N.getStr(`device.${type}`),
`Got expected text for ${type} header`
);
for (const item of list) {
info(`Check the element for ${item.name} on the modal`);
const targetEl = findDeviceLabel(item.name, document);
ok(targetEl, "The element for the device is on the modal");
const { browser, os } = parseUserAgent(item.userAgent);
const browserEl = targetEl.querySelector(".device-browser");
if (browser) {
ok(browserEl, "The element for the browser is in the device element");
const expectedClassName = browser.name.toLowerCase();
ok(
browserEl.classList.contains(expectedClassName),
`The browser element contains .${expectedClassName}`
);
} else {
ok(
!browserEl,
"The element for the browser is not in the device element"
);
}
const osEl = targetEl.querySelector(".device-os");
if (os) {
ok(osEl, "The element for the os is in the device element");
const expectedText = os.version
? `${os.name} ${os.version}`
: os.name;
is(
osEl.textContent,
expectedText,
"The text in os element is correct"
);
} else {
ok(!osEl, "The element for the os is not in the device element");
}
}
}
},
{ waitForDeviceList: true }
);
function findDeviceLabel(deviceName, document) {
const deviceNameEls = document.querySelectorAll(".device-name");
const targetEl = [...deviceNameEls].find(el => el.textContent === deviceName);
return targetEl ? targetEl.closest(".device-label") : null;
}
|
