Dev

.github/workflows/ci-client.yml

@@ -42,8 +42,11 @@ jobs:
 
       - name: 📥 Monorepo install
         uses: ./.github/actions/pnpm-install
+
+      - name: 📥 Install Playwright Browsers
+        run: npx playwright install --with-deps
 
-      - name: Build Packages
+      - name: 📦 Build Packages
         working-directory: ./
         run: pnpm packages:build
 
@@ -56,5 +59,8 @@ jobs:
       - name: 🧪 Unit tests
         run: pnpm test
 
+      - name: 🧪 E2E tests
+        run: pnpm test:e2e  
+
       - name: 🏗 Build client
         run: pnpm build

apps/client/e2e/tests/context-menu.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect } from '@playwright/test';
+import { createShape, getDrawingCanvas } from 'e2e/utils/canvas';
+
+test.describe('context menu', async () => {
+  test('opens canvas menu when right clicking on empty', async ({ page }) => {
+    await page.goto('/');
+
+    await getDrawingCanvas(page).click({
+      button: 'right',
+      position: { x: 400, y: 450 },
+    });
+
+    await expect(page.getByTestId('context-menu')).toBeVisible();
+    await expect(page.getByTestId('style-panel')).toBeHidden();
+  });
+
+  test('opens node menu when right clicking on a shape', async ({
+    page,
+  }) => {
+    await page.goto('/');
+
+    await createShape(page, [
+      [400, 450],
+      [450, 500],
+    ]);
+
+    await getDrawingCanvas(page).click({
+      button: 'right',
+      position: { x: 400, y: 450 },
+    });
+
+    await expect(page.getByTestId('context-menu')).toBeVisible();
+    await expect(page.getByTestId('style-panel')).toBeVisible();
+  });
+});

apps/client/e2e/utils/canvas.ts

@@ -0,0 +1,32 @@
+import { DRAWING_CANVAS } from '@/constants/canvas';
+import type { Page } from '@playwright/test';
+import type { NodeType, Point } from 'shared';
+
+type DrawPosition = [start: Point, end: Point];
+
+type CreateShapeOptions = {
+  type: Omit<NodeType, 'text'>;
+  unselect?: boolean;
+};
+
+export async function draw(page: Page, [start, end]: DrawPosition) {
+  await page.mouse.move(start[0], start[1]);
+  await page.mouse.down();
+  await page.mouse.move(end[0], end[1]);
+  await page.mouse.up();
+}
+
+export async function createShape(
+  page: Page,
+  position: DrawPosition,
+  options: CreateShapeOptions = {
+    type: 'rectangle',
+  },
+) {
+  await page.getByTestId(`tool-button-${options.type}`).click();
+  await draw(page, position);
+}
+
+export function getDrawingCanvas(page: Page) {
+  return page.locator(`.${DRAWING_CANVAS.CONTAINER_CLASS}`).locator('canvas');
+}

apps/client/package.json

@@ -10,8 +10,7 @@
     "preview": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:e2e": "vite build && vitest run --dir ./e2e/tests -c ./e2e/vitest.config.ts",
-    "test:e2e:watch": "vite build && vitest --dir ./e2e/tests -c ./e2e/vitest.config.ts",
+    "test:e2e": "playwright test",
     "test:coverage": "vitest run --coverage",
     "fix-all-files": "eslint . --ext .ts,.tsx --fix",
     "lint": "eslint . --ext .ts,.tsx",
@@ -33,7 +32,7 @@
     "@radix-ui/react-visually-hidden": "^1.0.3",
     "@reduxjs/toolkit": "^1.9.3",
     "fontfaceobserver": "^2.3.0",
-    "konva": "^9.2.0",
+    "konva": "^9.3.3",
     "react": "*",
     "react-dom": "^18.2.0",
     "react-icons": "^4.8.0",
@@ -48,13 +47,12 @@
     "@babel/core": "^7.21.3",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.0",
-    "@playwright/test": "^1.36.2",
+    "@playwright/test": "^1.41.2",
     "@redux-devtools/core": "^3.13.1",
     "@testing-library/jest-dom": "^6.0.0",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.4.3",
     "@types/fontfaceobserver": "^2.1.0",
-    "@types/node": "^18.15.11",
     "@types/react": "^18.0.31",
     "@types/react-dom": "^18.0.11",
     "@types/testing-library__jest-dom": "^5.14.9",
