Skip to content

Commit 2ed3b36

Browse files
rvsiarvsia
committed
Add basic cypress tests
1 parent e9273b4 commit 2ed3b36

File tree

11 files changed

+33908
-34252
lines changed

11 files changed

+33908
-34252
lines changed

‎package-lock.json

Lines changed: 33776 additions & 34235 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,6 @@
5454
]
5555
},
5656
"devDependencies": {
57-
"@4tw/cypress-drag-drop": "^2.1.0",
5857
"@types/lodash": "^4.14.178",
5958
"@typescript-eslint/eslint-plugin": "^5.23.0",
6059
"@typescript-eslint/parser": "^5.23.0",

‎packages/dnd/src/drop-cursor/drop-cursor.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ const DropCursor = ({ CursorProps }: DropCursorProps) => {
4949
[],
5050
);
5151

52-
const handleMouseMove = React.useCallback((e: MouseEvent) => handleMove({ x: e.x, y: e.y }), []);
52+
const handleMouseMove = React.useCallback((e: MouseEvent) => handleMove({ x: e.clientX, y: e.clientY }), []);
5353

5454
const handleTouchMove = React.useCallback((e: TouchEvent) => handleMove({ x: e.touches[0].clientX, y: e.touches[0].clientY }), []);
5555

‎packages/editor-pro/cypress/component/ProEditor.cy.tsx

Lines changed: 115 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,120 @@ const fields = propertiesFields({ componentMapper });
3131
describe('ProEditor', () => {
3232
it('can drag a new component', () => {
3333
cy.mount(<Editor fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
34-
cy.contains('text field').drag('.[style="display: flex; border: 1px dotted rgba(71, 77, 102, 0.5); min-height: 150px; background-color: rgb(249, 250, 252); padding: 4px; margin-left: 4px; flex-grow: 1; margin-right: 4px;"] > div');
34+
35+
cy.get('[data-cy="text-field"]').trigger('mousedown');
36+
cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
37+
cy.get('[data-cy="container-root"]').trigger('mouseup', 'center');
38+
39+
cy.get('[data-cy*="component-text-field"]').should('be.visible');
40+
});
41+
42+
it('can open properties editor', () => {
43+
cy.mount(<Editor fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
44+
45+
cy.get('[data-cy="text-field"]').trigger('mousedown');
46+
cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
47+
cy.get('[data-cy="container-root"]').trigger('mouseup', 'center');
48+
49+
cy.get('[data-cy*="component-text-field"]').click();
50+
51+
cy.contains('Edit field properties.').should('be.visible');
52+
});
53+
54+
it('can drag multiple components', () => {
55+
cy.mount(<Editor fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
56+
57+
cy.get('[data-cy="text-field"]').trigger('mousedown');
58+
cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
59+
cy.get('[data-cy="container-root"]').trigger('mouseup', 'center');
60+
61+
cy.get('[data-cy="checkbox"]').trigger('mousedown');
62+
cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
63+
cy.get('[data-cy="container-root"]').trigger('mouseup', 'center');
64+
65+
66+
cy.get('[data-cy*="component-text-field"]').should('be.visible');
67+
cy.get('[data-cy*="component-checkbox"]').should('be.visible');
68+
});
69+
70+
it('can drag component to top', () => {
71+
cy.mount(<Editor fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
72+
73+
cy.get('[data-cy="text-field"]').trigger('mousedown');
74+
cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
75+
cy.get('[data-cy="container-root"]').trigger('mouseup', 'center');
76+
77+
cy.get('[data-cy="checkbox"]').trigger('mousedown');
78+
cy.get('[data-cy="container-root"]').trigger('mousemove', 'top');
79+
cy.get('[data-cy="container-root"]').trigger('mouseup', 'top');
80+
81+
82+
cy.get('[data-cy*="component-text-field"]').then($el => {
83+
const textfieldPosition = $el[0].getBoundingClientRect();
84+
cy.get('[data-cy*="component-checkbox"]').then($el => {
85+
const checkboxPosition = $el[0].getBoundingClientRect();
86+
87+
assert(textfieldPosition.top > checkboxPosition.top, 'checkbox is on the top');
88+
});
89+
});
90+
});
91+
92+
it('move components', () => {
93+
cy.mount(<Editor fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
94+
95+
cy.get('[data-cy="text-field"]').trigger('mousedown');
96+
cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
97+
cy.get('[data-cy="container-root"]').trigger('mouseup', 'center');
98+
99+
cy.get('[data-cy="checkbox"]').trigger('mousedown');
100+
cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
101+
cy.get('[data-cy="container-root"]').trigger('mouseup', 'center');
102+
103+
cy.get('[data-cy*="component-checkbox"] [data-cy="handle"]').trigger('mousedown');
104+
cy.get('[data-cy="container-root"]').trigger('mousemove', 'top');
105+
cy.get('[data-cy="container-root"]').trigger('mouseup', 'top');
106+
107+
cy.get('[data-cy*="component-text-field"]').then($el => {
108+
const textfieldPosition = $el[0].getBoundingClientRect();
109+
cy.get('[data-cy*="component-checkbox"]').then($el => {
110+
const checkboxPosition = $el[0].getBoundingClientRect();
111+
112+
assert(textfieldPosition.top > checkboxPosition.top, 'checkbox is on the top');
113+
});
114+
});
115+
});
116+
117+
it('move into nested component', () => {
118+
cy.mount(<Editor fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
119+
120+
cy.get('[data-cy="sub-form"]').trigger('mousedown');
121+
cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
122+
cy.get('[data-cy="container-root"]').trigger('mouseup', 'center');
123+
124+
cy.get('[data-cy="checkbox"]').trigger('mousedown');
125+
cy.get('[data-cy*="container-sub-form"]').trigger('mousemove', 'center');
126+
cy.get('[data-cy*="container-sub-form"]').trigger('mouseup', 'center');
127+
128+
cy.get('[data-cy*="container-sub-form"] [data-cy*="component-checkbox"]').should('be.visible');
129+
});
130+
131+
it('move nested into nested component', () => {
132+
cy.mount(<Editor fields={fields} componentMapper={componentMapper} componentInitialProps={componentInitialProps} />);
133+
134+
cy.get('[data-cy="sub-form"]').trigger('mousedown');
135+
cy.get('[data-cy="container-root"]').trigger('mousemove', 'center');
136+
cy.get('[data-cy="container-root"]').trigger('mouseup', 'center');
137+
138+
cy.get('[data-cy="sub-form"]').trigger('mousedown');
139+
cy.get('[data-cy*="container-sub-form"]').trigger('mousemove', 'center');
140+
cy.get('[data-cy*="container-sub-form"]').trigger('mouseup', 'center');
141+
142+
cy.get('[data-cy*="container-sub-form"] [data-cy*="container-sub-form"]').should('be.visible');
143+
144+
cy.get('[data-cy="checkbox"]').trigger('mousedown');
145+
cy.get('[data-cy*="container-sub-form"] [data-cy*="container-sub-form"]').trigger('mousemove', 'center');
146+
cy.get('[data-cy*="container-sub-form"] [data-cy*="container-sub-form"]').trigger('mouseup', 'center');
147+
148+
cy.get('[data-cy*="container-sub-form"] [data-cy*="container-sub-form"] [data-cy*="component-checkbox"]').should('be.visible');
35149
});
36150
});

‎packages/editor-pro/cypress/support/commands.ts

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,5 +35,3 @@
3535
// }
3636
// }
3737
// }
38-
39-
import '@4tw/cypress-drag-drop';

‎packages/editor-pro/cypress/support/component.d.ts

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎packages/editor-pro/src/editor/component-wrapper.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,11 @@ const ComponentWrapper: React.FC<ComponentProps> = (props) => {
2323
HandleProps={{
2424
style: { marginLeft: 'auto' },
2525
size: 24,
26-
cursor: 'grab'
26+
cursor: 'grab',
27+
'data-cy': 'handle'
2728
}}
2829
Handle={DragHandleVerticalIcon}
30+
data-cy={`component-${props.id}`}
2931
/>;
3032
};
3133

‎packages/editor-pro/src/editor/container-wrapper.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const ContainerWrapper: React.FC<ContainerProps> = (props) => {
2626
flexGrow: 1,
2727
marginRight: 4,
2828
}}
29+
data-cy={`container-${props.isRoot ? 'root' : props.id}`}
2930
/>;
3031
};
3132

‎packages/editor-pro/src/editor/editor.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import SubForm from './sub-form';
1616
import Code from './code';
1717
import { AnyObject } from '../types';
1818

19-
const MenuItemWrapper: React.FC<MenuItemProps> = (props) => <MenuItem Component={Menu.Item} {...props} />;
19+
const MenuItemWrapper: React.FC<MenuItemProps> = (props) => <MenuItem Component={Menu.Item} {...props} data-cy={props.component}/>;
2020

2121
export interface EditorProps {
2222
componentMapper: ComponentMapper;

‎packages/editor-pro/src/types/index.d.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
11
export * from './any-object';
2+
3+
import { mount } from 'cypress/react';
4+
5+
declare global {
6+
namespace Cypress {
7+
interface Chainable {
8+
mount: typeof mount;
9+
}
10+
}
11+
}

0 commit comments

Comments
 (0)