Merge pull request #65 from Gkuzin13/dev

Dev

apps/client/e2e/tests/shape-draw.spec.ts

@@ -0,0 +1,28 @@
+import { chromium } from '@playwright/test';
+import { describe, beforeAll, afterAll, test } from 'vitest';
+import { preview } from 'vite';
+import type { Page, Browser } from '@playwright/test';
+import type { PreviewServer } from 'vite';
+
+describe.runIf(process.platform !== 'win32')('basic', async () => {
+  let server: PreviewServer;
+  let browser: Browser;
+  let page: Page;
+
+  beforeAll(async () => {
+    server = await preview({ preview: { port: 3000 } });
+    browser = await chromium.launch();
+    page = await browser.newPage();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+    await new Promise<void>((resolve, reject) => {
+      server.httpServer.close((error) => (error ? reject(error) : resolve()));
+    });
+  });
+
+  test('selects a tool and draws a shape', async () => {
+    // intentionally empty
+  }, 60_000);
+});

apps/client/src/App.tsx

@@ -45,6 +45,10 @@ const App = () => {
         dispatch(collaborationActions.updateUser(data));
         break;
       }
+      case 'user-left': {
+        dispatch(collaborationActions.removeUser(data));
+        break;
+      }
       case 'nodes-set': {
         dispatch(canvasActions.setNodes(data));
         break;
@@ -53,8 +57,8 @@ const App = () => {
         dispatch(canvasActions.addNodes(data));
         break;
       }
-      case 'draft-end': {
-        dispatch(canvasActions.addNodes([data]));
+      case 'draft-finish': {
+        dispatch(canvasActions.addNodes([data.node]));
         break;
       }
       case 'nodes-update': {
@@ -84,7 +88,9 @@ const App = () => {
       case 'draft-text-update': {
         const textNode = store
           .getState()
-          .canvas.present.nodes.find((node) => node.nodeProps.id === data.id);
+          .canvas.present.nodes.find(
+            (node) => node.nodeProps.id === data.nodeId,
+          );
 
         if (textNode) {
           dispatch(

apps/client/src/__tests__/createElements.test.tsx

@@ -10,8 +10,9 @@ import App from '@/App';
 
 describe('select a tool and create an element', () => {
   it('rectangle', async () => {
-    const { container, store } = renderWithProviders(<App />);
+    const { store } = renderWithProviders(<App />);
 
+    const container = await screen.findByRole('presentation');
     const canvas = container.querySelector('canvas') as HTMLCanvasElement;
 
     // select rectangle tool
@@ -40,8 +41,9 @@ describe('select a tool and create an element', () => {
   });
 
   it('ellipse', async () => {
-    const { container, store } = renderWithProviders(<App />);
+    const { store } = renderWithProviders(<App />);
 
+    const container = await screen.findByRole('presentation');
     const canvas = container.querySelector('canvas') as HTMLCanvasElement;
 
     // select ellipse tool
@@ -70,8 +72,9 @@ describe('select a tool and create an element', () => {
   });
 
   it('arrow', async () => {
-    const { container, store } = renderWithProviders(<App />);
+    const { store } = renderWithProviders(<App />);
 
+    const container = await screen.findByRole('presentation');
     const canvas = container.querySelector('canvas') as HTMLCanvasElement;
 
     // select arrow tool
@@ -99,8 +102,9 @@ describe('select a tool and create an element', () => {
   });
 
   it('draw', async () => {
-    const { container, store } = renderWithProviders(<App />);
+    const { store } = renderWithProviders(<App />);
 
+    const container = await screen.findByRole('presentation');
     const canvas = container.querySelector('canvas') as HTMLCanvasElement;
 
     // select draw tool
@@ -128,8 +132,9 @@ describe('select a tool and create an element', () => {
   });
 
   it('text', async () => {
-    const { container, store, user } = renderWithProviders(<App />);
+    const { store, user } = renderWithProviders(<App />);
 
+    const container = await screen.findByRole('presentation');
     const canvas = container.querySelector('canvas') as HTMLCanvasElement;
 
     // select text tool
@@ -140,10 +145,15 @@ describe('select a tool and create an element', () => {
 
     // press at [10, 20]
     fireEvent.pointerDown(canvas, { clientX: 10, clientY: 20 });
+
+    // stop at last position
     fireEvent.pointerUp(canvas);
 
     // type 'Hello World!' and press enter
-    await user.type(screen.getByRole('textbox'), 'Hello World!{enter}');
+    await user.type(
+      screen.getByTestId('editable-text-input'),
+      'Hello World!{enter}',
+    );
 
     const canvasState = store.getState().canvas.present;
     const node = canvasState.nodes[0];
@@ -153,4 +163,30 @@ describe('select a tool and create an element', () => {
     expect(node.nodeProps.point).toEqual([10, 20]);
     expect(node.text).toEqual('Hello World!');
   });
+
+  it('laser', async () => {
+    const { store } = renderWithProviders(<App />);
+
+    const container = await screen.findByRole('presentation');
+    const canvas = container.querySelector('canvas') as HTMLCanvasElement;
+
+    // select laser tool
+    await act(async () => {
+      const tool = screen.getByTestId(/tool-button-laser/);
+      tool.click();
+    });
+
+    // start at [10, 20]
+    fireEvent.pointerDown(canvas, { clientX: 10, clientY: 20 });
+
+    // move to [30, 40]
+    fireEvent.pointerMove(canvas, { clientX: 30, clientY: 40 });
+
+    // stop at last position
+    fireEvent.pointerUp(canvas);
+
+    const canvasState = store.getState().canvas.present;
+
+    expect(canvasState.nodes).toHaveLength(0);
+  });
 });