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
|
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test that adding a device, submitting it, and then editing it updates the device's
// original values when it is saved.
const TEST_URL = "data:text/html;charset=utf-8,";
const device = {
name: "Original Custom Device",
width: 320,
height: 480,
pixelRatio: 1,
userAgent: "Mozilla/5.0 (Mobile; rv:39.0) Gecko/39.0 Firefox/39.0",
touch: false,
};
const newDevice = {
name: "Edited Custom Device",
width: 300,
height: 900,
pixelRatio: 4,
userAgent: "Different User agent",
touch: true,
};
addRDMTask(
TEST_URL,
async function ({ ui }) {
const { toolWindow } = ui;
const { document } = toolWindow;
await openDeviceModal(ui);
info("Add device.");
const adderShow = document.querySelector("#device-add-button");
adderShow.click();
await addDeviceInModal(ui, device);
info("Submit the added device.");
let deviceSelector = document.getElementById("device-selector");
document.getElementById("device-close-button").click();
await testMenuItems(toolWindow, deviceSelector, menuItems => {
const originalDevice = findMenuItem(menuItems, device.name);
ok(originalDevice, "Original custom device menu item exists.");
});
info("Select the added device in menu.");
await selectDevice(ui, "Custom Device");
await openDeviceModal(ui);
info("Edit the device.");
const editorShow = document.querySelector(
".device-type-custom #device-edit-button"
);
editorShow.click();
await editDeviceInModal(ui, device, newDevice);
info("Ensure the edited device name is updated in the custom device list.");
const customDevicesList = document.querySelector(".device-type-custom");
const editedCustomDevice = customDevicesList.querySelector(".device-name");
is(
editedCustomDevice.textContent,
newDevice.name,
`${device.name} is updated to ${newDevice.name} in the custom device list`
);
info("Ensure the viewport width and height are updated in the toolbar.");
const [width, height] = document.querySelectorAll(
".text-input.viewport-dimension-input"
);
is(width.value, "300", "Viewport width is 300");
is(height.value, "900", "Viewport height is 900");
info("Ensure the pixel ratio is updated in the toolbar.");
const devicePixelRatioSpan = document.querySelector(
"#device-pixel-ratio-menu span"
);
is(
devicePixelRatioSpan.textContent,
"DPR: 4",
"Viewport pixel ratio is 4."
);
info("Ensure the user agent has been updated.");
const userAgentInput = document.querySelector("#user-agent-input");
is(
userAgentInput.value,
newDevice.userAgent,
`Viewport user agent is ${newDevice.userAgent}`
);
info("Ensure touch simulation has been updated");
const touchSimulation = document.querySelector("#touch-simulation-button");
ok(
touchSimulation.classList.contains("checked"),
"Viewport touch simulation is enabled."
);
info(
"Ensure the edited device is updated in the device selector when submitted"
);
document.getElementById("device-close-button").click();
deviceSelector = document.getElementById("device-selector");
await testMenuItems(toolWindow, deviceSelector, menuItems => {
const originalDevice = findMenuItem(menuItems, device.name);
const editedDevice = findMenuItem(menuItems, newDevice.name);
ok(!originalDevice, "Original custom device menu item does not exist");
ok(editedDevice, "Edited Custom Device menu item exists");
});
},
{ waitForDeviceList: true }
);
|
