Resolved #6030 - Introduce a public API to change a default device ty…

…pe within a Preview tab

packages/survey-creator-core/src/components/tabs/test-plugin.ts

@@ -22,14 +22,29 @@ export class TabTestPlugin implements ICreatorPlugin {
   private simulatorTheme: any = surveyCss[defaultV2ThemeName];
 
   public model: TestSurveyTabViewModel;
+  public defaultDevice: string = "desktop";
+  private _currentDevice: string = "";
+  public get currentDevice(): string {
+    if (!!this.model) {
+      this._currentDevice = this.model.simulator.device;
+    }
+    return this._currentDevice;
+  }
+  public set currentDevice(newValue: string) {
+    this.setDevice(newValue);
+  }
 
-  private setDevice(newVal: string) {
-    this.model.simulator.device = newVal;
-    this.model.simulator.resetZoomParameters();
-    let currentType = simulatorDevices[this.model.simulator.device].deviceType;
+  private setDevice(newValue: string) {
+    this._currentDevice = newValue;
+    if (!!this.model) {
+      this.model.simulator.device = newValue;
+      this.model.simulator.resetZoomParameters();
+    }
+    let currentType = simulatorDevices[this._currentDevice || this.defaultDevice].deviceType;
     this.orientationSelectorAction.enabled = currentType != "desktop";
     this.deviceSelectorAction.iconName = "icon-device-" + currentType;
     this.deviceSelectorAction.title = getLocString("pe.simulator");
+    this.deviceSelectorAction.data.selectedItem = { id: this._currentDevice || this.defaultDevice };
   }
   private setDefaultLanguageOption(opt: boolean | string) {
     const vis: boolean = opt === true || opt === "all" || (opt === "auto" && this.model.survey.getUsedLocales().length > 1);
@@ -81,8 +96,10 @@ export class TabTestPlugin implements ICreatorPlugin {
     this.createActions().forEach(action => creator.toolbar.actions.push(action));
   }
   public activate(): void {
-    this.model = new TestSurveyTabViewModel(this.creator, this.simulatorTheme);
-    this.model.simulator.landscape = this.creator.previewOrientation != "portrait";
+    const tabModel = new TestSurveyTabViewModel(this.creator, this.simulatorTheme);
+    tabModel.simulator.device = this.currentDevice || this.defaultDevice;
+    tabModel.simulator.landscape = this.creator.previewOrientation != "portrait";
+    this.model = tabModel;
     this.update();
   }
   public update(): void {
@@ -108,6 +125,7 @@ export class TabTestPlugin implements ICreatorPlugin {
   }
   public deactivate(): boolean {
     if (this.model) {
+      this._currentDevice = this.model.simulator.device;
       this.simulatorTheme = this.model.simulator.survey.css;
       this.model.onSurveyCreatedCallback = undefined;
       this.model.dispose();

packages/survey-creator-core/src/components/tabs/theme-plugin.ts

@@ -275,8 +275,13 @@ export class ThemeTabPlugin implements ICreatorPlugin {
 
     creator.onPropertyChanged.add(this.creatorPropertyChanged);
   }
+
+  public defaultDevice: string = "desktop";
+  private currentDevice: string = "";
+
   public activate(): void {
     this.model = new ThemeTabViewModel(this.creator, this.simulatorCssClasses);
+    this.model.simulator.device = this.currentDevice || this.defaultDevice;
     this.themeModel.initialize(this.creator.theme, this.creator.survey);
     this.creator.sidebar.hideSideBarVisibilityControlActions = this.showOneCategoryInPropertyGrid;
     this.update();
@@ -453,6 +458,7 @@ export class ThemeTabPlugin implements ICreatorPlugin {
   }
   public deactivate(): boolean {
     if (this.model) {
+      this.currentDevice = this.model.simulator.device;
       this.simulatorCssClasses = this.model.survey.css;
       this.model.onPropertyChanged.clear();
       this.themeModel.onThemeSelected.clear();

packages/survey-creator-core/tests/tabs/test.tests.ts

@@ -1116,4 +1116,34 @@ test("The Preview Survey button text is not translated Bug#6016", (): any => {
   expect(getLocString("ed.testSurveyAgain")).toBe(deText);
   expect(testPlugin.model.testAgainAction.title).toBe(deText);
   creator.locale = "";
+});
+test("Preview tab: default device and save current device", (): any => {
+  const creator: CreatorTester = new CreatorTester({ showThemeTab: true });
+  creator.JSON = { questions: [{ type: "text", name: "q1" }] };
+  const testPlugin: TabTestPlugin = <TabTestPlugin>creator.getPlugin("test");
+
+  expect(testPlugin.defaultDevice).toBe("desktop");
+  expect(testPlugin.currentDevice).toBe("");
+
+  testPlugin.activate();
+  expect(testPlugin.model.simulator.device).toBe("desktop");
+
+  testPlugin.model.simulator.device = "iPhone15";
+  expect(testPlugin.currentDevice).toBe("iPhone15");
+
+  testPlugin.deactivate();
+  expect(testPlugin.defaultDevice).toBe("desktop");
+  expect(testPlugin.currentDevice).toBe("iPhone15");
+
+  testPlugin.activate();
+  expect(testPlugin.model.simulator.device).toBe("iPhone15");
+  expect(testPlugin.defaultDevice).toBe("desktop");
+  expect(testPlugin.currentDevice).toBe("iPhone15");
+
+  testPlugin.deactivate();
+  testPlugin.defaultDevice = "iPhone15Plus";
+  testPlugin.currentDevice = "";
+
+  testPlugin.activate();
+  expect(testPlugin.model.simulator.device).toBe("iPhone15Plus");
 });

packages/survey-creator-core/tests/tabs/theme-tab-plugin.tests.ts

@@ -1384,3 +1384,32 @@ test("onThemePropertyChanged event for a custom property", (): any => {
 
   Serializer.removeProperty("theme", "paddingTopScale");
 });
+
+test("Theme tab: default device and save current device", (): any => {
+  const creator: CreatorTester = new CreatorTester({ showThemeTab: true });
+  creator.JSON = { questions: [{ type: "text", name: "q1" }] };
+  const themePlugin: ThemeTabPlugin = <ThemeTabPlugin>creator.getPlugin("theme");
+
+  expect(themePlugin.defaultDevice).toBe("desktop");
+  expect(themePlugin.currentDevice).toBe("");
+
+  themePlugin.activate();
+  expect(themePlugin.model.simulator.device).toBe("desktop");
+
+  themePlugin.model.simulator.device = "iPhone15";
+  expect(themePlugin.currentDevice).toBe("");
+
+  themePlugin.deactivate();
+  expect(themePlugin.currentDevice).toBe("iPhone15");
+
+  themePlugin.activate();
+  expect(themePlugin.model.simulator.device).toBe("iPhone15");
+  expect(themePlugin.defaultDevice).toBe("desktop");
+
+  themePlugin.deactivate();
+  themePlugin.defaultDevice = "iPhone15Plus";
+  themePlugin.currentDevice = "";
+
+  themePlugin.activate();
+  expect(themePlugin.model.simulator.device).toBe("iPhone15Plus");
+});