PromucFlow_constructor/app/client/test/testCommon.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

215 lines
5.6 KiB
TypeScript

import { getCanvasWidgetsPayload } from "sagas/PageSagas";
import { updateCurrentPage } from "actions/pageActions";
import { editorInitializer } from "utils/EditorUtils";
import {
Page,
ReduxActionTypes,
} from "@appsmith/constants/ReduxActionConstants";
import { initEditor } from "actions/initActions";
import { useDispatch } from "react-redux";
import { extractCurrentDSL } from "utils/WidgetPropsUtils";
import { setAppMode } from "actions/pageActions";
import { APP_MODE } from "entities/App";
import { createSelector } from "reselect";
import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
import { getCanvasWidgets } from "selectors/entitiesSelector";
import CanvasWidgetsNormalizer from "normalizers/CanvasWidgetsNormalizer";
import { DSLWidget } from "widgets/constants";
import { DataTreeWidget } from "entities/DataTree/dataTreeFactory";
import { AppState } from "reducers";
import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsStructureReducer";
import urlBuilder from "entities/URLRedirect/URLAssembly";
export const useMockDsl = (dsl: any) => {
const dispatch = useDispatch();
dispatch(setAppMode(APP_MODE.EDIT));
const mockResp: any = {
data: {
id: "page_id",
name: "Page1",
applicationId: "app_id",
isDefault: true,
isHidden: false,
slug: "page-1",
layouts: [
{
id: "layout_id",
dsl,
layoutOnLoadActions: [],
layoutActions: [],
},
],
},
};
const canvasWidgetsPayload = getCanvasWidgetsPayload(mockResp);
dispatch({
type: ReduxActionTypes.FETCH_PAGE_DSLS_SUCCESS,
payload: [
{
pageId: mockResp.data.id,
dsl: extractCurrentDSL(mockResp),
},
],
});
const pages: Page[] = [
{
pageName: mockResp.data.name,
pageId: mockResp.data.id,
isDefault: mockResp.data.isDefault,
isHidden: !!mockResp.data.isHidden,
slug: mockResp.data.slug,
},
];
dispatch({
type: ReduxActionTypes.FETCH_PAGE_LIST_SUCCESS,
payload: {
pages,
applicationId: mockResp.data.applicationId,
},
});
dispatch({
type: "UPDATE_LAYOUT",
payload: { widgets: canvasWidgetsPayload.widgets },
});
dispatch(updateCurrentPage(mockResp.data.id));
};
export function MockPageDSL({ children, dsl }: any) {
editorInitializer();
useMockDsl(dsl);
return children;
}
export const mockGetCanvasWidgetDsl = createSelector(
getCanvasWidgets,
(canvasWidgets: CanvasWidgetsReduxState): DSLWidget => {
return CanvasWidgetsNormalizer.denormalize("0", {
canvasWidgets,
});
},
);
const getChildWidgets = (
canvasWidgets: CanvasWidgetsReduxState,
widgetId: string,
) => {
const parentWidget = canvasWidgets[widgetId];
if (parentWidget.children) {
return parentWidget.children.map((childWidgetId) => {
const childWidget = { ...canvasWidgets[childWidgetId] } as DataTreeWidget;
if (childWidget?.children?.length > 0) {
childWidget.children = getChildWidgets(canvasWidgets, childWidgetId);
}
return childWidget;
});
}
return [];
};
export const mockGetChildWidgets = (state: AppState, widgetId: string) => {
return getChildWidgets(state.entities.canvasWidgets, widgetId);
};
export const mockCreateCanvasWidget = (
canvasWidget: FlattenedWidgetProps,
// eslint-disable-next-line @typescript-eslint/no-unused-vars
evaluatedWidget: DataTreeWidget,
): any => {
return { ...canvasWidget };
};
export const mockGetWidgetEvalValues = (
state: AppState,
widgetName: string,
) => {
return Object.values(state.entities.canvasWidgets).find(
(widget) => widget.widgetName === widgetName,
) as DataTreeWidget;
};
export const syntheticTestMouseEvent = (
event: MouseEvent,
optionsToAdd = {},
) => {
const options = Object.entries(optionsToAdd);
options.forEach(([key, value]) => {
Object.defineProperty(event, key, { get: () => value });
});
return event;
};
export function MockApplication({ children }: any) {
editorInitializer();
const dispatch = useDispatch();
dispatch(initEditor({ pageId: "page_id", mode: APP_MODE.EDIT }));
const mockResp: any = {
workspaceId: "workspace_id",
pages: [{ id: "page_id", name: "Page1", isDefault: true, slug: "page-1" }],
id: "app_id",
isDefault: true,
name: "appName",
slug: "app-name",
applicationVersion: 2,
};
urlBuilder.updateURLParams(
{
applicationId: mockResp.id,
applicationSlug: mockResp.slug,
applicationVersion: mockResp.applicationVersion,
},
[
{
pageId: mockResp.pages[0].id,
pageSlug: mockResp.pages[0].slug,
},
],
);
dispatch({
type: ReduxActionTypes.FETCH_APPLICATION_SUCCESS,
payload: mockResp,
});
dispatch({
type: ReduxActionTypes.FETCH_PAGE_LIST_SUCCESS,
payload: {
pages: mockResp.pages,
},
});
dispatch({
type: ReduxActionTypes.SWITCH_CURRENT_PAGE_ID,
payload: { id: "page_id", slug: "page-1" },
});
return children;
}
//got it from @blueprintjs/test-commons to dispatch hotkeys events
export function dispatchTestKeyboardEventWithCode(
target: EventTarget,
eventType: string,
key: string,
keyCode: number,
shift = false,
meta = false,
) {
const event = document.createEvent("KeyboardEvent");
(event as any).initKeyboardEvent(
eventType,
true,
true,
window,
key,
0,
meta,
false,
shift,
);
Object.defineProperty(event, "key", { get: () => key });
Object.defineProperty(event, "which", { get: () => keyCode });
target.dispatchEvent(event);
}