Skip to content

Commit fdae409

Browse files
graphierosgraphieros
committed
VueUiAnnotator add e2e component test
1 parent 68e12bb commit fdae409

File tree

3 files changed

+125
-2
lines changed

3 files changed

+125
-2
lines changed

‎cypress/fixtures/annotator.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"config": {}
3+
}

‎src/components/vue-ui-annotator.cy.js‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import VueUiAnnotator from './vue-ui-annotator.vue';
2+
3+
describe('<VueUiAnnotator />', () => {
4+
beforeEach(function () {
5+
cy.fixture('annotator.json').as('fixture');
6+
cy.viewport(1000, 1100);
7+
});
8+
9+
10+
it('renders with different config attributes', function () {
11+
cy.get('@fixture').then((fixture) => {
12+
cy.mount(VueUiAnnotator, {
13+
props: {
14+
dataset: fixture.dataset,
15+
config: fixture.config
16+
},
17+
slots: {
18+
default: `<div style="margin: 0 auto;width:900px;height:900px;border:1px solid blue"></div>`
19+
}
20+
});
21+
22+
cy.get(`[data-cy="annotator-summary"]`).click();
23+
24+
cy.get(`[data-cy="annotator-button-circle"]`).click();
25+
26+
function undo(times = 1) {
27+
for (let i = 0; i < times; i += 1) {
28+
cy.get(`[data-cy="annotator-button-undo"]`).click();
29+
}
30+
}
31+
32+
cy.get('#annotatorSvg').then(($svg) => {
33+
cy.wrap($svg)
34+
.trigger('pointermove', { clientX: 500, clientY: 500 })
35+
.trigger('pointerdown')
36+
.trigger('pointermove', { clientX: 600, clientY: 600 })
37+
.wait(200)
38+
.trigger('pointerup', { force: true })
39+
.find('circle')
40+
.should('have.length', 2);
41+
42+
cy.get(`[data-cy="annotator-button-rect"]`).click();
43+
44+
cy.wrap($svg)
45+
.trigger('pointermove', { clientX: 450, clientY: 450 })
46+
.trigger('pointerdown')
47+
.trigger('pointermove', { clientX: 550, clientY: 550 })
48+
.wait(200)
49+
.trigger('pointerup', { force: true })
50+
.find('rect')
51+
.should('have.length', 4);
52+
53+
cy.get(`[data-cy="annotator-button-arrow"]`).click();
54+
55+
cy.wrap($svg)
56+
.trigger('pointermove', { clientX: 400, clientY: 700 })
57+
.trigger('pointerdown')
58+
.trigger('pointermove', { clientX: 600, clientY: 700 })
59+
.wait(200)
60+
.trigger('pointerup', { force: true })
61+
.find('path')
62+
.should('have.length', 1)
63+
64+
undo();
65+
66+
cy.get(`[data-cy="annotator-button-freehand"]`).click();
67+
cy.wrap($svg)
68+
.trigger('pointermove', { clientX: 400, clientY: 700 })
69+
.trigger('pointerdown')
70+
.trigger('pointermove', { clientX: 420, clientY: 680 })
71+
.wait(10)
72+
.trigger('pointermove', { clientX: 440, clientY: 720 })
73+
.trigger('pointermove', { clientX: 460, clientY: 680 })
74+
.trigger('pointermove', { clientX: 480, clientY: 720 })
75+
.trigger('pointermove', { clientX: 500, clientY: 680 })
76+
.trigger('pointermove', { clientX: 520, clientY: 720 })
77+
.trigger('pointermove', { clientX: 540, clientY: 680 })
78+
.trigger('pointermove', { clientX: 560, clientY: 720 })
79+
.trigger('pointermove', { clientX: 580, clientY: 680 })
80+
.trigger('pointermove', { clientX: 600, clientY: 720 })
81+
.trigger('pointermove', { clientX: 620, clientY: 680 })
82+
.trigger('pointerup', { force: true })
83+
.find('path')
84+
.should('have.length', 1);
85+
86+
undo(2);
87+
cy.get(`[data-cy="annotator-button-move"]`).click();
88+
89+
cy.wrap($svg)
90+
.trigger('pointermove', { clientX: 500, clientY: 500 })
91+
.trigger('pointerdown')
92+
.trigger('pointermove', { clientX: 600, clientY: 600 })
93+
.wait(200)
94+
.trigger('pointerup', { force: true })
95+
.find('circle')
96+
.should('have.length', 2);
97+
98+
undo();
99+
100+
cy.get(`[data-cy="annotator-button-text"]`).click();
101+
102+
cy.wrap($svg)
103+
.trigger('pointermove', { clientX: 400, clientY: 700 })
104+
.click()
105+
.type('HELLO WORLD')
106+
.find('text')
107+
.should('exist')
108+
.contains('HELLO WORLD')
109+
undo();
110+
})
111+
});
112+
})
113+
})

‎src/components/vue-ui-annotator.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,12 @@
1010
: ''
1111
}`"
1212
>
13-
<summary>{{ annotatorConfig.translations.title }}</summary>
13+
<summary data-cy="annotator-summary">{{ annotatorConfig.translations.title }}</summary>
1414

1515
<div class="tool-selection" style="margin-top:24px">
1616
<!-- MOVE -->
1717
<button
18+
data-cy="annotator-button-move"
1819
:disabled="shapes.length === 0"
1920
:style="{
2021
background: isMoveMode ? annotatorConfig.style.buttons.controls.selected.backgroundColor :annotatorConfig.style.buttons.controls.backgroundColor,
@@ -315,6 +316,7 @@
315316

316317
<!-- UNDO LAST SHAPE -->
317318
<button
319+
data-cy="annotator-button-undo"
318320
:disabled="shapes.length === 0"
319321
:style="{
320322
background: annotatorConfig.style.buttons.controls.backgroundColor,
@@ -415,6 +417,7 @@
415417
<div class="tool-selection" style="margin-top:6px">
416418
<!-- SET SHAPE TO CIRCLE -->
417419
<button
420+
data-cy="annotator-button-circle"
418421
:class="{
419422
'button-tool': true,
420423
'button-tool--selected': activeShape === 'circle',
@@ -468,6 +471,7 @@
468471

469472
<!-- SET SHAPE TO RECT -->
470473
<button
474+
data-cy="annotator-button-rect"
471475
:class="{
472476
'button-tool': true,
473477
'button-tool--selected': activeShape === 'rect',
@@ -524,6 +528,7 @@
524528

525529
<!-- SET SHAPE TO ARRROW -->
526530
<button
531+
data-cy="annotator-button-arrow"
527532
:class="{
528533
'button-tool': true,
529534
'button-tool--selected': activeShape === 'arrow',
@@ -569,6 +574,7 @@
569574

570575
<!-- SET SHAPE TO FREEHAND LINE -->
571576
<button
577+
data-cy="annotator-button-freehand"
572578
:class="{
573579
'button-tool': true,
574580
'button-tool--selected': activeShape === 'line',
@@ -670,6 +676,7 @@
670676

671677
<!-- SET SHAPE TO TEXT -->
672678
<button
679+
data-cy="annotator-button-text"
673680
:class="{
674681
'button-tool': true,
675682
'button-tool--selected': isTextMode,
@@ -1102,7 +1109,7 @@
11021109
ref="drawSvgContainer"
11031110
style="position: relative"
11041111
>
1105-
<slot></slot>
1112+
<slot data-cy="annotator-slot"></slot>
11061113
<svg
11071114
id="annotatorSvg"
11081115
v-if="isSummaryOpen"

0 commit comments

Comments
 (0)