@khanacademy/perseus 0.3.4 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (52) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/es/index.css +436 -1
  3. package/dist/es/index.js +8232 -5591
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.css +436 -1
  6. package/dist/index.js +17876 -15237
  7. package/dist/index.js.map +1 -1
  8. package/dist/strings.js +0 -1
  9. package/package.json +9 -8
  10. package/src/__tests__/__snapshots__/item-renderer_test.jsx.snap +2 -3
  11. package/src/__tests__/__snapshots__/server-item-renderer_test.jsx.snap +2 -3
  12. package/src/__tests__/renderer-api_test.jsx +3 -27
  13. package/src/components/__stories__/svg-image.stories.jsx +11 -0
  14. package/src/components/fixed-to-responsive.jsx +1 -0
  15. package/src/components/input-with-examples.jsx +3 -1
  16. package/src/components/svg-image.jsx +10 -7
  17. package/src/components/text-input.jsx +65 -16
  18. package/src/definition-context.js +59 -0
  19. package/src/index.js +5 -1
  20. package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +438 -523
  21. package/src/multi-items/__tests__/multi-renderer_test.js +9 -9
  22. package/src/renderer.jsx +13 -6
  23. package/src/types.js +3 -4
  24. package/src/widgets/__stories__/definition.stories.jsx +44 -0
  25. package/src/widgets/__tests__/__snapshots__/categorizer_test.jsx.snap +76 -8
  26. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt_test.jsx.snap +6 -9
  27. package/src/widgets/__tests__/__snapshots__/graded-group-set_test.jsx.snap +2 -3
  28. package/src/widgets/__tests__/__snapshots__/grapher_test.jsx.snap +19 -2
  29. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +338 -390
  30. package/src/widgets/__tests__/__snapshots__/image_test.jsx.snap +38 -4
  31. package/src/widgets/__tests__/__snapshots__/interactive-graph_test.jsx.snap +114 -12
  32. package/src/widgets/__tests__/__snapshots__/matrix_test.jsx.snap +120 -48
  33. package/src/widgets/__tests__/__snapshots__/numeric-input_test.jsx.snap +8 -12
  34. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +3615 -4517
  35. package/src/widgets/__tests__/graded-group-set-jipt_test.jsx +0 -1
  36. package/src/widgets/__tests__/grapher.cypress.jsx +236 -176
  37. package/src/widgets/__tests__/group_test.jsx +4 -4
  38. package/src/widgets/__tests__/interactive-graph.cypress.jsx +371 -291
  39. package/src/widgets/__tests__/radio_test.jsx +73 -114
  40. package/src/widgets/definition.jsx +34 -29
  41. package/src/widgets/numeric-input.jsx +2 -15
  42. package/src/widgets/radio/base-radio.jsx +1 -1
  43. package/src/widgets/radio/choice-icon.jsx +11 -10
  44. package/src/widgets/radio/choice.jsx +164 -396
  45. package/src/widgets/radio/cross-out-button.jsx +3 -5
  46. package/src/widgets/radio/option-status.jsx +4 -5
  47. package/src/widgets/radio/__stories__/cross-out-menu.stories.jsx +0 -59
  48. package/src/widgets/radio/__stories__/cross-out-tooltip.stories.jsx +0 -59
  49. package/src/widgets/radio/__stories__/toggleable-radio-button.stories.jsx +0 -28
  50. package/src/widgets/radio/cross-out-menu-wrapper.jsx +0 -492
  51. package/src/widgets/radio/cross-out-tooltip.jsx +0 -129
  52. package/src/widgets/radio/toggleable-radio-button.jsx +0 -133
