fix: Fix send button unit test

tjtanjin · Oct 13, 2024 · fbec219 · fbec219
1 parent 8afe82d
commit fbec219
Show file tree

Hide file tree

Showing 10 changed files with 27 additions and 17 deletions.
diff --git a/__tests__/__mocks__/fileMock.ts b/__tests__/__mocks__/fileMock.ts
@@ -6,4 +6,5 @@ export const closeChatIcon = "../../assets/close_chat_icon.svg";
 export const notificationIcon = "../../assets/notification_icon.svg";
 export const notificationIconDisabled = "../../assets/notification_icon_disabled.svg";
 export const audioIcon = "../../assets/audio_icon.svg";
-export const audioIconDisabled = "../../assets/audio_icon_disabled.svg";
+export const audioIconDisabled = "../../assets/audio_icon_disabled.svg";
+export const sendIcon = "../../assets/send_icon.svg";
diff --git a/__tests__/components/buttons/SendButton.test.tsx b/__tests__/components/buttons/SendButton.test.tsx
@@ -12,6 +12,8 @@ import { useSubmitInputInternal } from "../../../src/hooks/internal/useSubmitInp
 import { useStylesContext } from "../../../src/context/StylesContext";
 import { DefaultStyles } from "../../../src/constants/internal/DefaultStyles";
 
+import { sendIcon } from "../../__mocks__/fileMock";
+
 jest.mock("../../../src/context/SettingsContext");
 jest.mock("../../../src/context/BotStatesContext");
 jest.mock("../../../src/hooks/internal/useSubmitInputInternal");
@@ -29,6 +31,9 @@ describe("SendButton Component", () => {
 					secondaryColor: DefaultSettings.general?.secondaryColor,
 				},
 				ariaLabel: { sendButton: DefaultSettings.ariaLabel?.sendButton },
+				chatInput: {
+					sendButtonIcon: sendIcon
+				}
 			}
 		});
 
