test(mocks): consistent way to mock composables (#613)

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **Tests**
- Refactored unit tests to enhance the handling of mocked functions,
improving clarity and maintainability.
- Updated mock setup for various components to use `hoistedMocks` for
better test organization and efficiency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Closes #613

tests/unit/specs/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderSetupButtons.nuxt.spec.ts

@@ -21,7 +21,9 @@ const hoistedMocks = vi.hoisted(() => ({
   useAnimateCss: { animateElementOnce: vi.fn() },
 }));
 
-vi.mock("~/composables/animate-css/useAnimateCss", () => ({ useAnimateCss: (): typeof hoistedMocks.useAnimateCss => hoistedMocks.useAnimateCss }));
+vi.mock("~/composables/animate-css/useAnimateCss", () => ({
+  useAnimateCss: (): typeof hoistedMocks.useAnimateCss => hoistedMocks.useAnimateCss,
+}));
 
 describe("Game Lobby Header Setup Buttons Component", () => {
   const defaultCreateGameDto = createFakeCreateGameDto({

tests/unit/specs/components/pages/game-lobby/GameLobbyRolePicker/GameLobbyRolePickerGrid/GameLobbyRolePickerGridElement/GameLobbyRolePickerGridElement.nuxt.spec.ts

@@ -12,11 +12,13 @@ import { useRolesStore } from "~/stores/role/useRolesStore";
 import { createFakeRole } from "@tests/unit/utils/factories/composables/api/role/role.factory";
 import { mountSuspendedComponent } from "@tests/unit/utils/helpers/mount.helpers";
 
-const { radash: mockedRadash } = vi.hoisted(() => ({ radash: { draw: vi.fn() } }));
+const hoistedMocks = vi.hoisted(() => ({
+  radash: { draw: vi.fn() },
+}));
 
 vi.mock("radash", async importOriginal => ({
   ...await importOriginal<typeof Radash>(),
-  draw: vi.fn(mockedRadash.draw),
+  ...hoistedMocks.radash,
 }));
 
 describe("Game Lobby Role Picker Grid Element Component", () => {
@@ -145,12 +147,12 @@ describe("Game Lobby Role Picker Grid Element Component", () => {
           pickedRole: undefined,
         },
       });
-      mockedRadash.draw.mockReturnValue(roles[1]);
+      hoistedMocks.radash.draw.mockReturnValue(roles[1]);
       const button = wrapper.find("#game-lobby-role-picker-grid-element-button");
       await button.trigger("click");
       const emittedRole = wrapper.emitted("pickRole")?.[0][0];
 
-      expect(mockedRadash.draw).toHaveBeenCalledExactlyOnceWith(roles);
+      expect(hoistedMocks.radash.draw).toHaveBeenCalledExactlyOnceWith(roles);
       expect(wrapper.emitted("pickRole")).toHaveLength(1);
       expect(emittedRole).toStrictEqual<Role>(roles[1]);
     });
@@ -162,12 +164,12 @@ describe("Game Lobby Role Picker Grid Element Component", () => {
           pickedRole: roles[0],
         },
       });
-      mockedRadash.draw.mockReturnValue(roles[2]);
+      hoistedMocks.radash.draw.mockReturnValue(roles[2]);
       const button = wrapper.find("#game-lobby-role-picker-grid-element-button");
       await button.trigger("click");
       const emittedRole = wrapper.emitted("pickRole")?.[0][0];
 
-      expect(mockedRadash.draw).toHaveBeenCalledExactlyOnceWith([
+      expect(hoistedMocks.radash.draw).toHaveBeenCalledExactlyOnceWith([
         roles[1],
         roles[2],
       ]);

tests/unit/specs/components/pages/game/GameOver/GameOverHistory/GameOverHistoryRecords/GameOverHistoryRecord/GameOverHistoryRecordSource/GameOverHistoryRecordSource.nuxt.spec.ts

@@ -13,11 +13,11 @@ import { createFakeActorAlivePlayer } from "@tests/unit/utils/factories/composab
 
 import { mountSuspendedComponent } from "@tests/unit/utils/helpers/mount.helpers";
 
-const { radash: mockedRadash } = vi.hoisted(() => ({ radash: { shuffle: vi.fn() } }));
+const hoistedMocks = vi.hoisted(() => ({ radash: { shuffle: vi.fn() } }));
 
 vi.mock("radash", async importOriginal => ({
   ...await importOriginal<typeof Radash>(),
-  shuffle: vi.fn(mockedRadash.shuffle),
+  ...hoistedMocks.radash,
 }));
 
 describe("Game Over History Record Source Component", () => {
@@ -49,7 +49,7 @@ describe("Game Over History Record Source Component", () => {
   }
 
   beforeEach(async() => {
-    mockedRadash.shuffle.mockReturnValue(defaultSourcePlayers);
+    hoistedMocks.radash.shuffle.mockReturnValue(defaultSourcePlayers);
     wrapper = await mountGameOverHistoryRecordSourceComponent();
   });
 
@@ -77,7 +77,7 @@ describe("Game Over History Record Source Component", () => {
     });
 
     it("should display all players when there are less than 4 players in source.", async() => {
-      mockedRadash.shuffle.mockReturnValue(defaultSourcePlayers.slice(0, 2));
+      hoistedMocks.radash.shuffle.mockReturnValue(defaultSourcePlayers.slice(0, 2));
       wrapper = await mountGameOverHistoryRecordSourceComponent();
       const sourcePlayerCards = wrapper.findAllComponents<typeof PlayerCard>(".game-over-history-record-source-player-card");
 

tests/unit/specs/components/pages/game/GamePlaying/GameEventsMonitor/GameEventsMonitorCurrentEvent/GameStartsEvent/GameStartsEvent.nuxt.spec.ts

@@ -16,11 +16,11 @@ import { createFakeActorAlivePlayer, createFakeCupidAlivePlayer, createFakeSeerA
 
 import { mountSuspendedComponent } from "@tests/unit/utils/helpers/mount.helpers";
 
-const { radash: mockedRadash } = vi.hoisted(() => ({ radash: { shuffle: vi.fn() } }));
+const hoistedMocks = vi.hoisted(() => ({ radash: { shuffle: vi.fn() } }));
 
 vi.mock("radash", async importOriginal => ({
   ...await importOriginal<typeof Radash>(),
-  shuffle: vi.fn(mockedRadash.shuffle),
+  ...hoistedMocks.radash,
 }));
 
 describe("Game Starts Event Component", () => {
@@ -48,7 +48,7 @@ describe("Game Starts Event Component", () => {
   }
 
   beforeEach(async() => {
-    mockedRadash.shuffle.mockReturnValue([]);
+    hoistedMocks.radash.shuffle.mockReturnValue([]);
     wrapper = await mountGameStartsEventComponent();
     const gameStore = useGameStore();
     gameStore.game = createFakeGame({
@@ -65,7 +65,7 @@ describe("Game Starts Event Component", () => {
 
   describe("Game Starts Event texts", () => {
     it("should have texts for the game starts event containing sheriff election when first action is sheriff election.", async() => {
-      mockedRadash.shuffle.mockReturnValue([
+      hoistedMocks.radash.shuffle.mockReturnValue([
         ["seer", 1],
         ["cupid", 1],
         ["actor", 1],

tests/unit/specs/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundContent/GameVotePlayground/GameVotePlaygroundVoters/GameVotePlaygroundVoters.nuxt.spec.ts

@@ -13,11 +13,11 @@ import { createFakeGame } from "@tests/unit/utils/factories/composables/api/game
 import { createFakeSeerAlivePlayer } from "@tests/unit/utils/factories/composables/api/game/player/player-with-role.factory";
 import { mountSuspendedComponent } from "@tests/unit/utils/helpers/mount.helpers";
 
-const { radash: mockedRadash } = vi.hoisted(() => ({ radash: { shuffle: vi.fn() } }));
+const hoistedMocks = vi.hoisted(() => ({ radash: { shuffle: vi.fn() } }));
 
 vi.mock("radash", async importOriginal => ({
   ...await importOriginal<typeof Radash>(),
-  shuffle: vi.fn(mockedRadash.shuffle),
+  ...hoistedMocks.radash,
 }));
 
 describe("Game Vote Playground Voter Component", () => {
@@ -78,7 +78,7 @@ describe("Game Vote Playground Voter Component", () => {
         createFakeSeerAlivePlayer(),
         createFakeSeerAlivePlayer(),
       ];
-      mockedRadash.shuffle.mockReturnValue(shuffledPlayers);
+      hoistedMocks.radash.shuffle.mockReturnValue(shuffledPlayers);
       wrapper = await mountGameVotePlaygroundVotersComponent();
       const gameStore = useGameStore();
       gameStore.game.currentPlay = createFakeGamePlay({ source: createFakeGamePlaySource({ players: expectedPlayersToVote }) });

tests/unit/specs/components/shared/game/game-event/GameEventWithTexts/GameEventTextsManager/GameEventPreviousTextButton/GameEventPreviousTextButton.nuxt.spec.ts

@@ -25,7 +25,9 @@ const { hoistedMocks } = vi.hoisted(() => ({
   },
 }));
 
-vi.mock("~/composables/animate-css/useAnimateCss", () => ({ useAnimateCss: (): typeof hoistedMocks.useAnimateCss => hoistedMocks.useAnimateCss }));
+vi.mock("~/composables/animate-css/useAnimateCss", () => ({
+  useAnimateCss: (): typeof hoistedMocks.useAnimateCss => hoistedMocks.useAnimateCss,
+}));
 
 describe("Game Event Previous Text Button Component", () => {
   let wrapper: ReturnType<typeof mount<typeof GameEventPreviousTextButton>>;

tests/unit/specs/composables/api/game/useFetchRandomGameComposition.spec.ts

@@ -1,11 +1,16 @@
 import type { $Fetch } from "nitropack";
+import { vi } from "vitest";
+import type Qs from "qs";
 
 import { useFetchRandomGameComposition } from "~/composables/api/game/useFetchRandomGameComposition";
 import * as UseWerewolvesAssistantApi from "~/composables/api/useWerewolvesAssistantApi";
 
-const { stringifyMock } = vi.hoisted(() => ({ stringifyMock: vi.fn() }));
+const hoistedMocks = vi.hoisted(() => ({ qs: { stringify: vi.fn() } }));
 
-vi.mock("qs", () => ({ stringify: stringifyMock }));
+vi.mock("qs", async importOriginal => ({
+  ...await importOriginal<typeof Qs>(),
+  ...hoistedMocks.qs,
+}));
 
 describe("Use Fetch Random Game Composition", () => {
   let mocks: {
@@ -23,7 +28,7 @@ describe("Use Fetch Random Game Composition", () => {
 
   describe("fetchRandomGameComposition", () => {
     it("should fetch random game composition when called.", async() => {
-      stringifyMock.mockReturnValue("stringifiedQuery");
+      hoistedMocks.qs.stringify.mockReturnValue("stringifiedQuery");
       const expectedUrl = `/games/random-composition?stringifiedQuery`;
       await useFetchRandomGameComposition().fetchRandomGameComposition({
         players: [

tests/unit/specs/composables/api/useWerewolvesAssistantApi.spec.ts

@@ -1,14 +1,17 @@
 import { useWerewolvesAssistantApi } from "~/composables/api/useWerewolvesAssistantApi";
 
-const { createMock } = vi.hoisted(() => ({ createMock: vi.fn() }));
-vi.mock("ofetch", () => ({ createFetch: vi.fn(() => ({ create: createMock })) }));
+const hoistedMocks = vi.hoisted(() => ({ oFetch: { create: vi.fn() } }));
+
+vi.mock("ofetch", () => ({
+  createFetch: vi.fn(() => hoistedMocks.oFetch),
+}));
 
 describe("Use Werewolves Assistant Api Composable", () => {
   describe("fetchWerewolvesAssistantApi", () => {
     it("should create a fetch instance for Werewolves Assistant API when called.", () => {
       useWerewolvesAssistantApi();
 
-      expect(createMock).toHaveBeenCalledExactlyOnceWith({
+      expect(hoistedMocks.oFetch.create).toHaveBeenCalledExactlyOnceWith({
         baseURL: "http://127.0.0.1",
         headers: { "Content-Type": "application/json" },
         onResponseError: expect.any(Function) as () => void,

tests/unit/specs/stores/audio/useAudioStore.spec.ts

@@ -4,13 +4,12 @@ import type Radash from "radash";
 import { vi } from "vitest";
 import { useAudioStore } from "~/stores/audio/useAudioStore";
 
-vi.mock("howler");
-
-const { radash: mockedRadash } = vi.hoisted(() => ({ radash: { draw: vi.fn() } }));
+const hoistedMocks = vi.hoisted(() => ({ radash: { draw: vi.fn() } }));
 
+vi.mock("howler");
 vi.mock("radash", async importOriginal => ({
   ...await importOriginal<typeof Radash>(),
-  draw: vi.fn(mockedRadash.draw),
+  ...hoistedMocks.radash,
 }));
 
 describe("Use Audio Store", () => {
@@ -173,30 +172,30 @@ describe("Use Audio Store", () => {
 
   describe("playRandomGamePhaseBackgroundAudio", () => {
     beforeEach(() => {
-      mockedRadash.draw.mockReturnValue("night-1");
+      hoistedMocks.radash.draw.mockReturnValue("night-1");
     });
 
     it("should not draw a random game phase background audio when the playing background audio is in the same game phase.", () => {
       const audioStore = useAudioStore();
       audioStore.playingBackgroundAudioName = "night-2";
       audioStore.playRandomGamePhaseBackgroundAudio("night");
 
-      expect(mockedRadash.draw).not.toHaveBeenCalled();
+      expect(hoistedMocks.radash.draw).not.toHaveBeenCalled();
     });
 
     it("should draw a random game phase background audio when the playing background audio is not in the same game phase.", () => {
       const audioStore = useAudioStore();
       audioStore.playingBackgroundAudioName = "day-1";
       audioStore.playRandomGamePhaseBackgroundAudio("night");
 
-      expect(mockedRadash.draw).toHaveBeenCalledExactlyOnceWith(audioStore.nightBackgroundAudioNames);
+      expect(hoistedMocks.radash.draw).toHaveBeenCalledExactlyOnceWith(audioStore.nightBackgroundAudioNames);
     });
 
     it("should draw a random game phase background audio when there is no playing background audio.", () => {
       const audioStore = useAudioStore();
       audioStore.playRandomGamePhaseBackgroundAudio("day");
 
-      expect(mockedRadash.draw).toHaveBeenCalledExactlyOnceWith(audioStore.dayBackgroundAudioNames);
+      expect(hoistedMocks.radash.draw).toHaveBeenCalledExactlyOnceWith(audioStore.dayBackgroundAudioNames);
     });
 
     it("should fade out playing background audio when called.", () => {
@@ -221,7 +220,7 @@ describe("Use Audio Store", () => {
       const audioStore = useAudioStore();
       const { backgroundAudios } = audioStore;
       audioStore.playingBackgroundAudioName = "day-1";
-      mockedRadash.draw.mockReturnValue(null);
+      hoistedMocks.radash.draw.mockReturnValue(null);
       audioStore.playRandomGamePhaseBackgroundAudio("night");
 
       expect(backgroundAudios["day-1"].fade).not.toHaveBeenCalled();