diff --git a/src/components/button/button.test.tsx b/src/components/button/button.test.tsx new file mode 100644 index 00000000..ad21bcf3 --- /dev/null +++ b/src/components/button/button.test.tsx @@ -0,0 +1,133 @@ +import { describe, expect, it, vi } from "vitest"; +import { fireEvent, render, screen } from "@testing-library/react"; +import React from "react"; +import { Button } from "./button"; +import { AddIcon } from "../../icons"; + +describe("Button", () => { + it("renders a button with text and button type", () => { + const text = "Button Type"; + // ARRANGE + render(); + + // ASSERT + const button = screen.getByText(text); + expect(button).toBeInTheDocument(); + expect(button).toHaveAttribute("type", "button"); + }); + + it("renders a button with text and submit type", () => { + const text = "Submit Type"; + // ARRANGE + render( + + ); + + // ASSERT + const button = screen.getByText(text); + expect(button).toBeInTheDocument(); + expect(button).toHaveAttribute("type", "submit"); + }); + + it("renders a button with text and left icon", () => { + const text = "Left icon"; + // ARRANGE + render( + + ); + + // ASSERT + const button = screen.getByText(text); + expect(button).toBeInTheDocument(); + expect(button).toHaveAttribute("type", "button"); + expect(button.firstChild?.nodeName.toLowerCase()).toBe("svg"); + }); + + it("renders a button with text and right icon", () => { + const text = "Right icon"; + // ARRANGE + render( + + ); + + // ASSERT + const button = screen.getByText(text); + expect(button).toBeInTheDocument(); + expect(button).toHaveAttribute("type", "button"); + expect(button.lastChild?.nodeName.toLowerCase()).toBe("svg"); + }); + + it("renders a button with text and onClick", () => { + const text = "Onclick button"; + const mock = vi.fn(); + // ARRANGE + render(); + + // ASSERT + const button = screen.getByText(text); + expect(button).toBeInTheDocument(); + expect(button).toHaveAttribute("type", "button"); + fireEvent.click(button); + expect(mock).toHaveBeenCalledTimes(1); + }); + + it("renders a button with text and disabled state", () => { + const text = "Disabled button"; + const mock = vi.fn(); + // ARRANGE + render( + + ); + + // ASSERT + const button = screen.getByText(text); + expect(button).toBeInTheDocument(); + expect(button).toHaveAttribute("type", "button"); + expect(button).toBeDisabled(); + fireEvent.click(button); + expect(mock).toHaveBeenCalledTimes(0); + }); + + it("renders a button with text and form", () => { + const text = "Form button"; + const mock = vi.fn(); + // ARRANGE + render( + + ); + + // ASSERT + const button = screen.getByText(text); + expect(button).toBeInTheDocument(); + expect(button).toHaveAttribute("type", "submit"); + expect(button).toHaveAttribute("form", "form-test"); + }); + + it("renders a button with loading state", () => { + const text = "Loading button"; + const mock = vi.fn(); + // ARRANGE + render( + + ); + + // ASSERT + const button = screen.getByText(text); + expect(button).toBeInTheDocument(); + expect(button).toHaveAttribute("type", "button"); + expect(button.firstChild?.nodeName.toLowerCase()).toBe("svg"); + expect(button.firstChild).toHaveClass("animate-spin"); + }); +});