PromucFlow_constructor/app/client/src/utils/widgetRenderUtils.test.ts

267 lines
6.6 KiB
TypeScript
Raw Normal View History

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 10:10:36 +00:00
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);
});
});
});