PromucFlow_constructor/app/client/src/utils/widgetRenderUtils.test.ts
ashit-rath 893fd34cdd
perf: Widget re-rendering refactor (#14485)
* initial commit

* props hoc

* changes

* removed ignores and withWidgetProps

* added extra props to canvasStructure

* widget props changes

* list widget changes

* reintroduced widget props hook and other refactors

* remove warnings

* added deepequal for childWidgets selector

* fix global hotkeys and tabs widget jest test

* fix main container test fix

* fixed view mode width

* fix form widget values

* minor fix

* fix skeleton

* form widget validity fix

* jest test fix

* fixed tests: GlobalHotkeys, Tabs, CanvasSelectectionArena and fixed main container rendering

* minor fix

* minor comments

* reverted commented code

* simplified structure, selective redux state updates and other inconsistencies

* fix junit test cases

* stop form widget from force rendering children

* fix test case

* random commit to re run tests

* update isFormValid prop only if it exists

* detangling circular dependency

* fixing cypress tests

* cleaned up code

* clean up man cnavas props and fix jest cases

* fix rendering order of child widgets for canvas

* fix dropdown reset spec

* adding comments

* cleaning up unwanted code

* fix multiselect widget on deploy

* adressing review comments

* addressing minor review comment changes

* destructuring modal widget child and fix test case

* fix communityIssues cypress spec

* rewrite isVisible logic to match previous behaviour

* merging widget props with component props before checking isVisible

* adressing review comments for modal widget's isVisible

Co-authored-by: rahulramesha <rahul@appsmith.com>
2022-08-19 15:40:36 +05:30

267 lines
6.6 KiB
TypeScript

import { DataTree } from "entities/DataTree/dataTreeFactory";
import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
import { buildChildWidgetTree } from "./widgetRenderUtils";
describe("test EditorUtils methods", () => {
describe("should test buildChildWidgetTree method", () => {
const canvasWidgets = ({
"1": {
children: ["2"],
type: "FORM_WIDGET",
widgetId: "1",
parentId: "0",
topRow: 0,
bottomRow: 10,
widgetName: "one",
},
"2": {
children: ["3", "4"],
type: "CANVAS",
widgetId: "2",
parentId: "1",
topRow: 0,
bottomRow: 100,
widgetName: "two",
},
"3": {
children: [],
type: "TEXT",
widgetId: "3",
parentId: "2",
topRow: 4,
bottomRow: 5,
widgetName: "three",
},
"4": {
children: [],
type: "BUTTON",
widgetId: "4",
parentId: "2",
topRow: 6,
bottomRow: 18,
widgetName: "four",
},
} as unknown) as CanvasWidgetsReduxState;
const dataTree = ({
one: {
children: ["2"],
type: "FORM_WIDGET",
widgetId: "1",
parentId: "0",
topRow: 0,
bottomRow: 10,
widgetName: "one",
skipForFormWidget: "test",
value: "test",
isDirty: true,
isValid: true,
},
two: {
children: ["3", "4"],
type: "CANVAS",
widgetId: "2",
parentId: "1",
topRow: 0,
bottomRow: 100,
widgetName: "two",
skipForFormWidget: "test",
value: "test",
isDirty: true,
isValid: true,
},
three: {
children: [],
type: "TEXT",
widgetId: "3",
parentId: "2",
topRow: 4,
bottomRow: 5,
widgetName: "three",
skipForFormWidget: "test",
value: "test",
isDirty: true,
isValid: true,
},
four: {
children: [],
type: "BUTTON",
widgetId: "4",
parentId: "2",
topRow: 6,
bottomRow: 18,
widgetName: "four",
skipForFormWidget: "test",
value: "test",
isDirty: true,
isValid: true,
},
} as unknown) as DataTree;
it("should return a complete childwidgets Tree", () => {
const childWidgetTree = [
{
bottomRow: 5,
children: [],
skipForFormWidget: "test",
isDirty: true,
isLoading: false,
isValid: true,
parentId: "2",
topRow: 4,
type: "TEXT",
value: "test",
widgetId: "3",
widgetName: "three",
},
{
bottomRow: 18,
children: [],
skipForFormWidget: "test",
isDirty: true,
isLoading: false,
isValid: true,
parentId: "2",
topRow: 6,
type: "BUTTON",
value: "test",
widgetId: "4",
widgetName: "four",
},
];
expect(
buildChildWidgetTree(
canvasWidgets,
dataTree,
new Set<string>("one"),
"2",
),
).toEqual(childWidgetTree);
});
it("should return a partial childwidgets Tree with properties specified", () => {
const childWidgetTree = [
{
bottomRow: 100,
children: [
{
bottomRow: 5,
children: [],
isDirty: true,
isLoading: false,
isValid: true,
parentId: "2",
topRow: 4,
type: "TEXT",
value: "test",
widgetId: "3",
widgetName: "three",
},
{
bottomRow: 18,
children: [],
isDirty: true,
isLoading: false,
isValid: true,
parentId: "2",
topRow: 6,
type: "BUTTON",
value: "test",
widgetId: "4",
widgetName: "four",
},
],
isDirty: true,
isLoading: false,
isValid: true,
parentId: "1",
topRow: 0,
type: "CANVAS",
value: "test",
widgetId: "2",
widgetName: "two",
},
];
expect(
buildChildWidgetTree(
canvasWidgets,
dataTree,
new Set<string>("two"),
"1",
),
).toEqual(childWidgetTree);
});
it("should return a partial childwidgets Tree with just loading widgets", () => {
const childWidgetTree = [
{
ENTITY_TYPE: "WIDGET",
bindingPaths: {},
bottomRow: 100,
children: [
{
ENTITY_TYPE: "WIDGET",
bindingPaths: {},
bottomRow: 5,
children: [],
isLoading: false,
logBlackList: {},
meta: {},
overridingPropertyPaths: {},
parentId: "2",
privateWidgets: {},
propertyOverrideDependency: {},
reactivePaths: {},
topRow: 4,
triggerPaths: {},
type: undefined,
validationPaths: {},
widgetId: "3",
widgetName: "three",
},
{
ENTITY_TYPE: "WIDGET",
bindingPaths: {},
bottomRow: 18,
children: [],
isLoading: false,
logBlackList: {},
meta: {},
overridingPropertyPaths: {},
parentId: "2",
privateWidgets: {},
propertyOverrideDependency: {},
reactivePaths: {},
topRow: 6,
triggerPaths: {},
type: undefined,
validationPaths: {},
widgetId: "4",
widgetName: "four",
},
],
isLoading: false,
logBlackList: {},
meta: {},
overridingPropertyPaths: {},
parentId: "1",
privateWidgets: {},
propertyOverrideDependency: {},
reactivePaths: {},
topRow: 0,
triggerPaths: {},
type: undefined,
validationPaths: {},
widgetId: "2",
widgetName: "two",
},
];
expect(
buildChildWidgetTree(canvasWidgets, {}, new Set<string>("one"), "1"),
).toEqual(childWidgetTree);
});
});
});