Merge pull request #108 from ES2-UFPI/testePesquisar

Configurei corretamente os testes da pesquisa e app.js

front_end/babel.config.js

@@ -1,6 +1,3 @@
 module.exports = {
-    presets: [
-        '@babel/preset-env',
-        '@babel/preset-react'
-    ]
-};
+    presets: ['@babel/preset-env', '@babel/preset-react'],
+};  

front_end/jest.config.js

@@ -1,12 +1,13 @@
 module.exports = {
-    transform: {
-      "^.+\\.jsx?$": "babel-jest"
-    },
-    moduleNameMapper: {
-      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
-    },
-    moduleFileExtensions: ["js", "jsx"],
-    testMatch: ["**/__tests__/**/*.js?(x)", "**/?(*.)+(spec|test).js?(x)"],
-    setupFilesAfterEnv: ["<rootDir>/jest.setup.js"]
-  };
-
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.[tj]sx?$': 'babel-jest',
+  },
+  transformIgnorePatterns: [
+    '/node_modules/(?!(axios|react-dnd|dnd-core)|@react-dnd/)',
+  ],
+  moduleNameMapper: {
+    '\\.(css|less|sass|scss)$': 'identity-obj-proxy'
+  },
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
+};

front_end/package.json

@@ -55,5 +55,14 @@
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "tailwindcss": "^3.4.6"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "transform": {
+      "^.+\\.[tj]sx?$": "babel-jest"
+    },
+    "moduleNameMapper": {
+      "\\.(css|less|sass|scss)$": "identity-obj-proxy"
+    }
   }
-}
+}

front_end/src/App.test.js

@@ -1,8 +1,9 @@
+import React from 'react';
 import { render, screen } from '@testing-library/react';
 import App from './App';
 
 test('renders learn react link', () => {
   render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
+  const linkElement = screen.getByText(/Pesquisar/i);
   expect(linkElement).toBeInTheDocument();
 });

front_end/src/components/ListaRoteiros.jsx

@@ -1,3 +1,4 @@
+import React from "react";
 import "../styles/style.listaRoteiros.css"
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';

front_end/src/components/Pesquisar.jsx

@@ -12,7 +12,7 @@ const Pesquisar = () => {
     };
 
     return (
-        <form onSubmit={handleSubmit} className="flex items-center relative w-full max-w-[24rem] rounded-lg shadow">
+        <form data-testid="pesquisar-form" onSubmit={handleSubmit} className="flex items-center relative w-full max-w-[24rem] rounded-lg shadow">
             <svg className="w-6 h-6 text-black absolute left-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
                 <path stroke="currentColor" stroke-linecap="round" stroke-width="2" d="m21 21-3.5-3.5M17 10a7 7 0 1 1-14 0 7 7 0 0 1 14 0Z" />
             </svg>

front_end/src/pages/Home.js

@@ -1,3 +1,4 @@
+import React from "react";
 import ListaRoteiros from "../components/ListaRoteiros";
 import NavBar from "../components/NavBar";
 import Rodape from "../components/Rodape";

front_end/src/setupTests.js

@@ -1,5 +1,2 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+// src/setupTests.js
+import '@testing-library/jest-dom';

front_end/src/tests/Pesquisar.test.jsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { render, screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import Pesquisar from "../components/Pesquisar";
+
+describe('Pesquisar Roteiro', () => {
+    test('renders input element', () => {
+        render(<Pesquisar />);
+        const inputElement = screen.getByPlaceholderText(/pesquisar roteiros/i);
+        expect(inputElement).toBeInTheDocument();
+    });
+
+    test('updates input value on change', () => {
+        render(<Pesquisar />);
+        const inputElement = screen.getByPlaceholderText(/pesquisar roteiros/i);
+        fireEvent.change(inputElement, { target: { value: 'Novo Título' } });
+        expect(inputElement.value).toBe('Novo Título');
+    });
+
+    test('shows alert when form is submitted with empty title', () => {
+        render(<Pesquisar />);
+        window.alert = jest.fn();
+        const formElement = screen.getByTestId('pesquisar-form');
+        fireEvent.submit(formElement);
+        expect(window.alert).toHaveBeenCalledWith('É obrigatório o preenchimento do título');
+    });
+});