rework UnityRenderer tests (WIP)

Author: Philipp Molitor

src/components/__tests__/UnityRenderer.test.tsx

@@ -1,35 +1,110 @@
-import { mount, ReactWrapper } from 'enzyme';
+/// <reference path="../../../typings/unity.d.ts" />
+
+import { mount } from 'enzyme';
+import { act, fireEvent } from '@testing-library/react';
+import { UnityContext } from '../../lib/context';
 
 import { UnityRenderer } from '../UnityRenderer';
 
-describe('<UnityRenderer /> (unconfigured)', () => {
-  let renderer: ReactWrapper<typeof UnityRenderer>;
-  let progress = 0;
-  let ready = false;
-  let error = false;
+type CreateUnityFn = typeof window.createUnityInstance;
+
+describe('<UnityRenderer>', () => {
+  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(() => {
-    renderer = mount<typeof UnityRenderer>(
-      <UnityRenderer
-        onUnityProgressChange={(p) => (progress = p)}
-        onUnityReadyStateChange={(r) => (ready = r)}
-        onUnityError={() => (error = true)}
-        className="test"
-      />
-    );
+    createUnityValid = jest
+      .fn<ReturnType<CreateUnityFn>, Parameters<CreateUnityFn>>()
+      .mockImplementation(
+        () =>
+          new Promise<UnityInstance>((resolve) =>
+            resolve(new MockUnityInstance())
+          )
+      );
+    createUnityInvalid = jest
+      .fn<ReturnType<CreateUnityFn>, Parameters<CreateUnityFn>>()
+      .mockImplementation(
+        () =>
+          new Promise<UnityInstance>((resolve, reject) =>
+            reject(new Error('unit test'))
+          )
+      );
+    const baseUrl = 'https://example.com/';
+    unityContext = new UnityContext({
+      loaderUrl: baseUrl + 'loader.js',
+      codeUrl: baseUrl + 'Build/code.js',
+      dataUrl: baseUrl + 'Build/data.gzip',
+      frameworkUrl: baseUrl + 'Build/framework.js',
+    });
   });
 
-  it('renders with minimal configuration', async () => {
-    expect(renderer).toBeDefined();
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  function completeLoader(error: boolean = false) {
+    const script = document.querySelector(
+      `script[src="${unityContext.getConfig().loaderUrl}"]`
+    ) as HTMLScriptElement;
+
+    act(() => {
+      if (error) {
+        fireEvent.error(script);
+      } else {
+        fireEvent.load(script);
+      }
+    });
+  }
+
+  it('renders without configuration', async () => {
+    const wrapper = mount(<UnityRenderer />);
+    expect(wrapper).toBeDefined();
   });
 
-  it('uses the className prop', async () => {
-    expect(renderer.prop('className')).toBe('test');
+  it('creates a canvas element', async () => {
+    expect(document.querySelector('canvas')).toBeNull();
+    const wrapper = mount(<UnityRenderer />);
   });
 
-  it('does not trigger callbacks yet', async () => {
+  it('does not trigger callbacks after initial mounting', async () => {
+    let progress = 0;
+    let ready = false;
+    let error = false;
+
+    mount(
+      <UnityRenderer
+        onUnityError={() => (error = true)}
+        onUnityProgressChange={(p) => (progress = p)}
+        onUnityReadyStateChange={(s) => (ready = s)}
+      />
+    );
     expect(progress).toBe(0);
     expect(ready).toBe(false);
     expect(error).toBe(false);
   });
+
+  it('uses the loader script', async () => {
+    window.createUnityInstance = createUnityValid;
+    mount(<UnityRenderer context={unityContext} />);
+
+    expect(createUnityValid).not.toHaveBeenCalled();
+    completeLoader();
+    expect(createUnityValid).toHaveBeenCalled();
+  });
 });