test: use jest

Author: josex2r

jest.config.js

@@ -0,0 +1,16 @@
+const config = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  transform: {
+    // '^.+\\.[tj]sx?$' to process js/ts with `ts-jest`
+    // '^.+\\.m?[tj]sx?$' to process js/ts/mjs/mts with `ts-jest`
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        // ts-jest configuration goes here
+      },
+    ],
+  },
+};
+
+module.exports = config;

lib/slot-machine.ts

@@ -19,15 +19,15 @@ export type Bound = {
 export type Bounds = Record<Direction, Bound>;
 
 export type Options = {
-  active: number;
-  delay: number;
-  auto: boolean;
-  spins: number;
+  active?: number;
+  delay?: number;
+  auto?: boolean;
+  spins?: number;
   randomize?: RandomizeCallback;
   onComplete?: OnCompleteCallback;
-  inViewport: boolean;
-  direction: Direction;
-  transition: string;
+  inViewport?: boolean;
+  direction?: Direction;
+  transition?: string;
 };
 
 const defaults: Options = {
@@ -101,7 +101,7 @@ export default class SlotMachine implements Options {
     // Show active element
     this._resetPosition();
     // Start auto animation
-    if (this.auto !== false) {
+    if (this.auto) {
       this.run();
     }
   }

package.json

@@ -5,12 +5,12 @@
     "node": ">= 16"
   },
   "scripts": {
-    "acceptance": "testem ci",
     "prepare": "husky install",
     "start": "webpack-dev-server --mode development",
     "build": "webpack --mode production",
-    "test": "yarn build && npm run acceptance && npm run unit",
-    "unit": "mocha tests/unit/*-test.js",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:cov": "jest --cov",
     "lint": "eslint .",
     "prettier": "prettier --write --ignore-path .gitignore \"**/*.{css,html,js,ts,json,md,yaml,yml}\""
   },
@@ -33,17 +33,14 @@
     "babel-preset-env": "^1.6.1",
     "babelify": "^8.0.0",
     "browserify": "^16.1.1",
-    "chai": "^4.1.2",
     "eslint": "^8.23.0",
     "husky": "^8.0.0",
-    "mocha": "^5.0.4",
+    "jest": "^29.2.0",
+    "jest-environment-jsdom": "^29.2.0",
     "open": "0.0.5",
     "prettier": "^2.7.1",
     "run-sequence": "^2.2.1",
-    "sinon": "^4.4.6",
-    "sinon-chai": "^3.0.0",
-    "sinon-dist": "^1.15.4",
-    "testem": "^2.0.0",
+    "ts-jest": "^29.0.3",
     "ts-loader": "^9.4.1",
     "tsconfig-paths": "^3.9.0",
     "typescript": "^4.1.3",

testem.json

@@ -0,0 +1,81 @@
+import SlotMachine, { Direction } from '../../lib/slot-machine';
+import { MACHINE_ID, render } from '../setup';
+
+describe('Constructor', () => {
+  let machine: SlotMachine;
+  let shuffleSpy;
+  let runSpy;
+
+  beforeEach(() => {
+    shuffleSpy = jest.spyOn(SlotMachine.prototype, 'shuffle');
+    runSpy = jest.spyOn(SlotMachine.prototype, 'run');
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+    machine.element?.remove();
+  });
+
+  it('has element', () => {
+    machine = render();
+
+    const element = document.getElementById(MACHINE_ID);
+
+    expect(machine.element).toBe(element);
+  });
+
+  it('element does not have overflow', () => {
+    machine = render();
+
+    expect(machine.element.style.overflow).toBe('hidden');
+  });
+
+  [
+    { active: 0, result: 0 },
+    { active: 1, result: 1 },
+    { active: 99, result: 0 },
+    { active: -99, result: 0 },
+    { active: undefined, result: 0 },
+  ].forEach((testCase) => {
+    it(`sets active: ${testCase.active}`, () => {
+      machine = render({
+        active: testCase.active,
+      });
+
+      expect(machine.active).toBe(testCase.result);
+    });
+  });
+
+  it('wraps tiles and adds offsets', () => {
+    machine = render();
+
+    expect(machine.container.classList.contains('slotMachineContainer')).toBeTruthy();
+    expect(machine.container.children.length).toBe(5);
+  });
+
+  (['up', 'down'] as Direction[]).forEach((direction) => {
+    it(`sets direction: ${direction}`, () => {
+      machine = render({
+        direction: direction,
+      });
+
+      expect(machine.direction).toBe(direction);
+    });
+  });
+
+  it('sets randomize', () => {
+    const randomize = () => 1;
+    machine = render({
+      randomize,
+    });
+
+    expect(machine.randomize).toBe(randomize);
+  });
+
+  it('does not auto start', () => {
+    machine = render();
+
+    expect(shuffleSpy).not.toHaveBeenCalled();
+    expect(runSpy).not.toHaveBeenCalled();
+  });
+});