Skip to content

Commit

Permalink
test: Using Default Settings instead of hardcoded values #139
Browse files Browse the repository at this point in the history
  • Loading branch information
@julianez
julianez committed Oct 7, 2024
1 parent 1d5a37f commit 73c89d0
Showing 1 changed file with 166 additions and 167 deletions.
333 changes: 166 additions & 167 deletions __tests__/components/buttons/CloseChatButton.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { render, screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom/jest-globals";

import CloseChatButton from "../../../src/components/Buttons/CloseChatButton/CloseChatButton";
import { DefaultSettings } from "../../../src/constants/internal/DefaultSettings";

import { useChatWindowInternal } from "../../../src/hooks/internal/useChatWindowInternal";
import { useSettingsContext } from "../../../src/context/SettingsContext";
Expand All @@ -19,170 +20,168 @@ jest.mock("../../../src/context/StylesContext");
* Test for CloseChatButton component.
*/
describe("CloseChatButton", () => {
const openChatMock = jest.fn();

beforeEach(() => {
// Mock the return value of useChatWindowInternal hook
(useChatWindowInternal as jest.Mock).mockReturnValue({
openChat: openChatMock,
});

// Mock the return value of useSettingsContext hook
(useSettingsContext as jest.Mock).mockReturnValue({
settings: {
header: { closeChatIcon: "close-icon.png" }, // Mocked close chat icon path
ariaLabel: { closeChatButton: "Close Chat Button" }, // Mocked aria-label for the button
},
});

// Mock the return value of useStylesContext hook
(useStylesContext as jest.Mock).mockReturnValue({
styles: {
closeChatIconStyle: { color: "red" }, // Mocked style for the close chat icon
closeChatButtonStyle: { backgroundColor: "gray" }, // Mocked style for the close chat button
},
});
});

it("renders the CloseChatButton component", () => {
// Render the CloseChatButton component
render(<CloseChatButton />);

// Get the button element by its role and name
const button = screen.getByRole("button", { name: "Close Chat Button" });

// Assert that the button is in the document
expect(button).toBeInTheDocument();
});

it("displays the correct aria-label", () => {
// Render the CloseChatButton component
render(<CloseChatButton />);
// Get the button element by its role and name
const button = screen.getByRole("button", { name: "Close Chat Button" });

// Assert that the button has the correct aria-label attribute
expect(button).toHaveAttribute("aria-label", "Close Chat Button");
});

it("applies the correct background image to the close chat icon", () => {
// Render the CloseChatButton component
render(<CloseChatButton />);
// Get the button element by its role
const button = screen.getByRole("button");
// Get the span element inside the button (assumed to be the icon)
const icon = button.querySelector("span");

// Check if the background image is set correctly
expect(icon).toHaveStyle("background-image: url(close-icon.png)");
});

it("applies the default aria-label when none is provided in settings", () => {
// Mock settings without ariaLabel.closeChatButton
(useSettingsContext as jest.Mock).mockReturnValue({
settings: {
header: { closeChatIcon: "close-icon.png" },
ariaLabel: {}
}
});

render(<CloseChatButton />);

// Check if the aria-label falls back to "close chat"
const button = screen.getByRole("button", { name: "close chat" });
expect(button).toHaveAttribute("aria-label", "close chat");
});


it("applies the correct styles to the button and icon", () => {
// Render the CloseChatButton component
render(<CloseChatButton />);
// Get the button element by its role
const button = screen.getByRole("button");
// Get the span element inside the button (assumed to be the icon)
const icon = button.querySelector("span");
// Assert that the button has the correct background color

expect(button).toHaveStyle("background-color: gray");
// Assert that the icon has the correct color
expect(icon).toHaveStyle("color: red");
// Assert that the icon has the correct background image
expect(icon).toHaveStyle("background-image: url(close-icon.png)");
});


it("calls openChat(false) when the button is clicked", () => {
// Render the CloseChatButton component
render(<CloseChatButton />);
// Get the button element by its role
const button = screen.getByRole("button");
// Fire the mouseDown event on the button
fireEvent.mouseDown(button);
// Assert that openChatMock was called with false
expect(openChatMock).toHaveBeenCalledWith(false);
});

it("stops propagation of mouse down event", () => {
// Render the component
render(<CloseChatButton />);
const button = screen.getByRole("button");

// Spy on the stopPropagation method of the event
const stopPropagationSpy = jest.spyOn(MouseEvent.prototype, "stopPropagation");

// Fire the mouseDown event
fireEvent.mouseDown(button);

// Assert that stopPropagation was called
expect(stopPropagationSpy).toHaveBeenCalled();

// Clean up the spy
stopPropagationSpy.mockRestore();
});

it("handles undefined settings.header gracefully", () => {
// Mock settings with undefined header
(useSettingsContext as jest.Mock).mockReturnValue({
settings: {
header: undefined, // Simulate missing header
ariaLabel: { closeChatButton: "Close Chat Button" }
}
});

(useStylesContext as jest.Mock).mockReturnValue({
styles: {
closeChatIconStyle: { color: "red" },
closeChatButtonStyle: { backgroundColor: "gray" }
}
});

render(<CloseChatButton />);

// Check that it renders without crashing
const button = screen.getByRole("button", { name: "Close Chat Button" });
expect(button).toBeInTheDocument();
});

it("handles undefined settings.ariaLabel gracefully", () => {
// Mock settings without ariaLabel
(useSettingsContext as jest.Mock).mockReturnValue({
settings: {
header: { closeChatIcon: "close-icon.png" },
ariaLabel: undefined // Simulate missing ariaLabel
}
});

(useStylesContext as jest.Mock).mockReturnValue({
styles: {
closeChatIconStyle: { color: "red" },
closeChatButtonStyle: { backgroundColor: "gray" }
}
});

render(<CloseChatButton />);

// Check that it falls back to the default aria-label
const button = screen.getByRole("button", { name: "close chat" });
expect(button).toHaveAttribute("aria-label", "close chat");
});
});
const openChatMock = jest.fn();

beforeEach(() => {
// Mock the return value of useChatWindowInternal hook
(useChatWindowInternal as jest.Mock).mockReturnValue({
openChat: openChatMock,
});

// Mock the return value of useSettingsContext hook
(useSettingsContext as jest.Mock).mockReturnValue({
settings: {
header: { closeChatIcon: DefaultSettings.header?.closeChatIcon },
ariaLabel: { closeChatButton: DefaultSettings.ariaLabel?.closeChatButton },
},
});

// Mock the return value of useStylesContext hook
(useStylesContext as jest.Mock).mockReturnValue({
styles: {
closeChatIconStyle: { color: "red" },
closeChatButtonStyle: { backgroundColor: "gray" },
},
});
});

it("renders the CloseChatButton component", () => {
// Render the CloseChatButton component
render(<CloseChatButton />);

// Get the button element by its role and name using default settings
const button = screen.getByRole("button", { name: DefaultSettings.ariaLabel?.closeChatButton });

// Assert that the button is in the document
expect(button).toBeInTheDocument();
});

it("displays the correct aria-label", () => {
// Render the CloseChatButton component
render(<CloseChatButton />);
// Get the button element by its role and name using default settings
const button = screen.getByRole("button", { name: DefaultSettings.ariaLabel?.closeChatButton });

// Assert that the button has the correct aria-label attribute
expect(button).toHaveAttribute("aria-label", DefaultSettings.ariaLabel?.closeChatButton);
});

it("applies the correct background image to the close chat icon", () => {
// Render the CloseChatButton component
render(<CloseChatButton />);
// Get the button element by its role
const button = screen.getByRole("button");
// Get the span element inside the button (assumed to be the icon)
const icon = button.querySelector("span");

// Check if the background image is set correctly
expect(icon).toHaveStyle(`background-image: url(${DefaultSettings.header?.closeChatIcon})`);
});

it("applies the default aria-label when none is provided in settings", () => {
// Mock settings without ariaLabel.closeChatButton
(useSettingsContext as jest.Mock).mockReturnValue({
settings: {
header: { closeChatIcon: DefaultSettings.header?.closeChatIcon },
ariaLabel: {},
},
});

render(<CloseChatButton />);

// Check if the aria-label falls back to "close chat"
const button = screen.getByRole("button", { name: DefaultSettings.ariaLabel?.closeChatButton });
expect(button).toHaveAttribute("aria-label", DefaultSettings.ariaLabel?.closeChatButton);
});

it("applies the correct styles to the button and icon", () => {
// Render the CloseChatButton component
render(<CloseChatButton />);
// Get the button element by its role
const button = screen.getByRole("button");
// Get the span element inside the button (assumed to be the icon)
const icon = button.querySelector("span");

// Assert that the button has the correct background color
expect(button).toHaveStyle("background-color: gray");
// Assert that the icon has the correct color
expect(icon).toHaveStyle("color: red");
// Assert that the icon has the correct background image
expect(icon).toHaveStyle(`background-image: url(${DefaultSettings.header?.closeChatIcon})`);
});

it("calls openChat(false) when the button is clicked", () => {
// Render the CloseChatButton component
render(<CloseChatButton />);
// Get the button element by its role
const button = screen.getByRole("button");
// Fire the mouseDown event on the button
fireEvent.mouseDown(button);
// Assert that openChatMock was called with false
expect(openChatMock).toHaveBeenCalledWith(false);
});

it("stops propagation of mouse down event", () => {
// Render the component
render(<CloseChatButton />);
const button = screen.getByRole("button");

// Spy on the stopPropagation method of the event
const stopPropagationSpy = jest.spyOn(MouseEvent.prototype, "stopPropagation");

// Fire the mouseDown event
fireEvent.mouseDown(button);

// Assert that stopPropagation was called
expect(stopPropagationSpy).toHaveBeenCalled();

// Clean up the spy
stopPropagationSpy.mockRestore();
});

it("handles undefined settings.header gracefully", () => {
// Mock settings with undefined header
(useSettingsContext as jest.Mock).mockReturnValue({
settings: {
header: undefined, // Simulate missing header
ariaLabel: { closeChatButton: DefaultSettings.ariaLabel?.closeChatButton },
},
});

(useStylesContext as jest.Mock).mockReturnValue({
styles: {
closeChatIconStyle: { color: "red" },
closeChatButtonStyle: { backgroundColor: "gray" },
},
});

render(<CloseChatButton />);

// Check that it renders without crashing
const button = screen.getByRole("button", { name: DefaultSettings.ariaLabel?.closeChatButton });
expect(button).toBeInTheDocument();
});

it("handles undefined settings.ariaLabel gracefully", () => {
// Mock settings without ariaLabel
(useSettingsContext as jest.Mock).mockReturnValue({
settings: {
header: { closeChatIcon: DefaultSettings.header?.closeChatIcon },
ariaLabel: undefined, // Simulate missing ariaLabel
},
});

(useStylesContext as jest.Mock).mockReturnValue({
styles: {
closeChatIconStyle: { color: "red" },
closeChatButtonStyle: { backgroundColor: "gray" },
},
});

render(<CloseChatButton />);

// Check that it falls back to the default aria-label
const button = screen.getByRole("button", { name: DefaultSettings.ariaLabel?.closeChatButton });
expect(button).toHaveAttribute("aria-label", DefaultSettings.ariaLabel?.closeChatButton);
});
});

0 comments on commit 73c89d0

Please sign in to comment.