All files / src/tests index.spec.ts

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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import { expect, test } from '@playwright/test'
import tinycolor from 'tinycolor2'
 
import { getBackgroundColor, getGraphView, move, pickNode, setInputValue, takeBeforeEach } from './helper'
 
const { getContainer } = takeBeforeEach('', 500, 500)
 
test('has nodes', async ({ }) => {
  const { findNodes } = await getGraphView(getContainer())
 
  expect(await findNodes('Add')).toHaveLength(1)
  expect(await findNodes('Number')).toHaveLength(2)
})
 
test('select node', async ({ page }) => {
  const { findNodes } = await getGraphView(getContainer())
 
  const [addNode] = await findNodes('Add')
 
  const bg = await getBackgroundColor(addNode)
 
  expect(tinycolor.readability(bg, 'blue') < 3).toBeTruthy()
 
  await pickNode(page, addNode)
 
  const selectedBg = await getBackgroundColor(addNode)
 
  expect(tinycolor.readability(selectedBg, 'yellow') < 3).toBeTruthy()
  expect(await page.screenshot()).toMatchSnapshot('selected.png')
})
 
test('change input values', async ({ page }) => {
  const { findNodes } = await getGraphView(getContainer())
 
  const [numberNode1, numberNode2] = await findNodes('Number')
 
  await setInputValue(page, numberNode1, 'value', '3')
  await setInputValue(page, numberNode2, 'value', '5')
 
  // wait for input value changed (in webkit change detector in Angular doesn't update it immediately)
  await expect(page.locator(`[data-testid="control-result"] input`)).toHaveValue('8')
})
 
test('translate', async ({ page }) => {
  const { findNodes } = await getGraphView(getContainer())
  const translateX = -100
  const translateY = 30
 
  const [numberNode1] = await findNodes('Number')
 
  const { before, after } = await move(page, numberNode1, translateX, translateY)
 
  expect(after.x - before.x).toBeCloseTo(translateX, 1)
  expect(after.y - before.y).toBeCloseTo(translateY, 1)
 
  expect(await page.screenshot()).toMatchSnapshot('translate.png')
})
 
test('disconnect', async ({ page }) => {
  const { connections, findNodes } = await getGraphView(getContainer())
  const [addNode] = await findNodes('Add')
 
  const el = await addNode.$('[data-testid="input-a"] [data-testid="input-socket"]')
  const box = await el?.boundingBox()
 
  Iif (!box) throw new Error('Cannot find bounding box for input socket')
 
  const socketCenter = {
    x: box.x + box.width / 2,
    y: box.y + box.height / 2
  }
 
  await page.mouse.move(socketCenter.x, socketCenter.y)
  await page.mouse.down()
  await page.mouse.move(socketCenter.x - 50, socketCenter.y - 30)
 
  expect(await page.screenshot()).toMatchSnapshot('disconnecting.png')
 
  await page.mouse.up()
 
  await page.waitForTimeout(500)
  expect(await connections()).toHaveLength(1)
  expect(await page.screenshot()).toMatchSnapshot('disconnected.png')
})
 
test('disconnect with clicks', async ({ page }) => {
  const { connections, findNodes } = await getGraphView(getContainer())
  const [addNode] = await findNodes('Add')
 
  const el = await addNode.$('[data-testid="input-a"] [data-testid="input-socket"]')
  const box = await el?.boundingBox()
 
  Iif (!box) throw new Error('Cannot find bounding box for input socket')
 
  const socketCenter = {
    x: box.x + box.width / 2,
    y: box.y + box.height / 2
  }
 
  await page.mouse.move(socketCenter.x, socketCenter.y)
  await page.mouse.down()
  await page.mouse.up()
 
  expect(await page.screenshot()).toMatchSnapshot('disconnecting-click.png')
 
  await page.mouse.move(socketCenter.x - 50, socketCenter.y - 30)
 
  expect(await page.screenshot()).toMatchSnapshot('disconnecting.png')
 
  await page.mouse.down()
  await page.mouse.up()
 
  await page.waitForTimeout(500)
  expect(await connections()).toHaveLength(1)
  expect(await page.screenshot()).toMatchSnapshot('disconnected.png')
})
 
test('snapshot: initial', async ({ page }) => {
  const screenshot = await page.screenshot()
 
  expect(screenshot).toMatchSnapshot('initial.png')
})