quickmock/apps/web/e2e/inline-edit/multiple-line-inline-edit.spec.ts at d6de03e4d4677aaf61bdbb860cd3d629297bec91 · Lemoncode/quickmock · GitHub

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
import { test, expect } from '@playwright/test';
import { Group } from 'konva/lib/Group';
import { dragAndDrop, getByShapeType, getLocatorPosition } from '../helpers';

test('can add textarea to canvas, edit content, and verify shape text', async ({
  page,
}) => {
  await page.goto('');
  const component = page.getByAltText('Textarea');
  await component.scrollIntoViewIfNeeded();

  const position = await getLocatorPosition(component);
  const targetPosition = {
    x: position.x + 500,
    y: position.y - 240,
  };
  await dragAndDrop(page, position, targetPosition);
  await page.mouse.dblclick(targetPosition.x, targetPosition.y + 40);
  const textarea = page.getByRole('textbox').first();
  const textareaContent = await textarea.inputValue();
  expect(textareaContent).toEqual('Your text here...');

  const textContent = 'Hello';
  await textarea.fill(textContent);
  await page.mouse.click(800, 130);
  const textareaShape = (await getByShapeType(page, 'textarea')) as Group;

  expect(textareaShape).toBeDefined();
  const textShape = textareaShape.children.find(
    child => child.attrs.text === textContent
  );
  expect(textShape).toBeDefined();
});

test('cancels textarea edit on Escape and verifies original shape text', async ({
  page,
}) => {
  await page.goto('');
  const component = page.getByAltText('Textarea');
  await component.scrollIntoViewIfNeeded();

  const position = await getLocatorPosition(component);
  const targetPosition = {
    x: position.x + 500,
    y: position.y - 240,
  };
  await dragAndDrop(page, position, targetPosition);
  await page.mouse.dblclick(targetPosition.x, targetPosition.y + 40);
  const textarea = page.getByTestId('textareaedit');

  const textContent = 'Hello';
  await textarea.fill(textContent);
  await page.keyboard.press('Escape');
  const originalTextContent = 'Your text here...';
  const textareaShape = (await getByShapeType(page, 'textarea')) as Group;

  expect(textareaShape).toBeDefined();
  const textShape = textareaShape.children.find(
    child => child.attrs.text === originalTextContent
  );
  expect(textShape).toBeDefined();
});

test('can add and edit input, and delete last letter', async ({ page }) => {
  await page.goto('');
  const component = page.getByAltText('Textarea');
  await component.scrollIntoViewIfNeeded();

  const position = await getLocatorPosition(component);
  const targetPosition = {
    x: position.x + 500,
    y: position.y - 240,
  };
  await dragAndDrop(page, position, targetPosition);
  await page.mouse.dblclick(targetPosition.x, targetPosition.y + 40);
  const textarea = page.getByRole('textbox').first();

  const textContent = 'World';
  await textarea.fill(textContent);
  await page.keyboard.press('Backspace');
  const updatedTextareaContent = await textarea.inputValue();
  expect(updatedTextareaContent).toEqual('Worl');

  await page.mouse.click(800, 130);

  const textareaShape = (await getByShapeType(page, 'textarea')) as Group;
  expect(textareaShape).toBeDefined();
  const textShape = textareaShape.children.find(
    child => child.attrs.text === 'Worl'
  );
  expect(textShape).toBeDefined();
});

test('adds multi-line text to textarea on canvas and verifies shape text', async ({
  page,
}) => {
  await page.goto('');
  const component = page.getByAltText('Textarea');
  await component.scrollIntoViewIfNeeded();

  const position = await getLocatorPosition(component);
  const targetPosition = {
    x: position.x + 500,
    y: position.y - 240,
  };
  await dragAndDrop(page, position, targetPosition);
  await page.mouse.dblclick(targetPosition.x, targetPosition.y + 40);
  const textarea = page.getByRole('textbox').first();

  const textContent = 'Line 1\nLine 2';
  await textarea.fill(textContent);

  await page.mouse.click(800, 130);

  const textareaShape = (await getByShapeType(page, 'textarea')) as Group;
  expect(textareaShape).toBeDefined();
  const textShape = textareaShape.children.find(
    child => child.attrs.text === textContent
  );
  expect(textShape).toBeDefined();
});