1 files changed, 155 insertions, 0 deletions
diff --git a/devtools/client/responsive/test/browser/browser_device_state_restore.js b/devtools/client/responsive/test/browser/browser_device_state_restore.js
new file mode 100644
index 0000000000..f8778795c2
--- /dev/null
+++ b/devtools/client/responsive/test/browser/browser_device_state_restore.js
@@ -0,0 +1,155 @@
+/* Any copyright is dedicated to the Public Domain.
+http://creativecommons.org/publicdomain/zero/1.0/ */
+
+"use strict";
+
+// Test that the previous selected device is restored when reopening RDM.
+
+const TEST_URL = "data:text/html;charset=utf-8,";
+const DEFAULT_DPPX = window.devicePixelRatio;
+
+/* eslint-disable max-len */
+const TEST_DEVICE = {
+  name: "iPhone 6/7/8",
+  width: 375,
+  height: 667,
+  pixelRatio: 2,
+  userAgent:
+    "Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1",
+  touch: true,
+  firefoxOS: false,
+  os: "iOS",
+  featured: true,
+};
+/* eslint-enable max-len */
+
+// Add the device to the list
+const {
+  updatePreferredDevices,
+} = require("resource://devtools/client/responsive/actions/devices.js");
+updatePreferredDevices({
+  added: [TEST_DEVICE.name],
+  removed: [],
+});
+
+const Types = require("resource://devtools/client/responsive/types.js");
+
+addRDMTask(
+  TEST_URL,
+  async function ({ ui }) {
+    const { store } = ui.toolWindow;
+
+    reloadOnUAChange(true);
+
+    // Wait until the viewport has been added and the device list has been loaded
+    await waitUntilState(
+      store,
+      state =>
+        state.viewports.length == 1 &&
+        state.devices.listState == Types.loadableState.LOADED
+    );
+
+    info("Checking the default RDM state.");
+    testViewportDeviceMenuLabel(ui, "Responsive");
+    testViewportDimensions(ui, 320, 480);
+    await testUserAgent(ui, DEFAULT_UA);
+    await testDevicePixelRatio(ui, DEFAULT_DPPX);
+    await testTouchEventsOverride(ui, false);
+
+    info("Select a device");
+    const waitForReload = await watchForDevToolsReload(ui.getViewportBrowser());
+    await selectDevice(ui, TEST_DEVICE.name);
+    await waitForReload();
+    await waitForViewportResizeTo(ui, TEST_DEVICE.width, TEST_DEVICE.height);
+
+    info("Checking the RDM device state.");
+    testViewportDeviceMenuLabel(ui, TEST_DEVICE.name);
+    await testUserAgent(ui, TEST_DEVICE.userAgent);
+    await testDevicePixelRatio(ui, TEST_DEVICE.pixelRatio);
+    await testTouchEventsOverride(ui, TEST_DEVICE.touch);
+
+    reloadOnUAChange(false);
+  },
+  { waitForDeviceList: true }
+);
+
+addRDMTaskWithPreAndPost(
+  TEST_URL,
+  function rdmPreTask({ browser }) {
+    reloadOnUAChange(true);
+  },
+  async function ({ ui }) {
+    // Note: This code might be racy. Call watchForDevToolsReload as early as
+    // possible to catch the reload that will happen on RDM startup.
+    // We cannot easily call watchForDevToolsReload in the preTask because it
+    // needs RDM to be already started. Otherwise it will not find any devtools
+    // UI to wait for.
+    const waitForReload = await watchForDevToolsReload(ui.getViewportBrowser());
+
+    const { store } = ui.toolWindow;
+
+    info(
+      "Reopening RDM and checking that the previous device state is restored."
+    );
+
+    // Wait until the viewport has been added and the device list has been loaded
+    await waitUntilState(
+      store,
+      state =>
+        state.viewports.length == 1 &&
+        state.viewports[0].device === TEST_DEVICE.name &&
+        state.devices.listState == Types.loadableState.LOADED
+    );
+    await waitForViewportResizeTo(ui, TEST_DEVICE.width, TEST_DEVICE.height);
+    await waitForReload();
+
+    info("Checking the restored RDM state.");
+    testViewportDeviceMenuLabel(ui, TEST_DEVICE.name);
+    testViewportDimensions(ui, TEST_DEVICE.width, TEST_DEVICE.height);
+    await testUserAgent(ui, TEST_DEVICE.userAgent);
+    await testDevicePixelRatio(ui, TEST_DEVICE.pixelRatio);
+    await testTouchEventsOverride(ui, TEST_DEVICE.touch);
+
+    info("Rotating the viewport.");
+    rotateViewport(ui);
+
+    reloadOnUAChange(false);
+  },
+  function rdmPostTask({ browser }) {},
+  { waitForDeviceList: true }
+);
+
+addRDMTask(
+  TEST_URL,
+  async function ({ ui }) {
+    const { store } = ui.toolWindow;
+
+    reloadOnUAChange(true);
+
+    info(
+      "Reopening RDM and checking that the previous device state is restored."
+    );
+
+    // Wait until the viewport has been added and the device list has been loaded
+    await waitUntilState(
+      store,
+      state =>
+        state.viewports.length == 1 &&
+        state.viewports[0].device === TEST_DEVICE.name &&
+        state.devices.listState == Types.loadableState.LOADED
+    );
+    await waitForViewportResizeTo(ui, TEST_DEVICE.height, TEST_DEVICE.width);
+    const waitForReload = await watchForDevToolsReload(ui.getViewportBrowser());
+    await waitForReload();
+
+    info("Checking the restored RDM state.");
+    testViewportDeviceMenuLabel(ui, TEST_DEVICE.name);
+    testViewportDimensions(ui, TEST_DEVICE.height, TEST_DEVICE.width);
+    await testUserAgent(ui, TEST_DEVICE.userAgent);
+    await testDevicePixelRatio(ui, TEST_DEVICE.pixelRatio);
+    await testTouchEventsOverride(ui, TEST_DEVICE.touch);
+
+    reloadOnUAChange(false);
+  },
+  { waitForDeviceList: true }
+);