Implemented #5461 - Device Selector Drop-Down Menu - Introduce an API which would allow developers to add/remove/reorder available device options

packages/survey-creator-core/src/components/simulator.ts

@@ -158,7 +158,18 @@ export class SurveySimulatorModel extends Base {
 }
 
 export var DEFAULT_MONITOR_DPI = (typeof window !== "undefined" ? window.devicePixelRatio : 1) * 96;
-export var simulatorDevices = {
+export var simulatorDevices: {
+  [index: string]: {
+    cssPixelRatio?: number,
+    ppi?: number,
+    width?: number,
+    height?: number,
+    deviceType: string,
+    title: string,
+    cssClass?: string,
+    visibleIndex?: number,
+  },
+} = {
   desktop: {
     deviceType: "desktop",
     title: "Desktop",

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

@@ -145,7 +145,7 @@ export class TabTestPlugin implements ICreatorPlugin {
     if (this.creator.showSimulatorInTestSurveyTab) {
       const deviceSelectorItems = Object.keys(simulatorDevices)
         .filter((key) => !!simulatorDevices[key].title)
-        .map((key) => ({ id: key, title: simulatorDevices[key].title }));
+        .map((key) => ({ id: key, title: simulatorDevices[key].title, visibleIndex: simulatorDevices[key].visibleIndex ?? Number.MAX_VALUE }));
       this.deviceSelectorAction = createDropdownActionModel({
         id: "deviceSelector",
         iconName: "icon-device-desktop",

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

@@ -3,7 +3,7 @@ import { TestSurveyTabViewModel } from "../../src/components/tabs/test";
 import { SurveyResultsItemModel, SurveyResultsModel } from "../../src/components/results";
 import { IAction, ListModel, Question, QuestionDropdownModel, SurveyModel, StylesManager } from "survey-core";
 import { TabTestPlugin } from "../../src/components/tabs/test-plugin";
-import { SurveySimulatorModel } from "../../src/components/simulator";
+import { SurveySimulatorModel, simulatorDevices } from "../../src/components/simulator";
 import { editorLocalization } from "../../src/editorLocalization";
 
 import "survey-core/survey.i18n";
@@ -894,4 +894,62 @@ test("showResults with previewShowResults false", (): any => {
 
   model.survey.doComplete();
   expect(model.showResults).toBeFalsy();
+});
+
+test("devices selector dropdown items default order", (): any => {
+  const creator: CreatorTester = new CreatorTester({ previewShowResults: false });
+  creator.JSON = {
+    questions: [
+      {
+        type: "text",
+        name: "q1",
+      }
+    ]
+  };
+  const testPlugin: TabTestPlugin = <TabTestPlugin>creator.getPlugin("test");
+  testPlugin.activate();
+
+  const deviceSelectorAction = testPlugin["deviceSelectorAction"];
+  const dropdownDeviceActions = deviceSelectorAction.data.actions as IAction[];
+  expect(dropdownDeviceActions.length).toBe(9);
+  expect(dropdownDeviceActions[0].id).toBe("desktop");
+  expect(dropdownDeviceActions[0].visibleIndex).toBe(Number.MAX_VALUE);
+  expect(dropdownDeviceActions[7].id).toBe("androidTablet");
+  expect(dropdownDeviceActions[7].visibleIndex).toBe(Number.MAX_VALUE);
+  expect(dropdownDeviceActions[8].id).toBe("msSurface");
+  expect(dropdownDeviceActions[8].visibleIndex).toBe(Number.MAX_VALUE);
+});
+test("change devices selector dropdown items order", (): any => {
+  try {
+    simulatorDevices.msSurface.visibleIndex = 0;
+    simulatorDevices.androidTablet.visibleIndex = 1;
+
+    const creator: CreatorTester = new CreatorTester({ previewShowResults: false });
+    creator.JSON = {
+      questions: [
+        {
+          type: "text",
+          name: "q1",
+        }
+      ]
+    };
+    const testPlugin: TabTestPlugin = <TabTestPlugin>creator.getPlugin("test");
+    testPlugin.activate();
+
+    const deviceSelectorAction = testPlugin["deviceSelectorAction"];
+    const dropdownDeviceActions = deviceSelectorAction.data.actions as IAction[];
+    expect(dropdownDeviceActions.length).toBe(9);
+    expect(dropdownDeviceActions[0].id).toBe("msSurface");
+    expect(dropdownDeviceActions[0].visibleIndex).toBe(0);
+    expect(dropdownDeviceActions[1].id).toBe("androidTablet");
+    expect(dropdownDeviceActions[1].visibleIndex).toBe(1);
+    expect(dropdownDeviceActions[2].id).toBe("desktop");
+    expect(dropdownDeviceActions[2].visibleIndex).toBe(Number.MAX_VALUE);
+    expect(dropdownDeviceActions[8].id).toBe("androidPhone");
+    expect(dropdownDeviceActions[8].visibleIndex).toBe(Number.MAX_VALUE);
+  }
+  finally {
+    simulatorDevices.msSurface.visibleIndex = undefined;
+    simulatorDevices.androidTablet.visibleIndex = undefined;
+  }
 });