summaryrefslogtreecommitdiffstats
path: root/devtools/client/responsive/test/browser/browser_device_custom_remove.js
blob: 8d31aed6cfa45cb1a0686fa34ed8e22f69f94f66 (plain)
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
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */

"use strict";

// Test adding several devices and removing one to ensure the correct device is removed.

const TEST_URL = "data:text/html;charset=utf-8,";

const 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 device1 = Object.assign({}, device, {
  name: "Test Device 1",
});

const device2 = Object.assign({}, device, {
  name: "Test Device 2",
});

addRDMTask(
  TEST_URL,
  async function ({ ui }) {
    const { toolWindow } = ui;
    const { store, document } = toolWindow;

    info("Verify that remove buttons affect the correct device");

    const deviceSelector = document.getElementById("device-selector");

    await openDeviceModal(ui);

    info("Reveal device adder form");
    let adderShow = document.querySelector("#device-add-button");
    adderShow.click();

    info("Add test device 1");
    await addDeviceInModal(ui, device1);

    info("Reveal device adder form");
    adderShow = document.querySelector("#device-add-button");
    adderShow.click();

    info("Add test device 2");
    await addDeviceInModal(ui, device2);

    info("Verify all custom devices default to enabled in modal");
    const deviceCbs = [
      ...document.querySelectorAll(
        ".device-type-custom .device-input-checkbox"
      ),
    ];
    is(deviceCbs.length, 2, "Both devices have a checkbox in modal");
    for (const cb of deviceCbs) {
      ok(cb.checked, "Custom device enabled");
    }
    document.getElementById("device-close-button").click();

    info("Look for device 1 and 2 in device selector");

    await testMenuItems(toolWindow, deviceSelector, menuItems => {
      const deviceItem1 = findMenuItem(menuItems, device1.name);
      const deviceItem2 = findMenuItem(menuItems, device2.name);
      ok(deviceItem1, "Test device 1 menu item added to device selector");
      ok(deviceItem2, "Test device 2 menu item added to device selector");
    });

    await openDeviceModal(ui);

    info("Remove device 2");
    const deviceRemoveButtons = [
      ...document.querySelectorAll(".device-remove-button"),
    ];
    is(
      deviceRemoveButtons.length,
      2,
      "Both devices have a remove button in modal"
    );
    const removed = waitUntilState(
      store,
      state => state.devices.custom.length == 1
    );
    deviceRemoveButtons[1].click();
    await removed;
    document.getElementById("device-close-button").click();

    info("Ensure device 2 is no longer in device selector");
    await testMenuItems(toolWindow, deviceSelector, menuItems => {
      const deviceItem1 = findMenuItem(menuItems, device1.name);
      const deviceItem2 = findMenuItem(menuItems, device2.name);
      ok(deviceItem1, "Test device 1 menu item exists");
      ok(!deviceItem2, "Test device 2 menu item removed");
    });
  },
  { waitForDeviceList: true }
);

addRDMTask(
  TEST_URL,
  async function ({ ui }) {
    const { toolWindow } = ui;
    const { document } = toolWindow;

    const deviceSelector = document.getElementById("device-selector");

    info("Ensure device 1 is still in device selector");
    await testMenuItems(toolWindow, deviceSelector, menuItems => {
      const deviceItem1 = findMenuItem(menuItems, device1.name);
      const deviceItem2 = findMenuItem(menuItems, device2.name);
      ok(deviceItem1, "Test device 1 menu item exists");
      ok(!deviceItem2, "Test device 2 option removed");
    });

    await openDeviceModal(ui);

    info("Ensure device 1 is still in device modal");
    const deviceCbs = [
      ...document.querySelectorAll(
        ".device-type-custom .device-input-checkbox"
      ),
    ];
    is(deviceCbs.length, 1, "Only 1 custom present in modal");
    const deviceCb1 = deviceCbs.find(cb => cb.value == device1.name);
    ok(
      deviceCb1 && deviceCb1.checked,
      "Test device 1 checkbox exists and enabled"
    );

    info("Ensure device 2 is no longer in device modal");
    const deviceCb2 = deviceCbs.find(cb => cb.value == device2.name);
    ok(!deviceCb2, "Test device 2 checkbox does not exist");
  },
  { waitForDeviceList: true }
);