Preview tab: Show overlay popup on selected mobile devices. (#5742)

* resolve #5700 Preview tab: Show overlay popup on selected mobile devices. * #5700 Preview tab: Show overlay popup on selected mobile devices: update test * work #5700 Preview tab: Show overlay popup on selected mobile devices. --------- Co-authored-by: OlgaLarina <[email protected]>
surveyjs · Aug 2, 2024 · 29a2ef7 · 29a2ef7
1 parent 45caa3e
commit 29a2ef7
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 10 deletions.
diff --git a/packages/survey-creator-core/src/components/simulator.scss b/packages/survey-creator-core/src/components/simulator.scss
@@ -71,4 +71,8 @@
   .svd-simulator-content {
     overflow-y: scroll;
   }
+}
+
+.svd-simulator .sv-popup--overlay {
+  --sv-popup-overlay-height: 100%;;
 }
diff --git a/packages/survey-creator-core/src/components/simulator.ts b/packages/survey-creator-core/src/components/simulator.ts
@@ -3,6 +3,14 @@ import { Base, CssClassBuilder, property, SurveyModel } from "survey-core";
 require("./simulator.scss");
 
 export class SurveySimulatorModel extends Base {
+  private surveyChanged() {
+    const _this = this;
+    this.survey.onOpenDropdownMenu.add((_, options) => {
+      const device = simulatorDevices[_this.activeDevice];
+      options.menuType = device.deviceType === "desktop" ? "dropdown" : (device.deviceType == "tablet" ? "popup" : "overlay");
+    });
+  }
+
   constructor() {
     super();
     // if (!!_toolbarHolder) {
@@ -37,7 +45,9 @@ export class SurveySimulatorModel extends Base {
   }
 
   @property({ defaultValue: true }) landscape: boolean;
-  @property() survey: SurveyModel;
+  @property({
+    onSet: (newVal: SurveyModel, target: SurveySimulatorModel) => { target.surveyChanged(); }
+  }) survey: SurveyModel;
   @property({ defaultValue: "desktop" }) device: string;
   @property({ defaultValue: "l" }) orientation: string;
   @property({ defaultValue: true }) considerDPI: boolean;

diff --git a/testCafe/preview/simulator.ts b/testCafe/preview/simulator.ts
@@ -0,0 +1,60 @@
+import { url, getTabbedMenuItemByText, setJSON, creatorTabPreviewName, getBarItemByTitle, getListItemByText } from "../helper";
+import { Selector } from "testcafe";
+const title = "Preview tab simulator";
+
+fixture`${title}`.page`${url}`.beforeEach(
+  async (t) => {
+    await t.maximizeWindow();
+  }
+);
+
+test("Simulator popups", async (t) => {
+  await setJSON({
+    "pages": [
+      {
+        "name": "page1",
+        "elements": [
+          {
+            "type": "dropdown",
+            "name": "question1",
+            "choices": [
+              "Item 1",
+              "Item 2",
+              "Item 3"
+            ]
+          }
+        ]
+      }
+    ]
+  });
+
+  const dropdownSelect = Selector(".sd-dropdown");
+  const dropdownPopup = Selector(".svd-simulator-content .sv-popup");
+  const dropdownPopupContainer = dropdownPopup.find(".sv-popup__container");
+  const tabletPopup = "sv-popup--tablet";
+  const overlayPopup = "sv-popup--dropdown-overlay";
+
+  await t
+    .click(getTabbedMenuItemByText(creatorTabPreviewName))
+    .expect(dropdownPopupContainer.visible).notOk()
+
+    .click(dropdownSelect)
+    .expect(dropdownPopupContainer.visible).ok()
+    .expect(dropdownPopup.classNames).notContains(overlayPopup)
+    .expect(dropdownPopup.classNames).notContains(tabletPopup)
+
+    .click(getBarItemByTitle("Select device type"))
+    .click(getListItemByText("iPad Air"))
+
+    .click(dropdownSelect)
+    .expect(dropdownPopupContainer.visible).ok()
+    .expect(dropdownPopup.classNames).contains(overlayPopup)
+    .expect(dropdownPopup.classNames).contains(tabletPopup)
+
+    .click(getBarItemByTitle("Select device type"))
+    .click(getListItemByText("iPhone 15"))
+    .click(dropdownSelect)
+    .expect(dropdownPopupContainer.visible).ok()
+    .expect(dropdownPopup.classNames).contains(overlayPopup)
+    .expect(dropdownPopup.classNames).notContains(tabletPopup);
+});
diff --git a/visualRegressionTests/tests/designer/etalons/test-tab-opened-dropdown-mobile.png b/visualRegressionTests/tests/designer/etalons/test-tab-opened-dropdown-mobile.png
diff --git a/visualRegressionTests/tests/designer/etalons/test-tab-opened-dropdown.png b/visualRegressionTests/tests/designer/etalons/test-tab-opened-dropdown.png
diff --git a/visualRegressionTests/tests/designer/test-tab.ts b/visualRegressionTests/tests/designer/test-tab.ts
@@ -1,5 +1,5 @@
 import { ClientFunction, Selector } from "testcafe";
-import { url, setJSON, getTabbedMenuItemByText, takeElementScreenshot, creatorTabPreviewName, explicitErrorHandler, urlPreviewThemeSwitcher, wrapVisualTest, getListItemByText, resetHoverToCreator } from "../../helper";
+import { url, setJSON, getTabbedMenuItemByText, takeElementScreenshot, creatorTabPreviewName, explicitErrorHandler, urlPreviewThemeSwitcher, wrapVisualTest, getListItemByText, resetHoverToCreator, getBarItemByTitle } from "../../helper";
 
 const title = "Test tab Screenshot";
 
@@ -328,7 +328,7 @@ test("empty survey", async (t) => {
 test("dropdown popup in simulator", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
     const simulator = Selector(".svd-simulator-content");
-    await t.resizeWindow(1800, 600);
+    await t.resizeWindow(1200, 1000);
     await setJSON({
       "logoPosition": "right",
       "pages": [
@@ -357,8 +357,7 @@ test("dropdown popup in simulator", async (t) => {
     });
 
     await t.click(getTabbedMenuItemByText(creatorTabPreviewName));
-    await t.click(Selector('[title="Select device type"]'));
-    await t.click(Selector("span").withText("iPhone SE"));
+    await t.resizeWindow(800, 800);
     await t.click(Selector('[data-name="nps-score"]'));
     await t.click(Selector("li.sv-list__item.sd-list__item span").withText("2"));
     await t.click(Selector('[data-name="nps-score"]'));
@@ -368,11 +367,8 @@ test("dropdown popup in simulator", async (t) => {
 
 test("dropdown popup in simulator - mobile", async (t) => {
   await wrapVisualTest(t, async (t, comparer) => {
-    await ClientFunction(() => {
-      window["Survey"]._setIsTouch(true);
-    })();
     const simulator = Selector(".svd-simulator-content");
-    await t.resizeWindow(400, 600);
+    await t.resizeWindow(1200, 1000);
     await setJSON({
       "logoPosition": "right",
       "pages": [
@@ -399,7 +395,10 @@ test("dropdown popup in simulator - mobile", async (t) => {
         }
       ]
     });
-    await t.click(Selector('[title="Preview"]'));
+    await t.click(getTabbedMenuItemByText(creatorTabPreviewName));
+    await t.click(Selector('[title="Select device type"]'));
+    await t.click(Selector("span").withText("iPhone SE"));
+    await t.click(getBarItemByTitle("Switch to portrait orientation"));
     await t.click(Selector('[data-name="nps-score"]'));
     await takeElementScreenshot("test-tab-opened-dropdown-mobile.png", simulator, t, comparer);
   });