Merge pull request #35 from DennisSmuda/fixifoxi

Update Packages

.github/workflows/main.yaml

@@ -18,7 +18,7 @@ jobs:
         uses: actions/checkout@v3
       - uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
       - run: npm ci
       - run: npm run test:unit
 
@@ -31,9 +31,16 @@ jobs:
     steps:
       - name: ⬇️ Checkout repo
         uses: actions/checkout@v3
-      - uses: ArtiomTr/jest-coverage-report-action@v2
+      - uses: actions/setup-node@v3
         with:
-          test-script: npm run test:coverage
+          node-version: 18
+      - name: "Install Deps"
+        run: npm install
+      - name: "Test"
+        run: npx vitest --coverage
+      - name: "Report Coverage"
+        if: always() # Also generate the report if tests are failing
+        uses: davelosert/vitest-coverage-report-action@v2
 
   cypress-run:
     runs-on: ubuntu-latest

__tests__/chord-editor-modal.spec.tsx

@@ -2,31 +2,32 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react";
 import ChordEditorModal from "../app/components/track/ChordEditorModal";
 import type { Subdivision } from "tone/build/esm/core/type/Units";
+import { vi, expect } from "vitest";
 
 // @ts-expect-error
 global.IntersectionObserver = class FakeIntersectionObserver {
   observe() {}
   disconnect() {}
 };
 
