Skip to content

Commit e7deb6a

Browse files
David HartmannJackUrb
David Hartmann
authored and
JackUrb
committed
test: fix image movement tests (ImagePane)
1 parent 89b7292 commit e7deb6a

File tree

2 files changed

+138
-34
lines changed

2 files changed

+138
-34
lines changed

‎cypress/integration/image.js

+136-34
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ const path = require('path');
66
const win_selector = '.layout .react-grid-item';
77
const container_selector = `${win_selector} .content > div`;
88
const img_selector = `${container_selector} img`;
9+
const [moveX, moveY] = [12, 34]; // required for drag/drop action
10+
const [imgWidth, imgHeight] = [255, 510]; // required for drag/drop action
11+
const basepos = 10; // required for drag/drop action
912

1013
describe('Image Pane', () => {
1114
it('image_basic', () => {
@@ -16,77 +19,176 @@ describe('Image Pane', () => {
1619
.should('have.length', 1);
1720
});
1821

19-
it('Image Movement (Alt + Wheel or Drag)', () => {
20-
// check default position
22+
it('Image Move (Drag and Drop)', () => {
23+
// check new position
2124
cy.get(container_selector)
22-
.first()
2325
.should('have.css', 'top', '0px')
2426
.should('have.css', 'left', '0px');
2527

28+
// drag image
29+
cy.get(img_selector)
30+
.drag(img_selector, {
31+
source: { x: basepos, y: basepos },
32+
target: { x: basepos + moveX, y: basepos + moveY },
33+
force: true,
34+
})
35+
.wait(100);
36+
37+
// check new position
38+
cy.get(container_selector)
39+
.should('have.css', 'top', `${moveY}px`)
40+
.should('have.css', 'left', `${moveX}px`);
41+
cy.get(img_selector)
42+
.should('have.attr', 'width', `${imgWidth}px`)
43+
.should('have.attr', 'height', `${imgHeight}px`);
44+
45+
// drag again
46+
cy.get(img_selector)
47+
.drag(img_selector, {
48+
source: { x: basepos, y: basepos },
49+
target: { x: basepos + moveX, y: basepos + moveY },
50+
force: true,
51+
})
52+
.wait(100);
53+
54+
// check new position
55+
cy.get(container_selector)
56+
.should('have.css', 'top', `${2 * moveY}px`)
57+
.should('have.css', 'left', `${2 * moveX}px`);
58+
cy.get(img_selector)
59+
.should('have.attr', 'width', `${imgWidth}px`)
60+
.should('have.attr', 'height', `${imgHeight}px`);
61+
});
62+
63+
it('Image Reset (Double-Click)', () => {
64+
// reset image
65+
cy.get(img_selector).dblclick();
66+
67+
// check new position & image size
68+
cy.get(container_selector)
69+
.should('have.css', 'top', '0px')
70+
.should('have.css', 'left', '0px');
71+
cy.get(img_selector)
72+
.should('have.attr', 'width', `${imgWidth}px`)
73+
.should('have.attr', 'height', `${imgHeight}px`);
74+
});
75+
76+
it('Image Zoom From Image Corner (Ctrl + Wheel)', () => {
2677
// scroll a bit
2778
cy.get(img_selector)
2879
.first()
2980
.trigger('wheel', {
30-
altKey: true,
31-
deltaY: 20,
32-
deltaX: 30,
81+
ctrlKey: true,
82+
deltaY: 200,
3383
bubbles: true,
34-
});
84+
clientX: 0,
85+
clientY: 0,
86+
})
87+
.trigger('wheel', {
88+
ctrlKey: true,
89+
deltaY: 200,
90+
bubbles: true,
91+
clientX: 0,
92+
clientY: 0,
93+
})
94+
.trigger('wheel', {
95+
ctrlKey: true,
96+
deltaY: 200,
97+
bubbles: true,
98+
clientX: 0,
99+
clientY: 0,
100+
})
101+
.trigger('wheel', {
102+
ctrlKey: true,
103+
deltaY: 200,
104+
bubbles: true,
105+
clientX: 0,
106+
clientY: 0,
107+
})
108+
.trigger('wheel', {
109+
ctrlKey: true,
110+
deltaY: 200,
111+
bubbles: true,
112+
clientX: 0,
113+
clientY: 0,
114+
})
115+
.should('have.attr', 'width', '156px')
116+
.should('have.attr', 'height', '312px');
35117

36118
// check new position
37119
cy.get(container_selector)
38120
.first()
39-
.should('have.css', 'top', '-50px')
40-
.should('have.css', 'left', '-50px');
121+
.should('have.css', 'top', '-32.658px')
122+
.should('have.css', 'left', '-3.93469px');
123+
});
41124

42-
// check drag and drop
125+
it('Image Zoom From Image Center (Ctrl + Wheel)', () => {
126+
// reset image
127+
cy.get(img_selector).dblclick();
128+
129+
// scroll a bit
43130
cy.get(img_selector)
44131
.first()
45-
.trigger('mousemove', {
46-
button: 0,
47-
clientX: 120,
48-
clientY: 300,
49-
})
50-
.trigger('dragover');
132+
.trigger('wheel', { ctrlKey: true, deltaY: 200, bubbles: true })
133+
.trigger('wheel', { ctrlKey: true, deltaY: 200, bubbles: true })
134+
.trigger('wheel', { ctrlKey: true, deltaY: 200, bubbles: true })
135+
.trigger('wheel', { ctrlKey: true, deltaY: 200, bubbles: true })
136+
.trigger('wheel', { ctrlKey: true, deltaY: 200, bubbles: true })
137+
.should('have.attr', 'width', '156px')
138+
.should('have.attr', 'height', '312px');
51139

52140
// check new position
53141
cy.get(container_selector)
54142
.first()
55-
.should('have.css', 'top', '256px')
56-
.should('have.css', 'left', '38px');
143+
.should('have.css', 'top', '105.77px')
144+
.should('have.css', 'left', '49.9706px');
57145
});
58146

59-
it('Image Zoom (Ctrl + Wheel)', () => {
147+
it('Image Move & Zoom', () => {
148+
// reset image
149+
cy.get(img_selector).first().dblclick();
150+
151+
// check default position
152+
cy.get(container_selector)
153+
.first()
154+
.should('have.css', 'top', '0px')
155+
.should('have.css', 'left', '0px');
156+
60157
// scroll a bit
61158
cy.get(img_selector)
62159
.first()
63160
.trigger('wheel', { ctrlKey: true, deltaY: 200, bubbles: true })
64161
.trigger('wheel', { ctrlKey: true, deltaY: 200, bubbles: true })
65162
.trigger('wheel', { ctrlKey: true, deltaY: 200, bubbles: true })
66163
.trigger('wheel', { ctrlKey: true, deltaY: 200, bubbles: true })
67-
.trigger('wheel', { ctrlKey: true, deltaY: 200, bubbles: true })
68-
.should('have.attr', 'width', '157px')
69-
.should('have.attr', 'height', '314px');
164+
.trigger('wheel', { ctrlKey: true, deltaY: 200, bubbles: true });
70165

71166
// check new position
72167
cy.get(container_selector)
73168
.first()
74-
.should('have.css', 'top', '276.786px')
75-
.should('have.css', 'left', '81.5211px');
76-
});
169+
.should('have.css', 'top', '105.77px')
170+
.should('have.css', 'left', '49.9706px');
171+
cy.get(img_selector)
172+
.should('have.attr', 'width', '156px')
173+
.should('have.attr', 'height', '312px');
77174

78-
it('Image Reset (Double-Click)', () => {
175+
// now drag as well
79176
cy.get(img_selector)
80-
.first()
81-
.dblclick()
82-
.should('have.attr', 'width', '257px')
83-
.should('have.attr', 'height', '514px');
177+
.drag(img_selector, {
178+
source: { x: basepos, y: basepos },
179+
target: { x: basepos + moveX, y: basepos + moveY },
180+
force: true,
181+
})
182+
.wait(100);
84183

85184
// check new position
86185
cy.get(container_selector)
87186
.first()
88-
.should('have.css', 'top', '0px')
89-
.should('have.css', 'left', '0px');
187+
.should('have.css', 'top', `139.77px`)
188+
.should('have.css', 'left', '61.9706px');
189+
cy.get(img_selector)
190+
.should('have.attr', 'width', '156px')
191+
.should('have.attr', 'height', '312px');
90192
});
91193

92194
it('image_basic download', () => {
@@ -149,8 +251,8 @@ describe('Image Pane', () => {
149251
cy.run('image_grid', { asyncrun: true });
150252
cy.get(img_selector)
151253
.should('have.length', 1)
152-
.should('have.attr', 'width', '545px')
153-
.should('have.attr', 'height', '205px');
254+
.should('have.attr', 'width', '543px')
255+
.should('have.attr', 'height', '204px');
154256
});
155257

156258
it('image_svg', () => {

‎cypress/support/commands.js

+2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@
2626
//
2727
//
2828

29+
import '@4tw/cypress-drag-drop';
30+
2931
Cypress.Commands.add('run', (name, opts) => {
3032
var saveto = (opts && "env" in opts) ? opts["env"] : name + "_" + Cypress._.random(0, 1e6);
3133
var argscli = (opts && "args" in opts) ? (' -arg '+opts["args"].join(' ')) : '';

0 commit comments

Comments
 (0)