Skip to content

Commit

Permalink
Implemented #5461 - Device Selector Drop-Down Menu - Introduce an API…
Browse files Browse the repository at this point in the history
… which would allow developers to add/remove/reorder available device options
  • Loading branch information
tsv2013 committed May 8, 2024
1 parent 655d583 commit efbf235
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 3 deletions.
13 changes: 12 additions & 1 deletion packages/survey-creator-core/src/components/simulator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
60 changes: 59 additions & 1 deletion packages/survey-creator-core/tests/tabs/test.tests.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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;
}
});

0 comments on commit efbf235

Please sign in to comment.