package/src/widgets/__tests__/interactive-graph.cypress.jsx CHANGED
@@ -39,24 +39,29 @@ describe("Interactive graph", () => {
39
39
  const getRenderer = renderQuestion(angleQuestion);
40
40
 
41
41
  // Act
42
- cy.get(GRAPHIE).then((node) => {
43
- const {left, top} = node[0].getBoundingClientRect();
44
-
45
- // Move vertex to "A"
46
- cy.get(POINTS)
47
- .eq(1)
48
- .dragTo({x: left + 160, y: top + 240});
49
-
50
- // Move first ray to point B
51
- cy.get(POINTS)
52
- .eq(0)
53
- .dragTo({x: left + 300, y: top + 100});
54
-
55
- // Move second ray to top-left dot
56
- cy.get(POINTS)
57
- .eq(2)
58
- .dragTo({x: left + 70, y: top + 35});
59
- });
42
+ cy.get(GRAPHIE)
43
+ .should("exist")
44
+ .then((node) => {
45
+ const {left, top} = node[0].getBoundingClientRect();
46
+
47
+ // Move vertex to "A"
48
+ cy.get(POINTS)
49
+ .eq(1)
50
+ .should("exist")
51
+ .dragTo({x: left + 160, y: top + 240});
52
+
53
+ // Move first ray to point B
54
+ cy.get(POINTS)
55
+ .eq(0)
56
+ .should("exist")
57
+ .dragTo({x: left + 300, y: top + 100});
58
+
59
+ // Move second ray to top-left dot
60
+ cy.get(POINTS)
61
+ .eq(2)
62
+ .should("exist")
63
+ .dragTo({x: left + 70, y: top + 35});
64
+ });
60
65
 
61
66
  // Assert
62
67
  cy.then(() => {
@@ -75,24 +80,29 @@ describe("Interactive graph", () => {
75
80
  const getRenderer = renderQuestion(angleQuestion);
76
81
 
77
82
  // Act
78
- cy.get(GRAPHIE).then((node) => {
79
- const {left, top} = node[0].getBoundingClientRect();
80
-
81
- // Move vertex to "A"
82
- cy.get(POINTS)
83
- .eq(1)
84
- .dragTo({x: left + 0, y: top + 240});
85
-
86
- // Move first ray to top-left black dot
87
- cy.get(POINTS)
88
- .eq(0)
89
- .dragTo({x: left + 300, y: top + 120});
90
-
91
- // Move second ray to point through B
92
- cy.get(POINTS)
93
- .eq(2)
94
- .dragTo({x: left + 70, y: top + 0});
95
- });
83
+ cy.get(GRAPHIE)
84
+ .should("exist")
85
+ .then((node) => {
86
+ const {left, top} = node[0].getBoundingClientRect();
87
+
88
+ // Move vertex to "A"
89
+ cy.get(POINTS)
90
+ .eq(1)
91
+ .should("exist")
92
+ .dragTo({x: left + 0, y: top + 240});
93
+
94
+ // Move first ray to top-left black dot
95
+ cy.get(POINTS)
96
+ .eq(0)
97
+ .should("exist")
98
+ .dragTo({x: left + 300, y: top + 120});
99
+
100
+ // Move second ray to point through B
101
+ cy.get(POINTS)
102
+ .eq(2)
103
+ .should("exist")
104
+ .dragTo({x: left + 70, y: top + 0});
105
+ });
96
106
 
97
107
  // Assert
98
108
  cy.then(() => {
@@ -113,19 +123,23 @@ describe("Interactive graph", () => {
113
123
  const getRenderer = renderQuestion(circleQuestion);
114
124
 
115
125
  // Act
116
- cy.get(GRAPHIE).then((node) => {
117
- const {left, top} = node[0].getBoundingClientRect();
118
-
119
- // Move the center point
120
- cy.get(POINTS)
121
- .eq(0)
122
- .dragTo({x: left + 160, y: top + 280});
123
-
124
- // Resize the circle
125
- cy.get(CIRCLES)
126
- .eq(0)
127
- .dragTo({x: left + 160, y: top + 320});
128
- });
126
+ cy.get(GRAPHIE)
127
+ .should("exist")
128
+ .then((node) => {
129
+ const {left, top} = node[0].getBoundingClientRect();
130
+
131
+ // Move the center point
132
+ cy.get(POINTS)
133
+ .eq(0)
134
+ .should("exist")
135
+ .dragTo({x: left + 160, y: top + 280});
136
+
137
+ // Resize the circle
138
+ cy.get(CIRCLES)
139
+ .eq(0)
140
+ .should("exist")
141
+ .dragTo({x: left + 160, y: top + 320});
142
+ });
129
143
 
130
144
  // Assert
131
145
  cy.then(() => {
@@ -144,19 +158,23 @@ describe("Interactive graph", () => {
144
158
  const getRenderer = renderQuestion(circleQuestion);
145
159
 
146
160
  // Act
147
- cy.get(GRAPHIE).then((node) => {
148
- const {left, top} = node[0].getBoundingClientRect();
149
-
150
- // Move the center point
151
- cy.get(POINTS)
152
- .eq(0)
153
- .dragTo({x: left + 160, y: top + 280});
154
-
155
- // Resize the circle
156
- cy.get(CIRCLES)
157
- .eq(0)
158
- .dragTo({x: left + 160, y: top + 390});
159
- });
161
+ cy.get(GRAPHIE)
162
+ .should("exist")
163
+ .then((node) => {
164
+ const {left, top} = node[0].getBoundingClientRect();
165
+
166
+ // Move the center point
167
+ cy.get(POINTS)
168
+ .eq(0)
169
+ .should("exist")
170
+ .dragTo({x: left + 160, y: top + 280});
171
+
172
+ // Resize the circle
173
+ cy.get(CIRCLES)
174
+ .eq(0)
175
+ .should("exist")
176
+ .dragTo({x: left + 160, y: top + 390});
177
+ });
160
178
 
161
179
  // Assert
162
180
  cy.then(() => {
@@ -180,22 +198,26 @@ describe("Interactive graph", () => {
180
198
  const getRenderer = renderQuestion(linearQuestion);
181
199
 
182
200
  // Act
183
- cy.get(GRAPHIE).then((node) => {
184
- const {left, top} = node[0].getBoundingClientRect();
185
-
186
- cy.get(POINTS)
187
- .eq(0)
188
- .dragTo({
189
- x: left + (-1 + 10) * grid,
190
- y: top + topOffset + Math.abs(1 + 10 - 20) * grid,
191
- });
192
- cy.get(POINTS)
193
- .eq(1)
194
- .dragTo({
195
- x: left + (0 + 10) * grid,
196
- y: top + topOffset + Math.abs(-2 + 10 - 20) * grid,
197
- });
198
- });
201
+ cy.get(GRAPHIE)
202
+ .should("exist")
203
+ .then((node) => {
204
+ const {left, top} = node[0].getBoundingClientRect();
205
+
206
+ cy.get(POINTS)
207
+ .eq(0)
208
+ .should("exist")
209
+ .dragTo({
210
+ x: left + (-1 + 10) * grid,
211
+ y: top + topOffset + Math.abs(1 + 10 - 20) * grid,
212
+ });
213
+ cy.get(POINTS)
214
+ .eq(1)
215
+ .should("exist")
216
+ .dragTo({
217
+ x: left + (0 + 10) * grid,
218
+ y: top + topOffset + Math.abs(-2 + 10 - 20) * grid,
219
+ });
220
+ });
199
221
 
200
222
  // Assert
201
223
  cy.then(() => {
@@ -214,22 +236,26 @@ describe("Interactive graph", () => {
214
236
  const getRenderer = renderQuestion(linearQuestion);
215
237
 
216
238
  // Act
217
- cy.get(GRAPHIE).then((node) => {
218
- const {left, top} = node[0].getBoundingClientRect();
219
-
220
- cy.get(POINTS)
221
- .eq(0)
222
- .dragTo({
223
- x: left + grid * 1,
224
- y: top + topOffset + grid * 1,
225
- });
226
- cy.get(POINTS)
227
- .eq(1)
228
- .dragTo({
229
- x: left + grid * 1,
230
- y: top + topOffset + grid * 19,
231
- });
232
- });
239
+ cy.get(GRAPHIE)
240
+ .should("exist")
241
+ .then((node) => {
242
+ const {left, top} = node[0].getBoundingClientRect();
243
+
244
+ cy.get(POINTS)
245
+ .eq(0)
246
+ .should("exist")
247
+ .dragTo({
248
+ x: left + grid * 1,
249
+ y: top + topOffset + grid * 1,
250
+ });
251
+ cy.get(POINTS)
252
+ .eq(1)
253
+ .should("exist")
254
+ .dragTo({
255
+ x: left + grid * 1,
256
+ y: top + topOffset + grid * 19,
257
+ });
258
+ });
233
259
 
234
260
  // Assert
235
261
  cy.then(() => {
@@ -252,41 +278,47 @@ describe("Interactive graph", () => {
252
278
  const getRenderer = renderQuestion(linearSystemQuestion);
253
279
 
254
280
  // Act
255
- cy.get(GRAPHIE).then((node) => {
256
- const {left, top} = node[0].getBoundingClientRect();
257
-
258
- // Move the to point A
259
- cy.get(POINTS)
260
- .eq(0)
261
- .dragTo({
262
- x: left + (-7 + 10) * grid,
263
- y: top + Math.abs(7 + 10 - 20) * grid,
264
- });
265
-
266
- // Move the to point B
267
- cy.get(POINTS)
268
- .eq(1)
269
- .dragTo({
270
- x: left + (0 + 10) * grid,
271
- y: top + Math.abs(-2 + 10 - 20) * grid,
272
- });
273
-
274
- // // Move the to point C
275
- cy.get(POINTS)
276
- .eq(2)
277
- .dragTo({
278
- x: left + (-3 + 10) * grid,
279
- y: top + Math.abs(-7 + 10 - 20) * grid,
280
- });
281
-
282
- // // Move the to point D
283
- cy.get(POINTS)
284
- .eq(3)
285
- .dragTo({
286
- x: left + (7 + 10) * grid,
287
- y: top + Math.abs(-3 + 10 - 20) * grid,
288
- });
289
- });
281
+ cy.get(GRAPHIE)
282
+ .should("exist")
283
+ .then((node) => {
284
+ const {left, top} = node[0].getBoundingClientRect();
285
+
286
+ // Move the to point A
287
+ cy.get(POINTS)
288
+ .eq(0)
289
+ .should("exist")
290
+ .dragTo({
291
+ x: left + (-7 + 10) * grid,
292
+ y: top + Math.abs(7 + 10 - 20) * grid,
293
+ });
294
+
295
+ // Move the to point B
296
+ cy.get(POINTS)
297
+ .eq(1)
298
+ .should("exist")
299
+ .dragTo({
300
+ x: left + (0 + 10) * grid,
301
+ y: top + Math.abs(-2 + 10 - 20) * grid,
302
+ });
303
+
304
+ // // Move the to point C
305
+ cy.get(POINTS)
306
+ .eq(2)
307
+ .should("exist")
308
+ .dragTo({
309
+ x: left + (-3 + 10) * grid,
310
+ y: top + Math.abs(-7 + 10 - 20) * grid,
311
+ });
312
+
313
+ // // Move the to point D
314
+ cy.get(POINTS)
315
+ .eq(3)
316
+ .should("exist")
317
+ .dragTo({
318
+ x: left + (7 + 10) * grid,
319
+ y: top + Math.abs(-3 + 10 - 20) * grid,
320
+ });
321
+ });
290
322
 
291
323
  // Assert
292
324
  cy.then(() => {
@@ -305,41 +337,47 @@ describe("Interactive graph", () => {
305
337
  const getRenderer = renderQuestion(linearSystemQuestion);
306
338
 
307
339
  // Act
308
- cy.get(GRAPHIE).then((node) => {
309
- const {left, top} = node[0].getBoundingClientRect();
310
-
311
- // Move the to point A
312
- cy.get(POINTS)
313
- .eq(0)
314
- .dragTo({
315
- x: left + (-9 + 10) * grid,
316
- y: top + Math.abs(9 + 10 - 20) * grid,
317
- });
318
-
319
- // Move the to point B
320
- cy.get(POINTS)
321
- .eq(1)
322
- .dragTo({
323
- x: left + (9 + 10) * grid,
324
- y: top + Math.abs(9 + 10 - 20) * grid,
325
- });
326
-
327
- // // Move the to point C
328
- cy.get(POINTS)
329
- .eq(2)
330
- .dragTo({
331
- x: left + (-9 + 10) * grid,
332
- y: top + Math.abs(-9 + 10 - 20) * grid,
333
- });
334
-
335
- // // Move the to point D
336
- cy.get(POINTS)
337
- .eq(3)
338
- .dragTo({
339
- x: left + (9 + 10) * grid,
340
- y: top + Math.abs(-9 + 10 - 20) * grid,
341
- });
342
- });
340
+ cy.get(GRAPHIE)
341
+ .should("exist")
342
+ .then((node) => {
343
+ const {left, top} = node[0].getBoundingClientRect();
344
+
345
+ // Move the to point A
346
+ cy.get(POINTS)
347
+ .eq(0)
348
+ .should("exist")
349
+ .dragTo({
350
+ x: left + (-9 + 10) * grid,
351
+ y: top + Math.abs(9 + 10 - 20) * grid,
352
+ });
353
+
354
+ // Move the to point B
355
+ cy.get(POINTS)
356
+ .eq(1)
357
+ .should("exist")
358
+ .dragTo({
359
+ x: left + (9 + 10) * grid,
360
+ y: top + Math.abs(9 + 10 - 20) * grid,
361
+ });
362
+
363
+ // // Move the to point C
364
+ cy.get(POINTS)
365
+ .eq(2)
366
+ .should("exist")
367
+ .dragTo({
368
+ x: left + (-9 + 10) * grid,
369
+ y: top + Math.abs(-9 + 10 - 20) * grid,
370
+ });
371
+
372
+ // // Move the to point D
373
+ cy.get(POINTS)
374
+ .eq(3)
375
+ .should("exist")
376
+ .dragTo({
377
+ x: left + (9 + 10) * grid,
378
+ y: top + Math.abs(-9 + 10 - 20) * grid,
379
+ });
380
+ });
343
381
 
344
382
  // Assert
345
383
  cy.then(() => {
@@ -364,6 +402,7 @@ describe("Interactive graph", () => {
364
402
  // Act
365
403
  cy.get(".graphie > svg > rect")
366
404
  .first()
405
+ .should("exist")
367
406
  .click((0 + 4) * grid, 4 * grid)
368
407
  .click((-2.5 + 4) * grid, 4 * grid)
369
408
  .click((-1 + 4) * grid, 4 * grid);
@@ -388,6 +427,7 @@ describe("Interactive graph", () => {
388
427
  cy.get(GRAPHIE).then((node) => {
389
428
  cy.get(".graphie > svg > rect")
390
429
  .first()
430
+ .should("exist")
391
431
  .click((-3 + 4) * grid, Math.abs(-3 + 4 - 8) * grid)
392
432
  .click((0 + 4) * grid, Math.abs(0 + 4 - 8) * grid)
393
433
  .click((3 + 4) * grid, Math.abs(3 + 4 - 8) * grid);
@@ -415,12 +455,23 @@ describe("Interactive graph", () => {
415
455
  const getRenderer = renderQuestion(question);
416
456
 
417
457
  /** Act */
418
- cy.get(GRAPHIE).then((node) => {
419
- // We're dragging the three points to form a 3/4/5 triangle
420
- cy.get(POINTS).eq(0).dragTo({x: 92, y: 126});
421
- cy.get(POINTS).eq(1).dragTo({x: 92, y: 298});
422
- cy.get(POINTS).eq(2).dragTo({x: 320, y: 298});
423
- });
458
+ cy.get(GRAPHIE)
459
+ .should("exist")
460
+ .then((node) => {
461
+ // We're dragging the three points to form a 3/4/5 triangle
462
+ cy.get(POINTS)
463
+ .eq(0)
464
+ .should("exist")
465
+ .dragTo({x: 92, y: 126});
466
+ cy.get(POINTS)
467
+ .eq(1)
468
+ .should("exist")
469
+ .dragTo({x: 92, y: 298});
470
+ cy.get(POINTS)
471
+ .eq(2)
472
+ .should("exist")
473
+ .dragTo({x: 320, y: 298});
474
+ });
424
475
 
425
476
  // Assert
426
477
  cy.then(() => {
@@ -440,24 +491,29 @@ describe("Interactive graph", () => {
440
491
  const getRenderer = renderQuestion(question);
441
492
 
442
493
  /** Act */
443
- cy.get(GRAPHIE).then((node) => {
444
- // const {left, top} = node.position();
445
- const {left, top} = node[0].getBoundingClientRect();
446
- const x = left + 20;
447
- const y = top + 20;
448
- // If one point is off, it won't work
449
- cy.get(POINTS)
450
- .eq(0)
451
- .dragTo({x: x + grid * 2, y: y});
452
-
453
- cy.get(POINTS)
454
- .eq(1)
455
- .dragTo({x: x, y: y + grid * 3});
456
-
457
- cy.get(POINTS)
458
- .eq(2)
459
- .dragTo({x: x + grid * 4, y: y + grid * 3});
460
- });
494
+ cy.get(GRAPHIE)
495
+ .should("exist")
496
+ .then((node) => {
497
+ // const {left, top} = node.position();
498
+ const {left, top} = node[0].getBoundingClientRect();
499
+ const x = left + 20;
500
+ const y = top + 20;
501
+ // If one point is off, it won't work
502
+ cy.get(POINTS)
503
+ .eq(0)
504
+ .should("exist")
505
+ .dragTo({x: x + grid * 2, y: y});
506
+
507
+ cy.get(POINTS)
508
+ .eq(1)
509
+ .should("exist")
510
+ .dragTo({x: x, y: y + grid * 3});
511
+
512
+ cy.get(POINTS)
513
+ .eq(2)
514
+ .should("exist")
515
+ .dragTo({x: x + grid * 4, y: y + grid * 3});
516
+ });
461
517
 
462
518
  // Assert
463
519
  cy.then(() => {
@@ -480,23 +536,27 @@ describe("Interactive graph", () => {
480
536
  const getRenderer = renderQuestion(rayQuestion);
481
537
 
482
538
  // Act
483
- cy.get(GRAPHIE).then((node) => {
484
- const {left, top} = node[0].getBoundingClientRect();
485
-
486
- cy.get(POINTS)
487
- .eq(0)
488
- .dragTo({
489
- x: left + (5 + 10) * grid,
490
- y: top + Math.abs(3 + 10 - 20) * grid,
491
- });
492
-
493
- cy.get(POINTS)
494
- .eq(1)
495
- .dragTo({
496
- x: left + (-5 + 10) * grid,
497
- y: top + Math.abs(-5 + 10 - 20) * grid,
498
- });
499
- });
539
+ cy.get(GRAPHIE)
540
+ .should("exist")
541
+ .then((node) => {
542
+ const {left, top} = node[0].getBoundingClientRect();
543
+
544
+ cy.get(POINTS)
545
+ .eq(0)
546
+ .should("exist")
547
+ .dragTo({
548
+ x: left + (5 + 10) * grid,
549
+ y: top + Math.abs(3 + 10 - 20) * grid,
550
+ });
551
+
552
+ cy.get(POINTS)
553
+ .eq(1)
554
+ .should("exist")
555
+ .dragTo({
556
+ x: left + (-5 + 10) * grid,
557
+ y: top + Math.abs(-5 + 10 - 20) * grid,
558
+ });
559
+ });
500
560
 
501
561
  // Assert
502
562
  cy.then(() => {
@@ -515,24 +575,28 @@ describe("Interactive graph", () => {
515
575
  const getRenderer = renderQuestion(rayQuestion);
516
576
 
517
577
  // Act
518
- cy.get(GRAPHIE).then((node) => {
519
- const {left, top} = node[0].getBoundingClientRect();
520
-
521
- // Reversed direction
522
- cy.get(POINTS)
523
- .eq(0)
524
- .dragTo({
525
- x: left + (7 + 10) * grid,
526
- y: top + Math.abs(-7 + 10 - 20) * grid,
527
- });
528
-
529
- cy.get(POINTS)
530
- .eq(1)
531
- .dragTo({
532
- x: left + (3 + 10) * grid,
533
- y: top + Math.abs(3 + 10 - 20) * grid,
534
- });
535
- });
578
+ cy.get(GRAPHIE)
579
+ .should("exist")
580
+ .then((node) => {
581
+ const {left, top} = node[0].getBoundingClientRect();
582
+
583
+ // Reversed direction
584
+ cy.get(POINTS)
585
+ .eq(0)
586
+ .should("exist")
587
+ .dragTo({
588
+ x: left + (7 + 10) * grid,
589
+ y: top + Math.abs(-7 + 10 - 20) * grid,
590
+ });
591
+
592
+ cy.get(POINTS)
593
+ .eq(1)
594
+ .should("exist")
595
+ .dragTo({
596
+ x: left + (3 + 10) * grid,
597
+ y: top + Math.abs(3 + 10 - 20) * grid,
598
+ });
599
+ });
536
600
 
537
601
  // Assert
538
602
  cy.then(() => {
@@ -555,23 +619,27 @@ describe("Interactive graph", () => {
555
619
  const getRenderer = renderQuestion(segmentQuestion);
556
620
 
557
621
  // Act
558
- cy.get(GRAPHIE).then((node) => {
559
- const {left, top} = node[0].getBoundingClientRect();
560
-
561
- cy.get(POINTS)
562
- .eq(0)
563
- .dragTo({
564
- x: left + (-7 + 10) * grid,
565
- y: top + Math.abs(7 + 10 - 20) * grid,
566
- });
567
-
568
- cy.get(POINTS)
569
- .eq(1)
570
- .dragTo({
571
- x: left + (2 + 10) * grid,
572
- y: top + Math.abs(5 + 10 - 20) * grid,
573
- });
574
- });
622
+ cy.get(GRAPHIE)
623
+ .should("exist")
624
+ .then((node) => {
625
+ const {left, top} = node[0].getBoundingClientRect();
626
+
627
+ cy.get(POINTS)
628
+ .eq(0)
629
+ .should("exist")
630
+ .dragTo({
631
+ x: left + (-7 + 10) * grid,
632
+ y: top + Math.abs(7 + 10 - 20) * grid,
633
+ });
634
+
635
+ cy.get(POINTS)
636
+ .eq(1)
637
+ .should("exist")
638
+ .dragTo({
639
+ x: left + (2 + 10) * grid,
640
+ y: top + Math.abs(5 + 10 - 20) * grid,
641
+ });
642
+ });
575
643
 
576
644
  // Assert
577
645
  cy.then(() => {
@@ -590,23 +658,27 @@ describe("Interactive graph", () => {
590
658
  const getRenderer = renderQuestion(segmentQuestion);
591
659
 
592
660
  // Act
593
- cy.get(GRAPHIE).then((node) => {
594
- const {left, top} = node[0].getBoundingClientRect();
595
-
596
- cy.get(POINTS)
597
- .eq(0)
598
- .dragTo({
599
- x: left + (8 + 10) * grid,
600
- y: top + Math.abs(2 + 10 - 20) * grid,
601
- });
602
-
603
- cy.get(POINTS)
604
- .eq(1)
605
- .dragTo({
606
- x: left + (8 + 10) * grid,
607
- y: top + Math.abs(-8 + 10 - 20) * grid,
608
- });
609
- });
661
+ cy.get(GRAPHIE)
662
+ .should("exist")
663
+ .then((node) => {
664
+ const {left, top} = node[0].getBoundingClientRect();
665
+
666
+ cy.get(POINTS)
667
+ .eq(0)
668
+ .should("exist")
669
+ .dragTo({
670
+ x: left + (8 + 10) * grid,
671
+ y: top + Math.abs(2 + 10 - 20) * grid,
672
+ });
673
+
674
+ cy.get(POINTS)
675
+ .eq(1)
676
+ .should("exist")
677
+ .dragTo({
678
+ x: left + (8 + 10) * grid,
679
+ y: top + Math.abs(-8 + 10 - 20) * grid,
680
+ });
681
+ });
610
682
 
611
683
  // Assert
612
684
  cy.then(() => {
@@ -629,23 +701,27 @@ describe("Interactive graph", () => {
629
701
  const getRenderer = renderQuestion(sinusoidQuestion);
630
702
 
631
703
  // Act
632
- cy.get(GRAPHIE).then((node) => {
633
- const {left, top} = node[0].getBoundingClientRect();
634
-
635
- cy.get(POINTS)
636
- .eq(0)
637
- .dragTo({
638
- x: left + (1 + 10) * grid,
639
- y: top + Math.abs(2 + 10 - 20) * grid,
640
- });
641
-
642
- cy.get(POINTS)
643
- .eq(1)
644
- .dragTo({
645
- x: left + (1.5 + 10) * grid,
646
- y: top + Math.abs(5 + 10 - 20) * grid,
647
- });
648
- });
704
+ cy.get(GRAPHIE)
705
+ .should("exist")
706
+ .then((node) => {
707
+ const {left, top} = node[0].getBoundingClientRect();
708
+
709
+ cy.get(POINTS)
710
+ .eq(0)
711
+ .should("exist")
712
+ .dragTo({
713
+ x: left + (1 + 10) * grid,
714
+ y: top + Math.abs(2 + 10 - 20) * grid,
715
+ });
716
+
717
+ cy.get(POINTS)
718
+ .eq(1)
719
+ .should("exist")
720
+ .dragTo({
721
+ x: left + (1.5 + 10) * grid,
722
+ y: top + Math.abs(5 + 10 - 20) * grid,
723
+ });
724
+ });
649
725
 
650
726
  // Assert
651
727
  cy.then(() => {
@@ -664,23 +740,27 @@ describe("Interactive graph", () => {
664
740
  const getRenderer = renderQuestion(sinusoidQuestion);
665
741
 
666
742
  // Act
667
- cy.get(GRAPHIE).then((node) => {
668
- const {left, top} = node[0].getBoundingClientRect();
669
-
670
- cy.get(POINTS)
671
- .eq(0)
672
- .dragTo({
673
- x: left + (0 + 10) * grid,
674
- y: top + Math.abs(0 + 10 - 20) * grid,
675
- });
676
-
677
- cy.get(POINTS)
678
- .eq(1)
679
- .dragTo({
680
- x: left + (5 + 10) * grid,
681
- y: top + Math.abs(9 + 10 - 20) * grid,
682
- });
683
- });
743
+ cy.get(GRAPHIE)
744
+ .should("exist")
745
+ .then((node) => {
746
+ const {left, top} = node[0].getBoundingClientRect();
747
+
748
+ cy.get(POINTS)
749
+ .eq(0)
750
+ .should("exist")
751
+ .dragTo({
752
+ x: left + (0 + 10) * grid,
753
+ y: top + Math.abs(0 + 10 - 20) * grid,
754
+ });
755
+
756
+ cy.get(POINTS)
757
+ .eq(1)
758
+ .should("exist")
759
+ .dragTo({
760
+ x: left + (5 + 10) * grid,
761
+ y: top + Math.abs(9 + 10 - 20) * grid,
762
+ });
763
+ });
684
764
 
685
765
  // Assert
686
766
  cy.then(() => {