Repository: tjtanjin/react-chatbotify
Pull request #170 (2024-10-08 18:13:46)

test: add unit test for chathistorybutton
#### Description
Unit test for ChathHistoryButton

Closes #(issue)

[#146 ]

#### What change does this PR introduce?

Please select the relevant option(s).

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] Documentation update (changes to docs/code comments)

#### What is the proposed approach?

Test for the following
- calls showchathistory when clicked, changes styles when hovered, and rendering the button correctly 

#### Checklist:

- [x] The commit message follows our adopted [guidelines](https://www.conventionalcommits.org/en/v1.0.0/)
- [x] Testing has been done for the change(s) added (for bug fixes/features)
- [x] Relevant comments/docs have been added/updated (for bug fixes/features)


Patch:
diff --git a/src/components/ChatHistoryButton/ChatHistoryButton.tsx b/src/components/ChatHistoryButton/ChatHistoryButton.tsx
index 08bc89c..be55bb6 100644
--- a/src/components/ChatHistoryButton/ChatHistoryButton.tsx
+++ b/src/components/ChatHistoryButton/ChatHistoryButton.tsx
@@ -55,6 +55,8 @@ const ChatHistoryButton = () => {
 					showChatHistory();
 				}}
 				className="rcb-view-history-button"
+				role="button"
+				tabIndex={0} 
 			>
 				<p>
 					{settings.chatHistory?.viewChatHistoryButtonText}


Test patch:
diff --git a/__tests__/components/ChatHistoryButton/ChatHistoryButton.test.tsx b/__tests__/components/ChatHistoryButton/ChatHistoryButton.test.tsx
new file mode 100644
index 0000000..9285c31
--- /dev/null
+++ b/__tests__/components/ChatHistoryButton/ChatHistoryButton.test.tsx
@@ -0,0 +1,80 @@
+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 ChatHistoryButton from "../../../src/components/ChatHistoryButton/ChatHistoryButton"
+import { useChatHistoryInternal } from "../../../src/hooks/internal/useChatHistoryInternal";
+
+// Mock the contexts and hook
+jest.mock("../../../src/context/SettingsContext", () => ({
+	useSettingsContext: jest.fn(),
+}));
+
+jest.mock("../../../src/context/StylesContext", () => ({
+	useStylesContext: jest.fn(),
+}));
+
+jest.mock("../../../src/hooks/internal/useChatHistoryInternal", () => ({
+	useChatHistoryInternal: jest.fn(),
+}));
+
+
+describe("ChatHistoryButton", () => {
+	const mockSettings = {
+		general: { primaryColor: "#000000" },
+		chatHistory: { viewChatHistoryButtonText: "View History" },
+	};
+
+	const mockStyles = {
+		chatHistoryButtonStyle: { backgroundColor: "#ffffff", border: "1px solid #ccc" },
+		chatHistoryButtonHoveredStyle: { backgroundColor: "#f0f0f0" },
+	};
+
+	const mockShowChatHistory = jest.fn();
+
+	beforeEach(() => {
+		// Mock context values
+		(useSettingsContext as jest.Mock).mockReturnValue({ settings: mockSettings });
+		(useStylesContext as jest.Mock).mockReturnValue({ styles: mockStyles });
+		(useChatHistoryInternal as jest.Mock).mockReturnValue({ showChatHistory: mockShowChatHistory });
+	});
+
+	it("renders the chat history button with correct text and styles", () => {
+		render(<ChatHistoryButton />);
+
+		// Verify the button text
+		expect(screen.getByText("View History")).toBeInTheDocument();
+
+		// Verify the button's initial styles
+		const button = screen.getByRole("button");
+		expect(button).toHaveStyle("background-color: #ffffff");
+		expect(button).toHaveStyle("border: 1px solid #ccc");
+	});
+
+	it("changes styles when hovered", () => {
+		render(<ChatHistoryButton />);
+
+		const button = screen.getByRole("button");
+
+		// Simulate hover
+		fireEvent.mouseEnter(button);
+		expect(button).toHaveStyle("background-color: #f0f0f0");
+
+		// Simulate mouse leave
+		fireEvent.mouseLeave(button);
+		expect(button).toHaveStyle("background-color: #ffffff");
+	});
+
+	it("calls showChatHistory when clicked", () => {
+		render(<ChatHistoryButton />);
+
+		const button = screen.getByRole("button");
+
+		// Simulate button click
+		fireEvent.mouseDown(button);
+
+		// Verify showChatHistory is called
+		expect(mockShowChatHistory).toHaveBeenCalledTimes(1);
+	});
+});