test: Add test cases

src/__tests__/unit/components/game/ResultModalComponent.test.ts

@@ -0,0 +1,181 @@
+import { shallowMount } from "@vue/test-utils";
+import { describe, expect, it } from "vitest";
+import ResultModalComponentVue from "../../../../components/game/ResultModalComponent.vue";
+
+describe("ResultModalComponent", () => {
+  const props = {
+    selectedMode: "single",
+    isOwner: false,
+    isShowingSummary: false,
+    isNextRoundReady: false,
+    distance: 10000,
+    distanceByPlayerArr: [],
+    round: 1,
+    score: 10000,
+    multiplayerGameSummary: [],
+  };
+
+  const singleResult = "[data-testid=single-result]";
+  const singleNextRoundButton = "[data-testid=single-next-round-button]";
+  const singlePlayAgainButton = "[data-testid=single-play-again-button]";
+  const singleShowSummaryButton = "[data-testid=single-show-summary-button]";
+  const multiplayerResult = "[data-testid=multiplayer-result]";
+  const multiplayerSummary = "[data-testid=multiplayer-summary]";
+  const multiplayerNextRoundButton =
+    "[data-testid=multiplayer-next-round-button]";
+  const multiplayerShowSummaryButton =
+    "[data-testid=multiplayer-show-summary-button]";
+
+  it("should show a result for single player", () => {
+    const wrapper = shallowMount(ResultModalComponentVue, {
+      props: props,
+    });
+
+    expect(wrapper.find(singleResult).text()).toBe("You are 10000km away 🚀");
+  });
+
+  it("should show a button to proceed to next round in single mode", async () => {
+    const wrapper = shallowMount(ResultModalComponentVue, {
+      props: props,
+    });
+
+    await wrapper.find(singleNextRoundButton).trigger("click");
+
+    expect(wrapper.find(singleNextRoundButton).exists()).toBe(true);
+    expect(wrapper.emitted().onClickNextRoundButton).toBeTruthy();
+  });
+
+  it("should show a button to show a summary when the round reaches 5", () => {
+    const wrapper = shallowMount(ResultModalComponentVue, {
+      props: { ...props, round: 5 },
+    });
+
+    expect(wrapper.find(singleNextRoundButton).exists()).toBe(false);
+    expect(wrapper.find(singleShowSummaryButton).exists()).toBe(true);
+  });
+
+  it("should emit an event to show a summary when clicking the button", async () => {
+    const wrapper = shallowMount(ResultModalComponentVue, {
+      props: { ...props, round: 5 },
+    });
+
+    await wrapper.find(singleShowSummaryButton).trigger("click");
+
+    expect(wrapper.emitted().onClickViewSummaryButton).toBeTruthy();
+  });
+
+  it("should show a summary for single player", () => {
+    const wrapper = shallowMount(ResultModalComponentVue, {
+      props: { ...props, round: 5, isShowingSummary: true },
+    });
+
+    expect(wrapper.find(singleResult).text()).toBe(
+      "You are 10000km away in total 🎉"
+    );
+  });
+
+  it("should show a button to play the game again and a button to exit the current game when showing a summary", async () => {
+    const wrapper = shallowMount(ResultModalComponentVue, {
+      props: { ...props, round: 5, isShowingSummary: true },
+    });
+
+    expect(wrapper.find(singlePlayAgainButton).exists()).toBe(true);
+    expect(wrapper.find(singleShowSummaryButton).text()).toBe("EXIT");
+
+    await wrapper.find(singlePlayAgainButton).trigger("click");
+    await wrapper.find(singleShowSummaryButton).trigger("click");
+
+    expect(wrapper.emitted().onClickViewSummaryButton).toBeUndefined();
+    expect(wrapper.emitted().onClickPlayAgainButton).toBeTruthy();
+    expect(wrapper.emitted().onClickExitButton).toBeTruthy();
+  });
+
+  it("should show results for multiplayer", () => {
+    const wrapper = shallowMount(ResultModalComponentVue, {
+      props: {
+        ...props,
+        selectedMode: "multiplayer",
+        distanceByPlayerArr: [
+          { playerName: "player1", distance: 1000 },
+          { playerName: "player2", distance: 2000 },
+        ],
+      },
+    });
+
+    expect(wrapper.find(multiplayerResult).text()).toBe(
+      "player1 is 1000km away🏅player2 is 2000km away"
+    );
+  });
+
+  it("should show a button to proceed to next round in multiplayer mode", async () => {
+    const wrapper = shallowMount(ResultModalComponentVue, {
+      props: { ...props, selectedMode: "multiplayer", isOwner: true },
+    });
+
+    await wrapper.find(multiplayerNextRoundButton).trigger("click");
+
+    expect(wrapper.find(multiplayerNextRoundButton).exists()).toBe(true);
+    expect(wrapper.emitted().onClickNextRoundButton).toBeTruthy();
+  });
+
+  it("should not let the player proceed to next round when the player is not an owner of the game and the next round is not ready", async () => {
+    const wrapper = shallowMount(ResultModalComponentVue, {
+      props: {
+        ...props,
+        selectedMode: "multiplayer",
+        isOwner: false,
+        isNextRoundReady: false,
+      },
+    });
+
+    await wrapper.find(multiplayerNextRoundButton).trigger("click");
+
+    expect(wrapper.emitted().onClickNextRoundButton).toBeUndefined();
+  });
+
+  it("should emit an event to show a summary when clicking the button", async () => {
+    const wrapper = shallowMount(ResultModalComponentVue, {
+      props: { ...props, round: 5, selectedMode: "multiplayer" },
+    });
+
+    await wrapper.find(multiplayerShowSummaryButton).trigger("click");
+
+    expect(wrapper.emitted().onClickViewSummaryButton).toBeTruthy();
+  });
+
+  it("should show a summary for multiplayer", () => {
+    const wrapper = shallowMount(ResultModalComponentVue, {
+      props: {
+        ...props,
+        round: 5,
+        selectedMode: "multiplayer",
+        isShowingSummary: true,
+        multiplayerGameSummary: [
+          { playerName: "player1", score: 10000 },
+          { playerName: "player2", score: 20000 },
+        ],
+      },
+    });
+
+    expect(wrapper.find(multiplayerSummary).text()).toBe(
+      "player1 is 10000km away in total🏅player2 is 20000km away in total"
+    );
+  });
+
+  it("should emit an event to end the game when clicking the button", async () => {
+    const wrapper = shallowMount(ResultModalComponentVue, {
+      props: {
+        ...props,
+        round: 5,
+        selectedMode: "multiplayer",
+        isShowingSummary: true,
+      },
+    });
+
+    await wrapper.find(multiplayerShowSummaryButton).trigger("click");
+
+    expect(wrapper.find(multiplayerShowSummaryButton).text()).toBe("EXIT");
+    expect(wrapper.emitted().onClickViewSummaryButton).toBeUndefined();
+    expect(wrapper.emitted().endMultiplayerGame).toBeTruthy();
+  });
+});

