feat: implement dark mode UI and improve accessibility in JobsHeaderCard

test: update JobsHeaderCard tests for accessibility and theme toggle
test: enhance JobsFiltersCard tests with meta data and actions
fix: update vitest configuration for setup files
chore: add vitest setup for matchMedia polyfill

Author: Benevanio

frontend/src/components/JobsHeaderCard.tsx

@@ -2,24 +2,17 @@ import {
   CardDescription,
   CardTitle,
 } from "@/components/ui/card";
-import type { JobsMeta } from "@/types/jobs";
-import type { ReactNode } from "react";
 import Logo from "../assets/logo-painel-vagas.svg";
 import { ThemeToggle } from "@/components/ui/theme-toggle";
 import { useTheme } from "@/hooks/useTheme";
 
-interface JobsHeaderCardProps {
-  meta: JobsMeta;
-  actions?: ReactNode;
-}
-
 export function JobsHeaderCard() {
   const { resolvedTheme, toggleTheme } = useTheme();
   return (
     <>
       <div className="w-screen bg-[#004726] dark:bg-[#003318] p-6 -mx-8 flex items-end">
         <CardTitle className="text-3xl text-white">
-          <img src={Logo} />
+          <img src={Logo} alt="Painel de Vagas" />
         </CardTitle>
         <CardDescription className="text-white">
           Leitura automatica dos arquivos XLSX gerados em output.

frontend/tests/unit/components/JobsFiltersCard.test.tsx

@@ -19,19 +19,23 @@ describe("JobsFiltersCard", () => {
         selectedFile="vagas.xlsx"
         setSelectedFile={setSelectedFile}
         files={[{ file: "vagas.xlsx" }]}
-        loading={false}
-        onRefresh={onRefresh}
+        meta={{ file: "vagas.xlsx", modifiedAt: Date.now(), total: 1 }}
+        actions={
+          <button type="button" onClick={onRefresh}>
+            Atualizar
+          </button>
+        }
       />,
     );
 
     fireEvent.change(screen.getByPlaceholderText(/buscar/i), { target: { value: "node" } });
-    fireEvent.click(screen.getByRole("button"));
+    fireEvent.click(screen.getByRole("button", { name: /atualizar/i }));
 
     expect(setSearch).toHaveBeenCalled();
     expect(onRefresh).toHaveBeenCalledTimes(1);
   });
 
-  it("desabilita refresh e aplica spinner quando loading", () => {
+  it("renderiza badge de arquivo e total de vagas", () => {
     render(
       <JobsFiltersCard
         search=""
@@ -42,16 +46,12 @@ describe("JobsFiltersCard", () => {
         selectedFile="vagas.xlsx"
         setSelectedFile={vi.fn()}
         files={[{ file: "vagas.xlsx" }]}
-        loading
-        onRefresh={vi.fn()}
+        meta={{ file: "vagas.xlsx", modifiedAt: Date.now(), total: 1 }}
       />,
     );
 
-    const refreshButton = screen.getByRole("button");
-    expect(refreshButton).toBeDisabled();
-
-    const spinnerIcon = refreshButton.querySelector(".animate-spin");
-    expect(spinnerIcon).not.toBeNull();
+    expect(screen.getAllByText("vagas.xlsx").length).toBeGreaterThan(0);
+    expect(screen.getByText("1 vagas")).toBeInTheDocument();
   });
 
   it("dispara mudancas nos filtros de keyword e arquivo", () => {
@@ -68,8 +68,7 @@ describe("JobsFiltersCard", () => {
         selectedFile="vagas.xlsx"
         setSelectedFile={setSelectedFile}
         files={[{ file: "vagas.xlsx" }, { file: "historico.xlsx" }]}
-        loading={false}
-        onRefresh={vi.fn()}
+        meta={{ file: "vagas.xlsx", modifiedAt: Date.now(), total: 2 }}
       />,
     );
 

frontend/tests/unit/components/JobsHeaderCard.test.tsx

@@ -1,26 +1,22 @@
 import { JobsHeaderCard } from "@/components/JobsHeaderCard";
 import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
+import { describe, expect, it, vi } from "vitest";
+
+vi.mock("@/hooks/useTheme", () => ({
+  useTheme: () => ({ resolvedTheme: "light", toggleTheme: vi.fn() }),
+}));
 
 describe("JobsHeaderCard", () => {
-  it("exibe metadados e acoes", () => {
-    render(
-      <JobsHeaderCard
-        meta={{ file: "vagas.xlsx", modifiedAt: Date.now(), total: 42 }}
-        actions={<button type="button">acao</button>}
-      />,
-    );
+  it("renderiza logo acessivel e descricao", () => {
+    render(<JobsHeaderCard />);
 
-    expect(screen.getByText("Painel de Vagas")).toBeInTheDocument();
-    expect(screen.getByText("vagas.xlsx")).toBeInTheDocument();
-    expect(screen.getByText("42 vagas")).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "acao" })).toBeInTheDocument();
+    expect(screen.getByAltText("Painel de Vagas")).toBeInTheDocument();
+    expect(screen.getByText("Leitura automatica dos arquivos XLSX gerados em output.")).toBeInTheDocument();
   });
 
-  it("usa fallback de arquivo quando meta.file esta vazio", () => {
-    render(<JobsHeaderCard meta={{ file: "", modifiedAt: Date.now(), total: 0 }} />);
+  it("renderiza o botao de alternar tema", () => {
+    render(<JobsHeaderCard />);
 
-    expect(screen.getByText("Sem arquivo")).toBeInTheDocument();
-    expect(screen.getByText("0 vagas")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Ativar tema escuro" })).toBeInTheDocument();
   });
 });

frontend/tests/unit/pages/App.test.tsx

@@ -46,6 +46,6 @@ import App from "@/App";
 describe("App", () => {
   it("renderiza painel principal", () => {
     render(<App />);
-    expect(screen.getByText("Painel de Vagas")).toBeInTheDocument();
+    expect(screen.getByAltText("Painel de Vagas")).toBeInTheDocument();
   });
 });

frontend/vitest.config.js

@@ -15,7 +15,7 @@ export default defineConfig({
   test: {
     globals: true,
     environment: "jsdom",
-    setupFiles: "./tests/setup.js",
+    setupFiles: ["./vitest.setup.ts"],
     coverage: {
       provider: "v8",
       reporter: ["text", "html"],

frontend/vitest.setup.ts

@@ -0,0 +1,17 @@
+import "@testing-library/jest-dom/vitest";
+
+if (!window.matchMedia) {
+  Object.defineProperty(window, "matchMedia", {
+    writable: true,
+    value: (query: string) => ({
+      matches: false,
+      media: query,
+      onchange: null,
+      addListener: () => {},
+      removeListener: () => {},
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      dispatchEvent: () => false,
+    }),
+  });
+}