1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
| const { getSizeConvertor, convertToFixed, clickKonva, polygonKonva, dragKonva, serialize } = require("./helpers");
|
| const assert = require("assert");
|
| Feature("Test Image object");
|
| const getConfigWithShape = (shape, props = "") => `
| <View>
| <Image name="img" value="$image" />
| <${shape} ${props} name="tag" toName="img" />
| </View>`;
|
| const IMAGE =
| "https://htx-pub.s3.us-east-1.amazonaws.com/examples/images/nick-owuor-astro-nic-visuals-wDifg5xc9Z4-unsplash.jpg";
|
| // precalculated image size on the screen; may change because of different reasons
| const WIDTH = 706;
| const HEIGHT = 882;
| const convertToImageSize = getSizeConvertor(WIDTH, HEIGHT);
|
| const annotationEmpty = {
| id: "1000",
| result: [],
| };
|
| const shapes = [
| {
| shape: "KeyPoint",
| props: 'strokeWidth="5"',
| action: clickKonva,
| regions: [
| {
| params: [200, 100],
| result: { x: 200, y: 100, width: 5 },
| },
| {
| params: [100, 100],
| result: { x: 100, y: 100, width: 5 },
| },
| ],
| },
| {
| shape: "Polygon",
| action: polygonKonva,
| regions: [
| {
| // outer array — params, inner array — points as the first param
| params: [
| [
| [200, 20],
| [400, 100],
| [300, 200],
| ],
| ],
| result: {
| points: [
| [200, 20],
| [400, 100],
| [300, 200],
| ],
| },
| },
| {
| // outer array — params, inner array — points as the first param
| params: [
| [
| [400, 10],
| [400, 90],
| [370, 30],
| [300, 10],
| ],
| ],
| result: {
| points: [
| [400, 10],
| [400, 90],
| [370, 30],
| [300, 10],
| ],
| },
| },
| ],
| },
| {
| shape: "Rectangle",
| action: dragKonva,
| regions: [
| {
| params: [100, 210, 80, 30],
| result: { width: 80, height: 30, rotation: 0, x: 100, y: 210 },
| },
| {
| params: [100, 350, -50, -50],
| result: { width: 50, height: 50, rotation: 0, x: 50, y: 300 },
| },
| ],
| },
| {
| shape: "Ellipse",
| action: dragKonva,
| regions: [
| {
| params: [300, 300, 50, 50],
| result: { radiusX: 50, radiusY: 50, rotation: 0, x: 300, y: 300 },
| },
| {
| // @todo Ellipse behave differently depending on direction of drawing
| // it keeps center at the start point on right-down movement
| // and it moves center after the cursor on left-up movement
| // @todo looks like a bug
| params: [230, 300, -50, -30],
| result: { radiusX: 50, radiusY: 30, rotation: 0, x: 180, y: 270 },
| },
| ],
| },
| ];
|
| // eslint-disable-next-line no-undef,codeceptjs/no-skipped-tests
| xScenario("Simple shapes on Image", async ({ I, LabelStudio, AtOutliner }) => {
| for (const shape of shapes) {
| const params = {
| config: getConfigWithShape(shape.shape, shape.props),
| data: { image: IMAGE },
| annotations: [annotationEmpty],
| };
|
| I.amOnPage("/");
| LabelStudio.init(params);
| LabelStudio.waitForObjectsReady();
| AtOutliner.seeRegions(0);
|
| for (const region of shape.regions) {
| // draw the shape using corresponding helper and params
| const err = await I.executeScript(shape.action, region.params);
|
| if (err) throw new Error(err);
| }
|
| const result = await I.executeScript(serialize);
|
| for (let i = 0; i < shape.regions.length; i++) {
| assert.equal(result[i].type, shape.shape.toLowerCase());
| assert.deepEqual(convertToFixed(result[i].value), convertToImageSize(shape.regions[i].result));
| }
| }
| });
|
|