src/__tests__/unit/components/home/CreateGameFormComponent.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it, beforeEach, vi, Mock, afterEach } from "vitest";
+import { describe, expect, it, beforeEach, vi, afterEach } from "vitest";
 import { VueWrapper, flushPromises, shallowMount } from "@vue/test-utils";
 import CreateGameFormComponentVue from "../../../../components/home/CreateGameFormComponent.vue";
 import SelectBoxDialogComponentVue from "../../../../components/home/SelectBoxDialogComponent.vue";
@@ -144,6 +144,24 @@ describe("CreateGameFormComponent", () => {
     ).toBe(true);
   });
 
+  it("should close a dialog to select a map", async () => {
+    await wrapper.find(selectMapButton).trigger("click");
+
+    wrapper
+      .find(selectMapForm)
+      .findComponent(SelectBoxDialogComponentVue)
+      .vm.$emit("close");
+
+    await wrapper.vm.$nextTick();
+
+    expect(
+      wrapper
+        .find(selectMapForm)
+        .findComponent(SelectBoxDialogComponentVue)
+        .isVisible()
+    ).toBe(false);
+  });
+
   it("should close a dialog to select a map after selecting a map", async () => {
     await wrapper.find(selectMapButton).trigger("click");
 
@@ -182,6 +200,24 @@ describe("CreateGameFormComponent", () => {
     ).toBe(true);
   });
 
+  it("should close a dialog to select a mode", async () => {
+    await wrapper.find(selectModeButton).trigger("click");
+
+    wrapper
+      .find(selectModeForm)
+      .findComponent(SelectBoxDialogComponentVue)
+      .vm.$emit("close");
+
+    await wrapper.vm.$nextTick();
+
+    expect(
+      wrapper
+        .find(selectModeForm)
+        .findComponent(SelectBoxDialogComponentVue)
+        .isVisible()
+    ).toBe(false);
+  });
+
   it("should close a dialog to select a mode after selecting a mode", async () => {
     await wrapper.find(selectModeButton).trigger("click");
 
@@ -200,6 +236,36 @@ describe("CreateGameFormComponent", () => {
     ).toBe(false);
   });
 
+  it("should naviagte to game page when single mode is selected", async () => {
+    wrapper
+      .find(selectModeForm)
+      .findComponent(SelectBoxDialogComponentVue)
+      .vm.$emit("onChangeOption", "single");
+
+    await wrapper.vm.$nextTick();
+
+    await wrapper.find(createRoomButton).trigger("click");
+
+    expect(routerPushMock).toHaveBeenCalledOnce();
+    expect(routerPushMock).toHaveBeenCalledWith("game");
+  });
+
+  it("should open a dialog to create a room when multiplayer mode is selected", async () => {
+    wrapper
+      .find(selectModeForm)
+      .findComponent(SelectBoxDialogComponentVue)
+      .vm.$emit("onChangeOption", "multiplayer");
+
+    await wrapper.vm.$nextTick();
+
+    await wrapper.find(createRoomButton).trigger("click");
+
+    expect(routerPushMock).not.toHaveBeenCalled();
+    expect(
+      wrapper.findComponent(CreateRoomDialogComponentVue).isVisible()
+    ).toBe(true);
+  });
+
   it("should navigate to game page when creating a room and the player is an owner", async () => {
     vi.spyOn(database, "get").mockResolvedValue({
       exists: vi.fn().mockReturnValue(false),

src/__tests__/unit/components/home/CreateRoomDialogComponent.test.ts

@@ -0,0 +1,113 @@
+import { describe, expect, it } from "vitest";
+import CreateRoomDialogComponentVue from "../../../../components/home/CreateRoomDialogComponent.vue";
+import TextInputComponentVue from "../../../../components/home/TextInputComponent.vue";
+import { shallowMount } from "@vue/test-utils";
+import SwitchComponent from "../../../../components/home/SwitchComponent.vue";
+import CounterComponent from "../../../../components/home/CounterComponent.vue";
+
+describe("CreateRoomDialogComponent", () => {
+  const props = {
+    isRoomFound: true,
+    selectedSize: 2,
+    selectedTime: 5,
+    playerName: "foo",
+    isOwner: true,
+    roomNumber: "1000",
+    isReadyForMultiplayerGame: false,
+  };
+  const sizeFormText = "[data-testid=size-form-text]";
+  const timeFormText = "[data-testid=time-form-text]";
+  const createRoomButton = "[data-testid=create-room-button]";
+
+  it("should apply styles when the user is not an owner", () => {
+    const wrapper = shallowMount(CreateRoomDialogComponentVue, {
+      props: {
+        ...props,
+        isOwner: false,
+      },
+    });
+
+    expect(wrapper.find(sizeFormText).classes()).toContain(
+      "create-room-dialog__form-text--disabled"
+    );
+    expect(wrapper.find(timeFormText).classes()).toContain(
+      "create-room-dialog__form-text--disabled"
+    );
+  });
+
+  it("should emit an event when inputting a size of the room", async () => {
+    const wrapper = shallowMount(CreateRoomDialogComponentVue, {
+      props: { ...props, isOwner: true },
+    });
+
+    wrapper.findAllComponents(CounterComponent)[0].vm.$emit("onChangeValue", 5);
+
+    expect(wrapper.emitted().onChangeSize[0]).toEqual([5]);
+  });
+
+  it("should emit an event when inputting a time of the room", async () => {
+    const wrapper = shallowMount(CreateRoomDialogComponentVue, {
+      props: { ...props, isOwner: true },
+    });
+
+    wrapper
+      .findAllComponents(CounterComponent)[1]
+      .vm.$emit("onChangeValue", 10);
+
+    expect(wrapper.emitted().onChangeTime[0]).toEqual([10]);
+  });
+
+  it("should emit an event when inputting a player name", async () => {
+    const wrapper = shallowMount(CreateRoomDialogComponentVue, {
+      props: props,
+    });
+
+    wrapper
+      .findAllComponents(TextInputComponentVue)[0]
+      .vm.$emit("onChangeValue", "foo");
+
+    expect(wrapper.emitted().onChangePlayerName[0]).toEqual(["foo"]);
+  });
+
+  it("should emit an event when switching the toggle", () => {
+    const wrapper = shallowMount(CreateRoomDialogComponentVue, {
+      props: props,
+    });
+
+    wrapper.findComponent(SwitchComponent).vm.$emit("onChangeValue", true);
+
+    expect(wrapper.emitted().onChangeIsOwner[0]).toEqual([true]);
+  });
+
+  it("should emit an event when inputting a room number", () => {
+    const wrapper = shallowMount(CreateRoomDialogComponentVue, {
+      props: { ...props, isOwner: false },
+    });
+
+    wrapper
+      .findAllComponents(TextInputComponentVue)[1]
+      .vm.$emit("onChangeValue", "foo");
+
+    expect(wrapper.emitted().onChangeRoomNumber[0]).toEqual(["foo"]);
+  });
+
+  it("should emit an event when clicking START button", async () => {
+    const wrapper = shallowMount(CreateRoomDialogComponentVue, {
+      props: { ...props, isReadyForMultiplayerGame: true },
+    });
+
+    await wrapper.find(createRoomButton).trigger("click");
+
+    expect(wrapper.emitted().onClickStartMultiplayerGameButton).toBeTruthy();
+  });
+
+  it("should pass an error message when a room cannot be found.", () => {
+    const wrapper = shallowMount(CreateRoomDialogComponentVue, {
+      props: { ...props, isRoomFound: false },
+    });
+
+    expect(
+      wrapper.findAllComponents(TextInputComponentVue)[1].vm.$props.errorMsg
+    ).toBe("The room cannot be found.");
+  });
+});