tests: improve tests for the UnityRenderer component

Author: PhilippMolitor

src/components/__tests__/UnityRenderer.test.tsx

@@ -3,48 +3,41 @@
 import { mount } from 'enzyme';
 import { act, fireEvent } from '@testing-library/react';
 import { UnityContext } from '../../lib/context';
-
 import { UnityRenderer } from '../UnityRenderer';
 
 type CreateUnityFn = typeof window.createUnityInstance;
 
 describe('<UnityRenderer>', () => {
-  const MockUnityInstance = jest
-    .fn<UnityInstance, []>()
-    .mockImplementation(() => ({
+  const MockUnityInstance = () =>
+    jest.fn<UnityInstance, []>().mockImplementation(() => ({
       SendMessage: jest.fn(),
       Quit: jest
         .fn()
         .mockImplementation(() => new Promise((reject, resolve) => resolve())),
       SetFullscreen: jest.fn(),
     }));
-  let createUnityValid: jest.Mock<
-    ReturnType<CreateUnityFn>,
-    Parameters<CreateUnityFn>
-  >;
-  let createUnityInvalid: jest.Mock<
-    ReturnType<CreateUnityFn>,
-    Parameters<CreateUnityFn>
-  >;
-  let unityContext: UnityContext;
-
-  beforeEach(() => {
-    createUnityValid = jest
+  let createUnityValid = (cb?: (p: number) => void) =>
+    jest
       .fn<ReturnType<CreateUnityFn>, Parameters<CreateUnityFn>>()
-      .mockImplementation(
-        () =>
-          new Promise<UnityInstance>((resolve) =>
-            resolve(new MockUnityInstance())
-          )
-      );
-    createUnityInvalid = jest
+      .mockImplementation((_canvas, _config, onProgress) => {
+        if (cb && onProgress) cb = (p: number) => onProgress(p);
+
+        return new Promise<UnityInstance>((resolve) =>
+          resolve(new (MockUnityInstance())())
+        );
+      });
+  let createUnityInvalid = () =>
+    jest
       .fn<ReturnType<CreateUnityFn>, Parameters<CreateUnityFn>>()
       .mockImplementation(
         () =>
           new Promise<UnityInstance>((resolve, reject) =>
             reject(new Error('unit test'))
           )
       );
+  let unityContext: UnityContext;
+
+  beforeEach(() => {
     const baseUrl = 'https://example.com/';
     unityContext = new UnityContext({
       loaderUrl: baseUrl + 'loader.js',
@@ -56,9 +49,13 @@ describe('<UnityRenderer>', () => {
 
   afterEach(() => {
     jest.clearAllMocks();
+
+    document.body.innerHTML = '';
+    // @ts-ignore
+    window.createUnityInstance = undefined;
   });
 
-  function completeLoader(error: boolean = false) {
+  function completeLoader(error?: boolean) {
     const script = document.querySelector(
       `script[src="${unityContext.getConfig().loaderUrl}"]`
     ) as HTMLScriptElement;
@@ -73,13 +70,13 @@ describe('<UnityRenderer>', () => {
   }
 
   it('renders without configuration', async () => {
-    const wrapper = mount(<UnityRenderer />);
-    expect(wrapper).toBeDefined();
+    const component = mount(<UnityRenderer />);
+    expect(component).toBeDefined();
   });
 
   it('creates a canvas element', async () => {
     expect(document.querySelector('canvas')).toBeNull();
-    const wrapper = mount(<UnityRenderer />);
+    mount(<UnityRenderer />);
   });
 
   it('does not trigger callbacks after initial mounting', async () => {
@@ -89,6 +86,7 @@ describe('<UnityRenderer>', () => {
 
     mount(
       <UnityRenderer
+        context={unityContext}
         onUnityError={() => (error = true)}
         onUnityProgressChange={(p) => (progress = p)}
         onUnityReadyStateChange={(s) => (ready = s)}
@@ -99,12 +97,50 @@ describe('<UnityRenderer>', () => {
     expect(error).toBe(false);
   });
 
-  it('uses the loader script', async () => {
-    window.createUnityInstance = createUnityValid;
-    mount(<UnityRenderer context={unityContext} />);
+  it('triggers the error callback when the loader script fails to load', async () => {
+    let error = false;
+    let message = '';
+    window.createUnityInstance = createUnityValid();
+
+    mount(
+      <UnityRenderer
+        context={unityContext}
+        onUnityError={(e) => {
+          error = true;
+          message = e.message;
+        }}
+      />
+    );
+    completeLoader(true);
+
+    expect(error).toBe(true);
+    expect(message).toMatch(/failed to mount/);
+  });
+
+  it('resets and triggers the error callback when the instance fails to initialize', async () => {
+    let state = true;
+    let progress = 0.5;
+    let error = false;
+    let message = '';
+    window.createUnityInstance = createUnityInvalid();
+
+    mount(
+      <UnityRenderer
+        context={unityContext}
+        onUnityError={(e) => {
+          error = true;
+          message = e.message;
+        }}
+        onUnityProgressChange={(p) => (progress = p)}
+        onUnityReadyStateChange={(r) => (state = r)}
+      />
+    );
+    await act(async () => completeLoader());
+
+    expect(progress).toBe(0);
+    expect(state).toBe(false);
 
-    expect(createUnityValid).not.toHaveBeenCalled();
-    completeLoader();
-    expect(createUnityValid).toHaveBeenCalled();
+    expect(error).toBe(true);
+    expect(message).toMatch(/unit test/);
   });
 });