Addes tests for modules-lib components

Author: leeyi45

.gitignore

@@ -48,3 +48,5 @@ coverage/
 .Trashes
 ehthumbs.db
 Thumbs.db
+
+**/__tests__/**/__screenshots__

eslint.config.js

@@ -294,6 +294,8 @@ export default tseslint.config(
       '**/vitest.*.ts'
     ],
     rules: {
+      'no-empty-pattern': 'off', // vitest requires certain things to be destructured using an object pattern
+
       '@stylistic/quotes': 'off', // Turn this off to avoid conflicting with snapshots
 
       'vitest/expect-expect': ['error', {

lib/modules-lib/package.json

@@ -4,8 +4,6 @@
   "private": true,
   "type": "module",
   "devDependencies": {
-    "@testing-library/react": "^16.3.0",
-    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "@vitest/browser": "^3.2.3",
@@ -44,7 +42,7 @@
     "build": "tsc --project ./tsconfig.prod.json",
     "docs": "typedoc",
     "lint": "eslint src",
-    "prepare": "yarn build",
+    "prepare": "yarn build && playwright install --with-deps",
     "tsc": "tsc --project ./tsconfig.json",
     "test": "vitest --project \"Modules Library\""
   }

lib/modules-lib/src/tabs/AnimationCanvas.tsx

@@ -28,7 +28,7 @@ export default function AnimationCanvas(props: AnimCanvasProps) {
     Math.round(props.animation.duration * 1000)
   ], [props.animation]);
 
-  const { stop, start, reset, changeTimestamp, isPlaying, timestamp, canvasRef } = useAnimation({
+  const { stop, start, reset, changeTimestamp, isPlaying, timestamp, setCanvas } = useAnimation({
     frameDuration,
     animationDuration,
     autoLoop: isAutoLooping,
@@ -60,11 +60,10 @@ export default function AnimationCanvas(props: AnimCanvasProps) {
       <PlayButton
         title='PlayButton'
         isPlaying={isPlaying}
-        disabled={Boolean(errored)}
         onClick={() => {
           if (isPlaying) stop();
           else {
-            if (timestamp >= animationDuration) reset();
+            if (errored || timestamp >= animationDuration) reset();
             start();
           }
         }}
@@ -164,7 +163,11 @@ export default function AnimationCanvas(props: AnimCanvasProps) {
             style={{
               flexGrow: 1
             }}
-            ref={canvasRef}
+            ref={element => {
+              if (element !== null) {
+                setCanvas(element);
+              }
+            }}
           />
         )}
     </div>

lib/modules-lib/src/tabs/MultiItemDisplay/index.tsx

@@ -62,7 +62,7 @@ export default function MultiItemDisplay(props: MultiItemDisplayProps) {
           onClick={() => {
             changeStep(currentStep - 1);
             setStepEditorValue(currentStep.toString());
-          } }
+          }}
           disabled={currentStep === 0}
         >
           Previous
@@ -85,7 +85,7 @@ export default function MultiItemDisplay(props: MultiItemDisplayProps) {
                 placeholder={undefined}
                 selectAllOnFocus
                 customInputAttributes={{
-                  tabIndex: 0
+                  tabIndex: 0,
                 }}
                 onChange={(newValue) => {
                   // Disallow non numeric inputs

lib/modules-lib/src/tabs/__tests__/AnimationCanvas.test.tsx

@@ -1,88 +1,88 @@
-import { cleanup, render } from "@testing-library/react";
-import userEvent from '@testing-library/user-event';
-import { afterAll, describe, expect, test, vi } from "vitest";
+import { afterEach, beforeEach, expect, test, vi } from "vitest";
+import { cleanup, render } from 'vitest-browser-react';
 import type { glAnimation } from "../../types";
 import AnimationCanvas from "../AnimationCanvas";
 
-const testFrame = vi.fn();
-
-const testAnimation: glAnimation = {
-  duration: 1,
-  fps: 10,
-  getFrame(timestamp) {
-    return {
-      draw: canvas => {
-        testFrame(timestamp);
-        const context = canvas.getContext("2d");
-        context!.fillStyle = 'green';
-        context?.fillRect(10, 10, 100, 100);
-      }
-    };
-  },
-};
-
-const user = userEvent.setup();
+beforeEach(() => {
+  vi.useFakeTimers();
+});
 
-afterAll(() => {
-  // cleanup();
+afterEach(() => {
+  vi.runOnlyPendingTimers();
+  vi.useRealTimers();
+  cleanup();
 });
 
-test('The animation is played entirely', async () => {
+test('Animations are played entirely and stops', async () => {
+  const testFrame = vi.fn();
+
+  const testAnimation: glAnimation = {
+    duration: 1,
+    fps: 10,
+    getFrame(timestamp) {
+      return {
+        draw: () => {
+          testFrame(timestamp);
+          // const context = canvas.getContext("2d");
+          // context!.fillStyle = 'green';
+          // context?.fillRect(10, 10, 100, 100);
+        }
+      };
+    },
+  };
   const component = render(<AnimationCanvas animation={testAnimation} />);
 
   const playButton = component.getByTitle('PlayButton');
   const autoLoopSwitch = component.getByRole('checkbox');
 
-  await user.click(autoLoopSwitch);
-  await user.click(playButton);
+  await autoLoopSwitch.click();
+  await playButton.click();
 
-  await new Promise<void>(resolve => setTimeout(resolve, 1100));
+  for (let i = 0; i < 160; i++) {
+    vi.advanceTimersToNextFrame();
+  }
 
-  // Because of the variability in requestAnimationFrame, we may not draw
-  // 100% of frames, or we might end up calling the frame draw extra times?
-  const { calls } = testFrame.mock;
-  expect(calls.length).toBeGreaterThanOrEqual(11);
+  await expect.poll(() => testFrame).toHaveBeenCalledTimes(10);
 
   // call 0 occurs when the first frame is drawn to the canvas
   // to fill the canvas when the animation hasn't started playing
+  const { calls } = testFrame.mock;
   expect(calls[0][0]).toEqual(0);
-
-  // so every other call subsequently should start
-  // from 0 again
-  for (let i = 0; i < 10; i++) {
-    const diff = Math.abs(i / 10 - calls[i+1][0]);
-    expect(diff).toBeLessThan(0.1);
-  }
+  expect(calls[calls.length-1][0]).toEqual(1);
 });
 
-describe.skip('Test error handling', () => {
+test('Gracefully handles animations that error halfway through and can be restarted', async () => {
+  const testFrame = vi.fn((timestamp: number) => {
+    return {
+      draw: () => {
+        if (timestamp > 0.5) throw new Error('Oh no!');
+      }
+    };
+  });
+
   const errorAnimation: glAnimation = {
     duration: 1,
     fps: 10,
-    getFrame(timestamp) {
-      return {
-        draw: () => {
-          if (timestamp > 0.5) throw new Error('Oh no!');
-        }
-      };
-    }
+    getFrame: testFrame
   };
 
   const component = render(<AnimationCanvas animation={errorAnimation} />);
   const playButton = component.getByTitle('PlayButton');
+  await playButton.click();
+
+  for (let i = 0; i < 160; i++) {
+    vi.advanceTimersToNextFrame();
+  }
 
-  test('Gracefully handles animations that error halfway through', async () => {
-    await userEvent.click(playButton);
-    await new Promise<void>(resolve => setTimeout(resolve, 600));
+  await expect.element(component.getByText('Error: Oh no!')).toBeVisible();
+  await expect.poll(() => testFrame).toHaveBeenCalledTimes(6);
 
-    const errorTextElement = component.getByText('Error: Oh no!');
-    expect(errorTextElement).not.toBeUndefined();
-  });
+  await playButton.click();
+  for (let i = 0; i < 160; i++) {
+    vi.advanceTimersToNextFrame();
+  }
 
-  test('and the animation can be restarted from there', async () => {
-    await userEvent.click(playButton);
-    await new Promise<void>(resolve => setTimeout(resolve, 600));
-    const errorTextElement = component.getByText('Error: Oh no!');
-    expect(errorTextElement).not.toBeUndefined();
-  });
+  // Total is 6 + 6
+  await expect.poll(() => testFrame).toHaveBeenCalledTimes(12);
+  await expect.element(component.getByText('Error: Oh no!')).toBeVisible();
 });

lib/modules-lib/src/tabs/__tests__/MultiItem.test.tsx

@@ -1,7 +1,6 @@
-/* eslint-disable no-empty-pattern */
-import { cleanup, render } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { userEvent } from "@vitest/browser/context";
 import { afterEach, beforeEach, expect, test as baseTest, vi } from "vitest";
+import { cleanup, render } from "vitest-browser-react";
 import MultiItemDisplay from "../MultiItemDisplay";
 
 const items = [
@@ -22,7 +21,6 @@ afterEach(() => {
 });
 
 // Reference for keyboard events: https://testing-library.com/docs/user-event/keyboard/
-const user = userEvent.setup();
 
 const test = baseTest.extend<{
   component: ReturnType<typeof render>
@@ -32,88 +30,92 @@ const test = baseTest.extend<{
 
 test('Changing the currently selected value using the keyboard', async ({ component }) => {
   // Check that the first item is being displayed
-  expect(component.queryByText('Item One')).not.toBeNull();
+  await expect.element(component.getByText('Item One')).toBeVisible();
 
-  await user.tab();
-  await user.keyboard('2[Enter]');
+  await userEvent.keyboard('[Tab]2[Enter]');
 
   // Check that the first item is no longer being displayed
-  expect(component.queryByText('Item One')).toBeNull();
+  await expect.element(component.getByText('Item One')).not.toBeInTheDocument();
 
   // Check that the second item is being displayed
-  expect(component.queryByText('Item Two')).not.toBeNull();
+  await expect.element(component.getByText('Item Two')).toBeVisible();
 
   // and that the step change handler was called
   expect(stepChangeHandler).toHaveBeenCalledTimes(1);
 });
 
 test('Changing the currently selected value via the buttons', async ({ component }) => {
   // Check that the first item is being displayed
-  expect(component.queryByText('Item One')).not.toBeNull();
+  await expect.element(component.getByText('Item One')).toBeVisible();
 
   // Click the "Next" button
   const nextButton = component.getByText('Next');
-  await user.click(nextButton);
+  await userEvent.click(nextButton);
 
   // Check that the second item is being displayed and not the first
-  expect(component.queryByText('Item One')).toBeNull();
-  expect(component.queryByText('Item Two')).not.toBeNull();
+  await expect.element(component.getByText('Item One')).not.toBeInTheDocument();
+  await expect.element(component.getByText('Item Two')).toBeVisible();
 
   // Click the "Previous" button
   const prevButton = component.getByText('Previous');
-  await user.click(prevButton);
+  await userEvent.click(prevButton);
 
   // Check that the first item is being displayed and not the second
-  expect(component.queryByText('Item Two')).toBeNull();
-  expect(component.queryByText('Item One')).not.toBeNull();
+  await expect.element(component.getByText('Item One')).toBeVisible();
+  await expect.element(component.getByText('Item Two')).not.toBeInTheDocument();
 
   expect(stepChangeHandler).toHaveBeenCalledTimes(2);
 });
 
 test('The item selector won\'t accept the too many digits', async ({ component }) => {
   // Check that the first item was rendered
-  expect(component.queryByText('Item One')).not.toBeNull();
+  await expect.element(component.getByText('Item One')).toBeVisible();
 
   // Try to enter an invalid value
-  await userEvent.tab();
-  await userEvent.keyboard('1234[Enter]');
+  await userEvent.keyboard('[Tab]1234[Enter]');
 
   // Check that the first item is still rendered
-  expect(component.queryByText('Item One')).not.toBeNull();
+  await expect.element(component.getByText('Item One')).toBeVisible();
 
   // and that the display didn't change
   expect(stepChangeHandler).not.toHaveBeenCalled();
 });
 
 test('The item selector will reset when all digits are removed', async ({ component }) => {
   // Check that the first item was rendered
-  expect(component.queryByText('Item One')).not.toBeNull();
+  await expect.element(component.getByText('Item One')).toBeVisible();
 
   // Clear the selector
-  await userEvent.tab();
-  await userEvent.keyboard('[Backspace][Enter]');
+  await userEvent.keyboard('[Tab][Backspace][Enter]');
 
   // Check that the first item is still rendered
-  expect(component.queryByText('Item One')).not.toBeNull();
+  await expect.element(component.getByText('Item One')).toBeVisible();
 
   // and that the display didn't change
   expect(stepChangeHandler).not.toHaveBeenCalled();
 });
 
 test('The item selector moves to the end when set out of range', async ({ component }) => {
   // Check that the first item is rendered
-  expect(component.queryByText('Item One')).not.toBeNull();
+  await expect.element(component.getByText('Item One')).toBeVisible();
 
-  await userEvent.tab();
-  await userEvent.keyboard('5[Enter]');
+  await userEvent.keyboard('[Tab]5[Enter]');
 
   // Check that the first item is no longer rendered
-  expect(component.queryByText('Item One')).toBeNull();
+  await expect.element(component.getByText('Item One')).not.toBeInTheDocument();
 
   // Check that the fourth item is now rendered
-  expect(component.queryByText('Item Four')).not.toBeNull();
+  await expect.element(component.getByText('Item Four')).toBeVisible();
 
   // and check that the step change only happened once
   expect(stepChangeHandler).toHaveBeenCalledTimes(1);
   expect(stepChangeHandler).toHaveBeenCalledWith(3, 0);
 });
+
+test('Both selector buttons are disabled when there is only one item', async () => {
+  const component = render(<MultiItemDisplay elements={[<p>Item One</p>]}/>);
+  const buttonLocator = component.getByRole('button');
+
+  await expect.element(buttonLocator.first()).toBeDisabled();
+  await expect.element(buttonLocator.nth(1)).toBeDisabled();
+});