apply review

x

e2e/tests/SSR/index.spec.ts

@@ -1,7 +1,9 @@
 import { expect, test } from '@playwright/test';
-import { exec, type ChildProcessWithoutNullStreams } from 'child_process';
+import { spawn } from 'child_process';
 import { readFileSync, watch } from 'fs';
+import killPort from 'kill-port';
 import path from 'path';
+import type { Canvas } from '../../..';
 import setupCoverage from '../../setup/setupCoverage';
 
 setupCoverage();
@@ -15,15 +17,22 @@ test.describe('SSR', () => {
     'next'
   );
 
-  let task: ChildProcessWithoutNullStreams;
+  let disposer: VoidFunction;
 
-  test.beforeAll(({}, testInfo) => {
+  test.beforeAll(async ({}, testInfo) => {
     testInfo.setTimeout(60 * 1000);
-    task = exec(`npm start next -- -p ${PORT} --no-watch`, {
+    await killPort(PORT);
+    // import `startSandbox` directly once ESM is supported
+    // https://playwright.dev/docs/release-notes#improved-typescript-support
+    const task = spawn(`npm start next -- -p ${PORT} --no-watch`, {
       cwd: process.cwd(),
+      shell: true,
     });
     task.stdout.pipe(process.stdout);
     task.stderr.pipe(process.stderr);
+    disposer = () => {
+      task.kill();
+    };
     return new Promise<void>((resolve) => {
       const watcher = watch(nextTemplateDir, (event, filename) => {
         if (filename === '.instrumentation') {
@@ -34,7 +43,7 @@ test.describe('SSR', () => {
     });
   });
 
-  test.afterAll(() => task.kill());
+  test.afterAll(() => disposer());
 
   test('SSR with Next.js', async ({ page }) => {
     await page.goto(`http://localhost:${PORT}/`);
@@ -52,8 +61,23 @@ test.describe('SSR', () => {
       await page.getByRole('textbox').press('Control+a');
       await page
         .getByRole('textbox')
-        .fill("fabric supports SSR!\nIsn't that amazing?!");
-      await page.waitForTimeout(50);
+        .fill('fabric can be used in SSR frameworks');
+      await page.evaluate(async () => {
+        // window.canvas is exposed in .codesandbox/templates/next/components/Canvas.tsx:33
+        const {
+          canvas,
+        } = // eslint-disable-next-line no-restricted-globals
+          window as Window & typeof globalThis & { canvas: Canvas };
+        const text = canvas.getActiveObject();
+        const text1 = await text.clone();
+        text1.set({ originX: 'left' });
+        text1.setX(0);
+        const text2 = await text.clone();
+        text2.set({ originX: 'right' });
+        // eslint-disable-next-line no-restricted-globals
+        text2.setX(window.innerWidth);
+        canvas.add(text1, text2);
+      });
       expect(await page.screenshot()).toMatchSnapshot();
     });