-jest.mock("tone", () => ({
-  start: jest.fn(),
-  Sampler: jest.fn(() => ({
-    toDestination: jest.fn(),
+vi.mock("tone", () => ({
+  start: vi.fn(),
+  Sampler: vi.fn(() => ({
+    toDestination: vi.fn(),
   })),
-  Transport: jest.fn(() => ({
-    start: jest.fn(),
-    stop: jest.fn(),
-    loop: jest.fn(),
-    dispose: jest.fn(),
+  Transport: vi.fn(() => ({
+    start: vi.fn(),
+    stop: vi.fn(),
+    loop: vi.fn(),
+    dispose: vi.fn(),
   })),
-  Synth: jest.fn(() => ({
-    toDestination: jest.fn(),
+  Synth: vi.fn(() => ({
+    toDestination: vi.fn(),
   })),
-  Part: jest.fn().mockImplementation(() => ({
-    start: jest.fn(),
-    stop: jest.fn(),
-    dispose: jest.fn(),
+  Part: vi.fn().mockImplementation(() => ({
+    start: vi.fn(),
+    stop: vi.fn(),
+    dispose: vi.fn(),
   })),
 }));
 
@@ -44,8 +45,8 @@ const sampleChord = {
 };
 
 describe("Chord Editor Modal Component", () => {
-  it.only("renders correctly and has clickable buttons to change a chord", () => {
-    const close = jest.fn();
+  it("renders correctly and has clickable buttons to change a chord", () => {
+    const close = vi.fn();
     const { getByText, baseElement, getByRole } = render(
       <ChordEditorModal
         isOpen={true}
@@ -72,12 +73,12 @@ describe("Chord Editor Modal Component", () => {
     expect(close).toHaveBeenCalled();
   });
 
-  it.only("renders correctly and has clickable buttons to change a chord", () => {
+  it("renders correctly and has clickable buttons to change a chord", () => {
     render(
       <ChordEditorModal
         isOpen={false}
         currentChord={sampleChord}
-        onClose={jest.fn()}
+        onClose={vi.fn()}
       />
     );
   });

__tests__/chord-sequencer.spec.tsx

@@ -1,62 +1,69 @@
 import React from "react";
-import { fireEvent, render } from "@testing-library/react";
+import { act, fireEvent, render } from "@testing-library/react";
 
 import ChordSequencer from "../app/components/sequencer/ChordsSequence";
 import { timeBeats } from "../app/components/sequencer/timeBeats";
+import { vi } from "vitest";
 
-jest.mock("tone", () => ({
-  start: jest.fn(),
-  now: jest.fn(),
-  Sampler: jest.fn(() => ({
-    triggerAttackRelease: jest.fn(),
-    toDestination: jest.fn(),
+vi.mock("tone", () => ({
+  start: vi.fn(),
+  now: vi.fn(),
+  Sampler: vi.fn(() => ({
+    triggerAttackRelease: vi.fn(),
+    toDestination: vi.fn(),
   })),
-  Transport: jest.fn(() => ({
-    scheduleRepeat: jest.fn(),
-    start: jest.fn(),
-    stop: jest.fn(),
-    loop: jest.fn(),
-    dispose: jest.fn(),
+  Transport: vi.fn(() => ({
+    scheduleRepeat: vi.fn(),
+    start: vi.fn(),
+    stop: vi.fn(),
+    loop: vi.fn(),
+    dispose: vi.fn(),
   })),
-  Part: jest.fn().mockImplementation(() => ({
-    start: jest.fn(),
-    stop: jest.fn(),
-    dispose: jest.fn(),
+  Part: vi.fn().mockImplementation(() => ({
+    start: vi.fn(),
+    stop: vi.fn(),
+    dispose: vi.fn(),
   })),
 }));
 
 describe("ChordSequencer Component", () => {
-  it("renders correctly and can buttons to enable chords", () => {
-    const change = jest.fn();
+  it("renders correctly and has buttons to enable chords", () => {
+    const change = vi.fn();
     const sequencer = render(
       <ChordSequencer onChange={change} timeBeats={timeBeats} mute={false} />
     );
 
     const chordButtons = sequencer.getAllByRole("button", { name: /a minor/i });
-    chordButtons[0].click();
-    chordButtons[0].click();
+    act(() => {
+      chordButtons[0].click();
+      chordButtons[0].click();
+    });
 
     const shrinkButton = sequencer.getByRole("button", { name: /shrink/i });
     fireEvent.click(shrinkButton);
   });
 
   it("renders correctly and can buttons to change tonic + modes", () => {
-    const change = jest.fn();
+    const change = vi.fn();
     const sequencer = render(
       <ChordSequencer onChange={change} timeBeats={timeBeats} mute={false} />
     );
 
     const noteSelect = sequencer.getByRole("combobox", {
       name: /root note select/i,
     });
-    fireEvent.change(noteSelect, { target: { value: "E3" } });
+    act(() => {
+      fireEvent.change(noteSelect, { target: { value: "E3" } });
+    });
 
     const modeSelect = sequencer.getByRole("combobox", {
       name: /chord mode select/i,
     });
-    fireEvent.click(modeSelect);
-    fireEvent.change(modeSelect, { target: { value: "melodic minor" } });
-    fireEvent.change(modeSelect, { target: { value: "harmonic minor" } });
-    fireEvent.change(modeSelect, { target: { value: "minor" } });
+    act(() => {
+      fireEvent.click(modeSelect);
+      fireEvent.change(modeSelect, { target: { value: "melodic minor" } });
+      fireEvent.change(modeSelect, { target: { value: "harmonic minor" } });
+      fireEvent.change(modeSelect, { target: { value: "minor" } });
+    });
   });
 });

__tests__/drum-sequencer.spec.tsx

@@ -1,44 +1,51 @@
 import React from "react";
-import { render } from "@testing-library/react";
+import { act, render } from "@testing-library/react";
 
 import DrumSequencer from "../app/components/sequencer/DrumSequence";
 import { timeBeats } from "../app/components/sequencer/timeBeats";
+import { vi } from "vitest";
 
-jest.mock("tone", () => ({
-  start: jest.fn(),
-  now: jest.fn(),
-  Sampler: jest.fn(() => ({
-    triggerAttackRelease: jest.fn(),
-    toDestination: jest.fn(),
+vi.mock("tone", () => ({
+  start: vi.fn(),
+  now: vi.fn(),
+  Sampler: vi.fn(() => ({
+    triggerAttackRelease: vi.fn(),
+    toDestination: vi.fn(),
   })),
   // "Transport.scheduleRepeat": {},
-  // Transport: jest.fn(() => ({
-  Transport: jest.fn().mockImplementation(() => ({
-    scheduleRepeat: jest.fn(),
-    start: jest.fn(),
-    stop: jest.fn(),
-    loop: jest.fn(),
-    dispose: jest.fn(),
+  // Transport: vi.fn(() => ({
+  Transport: vi.fn().mockImplementation(() => ({
+    scheduleRepeat: vi.fn(),
+    start: vi.fn(),
+    stop: vi.fn(),
+    loop: vi.fn(),
+    dispose: vi.fn(),
   })),
-  Part: jest.fn().mockImplementation(() => ({
-    start: jest.fn(),
-    stop: jest.fn(),
-    dispose: jest.fn(),
+  Part: vi.fn().mockImplementation(() => ({
+    start: vi.fn(),
+    stop: vi.fn(),
+    dispose: vi.fn(),
   })),
 }));
 
 describe("DrumSequencer Component", () => {
   it("renders correctly and has buttons to control kick/snare/hihat sounds", () => {
-    const change = jest.fn();
+    const change = vi.fn();
     const sequencer = render(
       <DrumSequencer onChange={change} timeBeats={timeBeats} mute={false} />
     );
 
     const hihatButtons = sequencer.getAllByRole("button", { name: /hihat/i });
-    hihatButtons[0].click();
+    act(() => {
+      hihatButtons[0].click();
+    });
     const snareButtons = sequencer.getAllByRole("button", { name: /snare/i });
-    snareButtons[0].click();
+    act(() => {
+      snareButtons[0].click();
+    });
     const kickButtons = sequencer.getAllByRole("button", { name: /kick/i });
-    kickButtons[0].click();
+    act(() => {
+      kickButtons[0].click();
+    });
   });
 });

__tests__/edit-chord.spec.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react";
 import EditChord from "../app/components/track/EditChord";
 import type { Subdivision } from "tone/build/esm/core/type/Units";
+import { vi, expect } from "vitest";
 
 const sampleChord = {
   note: ["C3", "E3", "G3", "B3"],
@@ -31,11 +32,11 @@ const overflowChord = {
 };
 
 describe("Play Chord Component", () => {
-  const shortenChord = jest.fn();
-  const lengthenChord = jest.fn();
-  const clickChord = jest.fn();
-  const deleteChord = jest.fn();
-  const editChord = jest.fn();
+  const shortenChord = vi.fn();
+  const lengthenChord = vi.fn();
+  const clickChord = vi.fn();
+  const deleteChord = vi.fn();
+  const editChord = vi.fn();
 
   it("Can show a chord", async () => {
     const { getByRole } = render(

__tests__/music/chord-beat.spec.ts

@@ -1,3 +1,4 @@
+import { expect } from 'vitest'
 import type { Subdivision } from "tone/build/esm/core/type/Units";
 import ChordBeat from "../../app/music/ChordBeat";
 

__tests__/music/loader.spec.ts

@@ -1,23 +1,24 @@
+import { vi, expect } from "vitest";
 import { loadInstruments } from "../../app/music/loader";
 
-jest.mock("tone", () => ({
-  start: jest.fn(),
-  Sampler: jest.fn(() => ({
-    toDestination: jest.fn(),
+vi.mock("tone", () => ({
+  start: vi.fn(),
+  Sampler: vi.fn(() => ({
+    toDestination: vi.fn(),
   })),
-  Transport: jest.fn(() => ({
-    start: jest.fn(),
-    stop: jest.fn(),
-    loop: jest.fn(),
-    dispose: jest.fn(),
+  Transport: vi.fn(() => ({
+    start: vi.fn(),
+    stop: vi.fn(),
+    loop: vi.fn(),
+    dispose: vi.fn(),
   })),
-  Synth: jest.fn(() => ({
-    toDestination: jest.fn(),
+  Synth: vi.fn(() => ({
+    toDestination: vi.fn(),
   })),
-  Part: jest.fn().mockImplementation(() => ({
-    start: jest.fn(),
-    stop: jest.fn(),
-    dispose: jest.fn(),
+  Part: vi.fn().mockImplementation(() => ({
+    start: vi.fn(),
+    stop: vi.fn(),
+    dispose: vi.fn(),
   })),
 }));
 

__tests__/music/music-utils.spec.ts

@@ -1,3 +1,4 @@
+import { expect } from 'vitest'
 import type { Subdivision } from "tone/build/esm/core/type/Units";
 import {
   convertDurationToBeats,

__tests__/music/music.spec.ts

@@ -1,11 +1,12 @@
 import Music from "../../app/music/Music";
+import { expect } from 'vitest'
 
 describe("Music Class", () => {
   it("can construct a new MusicInstance from JSON or String", () => {
     const music = new Music({ sheet: sampleSheet.sheet });
 
     expect(music).toBeTruthy();
-    const { chords, groove } = music.generateMusic();
+    const { chords, groove } = music.generateMusic('asdf');
     expect(chords).toBeTruthy();
     expect(groove).toBeTruthy();
 

__tests__/play-chord.spec.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import { fireEvent, render } from "@testing-library/react";
 import PlayChord from "../app/components/track/PlayChord";
 import type { Subdivision } from "tone/build/esm/core/type/Units";
+import { vi, expect } from "vitest";
 
 const sampleChord = {
   note: ["C3", "E3", "G3", "B3"],
@@ -19,7 +20,7 @@ const sampleChord = {
 
 describe("Play Chord Component", () => {
   it("Can show a chord", () => {
-    const clickChord = jest.fn();
+    const clickChord = vi.fn();
 
     const { getAllByText } = render(
       <PlayChord

__tests__/routes/index-route.spec.tsx

@@ -2,9 +2,10 @@ import React from "react";
 // Testing library
 import { render, screen } from "@testing-library/react";
 import { MemoryRouter } from "react-router-dom";
+import { expect } from "vitest";
 
 // App
-import Index from "../../app/routes/index";
+import Index from "../../app/routes/_index";
 
 describe("Home page", () => {
   it("renders a heading", () => {

__tests__/setup-test-env.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom/vitest";