refactor: streamline JobsFiltersCard tests with render helper and improve clarity

test: update JobsTableCard tests for improved assertions and structure

refactor: enhance useJobsFiltering tests for better readability and functionality

test: optimize JobsPage tests with clearer structure and additional assertions

refactor: improve useJobsPagination tests for better coverage and clarity

Author: pedrosilvaadev

frontend/src/domains/jobs/application/useJobsData.ts

@@ -1,12 +1,16 @@
-import { fetchJobFiles, fetchJobsByFile, runScraperRequest } from "@/domains/jobs/infrastructure/jobsApi";
+import {
+  fetchJobFiles,
+  fetchJobsByFile,
+  runScraperRequest,
+} from "@/domains/jobs/infrastructure/jobsApi";
 import type { Job, JobFile, JobsMeta } from "@/domains/jobs/domain/job.types";
 import { useCallback, useEffect, useState } from "react";
 
 const EMPTY_META: JobsMeta = { file: "", modifiedAt: null, total: 0 };
 
-export function useJobsData() {
+export function useJobsData(initialSelectedFile = "") {
   const [files, setFiles] = useState<JobFile[]>([]);
-  const [selectedFile, setSelectedFile] = useState("");
+  const [selectedFile, setSelectedFile] = useState(initialSelectedFile);
   const [jobs, setJobs] = useState<Job[]>([]);
   const [meta, setMeta] = useState<JobsMeta>(EMPTY_META);
   const [loading, setLoading] = useState(false);
@@ -38,7 +42,11 @@ export function useJobsData() {
     } catch (err: unknown) {
       setJobs([]);
       setMeta(EMPTY_META);
-      setError(err instanceof Error ? err.message : "Erro inesperado ao carregar vagas.");
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Erro inesperado ao carregar vagas.",
+      );
     } finally {
       setLoading(false);
     }
@@ -48,7 +56,7 @@ export function useJobsData() {
     async function initializeFiles() {
       const foundFiles = await loadFiles();
       if (foundFiles[0]?.file) {
-        setSelectedFile(foundFiles[0].file);
+        setSelectedFile((current) => current || foundFiles[0].file);
       }
     }
 
@@ -94,7 +102,11 @@ export function useJobsData() {
 
       await loadJobs(nextFile);
     } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : "Erro inesperado ao executar o scraper.");
+      setError(
+        err instanceof Error
+          ? err.message
+          : "Erro inesperado ao executar o scraper.",
+      );
     } finally {
       setScraping(false);
     }

frontend/src/domains/jobs/application/useJobsFiltering.ts

@@ -1,14 +1,22 @@
 import type { Job } from "@/domains/jobs/domain/job.types";
