PromucFlow_constructor/app/client/test/testCommon.ts
Hetu Nandu aa9b19c995
refactor: Widget Selection (#19643)
## Description

This change is a refactor of widget selection logic. It consolidates all
the business logic to make it easy to maintain. It also improves the
performance a bit.

It touched a lot of features as we heavily rely on this 

```
Select one
Select multiple with drag
Select multiple with shift
Select multiple with cmd/ctrl
Selections should be on the same level of hierarchy
Unselect all by clicking on the canvas
Unselect all by pressing esc
Select all with cmd + a
Paste in main container
Paste in another container
Undo
Redo
Modal Selection
Modal child selection
Context switching
cmd click
snipping mode
new widget suggestion
onboarding
```

> Refactor widget selection logic

Fixes #19570

## Type of change

- Refactor


## How Has This Been Tested?

All existing tests should pass

### Test Plan
> Add Testsmith test cases links that relate to this PR

### Issues raised during DP testing

https://github.com/appsmithorg/appsmith/pull/19643#issuecomment-1383570810

https://github.com/appsmithorg/appsmith/pull/19643#issuecomment-1383607820

https://github.com/appsmithorg/appsmith/pull/19643#issuecomment-1385095478
[Bug bash
issues](https://www.notion.so/appsmith/610aa302f3e146a7b090b7dc6bc63ef9?v=0d277a9b07bf4aac9d717bcaf138c33a)

## Checklist:
### Dev activity
- [ ] My code follows the style guidelines of this project
- [ ] 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
- [ ] My changes generate no new warnings
- [ ] I have added tests that prove my fix is effective or that my
feature works
- [ ] New and existing unit tests pass locally with my changes
- [ ] PR is being merged under a feature flag


### QA activity:
- [ ] Test plan has been approved by relevant developers
- [ ] Test plan has been peer reviewed by QA
- [ ] Cypress test cases have been added and approved by either SDET or
manual QA
- [ ] Organized project review call with relevant stakeholders after
Round 1/2 of QA
- [ ] Added Test Plan Approved label after reveiwing all Cypress test
2023-01-28 07:47:06 +05:30

255 lines
6.3 KiB
TypeScript

import { editorInitializer } from "utils/editor/EditorUtils";
import {
Page,
ReduxActionTypes,
} from "@appsmith/constants/ReduxActionConstants";
import { initEditor } from "actions/initActions";
import { setAppMode, updateCurrentPage } from "actions/pageActions";
import { APP_MODE } from "entities/App";
import { useDispatch } from "react-redux";
import { CanvasWidgetsReduxState } from "reducers/entityReducers/canvasWidgetsReducer";
import { createSelector } from "reselect";
import { getCanvasWidgetsPayload } from "sagas/PageSagas";
import { getCanvasWidgets } from "selectors/entitiesSelector";
import { extractCurrentDSL } from "utils/WidgetPropsUtils";
import { AppState } from "@appsmith/reducers";
import { DataTreeWidget } from "entities/DataTree/dataTreeFactory";
import urlBuilder from "entities/URLRedirect/URLAssembly";
import CanvasWidgetsNormalizer from "normalizers/CanvasWidgetsNormalizer";
import { FlattenedWidgetProps } from "reducers/entityReducers/canvasWidgetsStructureReducer";
import { DSLWidget } from "widgets/constants";
export const useMockDsl = (dsl: any, mode?: APP_MODE) => {
const dispatch = useDispatch();
dispatch(setAppMode(mode || APP_MODE.EDIT));
const mockResp: any = {
data: {
id: "page_id",
pageId: "page_id",
name: "Page1",
applicationId: "app_id",
isDefault: true,
isHidden: false,
slug: "page-1",
layouts: [
{
id: "layout_id",
dsl,
layoutOnLoadActions: [],
layoutActions: [],
},
],
userPermissions: [
"read:pages",
"manage:pages",
"create:pageActions",
"delete:pages",
],
},
};
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,
userPermissions: [
"read:pages",
"manage:pages",
"create:pageActions",
"delete:pages",
],
},
];
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 mockGetPagePermissions = () => {
return ["read:pages", "manage:pages", "create:pageActions", "delete:pages"];
};
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",
pageId: "page_id",
name: "Page1",
isDefault: true,
slug: "page-1",
userPermissions: [
"read:pages",
"manage:pages",
"create:pageActions",
"delete:pages",
],
},
],
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",
permissions: [
"read:pages",
"manage:pages",
"create:pageActions",
"delete:pages",
],
},
});
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);
}