@@ -64,7 +62,7 @@
     "babel-loader": "^9.1.2",
     "canvas": "^2.11.2",
     "eslint-config-bases": "workspace:eslint-config-bases@latest",
-    "eslint-plugin-playwright": "^0.15.3",
+    "eslint-plugin-playwright": "^1.2.0",
     "happy-dom": "^10.9.0",
     "jsdom": "^22.1.0",
     "msw": "*",

apps/client/playwright.config.ts

@@ -1,14 +1,18 @@
 import { defineConfig, devices } from '@playwright/test';
 
+const PORT = process.env.CI ? 4173 : 5174;
+const BASE_URL = `http://localhost:${PORT}`;
+
 export default defineConfig({
   testDir: './e2e/tests',
-  fullyParallel: false,
+  fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
-  reporter: 'html',
+  reporter: 'list',
   use: {
     trace: 'on-first-retry',
+    baseURL: BASE_URL,
   },
   projects: [
     {
@@ -23,25 +27,13 @@ export default defineConfig({
       name: 'webkit',
       use: { ...devices['Desktop Safari'] },
     },
-    /* Test against mobile viewports. */
-    // {
-    //   name: 'Mobile Chrome',
-    //   use: { ...devices['Pixel 5'] },
-    // },
-    // {
-    //   name: 'Mobile Safari',
-    //   use: { ...devices['iPhone 12'] },
-    // },
-
-    /* Test against branded browsers. */
-    // {
-    //   name: 'Microsoft Edge',
-    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-    // },
-    // {
-    //   name: 'Google Chrome',
-    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-    // },
   ],
   testMatch: /(.+\.)?(test|spec)\.[jt]s/,
+  webServer: {
+    command: process.env.CI ? 'pnpm build && pnpm preview' : 'pnpm dev',
+    url: `http://localhost:${PORT}`,
+    timeout: 120 * 1000,
+    reuseExistingServer: !process.env.CI,
+    stdout: 'pipe',
+  },
 });

apps/client/src/App.tsx

@@ -37,14 +37,6 @@ import {
   addCollabActionsListeners,
   subscribeToIncomingCollabMessages,
 } from './services/collaboration/listeners';
-import {
-  getIntersectingNodes,
-  getLayerNodes,
-  getLayerTransformers,
-  getMainLayer,
-  getPointerRect,
-  haveIntersection,
-} from './components/Canvas/DrawingCanvas/helpers/stage';
 import { setCursorByToolType } from './components/Canvas/DrawingCanvas/helpers/cursor';
 import { TEXT } from './constants/shape';
 import * as Styled from './App.styled';
@@ -167,46 +159,13 @@ const App = () => {
 
   const handleContextMenuOpen = useCallback(
     (open: boolean) => {
-      const stage = stageRef.current;
-      const pointerPosition = stage?.getPointerPosition();
-
-      if (!stage || !pointerPosition || !open) {
-        return;
-      }
-
-      const pointerRect = getPointerRect(pointerPosition, stage.scaleX());
-      const layer = getMainLayer(stage);
-      const layerTransformer = getLayerTransformers(layer)[0];
-
-      if (layerTransformer) {
-        const clickedOnTransformer = haveIntersection(
-          layerTransformer.getClientRect(),
-          pointerRect,
-        );
-
-        if (clickedOnTransformer) {
-          setMenuType((prevType) => {
-            return prevType === 'node-menu' ? prevType : 'node-menu';
-          });
-          return;
-        }
-      }
-
-      const layerNodes = getLayerNodes(layer);
-      const nodesInClickArea = getIntersectingNodes(layerNodes, pointerRect);
-      const clickedOnNodes = Boolean(nodesInClickArea.length);
-
-      if (clickedOnNodes) {
-        const nodesIds = nodesInClickArea.map((node) => node.id());
-        dispatch(canvasActions.setSelectedNodeIds(nodesIds));
-        setMenuType('node-menu');
+      if (!open) {
         return;
       }
 
-      dispatch(canvasActions.setSelectedNodeIds([]));
-      setMenuType('canvas-menu');
+      setMenuType(selectedNodeIds.length ? 'node-menu' : 'canvas-menu');
     },
-    [dispatch],
+    [selectedNodeIds.length],
   );
 
   useEffect(() => {