-import { dedupeJobs, filterJobs, getAvailableKeywords } from "@/domains/jobs/domain/jobFilters";
-import { useMemo, useState } from "react";
-
-export function useJobsFiltering(jobs: Job[]) {
-  const [search, setSearch] = useState("");
-  const [keywordFilter, setKeywordFilter] = useState<string[]>([]);
+import {
+  dedupeJobs,
+  filterJobs,
+  getAvailableKeywords,
+} from "@/domains/jobs/domain/jobFilters";
+import { useMemo } from "react";
 
+export function useJobsFiltering(
+  jobs: Job[],
+  search = "",
+  keywordFilter: string[] = [],
+) {
   const dedupedJobs = useMemo(() => dedupeJobs(jobs), [jobs]);
 
-  const keywords = useMemo(() => getAvailableKeywords(dedupedJobs), [dedupedJobs]);
+  const keywords = useMemo(
+    () => getAvailableKeywords(dedupedJobs),
+    [dedupedJobs],
+  );
 
   const filteredJobs = useMemo(
     () => filterJobs(dedupedJobs, search, keywordFilter),
@@ -17,9 +25,7 @@ export function useJobsFiltering(jobs: Job[]) {
 
   return {
     search,
-    setSearch,
     keywordFilter,
-    setKeywordFilter,
     keywords,
     filteredJobs,
   };

frontend/src/domains/jobs/domain/jobFilters.ts

@@ -86,10 +86,17 @@ export function dedupeJobs(jobs: Job[]) {
       continue;
     }
 
-    const mergedKeywords = [...new Set([...splitJobKeywords(existing), ...splitJobKeywords(job)])];
+    const mergedKeywords = [
+      ...new Set([...splitJobKeywords(existing), ...splitJobKeywords(job)]),
+    ];
     const mergedSources = [
       ...new Set(
-        [...(existing.sources ?? []), ...(job.sources ?? []), existing.source, job.source]
+        [
+          ...(existing.sources ?? []),
+          ...(job.sources ?? []),
+          existing.source,
+          job.source,
+        ]
           .map((source) => String(source || "").trim())
           .filter(Boolean),
       ),
@@ -113,12 +120,25 @@ export function dedupeJobs(jobs: Job[]) {
 }
 
 export function getAvailableKeywords(jobs: Job[]) {
-  const values = Array.from(new Set(jobs.flatMap((job) => splitJobKeywords(job))));
+  const values = Array.from(
+    new Set(jobs.flatMap((job) => splitJobKeywords(job))),
+  );
   return values.sort((a, b) => a.localeCompare(b));
 }
 
-export function filterJobs(jobs: Job[], search: string, keywordFilter: string[]) {
-  const term = normalizeComparableText(search);
+function getSearchTerms(search: string) {
+  return search
+    .split(/[,;/]+/)
+    .map((term) => normalizeComparableText(term))
+    .filter(Boolean);
+}
+
+export function filterJobs(
+  jobs: Job[],
+  search: string,
+  keywordFilter: string[],
+) {
+  const terms = getSearchTerms(search);
 
   return jobs.filter((job) => {
     const currentKeywords = splitJobKeywords(job);
@@ -130,14 +150,21 @@ export function filterJobs(jobs: Job[], search: string, keywordFilter: string[])
       return false;
     }
 
-    if (!term) {
+    if (terms.length === 0) {
       return true;
     }
 
     const text = normalizeComparableText(
-      [job.titulo, job.empresa, job.local, job.link, job.palavra, ...(job.keywords || [])].join(" "),
+      [
+        job.titulo,
+        job.empresa,
+        job.local,
+        job.link,
+        job.palavra,
+        ...(job.keywords || []),
+      ].join(" "),
     );
 
-    return text.includes(term);
+    return terms.every((term) => text.includes(term));
   });
 }

frontend/src/domains/jobs/presentation/components/JobsFiltersCard.tsx

@@ -2,15 +2,33 @@ import { Badge } from "@/shared/ui/badge";
 import { Card, CardContent } from "@/shared/ui/card";
 import { Input } from "@/shared/ui/input";
 import type { JobFile, JobsMeta } from "@/domains/jobs/domain/job.types";
-import { useMemo, useState, type Dispatch, type ReactNode, type SetStateAction } from "react";
-import { FiBriefcase, FiCheck, FiFileText, FiFilter, FiSearch, FiSlash, FiTag } from "react-icons/fi";
+import {
+  useMemo,
+  useState,
+  type FormEvent,
+  type Dispatch,
+  type ReactNode,
+  type SetStateAction,
+} from "react";
+import {
+  FiBriefcase,
+  FiCheck,
+  FiFileText,
+  FiFilter,
+  FiPlus,
+  FiSearch,
+  FiSlash,
+  FiTag,
+} from "react-icons/fi";
 import { KeywordsModal } from "./KeywordsModal";
 import { Button } from "@/shared/ui/button";
 interface JobsFiltersCardProps {
   search: string;
   setSearch: Dispatch<SetStateAction<string>>;
   keywordFilter: string[];
   setKeywordFilter: Dispatch<SetStateAction<string[]>>;
+  onRemoveFilter: (filterToRemove: string) => void;
+  onClearFilters: () => void;
   keywords: string[];
   selectedFile: string;
   setSelectedFile: Dispatch<SetStateAction<string>>;
@@ -23,17 +41,20 @@ function getSelectedFilters(search: string, keywordFilter: string[]) {
   const searchTerms = search
     .split(/[,;/]+/)
     .map((item) => item.trim())
-    .filter(Boolean)
-    .slice(0, 5);
+    .filter(Boolean);
 
-  return Array.from(new Set([...keywordFilter.filter(Boolean), ...searchTerms]));
+  return Array.from(
+    new Set([...keywordFilter.filter(Boolean), ...searchTerms]),
+  );
 }
 
 export function JobsFiltersCard({
   search,
   setSearch,
   keywordFilter,
   setKeywordFilter,
+  onRemoveFilter,
+  onClearFilters,
   keywords,
   selectedFile,
   setSelectedFile,
@@ -42,8 +63,12 @@ export function JobsFiltersCard({
   actions,
 }: JobsFiltersCardProps) {
   const [seeKeywordsModal, setSeeKeywordsModal] = useState(false);
+  const [searchTerm, setSearchTerm] = useState("");
 
-  const selectedFilters = useMemo(() => getSelectedFilters(search, keywordFilter), [search, keywordFilter]);
+  const selectedFilters = useMemo(
+    () => getSelectedFilters(search, keywordFilter),
+    [search, keywordFilter],
+  );
 
   const handleManageFilters = () => {
     setSeeKeywordsModal(true);
@@ -59,39 +84,54 @@ export function JobsFiltersCard({
       return;
     }
 
-    setKeywordFilter((current) => (current.includes(value) ? current : [...current, value]));
-  };
-
-  const handleRemoveFilter = (filterToRemove: string) => {
-    setKeywordFilter((current) => current.filter((item) => item !== filterToRemove));
-    setSearch((current) =>
-      current
-        .split(/[,;/]+/)
-        .map((item) => item.trim())
-        .filter((item) => item && item !== filterToRemove)
-        .join(", "),
+    setKeywordFilter((current) =>
+      current.includes(value) ? current : [...current, value],
     );
   };
 
-  const handleClearFilters = () => {
-    setSearch("");
-    setKeywordFilter([]);
+  const handleAddSearchTerm = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+
+    const nextTerm = searchTerm.trim();
+
+    if (!nextTerm) {
+      return;
+    }
+
+    setSearch((current) => {
+      const currentTerms = getSelectedFilters(current, []);
+
+      if (currentTerms.includes(nextTerm)) {
+        return current;
+      }
+
+      return [...currentTerms, nextTerm].join(", ");
+    });
+    setSearchTerm("");
   };
 
   return (
     <>
       <Card className="rounded-[24px] border border-slate-200 bg-white/95 shadow-[0_18px_45px_rgba(15,23,42,0.08)] backdrop-blur dark:border-[#2b3f58] dark:bg-[#131d31]/95 dark:shadow-[0_18px_45px_rgba(3,8,20,0.25)]">
         <CardContent className="flex flex-col gap-4 p-5 md:p-6">
           <div className="flex flex-col md:flex-row gap-3 md:items-center">
-            <div className="relative flex-1">
+            <form className="relative flex-1" onSubmit={handleAddSearchTerm}>
               <FiSearch className="pointer-events-none absolute left-4 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500 dark:text-slate-400" />
               <Input
-                value={search}
-                onChange={(event) => setSearch(event.target.value)}
-                className="h-14 w-full rounded-2xl border border-slate-300 bg-white pl-11 text-base text-slate-900 placeholder:text-slate-500 focus-visible:ring-[#14AE5C]/40 dark:border-[#35506f] dark:bg-[#091224] dark:text-slate-100 dark:placeholder:text-slate-400"
+                value={searchTerm}
+                onChange={(event) => setSearchTerm(event.target.value)}
+                className="h-14 w-full rounded-2xl border border-slate-300 bg-white pl-11 pr-14 text-base text-slate-900 placeholder:text-slate-500 focus-visible:ring-[#14AE5C]/40 dark:border-[#35506f] dark:bg-[#091224] dark:text-slate-100 dark:placeholder:text-slate-400"
                 placeholder="Buscar por título, empresa, local ou link"
               />
-            </div>
+              <button
+                type="submit"
+                aria-label="Adicionar filtro de busca"
+                className="absolute right-2 top-1/2 flex h-10 w-10 -translate-y-1/2 items-center justify-center rounded-xl bg-[#0c6b35] text-white transition-colors hover:bg-[#0a5b2d] disabled:cursor-not-allowed disabled:opacity-50"
+                disabled={!searchTerm.trim()}
+              >
+                <FiPlus className="h-4 w-4" />
+              </button>
+            </form>
             <div className="flex items-center gap-2">{actions}</div>
           </div>
 
@@ -124,15 +164,18 @@ export function JobsFiltersCard({
                 ))}
               </select>
 
-             <div> 
-                <Badge variant="secondary" className="gap-1.5 rounded-full border border-slate-300 bg-slate-100 px-3 py-1 text-xs text-slate-700 dark:border-[#35506f] dark:bg-[#24324c] dark:text-slate-100">
+              <div>
+                <Badge
+                  variant="secondary"
+                  className="gap-1.5 rounded-full border border-slate-300 bg-slate-100 px-3 py-1 text-xs text-slate-700 dark:border-[#35506f] dark:bg-[#24324c] dark:text-slate-100"
+                >
                   <FiFileText className="h-3.5 w-3.5" />
-                    {meta.file || "Sem arquivo"}
+                  {meta.file || "Sem arquivo"}
                 </Badge>
 
                 <Badge className="gap-1.5 rounded-full bg-[#0c6b35] px-3 py-1 text-xs text-white">
                   <FiBriefcase className="h-3.5 w-3.5" />
-                    {meta.total} vagas
+                  {meta.total} vagas
                 </Badge>
               </div>
             </div>
@@ -151,7 +194,7 @@ export function JobsFiltersCard({
                 variant="outline"
                 aria-label="Limpar filtros"
                 className="h-10 w-10 rounded-md border-[#0c6b35] bg-[#0c6b35] p-0 text-white shadow-sm hover:bg-[#0a5b2d]"
-                onClick={handleClearFilters}
+                onClick={onClearFilters}
               >
                 <FiSlash className="h-4 w-4" />
               </Button>
@@ -160,7 +203,9 @@ export function JobsFiltersCard({
 
           <div className="rounded-2xl border border-slate-200 bg-slate-50 px-3 py-3 dark:border-[#2b3f58] dark:bg-[#12203a]/45">
             <div className="flex flex-wrap items-center gap-2">
-              <span className="text-[11px] font-medium uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400">Filtros selecionados</span>
+              <span className="text-[11px] font-medium uppercase tracking-[0.18em] text-slate-500 dark:text-slate-400">
+                Filtros selecionados
+              </span>
               {selectedFilters.length > 0 ? (
                 selectedFilters.map((filter) => (
                   <Badge
@@ -174,20 +219,24 @@ export function JobsFiltersCard({
                       type="button"
                       aria-label={`Remover filtro ${filter}`}
                       className="ml-1 rounded-full p-0.5 text-[#0c6b35] hover:bg-[#14AE5C]/20 dark:text-[#8df0af]"
-                      onClick={() => handleRemoveFilter(filter)}
+                      onClick={() => onRemoveFilter(filter)}
                     >
                       <FiSlash className="h-3 w-3" />
                     </button>
                   </Badge>
                 ))
               ) : (
-                <span className="text-sm text-slate-500 dark:text-slate-400">Use o botão Filtrar para adicionar ou remover palavras-chave.</span>
+                <span className="text-sm text-slate-500 dark:text-slate-400">
+                  Use o botão Filtrar para adicionar ou remover palavras-chave.
+                </span>
               )}
             </div>
           </div>
         </CardContent>
       </Card>
-      {seeKeywordsModal && <KeywordsModal onClose={() => setSeeKeywordsModal(false)} />}
+      {seeKeywordsModal && (
+        <KeywordsModal onClose={() => setSeeKeywordsModal(false)} />
+      )}
     </>
   );
 }