Merge pull request #541 from pixijs/511-setup-e2e-testing

Setup e2e testing

Author: trezy

.eslintrc.js

@@ -4,6 +4,10 @@ module.exports = {
     globals: {
         globalThis: 'readonly',
     },
+    ignorePatterns: [
+        'dist/**/*',
+        'lib/**/*',
+    ],
     parserOptions: {
         project: './tsconfig.eslint.json',
         ecmaVersion: 2020,

.github/workflows/handle-release-branch-push.yml

@@ -14,8 +14,13 @@ jobs:
           #   command: test:types
           - name: Lint
             command: test:lint
+            installPlaywright: false
           - name: Unit tests
-            command: test
+            command: test:unit
+            installPlaywright: false
+          - name: E2E tests
+            command: test:e2e
+            installPlaywright: true
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -25,6 +30,10 @@ jobs:
       - name: Setup
         uses: ./.github/actions/setup
 
+      - name: Install Playwright browsers
+        if: ${{ matrix.script.installPlaywright }}
+        run: npx playwright install
+
       - name: ${{ matrix.script.name }}
         run: npm run ${{ matrix.script.command }}
 

package-lock.json

@@ -45,6 +45,8 @@
     "prerelease": "npm run test:lint && npm run build",
     "release": "xs bump,publish,git-push",
     "test": "tsc --project tsconfig.test.json && vitest run",
+    "test:e2e": "tsc --project tsconfig.test.json && vitest run e2e",
+    "test:unit": "tsc --project tsconfig.test.json && vitest run unit",
     "test:lint": "xs lint",
     "test:watch": "vitest"
   },
@@ -66,20 +68,26 @@
     "@rollup/plugin-commonjs": "^25.0.8",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^15.2.3",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/eslint": "^8.56.10",
     "@types/react": "^18.3.2",
     "@types/react-reconciler": "0.28.8",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/browser": "^2.0.4",
     "canvas": "^2.11.2",
     "husky": "^8.0.0",
+    "jsdom": "^25.0.0",
     "pixi.js": "8.2.6",
+    "playwright": "^1.45.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "rollup": "^4.18.0",
     "rollup-plugin-esbuild": "^6.1.1",
     "rollup-plugin-sourcemaps": "^0.6.3",
     "typescript": "^5.4.5",
-    "vitest": "^1.6.0"
+    "vitest": "^2.0.0"
   },
   "peerDependencies": {
     "pixi.js": "^8.2.6",

package.json

@@ -38,7 +38,7 @@ export function useTick<T>(
     {
         callback = options.callback;
         context = options.context;
-        isEnabled = options.isEnabled;
+        isEnabled = options.isEnabled ?? true;
         priority = options.priority;
     }
 

src/hooks/useTick.ts

@@ -20,7 +20,7 @@ export interface BaseApplicationProps
     className?: string
 
     /** @description Child components. */
-    children: PixiReactChildNode;
+    children?: PixiReactChildNode;
 
     /** @description The default style to be applied to text nodes. */
     defaultTextStyle?: TextStyle | TextStyleOptions,

src/typedefs/ApplicationProps.ts

@@ -9,7 +9,7 @@ export interface UseTickOptions<T>
     context?: T
 
     /** @description Whether this callback is currently enabled. */
-    isEnabled: true,
+    isEnabled?: true,
 
     /** @description The priority of this callback compared to other callbacks on the ticker. */
     priority?: number

src/typedefs/UseTickOptions.ts

@@ -0,0 +1,67 @@
+import type { ReactNode } from 'react'
+import {
+    describe,
+    expect,
+    it,
+} from 'vitest';
+import {
+    render,
+    renderHook,
+} from '@testing-library/react'
+import { Application as PixiApplication } from 'pixi.js';
+
+import { Application } from '../../../src/components/Application.ts'
+import { useApplication } from '../../../src/hooks/useApplication.ts'
+
+describe('useApplication', () =>
+{
+    it('returns the nearest application', async () =>
+    {
+        let initApp: PixiApplication | null = null
+        let testApp: PixiApplication | null = null
+
+        const TestComponentWrapper = (props: {
+            children?: ReactNode,
+        }) => {
+            const { children } = props
+
+            const handleInit = (app: PixiApplication) => (initApp = app)
+
+            return (
+                <Application onInit={handleInit}>
+                    {children}
+                </Application>
+            )
+        }
+
+        const TestComponent = () => {
+            const { app } = useApplication()
+
+            if (app) {
+                testApp = app
+            }
+
+            return null
+        }
+
+        render(<TestComponent />, {
+            wrapper: TestComponentWrapper,
+        })
+
+        await new Promise<void>(resolve => {
+            let intervalID = setInterval(() => {
+                if (initApp) {
+                    clearInterval(intervalID)
+                    setTimeout(resolve, 10)
+                }
+            }, 10)
+        })
+
+        expect(testApp).to.equal(initApp)
+    })
+
+    it('throws when not in a React Pixi tree', () =>
+    {
+        expect(() => renderHook(() => useApplication())).to.throw(Error, /no context found/i)
+    });
+});

test/e2e/hooks/useApplication.test.tsx

@@ -0,0 +1,61 @@
+import {
+    describe,
+    expect,
+    it,
+    vi,
+} from 'vitest';
+import {
+    render,
+    renderHook,
+} from '@testing-library/react'
+import { Ticker } from 'pixi.js';
+
+import { Application } from '../../../src/components/Application'
+import { useTick } from '../../../src/hooks/useTick'
+import { wait } from '../../utils/wait'
+
+describe('useTick', () =>
+{
+    describe('with a function', () => {
+        it('runs the callback', async () => {
+            const useTickSpy = vi.fn()
+
+            const TestComponent = () => {
+                useTick(useTickSpy)
+
+                return null
+            }
+
+            render(<TestComponent />, { wrapper: Application })
+
+            await wait(100)
+
+            expect(useTickSpy.mock.lastCall?.[0]).to.be.instanceOf(Ticker)
+        });
+    })
+
+    describe('with an options hash', () => {
+        it('runs the callback', async () => {
+            const useTickSpy = vi.fn()
+
+            const TestComponent = () => {
+                useTick({ callback: useTickSpy })
+
+                return null
+            }
+
+            render(<TestComponent />, { wrapper: Application })
+
+            await wait(100)
+
+            expect(useTickSpy.mock.lastCall?.[0]).to.be.instanceOf(Ticker)
+        });
+    })
+
+    it('throws when not in a React Pixi tree', () =>
+    {
+        const result = () => renderHook(() => useTick(() => {}))
+
+        expect(result).to.throw(Error, /no context found/i)
+    });
+});

test/e2e/hooks/useTick.test.tsx

@@ -0,0 +1,7 @@
+export function wait(waitMS: number, rejectOnComplete: boolean = false)
+{
+    return new Promise((resolve, reject) =>
+    {
+        setTimeout(rejectOnComplete ? reject : resolve, waitMS);
+    });
+}

test/utils/wait.ts

@@ -12,7 +12,7 @@
     "jsx": "react-jsx",
     "lib": [
       "DOM",
-      "ESNext"
+      "ESNext",
     ],
     "module": "ESNext",
     "moduleResolution": "node",
@@ -23,7 +23,13 @@
     "skipLibCheck": true,
     "sourceMap": true,
     "strict": true,
-    "target": "ESNext"
+    "target": "ESNext",
+    "types": [
+      "@testing-library/jest-dom",
+      "react",
+      "vite/client",
+      "vitest",
+    ],
   },
   "exclude": [
     "dist",

tsconfig.json

@@ -0,0 +1,8 @@
+import { afterEach } from 'vitest';
+import '@testing-library/jest-dom/vitest';
+import { cleanup } from '@testing-library/react';
+
+afterEach(() =>
+{
+    cleanup();
+});

vitest.setup.ts

@@ -1,11 +1,28 @@
 import { defineWorkspace } from 'vitest/config';
+import react from '@vitejs/plugin-react';
 
 export default defineWorkspace([
     {
+        plugins: [react()],
         test: {
             environment: 'jsdom',
             include: ['test/unit/**/*.test.ts?(x)'],
             pool: 'forks',
         },
     },
+    {
+        plugins: [react()],
+        test: {
+            browser: {
+                enabled: true,
+                name: 'chromium',
+                provider: 'playwright',
+            },
+            globals: true,
+            include: ['test/e2e/**/*.test.ts(x)'],
+            setupFiles: [
+                './vitest.setup.ts'
+            ],
+        },
+    },
 ]);