Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity
46dcf3a8f0
PromucFlow_constructor/app/client/src/layoutSystems/withLayoutSystemHOC.test.tsx
Preet Sidhu 46dcf3a8f0
chore: Create layout system structure for Anvil and AnvilFlexComponent. (#27178) 
## Description
1. Add new ```appPositioningType``` : ANVIL.
2. Create new code path and folder structure for Anvil layout system.
3. Move common pieces of functionalities between autoLayout and anvil to
anvil folder structure (e.g. ```CanvasResizer```).
4. Create ```AnvilFlexComponent```.
5. Use WDS Flex component in AnvilFlexComponent.
6. Pass min max size props in a data structure that is supported by
container queries in the Flex component.
    e.g. min-width: { base: "120px", "480px": "200px" }
7. Supply the following flex properties (flex-grow flex-shrink
flex-basis) to widgets depending on their ```responsiveBehvaiour```:
    a) Fill: ```flex: 1 1 0%;```
    b) Hug: ```flex: 0 0 auto;```

#### PR fixes following issue(s)
Fixes # (issue number)
1. [#26987](https://github.com/appsmithorg/appsmith/issues/26987)
2. [#26609](https://github.com/appsmithorg/appsmith/issues/26609)
3. [#26611](https://github.com/appsmithorg/appsmith/issues/26611)

#### Type of change
- New feature (non-breaking change which adds functionality)


## Testing
>
#### How Has This Been Tested?
> Please describe the tests that you ran to verify your changes. Also
list any relevant details for your test configuration.
> Delete anything that is not relevant
- [x] Manual
- [ ] JUnit
- [x] 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
- [x] 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
- [x] 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
- [x] PR is being merged under a feature flag


#### QA activity:
- [ ] [Speedbreak
features](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#speedbreakers-)
have been covered
- [ ] Test plan covers all impacted features and [areas of
interest](https://github.com/appsmithorg/TestSmith/wiki/Guidelines-for-test-plans#areas-of-interest-)
- [ ] Test plan has been peer reviewed by project stakeholders and other
QA members
- [ ] Manually tested functionality on DP
- [ ] We had an implementation alignment call with stakeholders post QA
Round 2
- [ ] Cypress test cases have been added and approved by SDET/manual QA
- [ ] Added `Test Plan Approved` label after Cypress tests were reviewed
- [ ] Added `Test Plan Approved` label after JUnit tests were reviewed

---------

Co-authored-by: Ashok Kumar M <35134347+marks0351@users.noreply.github.com>
Co-authored-by: Aswath K <aswath.sana@gmail.com>
Co-authored-by: rahulramesha <rahul@appsmith.com>
Co-authored-by: rahulramesha <71900764+rahulramesha@users.noreply.github.com>
2023-10-02 15:41:05 -04:00

370 lines
17 KiB
TypeScript
Raw Blame History

import { RenderModes } from "constants/WidgetConstants";
import React from "react";
import { AppPositioningTypes } from "reducers/entityReducers/pageListReducer";
import * as editorSelectors from "selectors/editorSelectors";
import { WidgetTypeFactories } from "test/factories/Widgets/WidgetTypeFactories";
import { render } from "test/testUtils";
import CanvasWidget from "widgets/CanvasWidget";
import InputWidget from "widgets/InputWidgetV2/widget";
import { ModalWidget } from "widgets/ModalWidget/widget";
import { withLayoutSystemHOC } from "./withLayoutSystemHOC";
describe("Layout System HOC's Tests", () => {
describe("Fixed Layout Layers", () => {
it("Layout system hoc should return Fixed Editor for FIXED positioning and CANVAS render mode", () => {
const widget = InputWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[InputWidget.type].build();
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.CANVAS);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.FIXED);
const component = render(<HOC {...widgetProps} />);
const positionedLayer =
component.container.getElementsByClassName("positioned-widget")[0];
const resizerLayer =
component.container.getElementsByClassName("resize-wrapper")[0];
expect(positionedLayer).toBeTruthy();
expect(resizerLayer).toBeTruthy();
});
it("Layout system hoc should return Fixed Modal Editor for FIXED positioning and CANVAS render mode", () => {
const widget = ModalWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[ModalWidget.type].build({
isVisible: true,
});
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.CANVAS);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.FIXED);
const component = render(<HOC {...widgetProps} />);
const positionedLayer =
component.container.getElementsByClassName("positioned-widget")[0];
const resizerLayer =
component.container.getElementsByClassName("resize-wrapper")[0];
const overlayLayer =
component.container.getElementsByClassName("bp3-overlay")[0];
expect(positionedLayer).toBeFalsy();
expect(overlayLayer).toBeTruthy();
expect(resizerLayer).toBeTruthy();
});
it("Layout system hoc should return no wrapper for CANVAS WIDGET for FIXED positioning and CANVAS render mode", () => {
const widget = CanvasWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[CanvasWidget.type].build();
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.CANVAS);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.FIXED);
const component = render(<HOC {...widgetProps} />);
const positionedLayer =
component.container.getElementsByClassName("positioned-widget")[0];
const resizerLayer =
component.container.getElementsByClassName("resize-wrapper")[0];
expect(positionedLayer).toBeFalsy();
expect(resizerLayer).toBeFalsy();
});
it("Layout system hoc should return Fixed Modal Viewer for FIXED positioning and PAGE render mode", () => {
const widget = ModalWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[ModalWidget.type].build({
isVisible: true,
});
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.PAGE);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.FIXED);
const component = render(<HOC {...widgetProps} />);
const positionedLayer =
component.container.getElementsByClassName("positioned-widget")[0];
const resizerLayer =
component.container.getElementsByClassName("resize-wrapper")[0];
const overlayLayer =
component.container.getElementsByClassName("bp3-overlay")[0];
expect(positionedLayer).toBeFalsy();
expect(overlayLayer).toBeTruthy();
expect(resizerLayer).toBeFalsy();
});
it("Layout system hoc should return Fixed Viewer for FIXED positioning and PAGE render mode", () => {
const widget = InputWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[InputWidget.type].build();
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.PAGE);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.FIXED);
const component = render(<HOC {...widgetProps} />);
const positionedLayer =
component.container.getElementsByClassName("positioned-widget")[0];
const resizerLayer =
component.container.getElementsByClassName("resize-wrapper")[0];
expect(positionedLayer).toBeTruthy();
expect(resizerLayer).toBeFalsy();
});
it("Layout system hoc should return no wrapper for CANVAS WIDGET for FIXED positioning and PAGE render mode", () => {
const widget = CanvasWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[CanvasWidget.type].build();
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.PAGE);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.FIXED);
const component = render(<HOC {...widgetProps} />);
const positionedLayer =
component.container.getElementsByClassName("positioned-widget")[0];
const resizerLayer =
component.container.getElementsByClassName("resize-wrapper")[0];
expect(positionedLayer).toBeFalsy();
expect(resizerLayer).toBeFalsy();
});
});
describe("Auto Layout Layers", () => {
it("Layout system hoc should return Auto Layout Editor for AUTO positioning and CANVAS render mode", () => {
const widget = InputWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[InputWidget.type].build();
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.CANVAS);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.AUTO);
const component = render(<HOC {...widgetProps} />);
const flexPositionedLayer = component.container.getElementsByClassName(
"auto-layout-child-" + widgetProps.widgetId,
)[0];
const resizerLayer =
component.container.getElementsByClassName("resize-wrapper")[0];
expect(flexPositionedLayer).toBeTruthy();
expect(resizerLayer).toBeTruthy();
});
it("Layout system hoc should return Auto Modal Editor for AUTO positioning and CANVAS render mode", () => {
const widget = ModalWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[ModalWidget.type].build({
isVisible: true,
});
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.CANVAS);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.AUTO);
const component = render(<HOC {...widgetProps} />);
const flexPositionedLayer = component.container.getElementsByClassName(
"auto-layout-child-" + widgetProps.widgetId,
)[0];
const resizerLayer =
component.container.getElementsByClassName("resize-wrapper")[0];
const overlayLayer =
component.container.getElementsByClassName("bp3-overlay")[0];
expect(flexPositionedLayer).toBeFalsy();
expect(overlayLayer).toBeTruthy();
expect(resizerLayer).toBeTruthy();
});
it("Layout system hoc should return no wrapper for CANVAS WIDGET for AUTO positioning and CANVAS render mode", () => {
const widget = CanvasWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[CanvasWidget.type].build();
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.CANVAS);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.AUTO);
const component = render(<HOC {...widgetProps} />);
const flexPositionedLayer = component.container.getElementsByClassName(
"auto-layout-child-" + widgetProps.widgetId,
)[0];
const resizerLayer =
component.container.getElementsByClassName("resize-wrapper")[0];
expect(flexPositionedLayer).toBeFalsy();
expect(resizerLayer).toBeFalsy();
});
it("Layout system hoc should return Auto Modal Viewer for AUTO positioning and PAGE render mode", () => {
const widget = ModalWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[ModalWidget.type].build({
isVisible: true,
});
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.PAGE);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.AUTO);
const component = render(<HOC {...widgetProps} />);
const flexPositionedLayer = component.container.getElementsByClassName(
"auto-layout-child-" + widgetProps.widgetId,
)[0];
const resizerLayer =
component.container.getElementsByClassName("resize-wrapper")[0];
const overlayLayer =
component.container.getElementsByClassName("bp3-overlay")[0];
expect(flexPositionedLayer).toBeFalsy();
expect(overlayLayer).toBeTruthy();
expect(resizerLayer).toBeFalsy();
});
it("Layout system hoc should return Auto Viewer for Auto positioning and PAGE render mode", () => {
const widget = InputWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[InputWidget.type].build();
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.PAGE);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.AUTO);
const component = render(<HOC {...widgetProps} />);
const flexPositionedLayer = component.container.getElementsByClassName(
"auto-layout-child-" + widgetProps.widgetId,
)[0];
const resizerLayer =
component.container.getElementsByClassName("resize-wrapper")[0];
expect(flexPositionedLayer).toBeTruthy();
expect(resizerLayer).toBeFalsy();
});
it("Layout system hoc should return no wrapper for CANVAS WIDGET for Auto positioning and PAGE render mode", () => {
const widget = CanvasWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[CanvasWidget.type].build();
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.PAGE);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.AUTO);
const component = render(<HOC {...widgetProps} />);
const flexPositionedLayer = component.container.getElementsByClassName(
"auto-layout-child-" + widgetProps.widgetId,
)[0];
const resizerLayer =
component.container.getElementsByClassName("resize-wrapper")[0];
expect(flexPositionedLayer).toBeFalsy();
expect(resizerLayer).toBeFalsy();
});
});
describe("Anvil Layers", () => {
it("Layout system hoc should return Anvil Editor for ANVIL positioning and CANVAS render mode", () => {
const widget = InputWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[InputWidget.type].build();
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.CANVAS);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.ANVIL);
const component = render(<HOC {...widgetProps} />);
const flexPositionedLayer = component.container.getElementsByClassName(
"anvil-layout-child-" + widgetProps.widgetId,
)[0];
expect(flexPositionedLayer).toBeTruthy();
});
it("should return Auto Modal Editor for ANVIL positioning and CANVAS render mode", () => {
const widget = ModalWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[ModalWidget.type].build({
isVisible: true,
});
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.CANVAS);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.ANVIL);
const component = render(<HOC {...widgetProps} />);
const flexPositionedLayer = component.container.getElementsByClassName(
"anvil-layout-child-" + widgetProps.widgetId,
)[0];
const overlayLayer =
component.container.getElementsByClassName("bp3-overlay")[0];
expect(flexPositionedLayer).toBeFalsy();
expect(overlayLayer).toBeTruthy();
});
it("should return no wrapper for CANVAS WIDGET for ANVIL positioning and CANVAS render mode", () => {
const widget = CanvasWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[CanvasWidget.type].build();
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.CANVAS);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.ANVIL);
const component = render(<HOC {...widgetProps} />);
const flexPositionedLayer = component.container.getElementsByClassName(
"anvil-layout-child-" + widgetProps.widgetId,
)[0];
expect(flexPositionedLayer).toBeFalsy();
});
it("should return Auto Modal Viewer for ANVIL positioning and PAGE render mode", () => {
const widget = ModalWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[ModalWidget.type].build({
isVisible: true,
});
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.PAGE);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.ANVIL);
const component = render(<HOC {...widgetProps} />);
const flexPositionedLayer = component.container.getElementsByClassName(
"anvil-layout-child-" + widgetProps.widgetId,
)[0];
const overlayLayer =
component.container.getElementsByClassName("bp3-overlay")[0];
expect(flexPositionedLayer).toBeFalsy();
expect(overlayLayer).toBeTruthy();
});
it("should return Anvil Viewer for ANVIL positioning and PAGE render mode", () => {
const widget = InputWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[InputWidget.type].build();
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.PAGE);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.ANVIL);
const component = render(<HOC {...widgetProps} />);
const flexPositionedLayer = component.container.getElementsByClassName(
"anvil-layout-child-" + widgetProps.widgetId,
)[0];
expect(flexPositionedLayer).toBeTruthy();
});
it("should return no wrapper for CANVAS WIDGET for ANVIL positioning and PAGE render mode", () => {
const widget = CanvasWidget;
const HOC = withLayoutSystemHOC(widget);
const widgetProps = WidgetTypeFactories[CanvasWidget.type].build();
jest
.spyOn(editorSelectors, "getRenderMode")
.mockImplementation(() => RenderModes.PAGE);
jest
.spyOn(editorSelectors, "getAppPositioningType")
.mockImplementation(() => AppPositioningTypes.ANVIL);
const component = render(<HOC {...widgetProps} />);
const flexPositionedLayer = component.container.getElementsByClassName(
"anvil-layout-child-" + widgetProps.widgetId,
)[0];
expect(flexPositionedLayer).toBeFalsy();
});
});
});
Reference in New Issue View Git Blame Copy Permalink