From 3a0204bb90c3813206bcd821e57bdae0acf5bb36 Mon Sep 17 00:00:00 2001
From: tjtanjin <cjtanjin@gmail.com>
Date: Sun, 6 Oct 2024 18:59:09 +0800
Subject: [PATCH] test: Add unit test for components

---
 __tests__/components/AudioButton.test.tsx | 106 ++++++++++++++++++++++
 1 file changed, 106 insertions(+)
 create mode 100644 __tests__/components/AudioButton.test.tsx

diff --git a/__tests__/components/AudioButton.test.tsx b/__tests__/components/AudioButton.test.tsx
new file mode 100644
index 00000000..786b01ef
--- /dev/null
+++ b/__tests__/components/AudioButton.test.tsx
@@ -0,0 +1,106 @@
+import React from "react";
+
+import { expect } from "@jest/globals";
+import { render, screen, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom/jest-globals";
+
+import AudioButton from "../../src/components/Buttons/AudioButton/AudioButton";
+import { DefaultSettings } from "../../src/constants/internal/DefaultSettings";
+
+import { TestChatBotProvider } from "../__mocks__/TestChatBotContext";
+
+/**
+ * Helper function to render AudioButton with different settings.
+ *
+ * @param initialSettings initial settings for the TestChatBotProvider
+ */
+const renderAudioButton = (initialSettings = { audio: { disabled: false, defaultToggledOn: false } }) => {
+	return render(
+		<TestChatBotProvider initialSettings={initialSettings}>
+			<AudioButton />
+		</TestChatBotProvider>
+	);
+};
+
+/**
+ * Test for AudioButton component.
+ */
+describe("AudioButton Component", () => {
+	it("renders with correct aria-label and initial state when defaultToggledOn is false and not disabled", () => {
+		// settings used for this test to render audio button
+		const initialSettings = { audio: { disabled: false, defaultToggledOn: false } };
+		renderAudioButton(initialSettings);
+	
+		// retrieves button and icon
+		const button = screen.getByRole("button", { name: DefaultSettings.ariaLabel?.audioButton });
+		const icon = button.querySelector("span");
+		expect(button).toBeInTheDocument();
+	
+		// checks new state
+		expect(icon).toHaveClass("rcb-audio-icon-off");
+	});
+	
+	it("toggles audio state when clicked (initially off)", () => {
+		// settings used for this test to render audio button
+		const initialSettings = { audio: { disabled: false, defaultToggledOn: false } };
+		renderAudioButton(initialSettings);
+	
+		// retrieves button and icon
+		const button = screen.getByRole("button", { name: DefaultSettings.ariaLabel?.audioButton });
+		const icon = button.querySelector("span");
+		expect(button).toBeInTheDocument();
+	
+		// checks initial state
+		expect(icon).toHaveClass("rcb-audio-icon-off");
+	
+		// clicks the button to toggle audio
+		fireEvent.mouseDown(button);
+	
+		// checks new state
+		expect(icon).toHaveClass("rcb-audio-icon-on");
+	});
+	
+	it("renders with audio toggled on initially and toggles to off when clicked", () => {
+		// settings used for this test to render audio button
+		const initialSettings = { audio: { disabled: false, defaultToggledOn: true } };
+		renderAudioButton(initialSettings);
+	
+		// retrieves button and icon
+		const button = screen.getByRole("button", { name: DefaultSettings.ariaLabel?.audioButton });
+		const icon = button.querySelector("span");
+		expect(button).toBeInTheDocument();
+	
+		// checks initial state
+		expect(icon).toHaveClass("rcb-audio-icon-on");
+	
+		// clicks the button to toggle audio
+		fireEvent.mouseDown(button);
+	
+		// checks new state
+		expect(icon).toHaveClass("rcb-audio-icon-off");
+	});
+	
+	it("toggles audio back to on after being toggled off", () => {
+		// settings used for this test to render audio button
+		const initialSettings = { audio: { disabled: false, defaultToggledOn: true } };
+		renderAudioButton(initialSettings);
+	
+		// retrieves button and icon
+		const button = screen.getByRole("button", { name: DefaultSettings.ariaLabel?.audioButton });
+		const icon = button.querySelector("span");
+		expect(button).toBeInTheDocument();
+	
+		// checks initial state
+		expect(icon).toHaveClass("rcb-audio-icon-on");
+	
+		// clicks the button to toggle audio
+		fireEvent.mouseDown(button);
+
+		// checks new state
+		expect(icon).toHaveClass("rcb-audio-icon-off");
+	
+		// checks new state
+		fireEvent.mouseDown(button);
+		expect(icon).toHaveClass("rcb-audio-icon-on");
+	});
+});
\ No newline at end of file