-
-
- Título do arquivo
-
-
-
- {document.name}
-
-
-
-
- Setor/Tipo
-
-
-
- {document.type}
-
+ Setor
+ {document.setor}
-
- Nível de Acesso
-
-
-
- {document.accessLevel}
-
-
-
-
-
- Categoria
-
-
-
- {document.category || document.type}
-
+ Nivel de acesso
+ {document.nivel}
-
- Dados do arquivo
-
+
Dados do arquivo
- ↻ Revisão:
-
-
- {document.revision || "5J"}
-
-
-
-
- ◷ Data de Atualização:
-
-
- {document.updatedAt}
-
+ Tipo:
+ {document.tipo_arquivo || "-"}
- ▤ Tamanho do arquivo:
-
-
- {document.fileSize || "66.8 MB"}
-
+ Data de atualizacao:
+ {formatDate(document.data_atualizacao)}
-
- 🏷 Tags
-
+
Tags
- {tags.map((tag) => (
-
- {tag}
-
- ))}
+ {tags.length > 0 ? (
+ tags.map((tag) => (
+
+ {tag.nome}
+
+ ))
+ ) : (
+ Nenhuma etiqueta atribuida.
+ )}
@@ -163,9 +136,10 @@ function DocumentModal({ document, onClose, onViewPdf }) {
@@ -174,4 +148,4 @@ function DocumentModal({ document, onClose, onViewPdf }) {
);
}
-export default DocumentModal;
\ No newline at end of file
+export default DocumentModal;
diff --git a/src/components/Document/DocumentModal/DocumentModal.test.jsx b/src/components/Document/DocumentModal/DocumentModal.test.jsx
new file mode 100644
index 0000000..54cf0be
--- /dev/null
+++ b/src/components/Document/DocumentModal/DocumentModal.test.jsx
@@ -0,0 +1,136 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+
+import DocumentModal from "./DocumentModal";
+
+const documentData = {
+ id_documento: 1,
+ tipo_arquivo: "pdf",
+ nome: "Manual de teste.pdf",
+ setor: "Engenharia",
+ data_atualizacao: "2026-09-20T12:00:00Z",
+ nivel: "Publico",
+ data: "http://localhost:8000/media/documentos/manual.pdf",
+ etiquetas: [
+ { id_etiqueta: 1, nome: "Tecnico" },
+ { id_etiqueta: 2, nome: "Aprovado" },
+ ],
+};
+
+function renderModal(props = {}) {
+ return render(
+
+ );
+}
+
+describe("DocumentModal", () => {
+ it("exibe os metadados e as etiquetas retornados pela API", () => {
+ renderModal();
+
+ expect(screen.getByText("Manual de teste.pdf")).toBeInTheDocument();
+ expect(screen.getByText("Engenharia")).toBeInTheDocument();
+ expect(screen.getByText("Publico")).toBeInTheDocument();
+ expect(screen.getByText("Tecnico")).toBeInTheDocument();
+ expect(screen.getByText("Aprovado")).toBeInTheDocument();
+ });
+
+ it("informa quando o documento nao possui etiquetas", () => {
+ renderModal({ document: { ...documentData, etiquetas: [] } });
+
+ expect(screen.getByText("Nenhuma etiqueta atribuida.")).toBeInTheDocument();
+ });
+
+ it("fecha pelo botao e pelo clique no overlay, mas nao pelo conteudo", () => {
+ const onClose = vi.fn();
+ renderModal({ onClose });
+
+ fireEvent.click(screen.getByText("Manual de teste.pdf"));
+ expect(onClose).not.toHaveBeenCalled();
+
+ fireEvent.click(screen.getByLabelText("Fechar"));
+ expect(onClose).toHaveBeenCalledTimes(1);
+
+ fireEvent.click(globalThis.document.querySelector(".document-modal-overlay"));
+ expect(onClose).toHaveBeenCalledTimes(2);
+ });
+
+ it("encaminha o documento com a URL do PDF ao visualizar", () => {
+ const onViewPdf = vi.fn();
+ renderModal({ onViewPdf });
+
+ fireEvent.click(screen.getByRole("button", { name: "Visualizar" }));
+
+ expect(onViewPdf).toHaveBeenCalledWith(documentData);
+ });
+
+ it("desabilita a visualizacao sem URL de arquivo", () => {
+ renderModal({ document: { ...documentData, data: "" } });
+
+ expect(screen.getByRole("button", { name: "Visualizar" })).toBeDisabled();
+ });
+
+ it("exibe o estado de carregamento", () => {
+ renderModal({ loading: true });
+
+ expect(
+ screen.getByText("Carregando detalhes do documento...")
+ ).toBeInTheDocument();
+ expect(screen.queryByText("Manual de teste.pdf")).not.toBeInTheDocument();
+ });
+
+ it("exibe o erro e permite tentar novamente", () => {
+ const onRetry = vi.fn();
+ renderModal({ error: "Falha ao carregar detalhes.", onRetry });
+
+ expect(screen.getByRole("alert")).toHaveTextContent(
+ "Falha ao carregar detalhes."
+ );
+
+ fireEvent.click(screen.getByText("Tentar novamente"));
+ expect(onRetry).toHaveBeenCalledTimes(1);
+ });
+
+ it("permite fechar o modal durante o carregamento", () => {
+ const onClose = vi.fn();
+ renderModal({ loading: true, onClose });
+
+ fireEvent.click(screen.getByLabelText("Fechar"));
+ expect(onClose).toHaveBeenCalledTimes(1);
+ });
+
+ it("nao renderiza nada sem documento", () => {
+ const { container } = renderModal({ document: null });
+
+ expect(container).toBeEmptyDOMElement();
+ });
+
+ it("usa o badge padrao quando o tipo de arquivo esta ausente", () => {
+ renderModal({ document: { ...documentData, tipo_arquivo: undefined } });
+
+ expect(screen.getByText("ARQUIVO")).toBeInTheDocument();
+ });
+
+ it("formata a data de atualizacao e trata valores invalidos", () => {
+ renderModal({ document: { ...documentData, data_atualizacao: "2026-01-05T10:00:00Z" } });
+ expect(screen.getByText("05/01/2026")).toBeInTheDocument();
+
+ renderModal({ document: { ...documentData, data_atualizacao: "data-invalida" } });
+ expect(screen.getByText("data-invalida")).toBeInTheDocument();
+
+ renderModal({ document: { ...documentData, data_atualizacao: "" } });
+ expect(screen.getByText("-")).toBeInTheDocument();
+ });
+
+ it("fecha pelo clique no overlay mesmo em estado de erro", () => {
+ const onClose = vi.fn();
+ renderModal({ error: "Falha", onClose });
+
+ fireEvent.click(globalThis.document.querySelector(".document-modal-overlay"));
+ expect(onClose).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/src/pages/Home/Home.jsx b/src/pages/Home/Home.jsx
index c9ad150..9b4cb1d 100644
--- a/src/pages/Home/Home.jsx
+++ b/src/pages/Home/Home.jsx
@@ -1,12 +1,12 @@
import { FiFileText, FiFilter, FiAlertCircle } from "react-icons/fi";
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
import SearchBar from "../../components/SearchBar/SearchBar";
import DocumentList from "../../components/Document/DocumentList/DocumentList";
import Pagination from "../../components/Pagination/Pagination";
import DocumentModal from "../../components/Document/DocumentModal/DocumentModal";
-import { fetchDocuments } from "../../services/documentService";
+import { fetchDocumentById, fetchDocuments } from "../../services/documentService";
import "./Home.css";
@@ -18,6 +18,9 @@ function Home() {
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
const [selectedDocument, setSelectedDocument] = useState(null);
+ const [documentDetailsLoading, setDocumentDetailsLoading] = useState(false);
+ const [documentDetailsError, setDocumentDetailsError] = useState(null);
+ const detailRequestId = useRef(0);
useEffect(() => {
const timer = setTimeout(async () => {
@@ -57,13 +60,55 @@ function Home() {
}
function handleViewPdf(document) {
- if (document.pdfUrl) {
- window.open(document.pdfUrl, "_blank");
+ if (document.data) {
+ window.open(document.data, "_blank");
return;
}
console.log("PDF ainda não disponível:", document.nome);
}
+ async function loadDocumentDetails(idDocumento) {
+ const requestId = ++detailRequestId.current;
+
+ setDocumentDetailsLoading(true);
+ setDocumentDetailsError(null);
+
+ try {
+ const document = await fetchDocumentById(idDocumento);
+
+ if (requestId === detailRequestId.current) {
+ setSelectedDocument(document);
+ }
+ } catch (err) {
+ if (requestId === detailRequestId.current) {
+ console.error("Erro ao buscar detalhes do documento:", err);
+ setDocumentDetailsError("Não foi possÃvel carregar os detalhes do documento.");
+ }
+ } finally {
+ if (requestId === detailRequestId.current) {
+ setDocumentDetailsLoading(false);
+ }
+ }
+ }
+
+ function handleOpenDocument(document) {
+ setSelectedDocument(document);
+ loadDocumentDetails(document.id_documento);
+ }
+
+ function handleCloseDocumentModal() {
+ detailRequestId.current += 1;
+ setSelectedDocument(null);
+ setDocumentDetailsLoading(false);
+ setDocumentDetailsError(null);
+ }
+
+ function handleRetryDocumentDetails() {
+ if (selectedDocument?.id_documento) {
+ loadDocumentDetails(selectedDocument.id_documento);
+ }
+ }
+
return (
@@ -100,7 +145,7 @@ function Home() {
<>
setSelectedDocument(null)}
+ loading={documentDetailsLoading}
+ error={documentDetailsError}
+ onClose={handleCloseDocumentModal}
+ onRetry={handleRetryDocumentDetails}
onViewPdf={handleViewPdf}
/>
);
}
-export default Home;
\ No newline at end of file
+export default Home;
diff --git a/src/pages/Home/Home.test.jsx b/src/pages/Home/Home.test.jsx
new file mode 100644
index 0000000..004c6c6
--- /dev/null
+++ b/src/pages/Home/Home.test.jsx
@@ -0,0 +1,265 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+import Home from "./Home";
+import { fetchDocumentById, fetchDocuments } from "../../services/documentService";
+
+vi.mock("../../services/documentService", () => ({
+ fetchDocuments: vi.fn(),
+ fetchDocumentById: vi.fn(),
+}));
+
+const documentsPage = {
+ results: [
+ {
+ id_documento: 1,
+ tipo_arquivo: "pdf",
+ nome: "Manual do sistema.pdf",
+ setor: "Engenharia",
+ data_atualizacao: "2026-09-20T12:00:00Z",
+ nivel: "Publico",
+ },
+ {
+ id_documento: 2,
+ tipo_arquivo: "docx",
+ nome: "Ata de reuniao.docx",
+ setor: "Administrativo",
+ data_atualizacao: "2026-08-01T09:00:00Z",
+ nivel: "Interno",
+ },
+ ],
+ pages: 2,
+};
+
+const documentDetail = {
+ id_documento: 1,
+ nome: "Manual do sistema.pdf",
+ tipo_arquivo: "pdf",
+ setor: "Engenharia",
+ data_atualizacao: "2026-09-20T12:00:00Z",
+ nivel: "Publico",
+ data: "http://localhost:8000/media/documentos/manual.pdf",
+ etiquetas: [{ id_etiqueta: 1, nome: "Tecnico" }],
+};
+
+function getModal() {
+ return globalThis.document.querySelector(".document-modal");
+}
+
+function openFirstDocument() {
+ fireEvent.click(screen.getAllByRole("button", { name: "Visualizar" })[0]);
+}
+
+beforeEach(() => {
+ vi.mocked(fetchDocuments).mockResolvedValue(documentsPage);
+ vi.mocked(fetchDocumentById).mockResolvedValue(documentDetail);
+});
+
+describe("Home", () => {
+ it("carrega e exibe a lista de documentos", async () => {
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText("Manual do sistema.pdf")).toBeInTheDocument();
+ });
+ expect(screen.getByText("Ata de reuniao.docx")).toBeInTheDocument();
+ expect(fetchDocuments).toHaveBeenCalledWith({ nome: "", page: 1 });
+ });
+
+ it("exibe mensagem de erro quando a busca falha", async () => {
+ vi.mocked(fetchDocuments).mockRejectedValue(new Error("falha"));
+
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText("Erro ao carregar")).toBeInTheDocument();
+ });
+ expect(
+ screen.getByText("Não foi possível carregar os documentos.")
+ ).toBeInTheDocument();
+ expect(screen.queryByText("Manual do sistema.pdf")).not.toBeInTheDocument();
+ });
+
+ it("busca novamente ao digitar na barra de pesquisa", async () => {
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText("Manual do sistema.pdf")).toBeInTheDocument();
+ });
+
+ fireEvent.change(screen.getByPlaceholderText("Pesquisar documentos..."), {
+ target: { value: "manual" },
+ });
+
+ await waitFor(() => {
+ expect(fetchDocuments).toHaveBeenLastCalledWith({ nome: "manual", page: 1 });
+ });
+ });
+
+ it("muda de pagina pela paginacao", async () => {
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText("Manual do sistema.pdf")).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByRole("button", { name: "Próxima página" }));
+
+ await waitFor(() => {
+ expect(fetchDocuments).toHaveBeenLastCalledWith({ nome: "", page: 2 });
+ });
+ });
+
+ it("ignora mudanca de pagina fora dos limites", async () => {
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText("Manual do sistema.pdf")).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByRole("button", { name: "Página anterior" }));
+
+ expect(fetchDocuments).toHaveBeenCalledTimes(1);
+ });
+
+ it("abre o modal com os detalhes do documento selecionado", async () => {
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText("Manual do sistema.pdf")).toBeInTheDocument();
+ });
+
+ openFirstDocument();
+
+ expect(screen.getByText("Carregando detalhes do documento...")).toBeInTheDocument();
+
+ await waitFor(() => {
+ expect(getModal()).toBeInTheDocument();
+ });
+ expect(fetchDocumentById).toHaveBeenCalledWith(1);
+ expect(screen.getByText("Tecnico")).toBeInTheDocument();
+ });
+
+ it("abre o modal direto quando ja existe documento selecionado", async () => {
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText("Manual do sistema.pdf")).toBeInTheDocument();
+ });
+
+ openFirstDocument();
+
+ await waitFor(() => {
+ expect(screen.getByText("Tecnico")).toBeInTheDocument();
+ });
+ expect(getModal()).toBeInTheDocument();
+ });
+
+ it("exibe erro nos detalhes e permite tentar novamente", async () => {
+ vi.mocked(fetchDocumentById).mockRejectedValue(new Error("falha"));
+
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText("Manual do sistema.pdf")).toBeInTheDocument();
+ });
+
+ openFirstDocument();
+
+ await waitFor(() => {
+ expect(screen.getByRole("alert")).toBeInTheDocument();
+ });
+ expect(
+ screen.getByText("Não foi possÃvel carregar os detalhes do documento.")
+ ).toBeInTheDocument();
+
+ vi.mocked(fetchDocumentById).mockResolvedValue(documentDetail);
+ fireEvent.click(screen.getByText("Tentar novamente"));
+
+ await waitFor(() => {
+ expect(screen.getByText("Tecnico")).toBeInTheDocument();
+ });
+ });
+
+ it("fecha o modal pelo botao e pelo overlay", async () => {
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText("Manual do sistema.pdf")).toBeInTheDocument();
+ });
+
+ openFirstDocument();
+
+ await waitFor(() => {
+ expect(screen.getByText("Arquivo")).toBeInTheDocument();
+ });
+
+ fireEvent.click(screen.getByLabelText("Fechar"));
+ expect(getModal()).not.toBeInTheDocument();
+
+ openFirstDocument();
+ await waitFor(() => {
+ expect(getModal()).toBeInTheDocument();
+ });
+
+ fireEvent.click(globalThis.document.querySelector(".document-modal-overlay"));
+ expect(getModal()).not.toBeInTheDocument();
+ });
+
+ it("abre o PDF em nova aba ao visualizar pelo modal", async () => {
+ const openSpy = vi
+ .spyOn(window, "open")
+ .mockImplementation(() => null);
+
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText("Manual do sistema.pdf")).toBeInTheDocument();
+ });
+
+ openFirstDocument();
+
+ await waitFor(() => {
+ expect(screen.getByText("Tecnico")).toBeInTheDocument();
+ });
+
+ fireEvent.click(getModal().querySelector("footer .modal-view-button"));
+
+ expect(openSpy).toHaveBeenCalledWith(documentDetail.data, "_blank");
+
+ openSpy.mockRestore();
+ });
+
+ it("nao abre o PDF quando o documento nao tem URL de arquivo", async () => {
+ vi.mocked(fetchDocumentById).mockResolvedValue({
+ ...documentDetail,
+ data: null,
+ });
+ const openSpy = vi
+ .spyOn(window, "open")
+ .mockImplementation(() => null);
+ const consoleSpy = vi
+ .spyOn(console, "log")
+ .mockImplementation(() => {});
+
+ render(
);
+
+ await waitFor(() => {
+ expect(screen.getByText("Manual do sistema.pdf")).toBeInTheDocument();
+ });
+
+ openFirstDocument();
+
+ await waitFor(() => {
+ expect(getModal()).toBeInTheDocument();
+ });
+
+ const viewButton = getModal().querySelector("footer .modal-view-button");
+
+ expect(viewButton).toBeDisabled();
+ expect(openSpy).not.toHaveBeenCalled();
+
+ openSpy.mockRestore();
+ consoleSpy.mockRestore();
+ });
+});
diff --git a/src/services/documentService.js b/src/services/documentService.js
index 469ecf6..c8f3462 100644
--- a/src/services/documentService.js
+++ b/src/services/documentService.js
@@ -9,4 +9,10 @@ export async function fetchDocuments({ nome = "", page = 1 } = {}) {
});
return response.data;
-}
\ No newline at end of file
+}
+
+export async function fetchDocumentById(idDocumento) {
+ const response = await api.get(`/api/documentos/${idDocumento}/`);
+
+ return response.data;
+}
diff --git a/src/services/documentService.test.js b/src/services/documentService.test.js
new file mode 100644
index 0000000..f510601
--- /dev/null
+++ b/src/services/documentService.test.js
@@ -0,0 +1,24 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import api from './api'
+import { fetchDocumentById } from './documentService'
+
+vi.mock('./api', () => ({
+ default: {
+ get: vi.fn(),
+ },
+}))
+
+describe('fetchDocumentById', () => {
+ it('busca o detalhe do documento pelo id e retorna o payload da API', async () => {
+ const document = {
+ id_documento: 42,
+ nome: 'Manual.pdf',
+ etiquetas: [{ id_etiqueta: 7, nome: 'Importante' }],
+ }
+ api.get.mockResolvedValue({ data: document })
+
+ await expect(fetchDocumentById(42)).resolves.toEqual(document)
+ expect(api.get).toHaveBeenCalledWith('/api/documentos/42/')
+ })
+})
diff --git a/src/tests/coverage/DocumentoList.test.jsx b/src/tests/coverage/DocumentoList.test.jsx
index ed82aa7..3c7bc94 100644
--- a/src/tests/coverage/DocumentoList.test.jsx
+++ b/src/tests/coverage/DocumentoList.test.jsx
@@ -1,13 +1,12 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import { fireEvent, render, screen } from "@testing-library/react";
import { describe, expect, it, vi } from "vitest";
-import DocumentList from "./DocumentList";
+import DocumentList from "../../components/Document/DocumentList/DocumentList";
-vi.mock("./DocumentItem", () => ({
+vi.mock("../../components/Document/DocumentItem/DocumentItem", () => ({
default: ({ document, onView }) => (
- {document.name}
+ {document.nome}
),
@@ -26,8 +25,8 @@ describe("DocumentList", () => {
it("renderiza os documentos recebidos", () => {
const documents = [
- { id: 1, name: "Documento 1" },
- { id: 2, name: "Documento 2" },
+ { id_documento: 1, nome: "Documento 1" },
+ { id_documento: 2, nome: "Documento 2" },
];
render(
);
@@ -47,12 +46,12 @@ describe("DocumentList", () => {
it("chama onView ao visualizar um documento", async () => {
const onView = vi.fn();
- const document = { id: 1, name: "Documento 1" };
+ const document = { id_documento: 1, nome: "Documento 1" };
render(
);
- await userEvent.click(screen.getByRole("button", { name: "Visualizar" }));
+ fireEvent.click(screen.getByRole("button", { name: "Visualizar" }));
expect(onView).toHaveBeenCalledWith(document);
});
-});
\ No newline at end of file
+});
diff --git a/src/tests/coverage/Home.test.jsx b/src/tests/coverage/Home.test.jsx
index e123c46..09f722d 100644
--- a/src/tests/coverage/Home.test.jsx
+++ b/src/tests/coverage/Home.test.jsx
@@ -1,14 +1,18 @@
import { act, fireEvent, render, screen } from "@testing-library/react";
import { beforeEach, describe, expect, it, vi } from "vitest";
-import Home from "./Home";
-import { fetchDocuments } from "../services/documentService";
-
-vi.mock("../services/documentService", () => ({
+import Home from "../../pages/Home/Home";
+import {
+ fetchDocumentById,
+ fetchDocuments,
+} from "../../services/documentService";
+
+vi.mock("../../services/documentService", () => ({
+ fetchDocumentById: vi.fn(),
fetchDocuments: vi.fn(),
}));
-vi.mock("../components/SearchBar/SearchBar", () => ({
+vi.mock("../../components/SearchBar/SearchBar", () => ({
default: ({ value, onChange }) => (
({
),
}));
-vi.mock("../components/Document/DocumentList", () => ({
+vi.mock("../../components/Document/DocumentList/DocumentList", () => ({
default: ({ documents, onView }) => (
{documents.map((document) => (
-