Migrate test/e2e/emulation/foldable-device_test.ts

Fixed: 416404363
Change-Id: I14b69dd0ab4379cc097f312ce5be814d89e36441
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/6787529
Auto-Submit: Liviu Rau <[email protected]>
Reviewed-by: Simon Zünd <[email protected]>
Commit-Queue: Simon Zünd <[email protected]>

Author: Liviu Rau

test/e2e/emulation/BUILD.gn

@@ -8,7 +8,6 @@ node_ts_library("emulation") {
   sources = [
     "custom-devices_test.ts",
     "dual-screen_test.ts",
-    "foldable-device_test.ts",
   ]
 
   deps = [

test/e2e/emulation/foldable-device_test.ts

@@ -165,10 +165,11 @@ export const clickDevicePosture =
   await waitForNotExpanded(DEVICE_POSTURE_DROPDOWN_SELECTOR, devToolsPage);
 };
 
-export const getDevicePostureDropDown = async () => {
+export const getDevicePostureDropDown =
+    async (devToolsPage: DevToolsPage = getBrowserAndPagesWrappers().devToolsPage) => {
   // dropdown menu for the posture selection.
-  const dropdown = await $(DEVICE_POSTURE_DROPDOWN_SELECTOR) as puppeteer.ElementHandle<HTMLButtonElement>;
-  return dropdown;
+  const dropdown = await devToolsPage.$(DEVICE_POSTURE_DROPDOWN_SELECTOR);
+  return dropdown as puppeteer.ElementHandle<HTMLButtonElement>| null;
 };
 
 export const clickToggleButton = async () => {

test/e2e/helpers/emulation-helpers.ts

@@ -6,6 +6,7 @@ import("../../../scripts/build/typescript/typescript.gni")
 
 ts_e2e_library("emulation") {
   sources = [
+    "foldable-device_test.ts",
     "media-query-inspector_test.ts",
     "responsive_test.ts",
   ]

test/e2e_non_hosted/emulation/BUILD.gn

@@ -0,0 +1,55 @@
+// Copyright 2020 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import {assert} from 'chai';
+
+import {
+  clickDevicePosture,
+  getDevicePostureDropDown,
+  getWidthOfDevice,
+  openDeviceToolbar,
+  selectFoldableDevice,
+  selectNonDualScreenDevice,
+} from '../../e2e/helpers/emulation-helpers.js';
+import type {DevToolsPage} from '../shared/frontend-helper.js';
+import type {InspectedPage} from '../shared/target-helper.js';
+
+const ZENBOOK_VERTICAL_SPANNED_WIDTH = '1706';
+const ZENBOOK_VERTICAL_WIDTH = '853';
+
+// The test needs to be adapted from a browser test to an e2e test.
+// The main difference is that we need to pass the devToolsPage and inspectedPage
+// instances to the helper functions.
+// The browser test used a beforeEach hook to setup the page, this is now
+// a helper function that is called at the beginning of each test.
+async function setup(devToolsPage: DevToolsPage, inspectedPage: InspectedPage) {
+  await inspectedPage.goToResource('emulation/dual-screen-inspector.html');
+  await devToolsPage.waitFor('.tabbed-pane-left-toolbar');
+  await openDeviceToolbar(devToolsPage, inspectedPage);
+}
+
+describe('Test the Device Posture API support', () => {
+  it('User can change the posture of a foldable device', async ({devToolsPage, inspectedPage}) => {
+    await setup(devToolsPage, inspectedPage);
+    await selectFoldableDevice(devToolsPage);
+    let widthSingle = await getWidthOfDevice(devToolsPage);
+    assert.strictEqual(widthSingle, ZENBOOK_VERTICAL_WIDTH);
+
+    await clickDevicePosture('Folded', devToolsPage);
+    const widthDual = await getWidthOfDevice(devToolsPage);
+    assert.strictEqual(widthDual, ZENBOOK_VERTICAL_SPANNED_WIDTH);
+
+    await clickDevicePosture('Continuous', devToolsPage);
+    widthSingle = await getWidthOfDevice(devToolsPage);
+    assert.strictEqual(widthSingle, ZENBOOK_VERTICAL_WIDTH);
+  });
+
+  it('User may not change the posture for a non-foldable screen device', async ({devToolsPage, inspectedPage}) => {
+    await setup(devToolsPage, inspectedPage);
+    await selectNonDualScreenDevice(devToolsPage);
+    // posture dropdown should not be found
+    const dropdown = await getDevicePostureDropDown(devToolsPage);
+    const hidden = dropdown ? await dropdown.evaluate(x => (x as Element).classList.contains('hidden')) : true;
+    assert.isTrue(hidden);
+  });
+});