Merge pull request #411 from Lemoncode/dev

Fix cmd unselect

.github/workflows/cd.yml

@@ -14,7 +14,7 @@ jobs:
     name: Deploy Quickmock
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install
         run: npm ci

.github/workflows/ci.yml

@@ -3,16 +3,16 @@ name: CI Workflow
 on: pull_request
 
 jobs:
-  ci:
+  unit-tests:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v2
+        uses: actions/checkout@v4
 
-      - name: Use Node.js 18.13.0
-        uses: actions/setup-node@v2
+      - name: Use Node.js 20.17.0
+        uses: actions/setup-node@v4
         with:
-          node-version: '18.13.0'
+          node-version: '20.17.0'
           cache: 'npm'
 
       - name: Install dependencies
@@ -26,3 +26,27 @@ jobs:
 
       - name: Run tests
         run: npm test
+
+  e2e-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Use Node.js 20.17.0
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.17.0'
+          cache: 'npm'
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Build
+        run: npm run build
+
+      - name: Check TypeScript types
+        run: npm run tsc-check
+
+      - name: Run E2E tests
+        run: npm run ci:e2e

.gitignore

@@ -1,3 +1,7 @@
+# Playwright
+playwright-report/
+test-results/
+
 # Logs
 logs
 *.log
@@ -24,3 +28,7 @@ dist-ssr
 *.sw?
 
 .vite
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

e2e/helpers/index.ts

@@ -0,0 +1,2 @@
+export * from './konva-testing.helpers';
+export * from './position.helpers';

e2e/helpers/konva-testing.helpers.ts

@@ -0,0 +1,50 @@
+import { Page } from '@playwright/test';
+import { Layer } from 'konva/lib/Layer';
+import { Shape } from 'konva/lib/Shape';
+import { Group } from 'konva/lib/Group';
+
+const getLayer = async (page: Page): Promise<Layer> =>
+  await page.evaluate(() => {
+    const layer = (window as any).KONVA_LAYER;
+    return layer;
+  });
+
+const getChildren = async (page: Page): Promise<(Group | Shape)[]> => {
+  const layer = await getLayer(page);
+  return layer?.children.flatMap(child =>
+    Boolean((child as any)?.children) ? (child as any).children : child
+  );
+};
+
+export const getAllByShapeType = async (
+  page: Page,
+  shape: string
+): Promise<(Group | Shape)[]> => {
+  const children = await getChildren(page);
+  const shapes = children?.filter(child => child.attrs.shapeType === shape);
+  if (shapes.length === 0) {
+    throw new Error(`No shapes found with shapeType ${shape}`);
+  } else {
+    return shapes;
+  }
+};
+
+export const getByShapeType = async (
+  page: Page,
+  shape: string
+): Promise<Group | Shape | undefined> => {
+  const children = await getChildren(page);
+  const count = children?.filter(
+    child => child.attrs.shapeType === shape
+  )?.length;
+
+  if (count === 1) {
+    return children.find(child => child.attrs.shapeType === shape);
+  } else if (count > 1) {
+    throw new Error(
+      `Found ${count} shapes with shapeType ${shape} you should use getAllByShapeType`
+    );
+  } else {
+    return undefined;
+  }
+};

e2e/helpers/position.helpers.ts

@@ -0,0 +1,29 @@
+import { Locator, Page } from '@playwright/test';
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+export const getLocatorPosition = async (
+  locator: Locator
+): Promise<Position> => {
+  const box = (await locator.boundingBox()) || {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+  };
+  return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
+};
+
+export const dragAndDrop = async (
+  page: Page,
+  aPosition: Position,
+  bPosition: Position
+): Promise<void> => {
+  await page.mouse.move(aPosition.x, aPosition.y);
+  await page.mouse.down();
+  await page.mouse.move(bPosition.x, bPosition.y);
+  await page.mouse.up();
+};

e2e/rectangle-shape.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+import { Group } from 'konva/lib/Group';
+import { dragAndDrop, getByShapeType, getLocatorPosition } from './helpers';
+
+test('has Basic Shapes group', async ({ page }) => {
+  await page.goto('');
+
+  await expect(page.getByText('Basic Shapes')).toBeVisible();
+});
+
+test('has rectangle component', async ({ page }) => {
+  await page.goto('');
+  await page.getByText('Basic Shapes').click();
+
+  await expect(page.getByAltText('Rectangle')).toBeVisible();
+});
+
+test('can add rectangle component to canvas', async ({ page }) => {
+  await page.goto('');
+  await page.getByText('Basic Shapes').click();
+  const component = page.getByAltText('Rectangle');
+
+  const position = await getLocatorPosition(component);
+  await dragAndDrop(page, position, {
+    x: position.x + 500,
+    y: position.y - 240,
+  });
+
+  const rectangle = (await getByShapeType(page, 'rectangle')) as Group;
+  expect(rectangle).toBeDefined();
+  expect(rectangle.attrs.width).toEqual(160);
+  expect(rectangle.attrs.height).toEqual(160);
+});

package.json

@@ -4,13 +4,17 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
+    "postinstall": "npm run install:e2e-browsers",
+    "install:e2e-browsers": "npx playwright install",
     "dev": "vite",
     "build": "tsc -b && vite build",
     "test": "vitest",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "prepare": "husky install",
-    "tsc-check": "tsc --noEmit"
+    "prepare": "husky || \"No need to install husky\"",
+    "tsc-check": "tsc --noEmit",
+    "e2e": "playwright test --ui",
+    "ci:e2e": "playwright test"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.2.1",
@@ -29,7 +33,9 @@
     "uuid": "^10.0.0"
   },
   "devDependencies": {
+    "@playwright/test": "^1.47.2",
     "@types/jest": "^29.5.12",
+    "@types/node": "^22.5.5",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/uuid": "^10.0.0",

playwright.config.ts

@@ -0,0 +1,31 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const BASE_URL = 'http://localhost:5173/editor.html';
+
+export default defineConfig({
+  testDir: './e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 1,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: 'html',
+  use: {
+    baseURL: BASE_URL,
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+  ],
+  webServer: {
+    command: 'npm run dev',
+    url: BASE_URL,
+    reuseExistingServer: !process.env.CI,
+  },
+});