Merge pull request #8 from PhilippMolitor/dev

release 2020.0.1

Author: Philipp Molitor

.eslintrc.js

@@ -26,7 +26,12 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: ['./tsconfig.json'],
   },
-  ignorePatterns: ['dist/**'],
+  ignorePatterns: [
+    'dist/**',
+    'src/**/*.test.ts',
+    'src/**/*.test.tsx',
+    'jest.*.js',
+  ],
   globals: {
     React: true,
     JSX: true,

.gitignore

@@ -1,6 +1,7 @@
 # node
 node_modules/
 dist/
+coverage/
 
 # npm/yarn
 yarn*.log

.npmignore

@@ -4,13 +4,16 @@
 # node
 node_modules/
 src/
+coverage/
 .husky/
 .prettierrc
 .eslintrc.js
 .eslintcache
 tsconfig.json
 
 # jest
+jest.*.js
+jest.*.ts
 __tests__/*
 *.test.ts
 *.test.tsx

README.md

@@ -6,6 +6,7 @@
 <img src="https://img.shields.io/npm/dw/react-unity-renderer?style=flat-square">
 <img src="https://img.shields.io/github/stars/PhilippMolitor/react-unity-renderer?style=flat-square">
 <img src="https://img.shields.io/npm/v/react-unity-renderer?style=flat-square">
+<img src="https://img.shields.io/bundlephobia/minzip/react-unity-renderer?style=flat-square">
 
 </p>
 

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  roots: ['<rootDir>/src'],
+  collectCoverage: true,
+  coverageDirectory: 'coverage',
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  setupFilesAfterEnv: [
+    '@testing-library/jest-dom/extend-expect',
+    '<rootDir>/jest.setup.js',
+  ],
+};

jest.setup.js

@@ -0,0 +1,4 @@
+const enzyme = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
+
+enzyme.configure({ adapter: new Adapter() });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-unity-renderer",
-  "version": "2020.0.0",
+  "version": "2020.0.1",
   "description": "React Unity Renderer allows to interactively embed Unity WebGL builds into a React powered project.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -17,8 +17,11 @@
   ],
   "scripts": {
     "watch": "tsc --build ./tsconfig.json --watch",
-    "build": "rimraf dist && tsc --build ./tsconfig.json",
-    "test": "echo \"no tests defined yet\" && exit 1",
+    "build": "yarn clean && tsc --build ./tsconfig.json",
+    "build:dev": "yarn build && yarn pack",
+    "clean": "rimraf dist && rimraf *.tgz",
+    "test": "jest",
+    "test:watch": "jest --watchAll",
     "lint": "eslint --fix ./src/",
     "lint:staged": "lint-staged",
     "prepare": "yarn build"
@@ -29,12 +32,23 @@
     ],
     "{src,typings}/**/*.{js,jsx,ts,tsx}": [
       "eslint --fix"
+    ],
+    "src/**/*.{ts,tsx}": [
+      "jest --bail --findRelatedTests"
     ]
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/react": "^11.2.5",
+    "@types/enzyme": "^3.10.8",
+    "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/jest": "^26.0.20",
     "@types/react": "^16.8.0",
     "@types/react-dom": "^16.8.0",
     "@typescript-eslint/eslint-plugin": "^4.15.2",
+    "@typescript-eslint/parser": "^4.16.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^7.20.0",
     "eslint-config-airbnb-typescript": "^12.0.0",
     "eslint-config-prettier": "^7.2.0",
@@ -45,9 +59,13 @@
     "eslint-plugin-react": "^7.21.5",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^5.1.1",
+    "jest": "^26.6.3",
     "lint-staged": "^10.5.4",
     "prettier": "^2.2.1",
+    "react": "^16.8.0",
+    "react-dom": "^16.8.0",
     "rimraf": "^3.0.2",
