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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test submitting display device changes on the device modal
const { getDevices } = require("devtools/client/shared/devices");
const addedDevice = {
"name": "Fake Phone RDM Test",
"width": 320,
"height": 570,
"pixelRatio": 1.5,
"userAgent": "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
"touch": true,
"firefoxOS": false,
"os": "custom",
"featured": true,
};
const TEST_URL = "data:text/html;charset=utf-8,";
const Types = require("devtools/client/responsive.html/types");
addRDMTask(TEST_URL, function* ({ ui }) {
let { store, document } = ui.toolWindow;
let modal = document.querySelector("#device-modal-wrapper");
let select = document.querySelector(".viewport-device-selector");
let submitButton = document.querySelector("#device-submit-button");
// Wait until the viewport has been added and the device list has been loaded
yield waitUntilState(store, state => state.viewports.length == 1
&& state.devices.listState == Types.deviceListState.LOADED);
openDeviceModal(ui);
info("Checking displayed device checkboxes are checked in the device modal.");
let checkedCbs = [...document.querySelectorAll(".device-input-checkbox")]
.filter(cb => cb.checked);
let remoteList = yield getDevices();
let featuredCount = remoteList.TYPES.reduce((total, type) => {
return total + remoteList[type].reduce((subtotal, device) => {
return subtotal + ((device.os != "fxos" && device.featured) ? 1 : 0);
}, 0);
}, 0);
is(featuredCount, checkedCbs.length,
"Got expected number of displayed devices.");
for (let cb of checkedCbs) {
ok(Object.keys(remoteList).filter(type => remoteList[type][cb.value]),
cb.value + " is correctly checked.");
}
// Tests where the user adds a non-featured device
info("Check the first unchecked device and submit new device list.");
let uncheckedCb = [...document.querySelectorAll(".device-input-checkbox")]
.filter(cb => !cb.checked)[0];
let value = uncheckedCb.value;
uncheckedCb.click();
submitButton.click();
ok(modal.classList.contains("closed") && !modal.classList.contains("opened"),
"The device modal is closed on submit.");
info("Checking that the new device is added to the user preference list.");
let preferredDevices = _loadPreferredDevices();
ok(preferredDevices.added.has(value), value + " in user added list.");
info("Checking new device is added to the device selector.");
let options = [...select.options];
is(options.length - 2, featuredCount + 1,
"Got expected number of devices in device selector.");
ok(options.filter(o => o.value === value)[0],
value + " added to the device selector.");
info("Reopen device modal and check new device is correctly checked");
openDeviceModal(ui);
ok([...document.querySelectorAll(".device-input-checkbox")]
.filter(cb => cb.checked && cb.value === value)[0],
value + " is checked in the device modal.");
// Tests where the user removes a featured device
info("Uncheck the first checked device different than the previous one");
let checkedCb = [...document.querySelectorAll(".device-input-checkbox")]
.filter(cb => cb.checked && cb.value != value)[0];
let checkedVal = checkedCb.value;
checkedCb.click();
submitButton.click();
info("Checking that the device is removed from the user preference list.");
preferredDevices = _loadPreferredDevices();
ok(preferredDevices.removed.has(checkedVal), checkedVal + " in removed list");
info("Checking that the device is not in the device selector.");
options = [...select.options];
is(options.length - 2, featuredCount,
"Got expected number of devices in device selector.");
ok(!options.filter(o => o.value === checkedVal)[0],
checkedVal + " removed from the device selector.");
info("Reopen device modal and check device is correctly unchecked");
openDeviceModal(ui);
ok([...document.querySelectorAll(".device-input-checkbox")]
.filter(cb => !cb.checked && cb.value === checkedVal)[0],
checkedVal + " is unchecked in the device modal.");
// Let's add a dummy device to simulate featured flag changes for next test
addDeviceForTest(addedDevice);
});
addRDMTask(TEST_URL, function* ({ ui }) {
let { store, document } = ui.toolWindow;
let select = document.querySelector(".viewport-device-selector");
// Wait until the viewport has been added and the device list has been loaded
yield waitUntilState(store, state => state.viewports.length == 1
&& state.devices.listState == Types.deviceListState.LOADED);
openDeviceModal(ui);
let remoteList = yield getDevices();
let featuredCount = remoteList.TYPES.reduce((total, type) => {
return total + remoteList[type].reduce((subtotal, device) => {
return subtotal + ((device.os != "fxos" && device.featured) ? 1 : 0);
}, 0);
}, 0);
let preferredDevices = _loadPreferredDevices();
// Tests to prove that reloading the RDM didn't break our device list
info("Checking new featured device appears in the device selector.");
let options = [...select.options];
is(options.length - 2, featuredCount
- preferredDevices.removed.size + preferredDevices.added.size,
"Got expected number of devices in device selector.");
ok(options.filter(o => o.value === addedDevice.name)[0],
"dummy device added to the device selector.");
ok(options.filter(o => preferredDevices.added.has(o.value))[0],
"device added by user still in the device selector.");
ok(!options.filter(o => preferredDevices.removed.has(o.value))[0],
"device removed by user not in the device selector.");
});
|
