feat: add test units for Button.tsx

Author: Thauan

src/components/Button/Button.test.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { Button } from "./Button";
+import { LnbThemeProvider } from "../../contexts/ThemeProvider";
+import { lightTheme } from "../../theme/defaultTheme";
+import { normalizeHex, rgbToHex } from "../../utils/rgbToHex";
+
+const renderWithTheme = (ui: React.ReactElement) => {
+  return render(<LnbThemeProvider theme={lightTheme}>{ui}</LnbThemeProvider>);
+};
+
+describe("Button Component", () => {
+  it("deve renderizar o texto do botão", () => {
+    renderWithTheme(<Button>Enviar</Button>);
+    expect(screen.getByText("Enviar")).toBeInTheDocument();
+  });
+
+  it("deve disparar o evento onClick quando clicado", () => {
+    const handleClick = jest.fn();
+    renderWithTheme(<Button onClick={handleClick}>Clique aqui</Button>);
+
+    const button = screen.getByText("Clique aqui");
+    fireEvent.click(button);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it("deve renderizar o botão desativado quando o atributo disabled for passado", () => {
+    renderWithTheme(<Button disabled>Desativado</Button>);
+    const button = screen.getByText("Desativado");
+
+    expect(button).toBeDisabled();
+  });
+
+  it("deve aplicar a variante correta", () => {
+    renderWithTheme(<Button variant="secondary">Secondary</Button>);
+    const button = screen.getByText("Secondary");
+
+    const computedStyle = getComputedStyle(button);
+
+    const backgroundColorHex = normalizeHex(rgbToHex(computedStyle.backgroundColor));
+    const colorHex = normalizeHex(rgbToHex(computedStyle.color));
+
+    expect(backgroundColorHex).toBe(normalizeHex(lightTheme.colors.secondary.main));
+    expect(colorHex).toBe(normalizeHex(lightTheme.colors.secondary.contrast));
+  });
+
+  it("deve aplicar a variante correta", () => {
+    renderWithTheme(<Button variant="primary">Primary</Button>);
+    const button = screen.getByText("Primary");
+
+    const computedStyle = getComputedStyle(button);
+
+    const backgroundColorHex = normalizeHex(rgbToHex(computedStyle.backgroundColor));
+    const colorHex = normalizeHex(rgbToHex(computedStyle.color));
+
+    expect(backgroundColorHex).toBe(normalizeHex(lightTheme.colors.primary.main));
+    expect(colorHex).toBe(normalizeHex(lightTheme.colors.primary.contrast));
+  });
+});

src/theme/defaultTheme.ts

@@ -4,7 +4,6 @@ export const lightTheme = {
     text: "#000000",
     primary: { main: "#dc3545", contrast: "#fff" },
     secondary: { main: "#6C757D", contrast: "#fff" },
-    // "#6C757D",
     border: "#DDDDDD",
   },
   spacing: (factor: number) => `${factor * 8}px`,
@@ -18,8 +17,8 @@ export const darkTheme = {
   colors: {
     background: "#121212",
     text: "#ffffff",
-    primary: "#1E88E5",
-    secondary: "#8A8A8A",
+    primary: { main: "#1E88E5", contrast: "#fff" },
+    secondary: { main: "#8A8A8A", contrast: "#fff" },
     border: "#333333",
   },
   spacing: (factor: number) => `${factor * 8}px`,

src/utils/rgbToHex.ts

@@ -0,0 +1,14 @@
+export function rgbToHex(rgb: string): string {
+  const [r, g, b] = rgb
+    .replace(/^rgba?\(|\s+|\)$/g, "")
+    .split(",")
+    .map(Number);
+  return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`;
+}
+
+export function normalizeHex(color: string): string {
+  if (color.length === 4) {
+    return `#${color[1]}${color[1]}${color[2]}${color[2]}${color[3]}${color[3]}`;
+  }
+  return color.toLowerCase();
+}