Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
e3c8ca2d5c
PromucFlow_constructor/app/client/src/utils/autoLayout/highlightUtils.test.ts

467 lines
14 KiB
TypeScript
Raw Normal View History

feat: Auto layout appsmith editor and mobile responsiveness (#21151) ## Description Core features of Auto Layout and mobile responsiveness, hidden under a feature flag. > Add a TL;DR when description is extra long (helps content team) Media > A video or a GIF is preferred. when using Loom, don’t embed because it looks like it’s a GIF. instead, just link to the video ## Type of change > Please delete options that are not relevant. - New feature (non-breaking change which adds functionality) ## How Has This Been Tested? > Manual regression and sanity tests for all fixed canvas functionality. - Manual - Jest - Cypress ## Checklist: ### Dev activity - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my own code - [ ] I have commented my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [x] PR is being merged under a feature flag --------- Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Co-authored-by: Arsalan <arsalanyaldram0211@outlook.com> Co-authored-by: Aswath K <aswath.sana@gmail.com> Co-authored-by: Aishwarya UR <aishwarya@appsmith.com>
2023-03-04 07:25:54 +00:00
import { FLEXBOX_PADDING, RenderModes } from "constants/WidgetConstants";
import {
FlexLayerAlignment,
ResponsiveBehavior,
} from "utils/autoLayout/constants";
import { HighlightInfo } from "./autoLayoutTypes";
import { getWidgetHeight } from "./flexWidgetUtils";
import {
deriveHighlightsFromLayers,
generateHighlightsForAlignment,
generateVerticalHighlights,
VerticalHighlightsPayload,
} from "./highlightUtils";
describe("test HighlightUtils methods", () => {
describe("test deriveHighlightsFromLayers method", () => {
it("should generate horizontal highlights for empty canvas", () => {
const widgets = {
"1": {
widgetId: "1",
leftColumn: 0,
rightColumn: 64,
alignment: FlexLayerAlignment.Start,
topRow: 0,
bottomRow: 70,
type: "CANVAS_WIDGET",
widgetName: "Canvas1",
renderMode: RenderModes.CANVAS,
version: 1,
parentColumnSpace: 1,
parentRowSpace: 1,
isLoading: false,
mobileTopRow: 0,
mobileBottomRow: 70,
mobileLeftColumn: 0,
mobileRightColumn: 640,
responsiveBehavior: ResponsiveBehavior.Fill,
parentId: "",
flexLayers: [],
children: [],
},
};
const highlights: HighlightInfo[] = deriveHighlightsFromLayers(
widgets,
"1",
9.875,
);
expect(highlights.length).toEqual(3);
expect(highlights[0].isVertical).toBeFalsy;
// width of each horizontal highlight = container width / 3 - padding.
expect(Math.round(highlights[0].width)).toEqual(211);
expect(highlights[0].height).toEqual(4);
// x position of each horizontal highlight = (container width / 3) * index + padding.
expect(Math.round(highlights[1].posX)).toEqual(215);
expect(Math.round(highlights[2].posX)).toEqual(425);
});
it("should add horizontal heights before every layer and below the last layer", () => {
const widgets = {
"1": {
widgetId: "1",
leftColumn: 0,
rightColumn: 64,
alignment: FlexLayerAlignment.Start,
topRow: 0,
bottomRow: 70,
type: "CANVAS_WIDGET",
widgetName: "Canvas1",
renderMode: RenderModes.CANVAS,
version: 1,
parentColumnSpace: 1,
parentRowSpace: 1,
isLoading: false,
mobileTopRow: 0,
mobileBottomRow: 70,
mobileLeftColumn: 0,
mobileRightColumn: 640,
responsiveBehavior: ResponsiveBehavior.Fill,
parentId: "",
flexLayers: [
{ children: [{ id: "2", align: FlexLayerAlignment.Start }] },
],
children: ["2"],
},
"2": {
widgetId: "2",
leftColumn: 0,
rightColumn: 16,
alignment: FlexLayerAlignment.Start,
topRow: 0,
bottomRow: 4,
type: "BUTTON_WIDGET",
widgetName: "Button1",
renderMode: RenderModes.CANVAS,
version: 1,
parentColumnSpace: 1.546875,
parentRowSpace: 10,
isLoading: false,
mobileTopRow: 0,
mobileBottomRow: 4,
mobileLeftColumn: 0,
mobileRightColumn: 16,
responsiveBehavior: ResponsiveBehavior.Hug,
parentId: "1",
},
};
const highlights: HighlightInfo[] = deriveHighlightsFromLayers(
widgets,
"1",
10,
);
expect(highlights.length).toEqual(10);
expect(
highlights[0].isVertical ||
highlights[1].isVertical ||
highlights[2].isVertical,
).toBeFalsy;
expect(
highlights[7].isVertical ||
highlights[8].isVertical ||
highlights[9].isVertical,
).toBeFalsy;
expect(highlights[0].posY).toEqual(FLEXBOX_PADDING);
expect(highlights[7].posY).toEqual(
highlights[0].posY +
(widgets["2"].bottomRow - widgets["2"].topRow) *
widgets["2"].parentRowSpace,
);
expect(highlights[0].layerIndex).toEqual(0);
expect(highlights[0].isNewLayer).toBeTruthy;
expect(highlights[7].layerIndex).toEqual(1);
expect(highlights[7].isNewLayer).toBeTruthy;
});
});
describe("test generateHighlightsForAlignment method", () => {
it("should add vertical highlights before every widget in the alignment, and at the end of the last widget", () => {
const children = [
{
widgetId: "2",
leftColumn: 0,
rightColumn: 16,
alignment: FlexLayerAlignment.Start,
topRow: 0,
bottomRow: 4,
type: "BUTTON_WIDGET",
widgetName: "Button1",
renderMode: RenderModes.CANVAS,
version: 1,
parentColumnSpace: 10,
parentRowSpace: 10,
isLoading: false,
mobileTopRow: 0,
mobileBottomRow: 4,
mobileLeftColumn: 0,
mobileRightColumn: 16,
responsiveBehavior: ResponsiveBehavior.Hug,
parentId: "1",
},
];
const result: HighlightInfo[] = generateHighlightsForAlignment({
arr: children,
childCount: 0,
layerIndex: 0,
alignment: FlexLayerAlignment.Start,
maxHeight: 40,
offsetTop: 4,
parentColumnSpace: 10,
avoidInitialHighlight: false,
isMobile: false,
startPosition: 0,
canvasId: "1",
});
expect(result.length).toEqual(2);
expect(result[0].posX).toEqual(2);
expect(result[0].posY).toEqual(4);
expect(result[0].width).toEqual(4);
expect(result[0].height).toEqual(
getWidgetHeight(children[0], false) * children[0].parentRowSpace,
);
expect(result[1].posX).toEqual(
children[0].rightColumn * children[0].parentColumnSpace +
FLEXBOX_PADDING / 2,
);
expect(result[1].isNewLayer).toBeFalsy;
expect(result[1].isVertical).toBeTruthy;
expect(result[1].layerIndex).toEqual(0);
});
it("should create vertical highlights as tall as the tallest child in the row", () => {
const children = [
{
widgetId: "2",
leftColumn: 0,
rightColumn: 16,
alignment: FlexLayerAlignment.Start,
topRow: 0,
bottomRow: 4,
type: "BUTTON_WIDGET",
widgetName: "Button1",
renderMode: RenderModes.CANVAS,
version: 1,
parentColumnSpace: 10,
parentRowSpace: 10,
isLoading: false,
mobileTopRow: 0,
mobileBottomRow: 4,
mobileLeftColumn: 0,
mobileRightColumn: 16,
responsiveBehavior: ResponsiveBehavior.Hug,
parentId: "1",
},
{
widgetId: "3",
leftColumn: 0,
rightColumn: 16,
alignment: FlexLayerAlignment.Start,
topRow: 0,
bottomRow: 6,
type: "BUTTON_WIDGET",
widgetName: "Button2",
renderMode: RenderModes.CANVAS,
version: 1,
parentColumnSpace: 10,
parentRowSpace: 10,
isLoading: false,
mobileTopRow: 0,
mobileBottomRow: 6,
mobileLeftColumn: 0,
mobileRightColumn: 16,
responsiveBehavior: ResponsiveBehavior.Hug,
parentId: "1",
},
];
const result: HighlightInfo[] = generateHighlightsForAlignment({
arr: children,
childCount: 0,
layerIndex: 0,
alignment: FlexLayerAlignment.Start,
maxHeight:
getWidgetHeight(children[1], false) * children[1].parentRowSpace,
offsetTop: 4,
parentColumnSpace: 10,
avoidInitialHighlight: false,
isMobile: false,
startPosition: 0,
canvasId: "1",
});
expect(result.length).toEqual(3);
expect(result[0].height).toEqual(
getWidgetHeight(children[1], false) * children[1].parentRowSpace,
);
});
it("should not render initial highlight is avoidInitialHighlight is true", () => {
const result: HighlightInfo[] = generateHighlightsForAlignment({
arr: [],
childCount: 0,
layerIndex: 0,
alignment: FlexLayerAlignment.Start,
maxHeight: 40,
offsetTop: 4,
parentColumnSpace: 10,
avoidInitialHighlight: true,
isMobile: false,
startPosition: 0,
canvasId: "1",
});
expect(result.length).toEqual(0);
});
});
describe("test generateVerticalHighlights method", () => {
it("should not render initial highlight for an empty center alignment if one of the other alignments are encroaching its space", () => {
const widgets = {
"1": {
widgetId: "1",
leftColumn: 0,
rightColumn: 64,
alignment: FlexLayerAlignment.Start,
topRow: 0,
bottomRow: 70,
type: "CANVAS_WIDGET",
widgetName: "Canvas1",
renderMode: RenderModes.CANVAS,
version: 1,
parentColumnSpace: 1,
parentRowSpace: 1,
isLoading: false,
mobileTopRow: 0,
mobileBottomRow: 70,
mobileLeftColumn: 0,
mobileRightColumn: 640,
responsiveBehavior: ResponsiveBehavior.Fill,
parentId: "",
flexLayers: [
{
children: [
{ id: "2", align: FlexLayerAlignment.Start },
{ id: "3", align: FlexLayerAlignment.Start },
],
},
],
children: ["2", "3"],
},
"2": {
widgetId: "2",
leftColumn: 0,
rightColumn: 16,
alignment: FlexLayerAlignment.Start,
topRow: 0,
bottomRow: 4,
type: "BUTTON_WIDGET",
widgetName: "Button1",
renderMode: RenderModes.CANVAS,
version: 1,
parentColumnSpace: 10,
parentRowSpace: 10,
isLoading: false,
mobileTopRow: 0,
mobileBottomRow: 4,
mobileLeftColumn: 0,
mobileRightColumn: 16,
responsiveBehavior: ResponsiveBehavior.Hug,
parentId: "1",
},
"3": {
widgetId: "3",
leftColumn: 16,
rightColumn: 26,
alignment: FlexLayerAlignment.Start,
topRow: 0,
bottomRow: 6,
type: "BUTTON_WIDGET",
widgetName: "Button2",
renderMode: RenderModes.CANVAS,
version: 1,
parentColumnSpace: 10,
parentRowSpace: 10,
isLoading: false,
mobileTopRow: 0,
mobileBottomRow: 6,
mobileLeftColumn: 16,
mobileRightColumn: 26,
responsiveBehavior: ResponsiveBehavior.Hug,
parentId: "1",
},
};
const result: VerticalHighlightsPayload = generateVerticalHighlights({
widgets,
layer: widgets["1"].flexLayers[0],
childCount: 0,
layerIndex: 0,
offsetTop: 4,
canvasId: "1",
columnSpace: 10,
draggedWidgets: [],
isMobile: false,
});
expect(result.highlights.length).toEqual(4);
expect(result.childCount).toEqual(2);
});
it("should not render highlights for flex wrapped alignments that span multiple rows", () => {
const widgets = {
"1": {
widgetId: "1",
leftColumn: 0,
rightColumn: 64,
alignment: FlexLayerAlignment.Start,
topRow: 0,
bottomRow: 70,
type: "CANVAS_WIDGET",
widgetName: "Canvas1",
renderMode: RenderModes.CANVAS,
version: 1,
parentColumnSpace: 1,
parentRowSpace: 1,
isLoading: false,
mobileTopRow: 0,
mobileBottomRow: 70,
mobileLeftColumn: 0,
mobileRightColumn: 640,
responsiveBehavior: ResponsiveBehavior.Fill,
parentId: "",
flexLayers: [
{
children: [
{ id: "2", align: FlexLayerAlignment.Start },
{ id: "3", align: FlexLayerAlignment.Start },
],
},
],
children: ["2", "3"],
},
"2": {
widgetId: "2",
leftColumn: 0,
rightColumn: 16,
alignment: FlexLayerAlignment.Start,
topRow: 0,
bottomRow: 4,
type: "BUTTON_WIDGET",
widgetName: "Button1",
renderMode: RenderModes.CANVAS,
version: 1,
parentColumnSpace: 10,
parentRowSpace: 10,
isLoading: false,
mobileTopRow: 0,
mobileBottomRow: 4,
mobileLeftColumn: 0,
mobileRightColumn: 16,
responsiveBehavior: ResponsiveBehavior.Hug,
parentId: "1",
},
"3": {
widgetId: "3",
leftColumn: 16,
rightColumn: 64,
alignment: FlexLayerAlignment.Start,
topRow: 0,
bottomRow: 6,
type: "INPUT_WIDGET",
widgetName: "Button2",
renderMode: RenderModes.CANVAS,
version: 1,
parentColumnSpace: 10,
parentRowSpace: 10,
isLoading: false,
mobileTopRow: 4,
mobileBottomRow: 10,
mobileLeftColumn: 0,
mobileRightColumn: 64,
responsiveBehavior: ResponsiveBehavior.Fill,
parentId: "1",
},
};
const result: VerticalHighlightsPayload = generateVerticalHighlights({
widgets,
layer: widgets["1"].flexLayers[0],
childCount: 0,
layerIndex: 0,
offsetTop: 4,
canvasId: "1",
columnSpace: 9.875,
draggedWidgets: [],
isMobile: true,
});
expect(result.highlights.length).toEqual(3);
expect(result.highlights[1].posY).toEqual(
widgets["3"].mobileTopRow * widgets["3"].parentRowSpace +
FLEXBOX_PADDING,
);
expect(result.highlights[1].height).toEqual(60);
expect(result.highlights[2].posX).toEqual(634);
expect(result.highlights[2].posY).toEqual(
widgets["3"].mobileTopRow * widgets["3"].parentRowSpace +
FLEXBOX_PADDING,
);
expect(result.childCount).toEqual(2);
});
});
});
Reference in New Issue Copy Permalink