Merge pull request #28 from retejs/feature/scopes-template

Feature/scopes template

package.json

@@ -29,11 +29,11 @@
   "devDependencies": {
     "@types/tinycolor2": "^1.4.3",
     "nodemon": "^2.0.20",
-    "rete-kit": "^1.5.5",
+    "rete-kit": "^1.7.0",
     "typescript": "^4.9.5"
   },
   "peerDependencies": {
-    "rete-kit": "^1.5.0"
+    "rete-kit": "^1.7.0"
   },
   "dependencies": {
     "@playwright/test": "^1.37.1",

src/tests/helper.ts

@@ -19,7 +19,7 @@ export async function getGraphView(container: ElementHandle<HTMLElement | SVGEle
       const list: Node[] = []
 
       for (const node of await nodes()) {
-        const titleElement = await node.$(`[data-testid="title"]:text("${title}")`)
+        const titleElement = await node.$(`[data-testid="title"]:text-is("${title}")`)
 
         if (titleElement) list.push(node)
       }
@@ -63,6 +63,15 @@ export async function boundingBox(node: Node) {
   return box
 }
 
+export function toRect(box: { x: number, y: number, width: number, height: number }) {
+  return {
+    left: box.x,
+    right: box.x + box.width,
+    top: box.y,
+    bottom: box.y + box.height
+  }
+}
+
 export function takeBeforeEach(path: string, timeoutBefore: number, timeoutAfter: number) {
   let container!: ElementHandle<HTMLElement | SVGElement>
 
@@ -112,14 +121,25 @@ export async function clickCenter(page: Page, selector: ElementHandle<HTMLElemen
   await page.mouse.up({ button })
 }
 
-export async function move(page: Page, node: ElementHandle<HTMLElement | SVGElement>, dx: number, dy: number, handlerPosition: 'corner' | 'center' = 'corner') {
+export async function move(page: Page, node: ElementHandle<HTMLElement | SVGElement>, dx: number, dy: number, handlerPosition: 'corner' | 'center' = 'corner', options?: {
+  down?: () => Promise<void>,
+  up?: () => Promise<void>
+}) {
   const beforeBox = await boundingBox(node)
   const pickOffset = handlerPosition === 'corner' ? { x: 20, y: 20 } : { x: beforeBox.width / 2, y: beforeBox.height / 2 }
 
   await page.mouse.move(beforeBox.x + pickOffset.x, beforeBox.y + pickOffset.y)
-  await page.mouse.down({ button: 'left' })
+  if (options?.down) {
+    await options.down()
+  } else {
+    await page.mouse.down({ button: 'left' })
+  }
   await page.mouse.move(beforeBox.x + pickOffset.x + dx, beforeBox.y + pickOffset.y + dy)
-  await page.mouse.up({ button: 'left' })
+  if (options?.up) {
+    await options.up()
+  } else {
+    await page.mouse.up({ button: 'left' })
+  }
 
   const afterBox = await boundingBox(node)
 

src/tests/scopes.spec.ts

@@ -0,0 +1,73 @@
+import { test, expect } from '@playwright/test'
+import { boundingBox, getGraphView, isInside, move, pickNode, takeBeforeEach, toRect } from './helper'
+
+test.describe('Scopes', () => {
+  const { getContainer } = takeBeforeEach('?template=scopes', 500, 500)
+
+  test('has nodes', async () => {
+    const { findNodes } = await getGraphView(getContainer())
+
+    expect(await findNodes('A')).toHaveLength(1)
+    expect(await findNodes('B')).toHaveLength(2)
+    expect(await findNodes('Parent')).toHaveLength(2)
+  })
+
+  test('snapshot', async ({ page }) => {
+    expect(await page.screenshot()).toMatchSnapshot('scopes.png')
+  })
+
+  // eslint-disable-next-line max-statements
+  test('has correct sizes', async () => {
+    const { findNodes } = await getGraphView(getContainer())
+
+    const [A] = await findNodes('A')
+    const [B1, B2] = await findNodes('B')
+    const [outerParent, innerParent] = await findNodes('Parent')
+
+    const aRect = toRect(await boundingBox(A))
+    const b1Rect = toRect(await boundingBox(B1))
+    const b2Rect = toRect(await boundingBox(B2))
+    const outerParentRect = toRect(await boundingBox(outerParent))
+    const innerParentRect = toRect(await boundingBox(innerParent))
+
+    expect(isInside(aRect, outerParentRect)).toBe(true)
+    expect(isInside(b1Rect, innerParentRect)).toBe(true)
+    expect(isInside(b2Rect, outerParentRect)).toBe(true)
+    expect(isInside(innerParentRect, outerParentRect)).toBe(true)
+  })
+
+  test('translate nested node', async ({ page }) => {
+    const { findNodes } = await getGraphView(getContainer())
+    const [node] = await findNodes('B')
+
+    await pickNode(page, node)
+    await move(page, node, -30, -100)
+
+    expect(await page.screenshot()).toMatchSnapshot('scopes-nested-translated.png')
+  })
+
+  test('translate parent node', async ({ page }) => {
+    const { findNodes } = await getGraphView(getContainer())
+    const [outerParent] = await findNodes('Parent')
+
+    await pickNode(page, outerParent)
+    await move(page, outerParent, -30, -100)
+
+    expect(await page.screenshot()).toMatchSnapshot('scopes-parent-translated.png')
+  })
+
+  test('change relation', async ({ page }) => {
+    const { findNodes } = await getGraphView(getContainer())
+    const [node] = await findNodes('B')
+
+    await pickNode(page, node)
+    await move(page, node, 0, -220, 'corner', {
+      async down() {
+        await page.mouse.down({ button: 'left' })
+        await page.waitForTimeout(2000)
+      }
+    })
+
+    expect(await page.screenshot()).toMatchSnapshot('scopes-changed-relation.png')
+  })
+})