From 68e43f0d0b0dc38da11e36923c9988c0532cc185 Mon Sep 17 00:00:00 2001 From: Bregwin Jogi Date: Tue, 19 Nov 2024 17:58:25 -0500 Subject: [PATCH 1/3] Add test cases --- .../ChatBotBody/UserCheckboxes.test.tsx | 149 ++++++++++++++++++ 1 file changed, 149 insertions(+) create mode 100644 __tests__/components/ChatBotBody/UserCheckboxes.test.tsx diff --git a/__tests__/components/ChatBotBody/UserCheckboxes.test.tsx b/__tests__/components/ChatBotBody/UserCheckboxes.test.tsx new file mode 100644 index 0000000..906df1e --- /dev/null +++ b/__tests__/components/ChatBotBody/UserCheckboxes.test.tsx @@ -0,0 +1,149 @@ +import React from "react"; +import "@testing-library/jest-dom"; +import { render, screen, fireEvent } from "@testing-library/react"; +import { useSettingsContext } from "../../../src/context/SettingsContext"; +import { useStylesContext } from "../../../src/context/StylesContext"; +import { usePathsContext } from "../../../src/context/PathsContext"; +import { useSubmitInputInternal } from "../../../src/hooks/internal/useSubmitInputInternal"; +import UserCheckboxes from "../../../src/components/ChatBotBody/UserCheckboxes/UserCheckboxes"; + +// Mocking the context and hook +jest.mock("../../../src/context/SettingsContext", () => ({ + useSettingsContext: jest.fn(), +})); +jest.mock("../../../src/context/StylesContext", () => ({ + useStylesContext: jest.fn(), +})); +jest.mock("../../../src/context/PathsContext", () => ({ + usePathsContext: jest.fn(), +})); +jest.mock("../../../src/hooks/internal/useSubmitInputInternal", () => ({ + useSubmitInputInternal: jest.fn(), +})); + +describe("UserCheckboxes Component", () => { + const mockSettingsContext = { + settings: { + general: { + primaryColor: "#000", + actionDisabledIcon: "disabled-icon-url", + }, + chatInput: { + sendCheckboxOutput: true, + }, + botBubble: { + showAvatar: true, + }, + }, + }; + + const mockStylesContext = { + styles: { + botCheckboxRowStyle: { borderColor: "#000" }, + botCheckboxNextStyle: { color: "#000" }, + botCheckMarkStyle: { color: "transparent" }, + botCheckMarkSelectedStyle: { backgroundColor: "#000" }, + }, + }; + + const mockPathsContext = { + paths: [], + }; + + const mockHandleSubmitText = jest.fn(); + + beforeEach(() => { + (useSubmitInputInternal as jest.Mock).mockReturnValue({ handleSubmitText: mockHandleSubmitText }); + (useSettingsContext as jest.Mock).mockReturnValue(mockSettingsContext); + (useStylesContext as jest.Mock).mockReturnValue(mockStylesContext); + (usePathsContext as jest.Mock).mockReturnValue(mockPathsContext); + }); + + afterEach(() => { + jest.clearAllMocks(); + }); + + test("renders checkboxes correctly", () => { + const checkboxes = { items: ["Checkbox 1", "Checkbox 2"], min: 1, max: 2 }; + render(); + + expect(screen.getByText("Checkbox 1")).toBeInTheDocument(); + expect(screen.getByText("Checkbox 2")).toBeInTheDocument(); + }); + + test("allows selecting and unselecting checkboxes", () => { + const checkboxes = { items: ["Checkbox 1", "Checkbox 2"], max: 2 }; + const checkedItems = new Set(); + render(); + + const checkbox1 = screen.getByText("Checkbox 1"); + const checkbox2 = screen.getByText("Checkbox 2"); + + fireEvent.mouseDown(checkbox1); + expect(checkedItems.has("Checkbox 1")).toBeTruthy(); + + fireEvent.mouseDown(checkbox2); + expect(checkedItems.has("Checkbox 2")).toBeTruthy(); + + fireEvent.mouseDown(checkbox1); + expect(checkedItems.has("Checkbox 1")).toBeFalsy(); + }); + + test("prevents selecting more checkboxes than max limit", () => { + const checkboxes = { items: ["Checkbox 1", "Checkbox 2", "Checkbox 3"], max: 2 }; + const checkedItems = new Set(); + render(); + + const checkbox1 = screen.getByText("Checkbox 1"); + const checkbox2 = screen.getByText("Checkbox 2"); + const checkbox3 = screen.getByText("Checkbox 3"); + + // Select two checkboxes + fireEvent.mouseDown(checkbox1); + fireEvent.mouseDown(checkbox2); + + // Try checking a third checkbox + fireEvent.mouseDown(checkbox3); + expect(checkedItems.size).toBe(2); + expect(checkedItems.has("Checkbox 3")).toBeFalsy(); + }); + + test("submits selected checkboxes on next button click", () => { + const checkboxes = { items: ["Checkbox 1", "Checkbox 2"], sendOutput: true }; + const checkedItems = new Set(); + const {container} = render(); + + const checkbox1 = screen.getByText("Checkbox 1"); + fireEvent.mouseDown(checkbox1); + + screen.debug(); + + //const nextButton = screen.getByClassName("rcb-checkbox-next-button"); + const nextButton = container.getElementsByClassName("rcb-checkbox-next-button")[0]; + expect(nextButton).toBeDefined(); + + // Click next button + fireEvent.mouseDown(nextButton); + + // expect(mockHandleSubmitText).toHaveBeenCalledWith("Checkbox 1", true); + + expect(mockHandleSubmitText).toHaveBeenCalledTimes(1); + }); + + test("disables checkboxes based on path transition and reusability", () => { + const checkboxes = { items: ["Checkbox 1"], reusable: false }; + const mockPaths = { paths: ["path1", "path2"] }; + (usePathsContext as jest.Mock).mockReturnValue(mockPaths); + + render(); + + const checkbox1 = screen.getByText("Checkbox 1"); + + fireEvent.mouseDown(checkbox1); + expect(mockHandleSubmitText).not.toHaveBeenCalled(); + }); + + + + +}); From 94f26c7ee17d064b1b64ddfb5955701c7c2b8746 Mon Sep 17 00:00:00 2001 From: Bregwin Jogi Date: Tue, 19 Nov 2024 17:59:58 -0500 Subject: [PATCH 2/3] Cleanup commented out code --- __tests__/components/ChatBotBody/UserCheckboxes.test.tsx | 8 -------- 1 file changed, 8 deletions(-) diff --git a/__tests__/components/ChatBotBody/UserCheckboxes.test.tsx b/__tests__/components/ChatBotBody/UserCheckboxes.test.tsx index 906df1e..11281fb 100644 --- a/__tests__/components/ChatBotBody/UserCheckboxes.test.tsx +++ b/__tests__/components/ChatBotBody/UserCheckboxes.test.tsx @@ -116,17 +116,12 @@ describe("UserCheckboxes Component", () => { const checkbox1 = screen.getByText("Checkbox 1"); fireEvent.mouseDown(checkbox1); - screen.debug(); - - //const nextButton = screen.getByClassName("rcb-checkbox-next-button"); const nextButton = container.getElementsByClassName("rcb-checkbox-next-button")[0]; expect(nextButton).toBeDefined(); // Click next button fireEvent.mouseDown(nextButton); - // expect(mockHandleSubmitText).toHaveBeenCalledWith("Checkbox 1", true); - expect(mockHandleSubmitText).toHaveBeenCalledTimes(1); }); @@ -142,8 +137,5 @@ describe("UserCheckboxes Component", () => { fireEvent.mouseDown(checkbox1); expect(mockHandleSubmitText).not.toHaveBeenCalled(); }); - - - }); From c89c11fb1cc16192f4bccd4c295d9b04b43c805b Mon Sep 17 00:00:00 2001 From: Bregwin Jogi Date: Mon, 25 Nov 2024 23:40:32 -0500 Subject: [PATCH 3/3] Rename jest test to it --- .../components/ChatBotBody/UserCheckboxes.test.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/__tests__/components/ChatBotBody/UserCheckboxes.test.tsx b/__tests__/components/ChatBotBody/UserCheckboxes.test.tsx index 11281fb..6cc0046 100644 --- a/__tests__/components/ChatBotBody/UserCheckboxes.test.tsx +++ b/__tests__/components/ChatBotBody/UserCheckboxes.test.tsx @@ -63,7 +63,7 @@ describe("UserCheckboxes Component", () => { jest.clearAllMocks(); }); - test("renders checkboxes correctly", () => { + it("renders checkboxes correctly", () => { const checkboxes = { items: ["Checkbox 1", "Checkbox 2"], min: 1, max: 2 }; render(); @@ -71,7 +71,7 @@ describe("UserCheckboxes Component", () => { expect(screen.getByText("Checkbox 2")).toBeInTheDocument(); }); - test("allows selecting and unselecting checkboxes", () => { + it("allows selecting and unselecting checkboxes", () => { const checkboxes = { items: ["Checkbox 1", "Checkbox 2"], max: 2 }; const checkedItems = new Set(); render(); @@ -89,7 +89,7 @@ describe("UserCheckboxes Component", () => { expect(checkedItems.has("Checkbox 1")).toBeFalsy(); }); - test("prevents selecting more checkboxes than max limit", () => { + it("prevents selecting more checkboxes than max limit", () => { const checkboxes = { items: ["Checkbox 1", "Checkbox 2", "Checkbox 3"], max: 2 }; const checkedItems = new Set(); render(); @@ -108,7 +108,7 @@ describe("UserCheckboxes Component", () => { expect(checkedItems.has("Checkbox 3")).toBeFalsy(); }); - test("submits selected checkboxes on next button click", () => { + it("submits selected checkboxes on next button click", () => { const checkboxes = { items: ["Checkbox 1", "Checkbox 2"], sendOutput: true }; const checkedItems = new Set(); const {container} = render(); @@ -125,7 +125,7 @@ describe("UserCheckboxes Component", () => { expect(mockHandleSubmitText).toHaveBeenCalledTimes(1); }); - test("disables checkboxes based on path transition and reusability", () => { + it("disables checkboxes based on path transition and reusability", () => { const checkboxes = { items: ["Checkbox 1"], reusable: false }; const mockPaths = { paths: ["path1", "path2"] }; (usePathsContext as jest.Mock).mockReturnValue(mockPaths);