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
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test adding and removing custom devices via the modal.
const L10N = new LocalizationHelper(
"devtools/client/locales/device.properties",
true
);
const device = {
name: "Test Device",
width: 400,
height: 570,
pixelRatio: 1.5,
userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
touch: true,
};
const unicodeDevice = {
name: "\u00B6\u00C7\u00DA\u00E7\u0126",
width: 400,
height: 570,
pixelRatio: 1.5,
userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
touch: true,
};
const TEST_URL = "data:text/html;charset=utf-8,";
addRDMTask(
TEST_URL,
async function ({ ui }) {
const { toolWindow } = ui;
const { document } = toolWindow;
await openDeviceModal(ui);
is(
getCustomHeaderEl(document),
null,
"There's no Custom header when we don't have custom devices"
);
info("Reveal device adder form, check that defaults match the viewport");
const adderShow = document.getElementById("device-add-button");
adderShow.click();
testDeviceAdder(ui, {
name: "Custom Device",
width: 320,
height: 480,
pixelRatio: window.devicePixelRatio,
userAgent: navigator.userAgent,
touch: false,
});
info("Fill out device adder form and save");
await addDeviceInModal(ui, device);
info("Verify device defaults to enabled in modal");
const deviceCb = [
...document.querySelectorAll(".device-input-checkbox"),
].find(cb => {
return cb.value == device.name;
});
ok(deviceCb, "Custom device checkbox added to modal");
ok(deviceCb.checked, "Custom device enabled");
const customHeaderEl = getCustomHeaderEl(document);
ok(customHeaderEl, "There's a Custom header when add a custom devices");
is(
customHeaderEl.textContent,
L10N.getStr(`device.custom`),
"The custom header has the expected text"
);
document.getElementById("device-close-button").click();
info("Look for custom device in device selector");
const deviceSelector = document.getElementById("device-selector");
await testMenuItems(toolWindow, deviceSelector, items => {
const menuItem = findMenuItem(items, device.name);
ok(menuItem, "Custom device menu item added to device selector");
});
},
{ waitForDeviceList: true }
);
addRDMTask(
TEST_URL,
async function ({ ui }) {
const { toolWindow } = ui;
const { store, document } = toolWindow;
info("Select existing device from the selector");
await selectDevice(ui, "Test Device");
await openDeviceModal(ui);
info(
"Reveal device adder form, check that defaults are based on selected device"
);
const adderShow = document.getElementById("device-add-button");
adderShow.click();
testDeviceAdder(
ui,
Object.assign({}, device, {
name: "Test Device (Custom)",
})
);
info("Remove previously added custom device");
// Close the form since custom device buttons are only shown when form is not open.
const cancelButton = document.getElementById("device-form-cancel");
cancelButton.click();
const deviceRemoveButton = document.querySelector(".device-remove-button");
const removed = Promise.all([
waitUntilState(store, state => !state.devices.custom.length),
once(ui, "device-association-removed"),
]);
deviceRemoveButton.click();
await removed;
info("Close the form before submitting.");
document.getElementById("device-close-button").click();
info("Ensure custom device was removed from device selector");
await waitUntilState(store, state => state.viewports[0].device == "");
const deviceSelectorTitle = document.querySelector("#device-selector");
is(
deviceSelectorTitle.textContent,
"Responsive",
"Device selector reset to no device"
);
info("Look for custom device in device selector");
const deviceSelector = document.getElementById("device-selector");
await testMenuItems(toolWindow, deviceSelector, menuItems => {
const menuItem = findMenuItem(menuItems, device.name);
ok(!menuItem, "Custom device option removed from device selector");
});
info("Ensure device properties like UA have been reset");
await testUserAgent(ui, navigator.userAgent);
},
{ waitForDeviceList: true }
);
addRDMTask(
TEST_URL,
async function ({ ui }) {
const { toolWindow } = ui;
const { document } = toolWindow;
await openDeviceModal(ui);
info("Reveal device adder form");
const adderShow = document.querySelector("#device-add-button");
adderShow.click();
info(
"Fill out device adder form by setting details to unicode device and save"
);
await addDeviceInModal(ui, unicodeDevice);
info("Verify unicode device defaults to enabled in modal");
const deviceCb = [
...document.querySelectorAll(".device-input-checkbox"),
].find(cb => {
return cb.value == unicodeDevice.name;
});
ok(deviceCb, "Custom unicode device checkbox added to modal");
ok(deviceCb.checked, "Custom unicode device enabled");
document.getElementById("device-close-button").click();
info("Look for custom unicode device in device selector");
const deviceSelector = document.getElementById("device-selector");
await testMenuItems(toolWindow, deviceSelector, items => {
const menuItem = findMenuItem(items, unicodeDevice.name);
ok(menuItem, "Custom unicode device option added to device selector");
});
},
{ waitForDeviceList: true }
);
addRDMTask(
TEST_URL,
async function ({ ui }) {
const { toolWindow } = ui;
const { document } = toolWindow;
// Check if the unicode custom device is present in the list of device options since
// we want to ensure that unicode device names are not forgotten after restarting RDM
// see bug 1379687
info("Look for custom unicode device in device selector");
const deviceSelector = document.getElementById("device-selector");
await testMenuItems(toolWindow, deviceSelector, items => {
const menuItem = findMenuItem(items, unicodeDevice.name);
ok(menuItem, "Custom unicode device option present in device selector");
});
},
{ waitForDeviceList: true }
);
function testDeviceAdder(ui, expected) {
const { document } = ui.toolWindow;
const nameInput = document.querySelector("#device-form-name input");
const [widthInput, heightInput] = document.querySelectorAll(
"#device-form-size input"
);
const pixelRatioInput = document.querySelector(
"#device-form-pixel-ratio input"
);
const userAgentInput = document.querySelector(
"#device-form-user-agent input"
);
const touchInput = document.querySelector("#device-form-touch input");
is(nameInput.value, expected.name, "Device name matches");
is(parseInt(widthInput.value, 10), expected.width, "Width matches");
is(parseInt(heightInput.value, 10), expected.height, "Height matches");
is(
parseFloat(pixelRatioInput.value),
expected.pixelRatio,
"devicePixelRatio matches"
);
is(userAgentInput.value, expected.userAgent, "User agent matches");
is(touchInput.checked, expected.touch, "Touch matches");
}
function getCustomHeaderEl(doc) {
return doc.querySelector(`.device-type-custom .device-header`);
}
|
