quickmock/apps/web/e2e/inline-edit/simple-inline-edit.spec.ts at 57d61871013f2fef9f26161705da70a4e54fdf6a · 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
import { test, expect } from '@playwright/test';
import { Group } from 'konva/lib/Group';
import { dragAndDrop, getByShapeType, getLocatorPosition } from '../helpers';

test('can add input component to canvas and edit', async ({ page }) => {
  await page.goto('');
  const component = page.getByAltText('Input', { exact: true });

  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);
  const input = page.getByRole('textbox').first();
  const inputValue = await input.getAttribute('value');
  expect(inputValue).toEqual('Placeholder');

  const textContent = 'User';
  await input.fill(textContent);
  await page.keyboard.press('Enter');
  const inputShape = (await getByShapeType(page, 'input')) as Group;
  expect(inputShape).toBeDefined();
  const textShape = inputShape.children.find(
    child => child.attrs.text === textContent
  );
  expect(textShape).toBeDefined();
});

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

  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);

  const input = page.getByRole('textbox').first();
  const inputValue = await input.getAttribute('value');
  expect(inputValue).toEqual('Placeholder');

  const textContent = 'user';
  await input.fill(textContent);

  await page.keyboard.press('Backspace');

  const updatedInputValue = await input.inputValue();
  expect(updatedInputValue).toEqual('use');

  await page.keyboard.press('Enter');

  const inputShape = (await getByShapeType(page, 'input')) as Group;
  expect(inputShape).toBeDefined();
  const textShape = inputShape.children.find(
    child => child.attrs.text === 'use'
  );
  expect(textShape).toBeDefined();
});

test('can edit input, press Esc key, and cancel edition', async ({ page }) => {
  await page.goto('');
  const component = page.getByAltText('Input', { exact: true });

  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);
  const input = page.getByRole('textbox').first();
  const inputValue = await input.getAttribute('value');
  expect(inputValue).toEqual('Placeholder');

  const textContent = 'User';
  await input.fill(textContent);
  await page.keyboard.press('Escape');
  const inputShape = (await getByShapeType(page, 'input')) as Group;
  expect(inputShape).toBeDefined();
  const textShape = inputShape.children.find(
    child => child.attrs.text === 'Placeholder'
  );
  expect(textShape).toBeDefined();
});