@@ -56,7 +61,7 @@ describe("SendButton Component", () => {
 		render(<SendButton />);
 
 		const button = screen.getByRole("button", { name: DefaultSettings.ariaLabel?.sendButton });
-		const icon = button.querySelector("span");
+		const icon = screen.getByTestId("rcb-send-icon");
 
 		expect(button).toBeInTheDocument();
 		expect(icon).toBeInTheDocument();
@@ -95,7 +100,7 @@ describe("SendButton Component", () => {
 		render(<SendButton />);
 
 		const button = screen.getByRole("button", { name: DefaultSettings.ariaLabel?.sendButton });
-		const icon = button.querySelector("span");
+		const icon = screen.getByTestId("rcb-send-icon");
 
 		expect(button).toBeInTheDocument();
 		expect(icon).toBeInTheDocument();
@@ -129,7 +134,7 @@ describe("SendButton Component", () => {
 		render(<SendButton />);
 
 		const button = screen.getByRole("button", { name: DefaultSettings.ariaLabel?.sendButton });
-		const icon = button.querySelector("span");
+		const icon = screen.getByTestId("rcb-send-icon");
 
 		expect(button).toBeInTheDocument();
 		expect(icon).toBeInTheDocument();
@@ -158,7 +163,7 @@ describe("SendButton Component", () => {
 		render(<SendButton />);
 
 		const button = screen.getByRole("button", { name: DefaultSettings.ariaLabel?.sendButton });
-		const icon = button.querySelector("span");
+		const icon = screen.getByTestId("rcb-send-icon");
 
 		expect(button).toBeInTheDocument();
 		expect(icon).toBeInTheDocument();
@@ -197,7 +202,7 @@ describe("SendButton Component", () => {
 		render(<SendButton />);
 
 		const button = screen.getByRole('button', { name: DefaultSettings.ariaLabel?.sendButton });
-		const icon = button.querySelector("span");
+		const icon = screen.getByTestId("rcb-send-icon");
 
 		expect(button).toBeInTheDocument();
 		expect(icon).toBeInTheDocument();
@@ -218,7 +223,7 @@ describe("SendButton Component", () => {
 		render(<SendButton />);
 
 		const button = screen.getByRole('button', { name: DefaultSettings.ariaLabel?.sendButton });
-		const icon = button.querySelector("span");
+		const icon = screen.getByTestId("rcb-send-icon");
 
 		expect(button).toBeInTheDocument();
 		expect(icon).toBeInTheDocument();

diff --git a/src/components/Buttons/AudioButton/AudioButton.tsx b/src/components/Buttons/AudioButton/AudioButton.tsx
@@ -39,7 +39,7 @@ const AudioButton = () => {
 	 */
 	const renderButton = () => {
 		const IconComponent = audioToggledOn ? settings.audio?.icon : settings.audio?.iconDisabled;
-		if (typeof IconComponent === "string") {
+		if (!IconComponent || typeof IconComponent === "string") {
 			return (
 				<span
 					className="rcb-audio-icon"

diff --git a/src/components/Buttons/CloseChatButton/CloseChatButton.tsx b/src/components/Buttons/CloseChatButton/CloseChatButton.tsx
@@ -32,7 +32,7 @@ const CloseChatButton = () => {
 	 */
 	const renderButton = () => {
 		const IconComponent = settings.header?.closeChatIcon;
-		if (typeof IconComponent === "string") {
+		if (!IconComponent || typeof IconComponent === "string") {
 			return (
 				<span
 					className="rcb-close-chat-icon"

diff --git a/src/components/Buttons/EmojiButton/EmojiButton.tsx b/src/components/Buttons/EmojiButton/EmojiButton.tsx
@@ -134,7 +134,7 @@ const EmojiButton = () => {
 	 */
 	const renderButton = () => {
 		const IconComponent = textAreaDisabled ? settings.emoji?.iconDisabled : settings.emoji?.icon;
-		if (typeof IconComponent === "string") {
+		if (!IconComponent || typeof IconComponent === "string") {
 			return (
 				<span
 					className={`${textAreaDisabled ? "rcb-emoji-icon-disabled" : "rcb-emoji-icon-enabled"}`}

diff --git a/src/components/Buttons/FileAttachmentButton/FileAttachmentButton.tsx b/src/components/Buttons/FileAttachmentButton/FileAttachmentButton.tsx
@@ -136,7 +136,7 @@ const FileAttachmentButton = () => {
 		const IconComponent = blockAllowsAttachment
 			? settings.fileAttachment?.icon
 			: settings.fileAttachment?.iconDisabled;
-		if (typeof IconComponent === "string") {
+		if (!IconComponent || typeof IconComponent === "string") {
 			return (
 				<span
 					className={blockAllowsAttachment ? "rcb-attach-icon-enabled" : "rcb-attach-icon-disabled"}

diff --git a/src/components/Buttons/NotificationButton/NotificationButton.tsx b/src/components/Buttons/NotificationButton/NotificationButton.tsx
@@ -41,7 +41,7 @@ const NotificationButton = () => {
 		const IconComponent = notificationsToggledOn
 			? settings.notification?.icon
 			: settings.notification?.iconDisabled;
-		if (typeof IconComponent === "string") {
+		if (!IconComponent || typeof IconComponent === "string") {
 			return (
 				<span
 					className="rcb-notification-icon"

diff --git a/src/components/Buttons/SendButton/SendButton.tsx b/src/components/Buttons/SendButton/SendButton.tsx
@@ -81,14 +81,18 @@ const SendButton = () => {
 	 */
 	const renderButton = () => {
 		const IconComponent = settings.chatInput?.sendButtonIcon;
-		if (typeof IconComponent === "string") {
+		if (!IconComponent || typeof IconComponent === "string") {
 			return (
-				<span className="rcb-send-icon" style={textAreaDisabled ? sendIconDisabledStyle : sendIconStyle}/>
+				<span
+					className="rcb-send-icon"
+					data-testid="rcb-send-icon"
+					style={textAreaDisabled ? sendIconDisabledStyle : sendIconStyle}
+				/>
 			)
 		}
 		return (
 			IconComponent &&
-			<span className="rcb-send-icon" >
+			<span className="rcb-send-icon" data-testid="rcb-send-icon">
 				<IconComponent style={textAreaDisabled ? sendIconDisabledStyle : sendIconStyle}/>
 			</span>
 		)

diff --git a/src/components/Buttons/VoiceButton/VoiceButton.tsx b/src/components/Buttons/VoiceButton/VoiceButton.tsx
@@ -106,7 +106,7 @@ const VoiceButton = () => {
 	 */
 	const renderButton = () => {
 		const IconComponent = voiceToggledOn ? settings.voice?.icon : settings.voice?.iconDisabled;
-		if (typeof IconComponent === "string") {
+		if (!IconComponent || typeof IconComponent === "string") {
 			return (
 				<span
 					className={`rcb-voice-icon${voiceToggledOn && !textAreaDisabled ? "-on" : ""}`}

diff --git a/src/components/ChatBotButton/ChatBotButton.tsx b/src/components/ChatBotButton/ChatBotButton.tsx
@@ -39,7 +39,7 @@ const ChatBotButton = () => {
 	 */
 	const renderButton = () => {
 		const IconComponent = settings.chatButton?.icon;
-		if (typeof IconComponent === "string") {
+		if (!IconComponent || typeof IconComponent === "string") {
 			return (
 				<span
 					className="rcb-toggle-icon"