+    "ts-jest": "^26.5.2",
     "typescript": "^4.*"
   },
   "peerDependencies": {

src/components/UnityRenderer.ts

@@ -1,10 +1,8 @@
-import '../global';
-
 import { createElement, HTMLAttributes, useEffect, useState, VFC } from 'react';
 
 import { UnityContext } from '..';
 
-import { UnityLoaderService } from '../loader';
+import { UnityLoaderService } from '../lib/loader';
 
 export type UnityRendererProps = Omit<
   HTMLAttributes<HTMLCanvasElement>,
@@ -65,39 +63,11 @@ export const UnityRenderer: VFC<UnityRendererProps> = ({
   }
 
   /**
-   * Uses the native Unity loader method to attach the Unity instance to
-   * the renderer `canvas`.
-   *
-   * @returns {Promise<void>} A Promise resolving on successful mount of the
-   * Unity instance.
-   */
-  async function mount(): Promise<void> {
-    // get the current loader configuration from the UnityContext
-    const c = ctx.getConfig();
-
-    // attach Unity's native JavaScript loader
-    await loader!.execute(c.loaderUrl);
-
-    const instance = await window.createUnityInstance(
-      renderer!,
-      {
-        dataUrl: c.dataUrl,
-        frameworkUrl: c.frameworkUrl,
-        codeUrl: c.codeUrl,
-        streamingAssetsUrl: c.streamingAssetsUrl,
-        companyName: c.companyName,
-        productName: c.productName,
-        productVersion: c.productVersion,
-      },
-      (p) => onUnityProgress(p)
-    );
-
-    // set the instance for further JavaScript <--> Unity communication
-    ctx.setInstance(instance);
-  }
-
-  /**
+   * Unmounts the game by shutting its instance down, removing the loader
+   * script from the DOM and sending the appropriate events via the props.
    *
+   * @param {() => void} onComplete Callback function which will be executed
+   * after the unmounting has completed.
    */
   function unmount(onComplete?: () => void) {
     ctx.shutdown(() => {
@@ -109,10 +79,49 @@ export const UnityRenderer: VFC<UnityRendererProps> = ({
       if (onUnityReadyStateChange) onUnityReadyStateChange(false);
       setLastReadyState(false);
 
+      // callbck
       if (onComplete) onComplete();
     });
   }
 
+  /**
+   * Uses the native Unity loader method to attach the Unity instance to
+   * the renderer `canvas`.
+   *
+   * @returns {Promise<void>} A Promise resolving on successful mount of the
+   * Unity instance.
+   */
+  async function mount(): Promise<void> {
+    try {
+      // get the current loader configuration from the UnityContext
+      const c = ctx.getConfig();
+
+      // attach Unity's native JavaScript loader
+      await loader!.execute(c.loaderUrl);
+
+      const instance = await window.createUnityInstance(
+        renderer!,
+        {
+          dataUrl: c.dataUrl,
+          frameworkUrl: c.frameworkUrl,
+          codeUrl: c.codeUrl,
+          streamingAssetsUrl: c.streamingAssetsUrl,
+          companyName: c.companyName,
+          productName: c.productName,
+          productVersion: c.productVersion,
+        },
+        (p) => onUnityProgress(p)
+      );
+
+      // set the instance for further JavaScript <--> Unity communication
+      ctx.setInstance(instance);
+    } catch (e) {
+      unmount(() => {
+        if (onUnityError) onUnityError(e);
+      });
+    }
+  }
+
   // on loader + renderer ready
   useEffect(() => {
     if (!loader || !renderer) return;

src/components/__tests__/UnityRenderer.test.tsx

@@ -0,0 +1,50 @@
+import { mount, ReactWrapper } from 'enzyme';
+
+import { UnityContext } from '../../lib/context';
+import { UnityRenderer } from '../UnityRenderer';
+
+describe('<UnityRenderer /> (unconfigured)', () => {
+  const loaderUrl = 'http://example.com/script.js';
+
+  const ctx = new UnityContext({
+    loaderUrl: loaderUrl,
+    codeUrl: '',
+    dataUrl: '',
+    frameworkUrl: '',
+  });
+
+  let renderer: ReactWrapper<typeof UnityRenderer>;
+  let progress = 0;
+  let ready = false;
+  let error = false;
+
+  beforeEach(() => {
+    renderer = mount<typeof UnityRenderer>(
+      <UnityRenderer
+        context={ctx}
+        onUnityProgressChange={(p) => (progress = p)}
+        onUnityReadyStateChange={(r) => (ready = r)}
+        onUnityError={() => (error = true)}
+        className="test"
+      />
+    );
+  });
+
+  it('renders with minimal configuration', async () => {
+    expect(renderer).toBeDefined();
+  });
+
+  it('uses the context prop', async () => {
+    expect(renderer.prop('context')).toBe(ctx);
+  });
+
+  it('uses the className prop', async () => {
+    expect(renderer.prop('className')).toBe('test');
+  });
+
+  it('does not trigger callbacks yet', async () => {
+    expect(progress).toBe(0);
+    expect(ready).toBe(false);
+    expect(error).toBe(false);
+  });
+});

src/global.ts

@@ -1,4 +1,7 @@
 /* eslint-disable import/no-cycle */
-export { UnityContext, UnityEventCallback } from './context';
+export {
+  UnityContext,
+  UnityLoaderConfig,
+  UnityInstanceConfig,
+} from './lib/context';
 export { UnityRenderer, UnityRendererProps } from './components/UnityRenderer';
-export { UnityLoaderConfig } from './interfaces/config';

src/index.ts

@@ -0,0 +1,23 @@
+import { UnityContext, UnityLoaderConfig } from '../context';
+
+describe('UnityContext', () => {
+  const cfg: UnityLoaderConfig = {
+    loaderUrl: 'a',
+    codeUrl: 'b',
+    frameworkUrl: 'c',
+    dataUrl: 'd',
+    streamingAssetsUrl: 'e',
+    symbolsUrl: 'f',
+    memoryUrl: 'g',
+    modules: { h: true },
+    companyName: 'i',
+    productName: 'j',
+    productVersion: 'k',
+  };
+
+  it('stores and retrieves the loader configuration', async () => {
+    const ctx = new UnityContext(cfg);
+
+    expect(ctx.getConfig()).toEqual(cfg);
+  });
+});

src/interfaces/config.ts

@@ -0,0 +1,39 @@
+import { fireEvent } from '@testing-library/dom';
+import { UnityLoaderService } from '../loader';
+
+describe('UnityLoaderService', () => {
+  const url = 'http://example.com/script.js';
+  let loader: UnityLoaderService;
+
+  beforeEach(() => {
+    loader = new UnityLoaderService();
+  });
+
+  it('can create a loader', async () => {
+    expect(loader).toBeInstanceOf(UnityLoaderService);
+  });
+
+  it('resolves on <script> load', async (done) => {
+    loader.execute(url).then(() => {
+      expect(script!.src).toEqual(url);
+      done();
+    });
+
+    const script = document.querySelector('script');
+
+    expect(script).toBeDefined();
+    fireEvent.load(script!);
+  });
+
+  it('can unmount itself', async () => {
+    loader.execute(url).then(() => {
+      loader.unmount();
+      expect(script).not.toBeDefined();
+    });
+
+    const script = document.querySelector('script');
+
+    expect(script).toBeDefined();
+    fireEvent.load(script!);
+  });
+});