Primeiros testes escritos

README.md

@@ -69,6 +69,13 @@ Para instalar as dependências do projeto, execute o seguinte comando:
 ```shell
 npm install
 ```
+##### Para testar a aplicação
+
+Basta abrir um terminal, na pasta do projeto, e executar:
+
+```shell
+npm run test
+```
 
 ### Gerenciamento de versões do Node
 

__tests__/base.test.tsx

@@ -0,0 +1,42 @@
+import { expect, test, vi } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import HomePage from '@/app/page';
+import Cadastro from '@/app/cadastro/page'
+
+vi.mock('next/font/google', () => ({
+  Inter: () => ({
+    style: {
+      fontFamily: 'mocked',
+    },
+  }),
+  Lusitana: () => ({
+    style: {
+      fontFamily: 'mocked',
+    },
+  }),
+}))
+
+test('Componentes da página inicial', () => {
+  render(<HomePage />)
+  const h1 = screen.getByRole('heading', { level: 1, name: 'Portal Estágio', exact: true })
+  const h2 = screen.getByRole('heading', { level: 2, name: 'Quer estagiar ou tem um estágio para oferecer?', exact: true })
+  const home = screen.getByRole('link', { name: 'Portal Estágio', exact: true })
+  const cadastro = screen.getByRole('link', { name: 'Cadastrar Estágio', exact: true })
+  const busca = screen.getByRole('link', { name: 'Procurar Estágio', exact: true })
+
+  expect(h1).toBeInTheDocument()
+  expect(h2).toBeInTheDocument()
+  expect(home).toBeInTheDocument()
+  expect(cadastro).toBeInTheDocument()
+  expect(busca).toBeInTheDocument()
+
+  expect(home).toHaveAttribute('href', '/')
+  expect(cadastro).toHaveAttribute('href', '/cadastro')
+  expect(busca).toHaveAttribute('href', '/busca')
+
+  expect(home).toHaveAccessibleDescription()
+  expect(cadastro).toHaveAccessibleDescription()
+  expect(busca).toHaveAccessibleDescription()
+})
+

__tests__/cadastro.test.tsx

@@ -0,0 +1,39 @@
+import { assert, expect, test, vi } from 'vitest';
+import { render, screen, within } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import Cadastro from '@/app/cadastro/page'
+import SubmitForm from '@/app/cadastro/SubmitForm'
+
+vi.mock('next/font/google', () => ({
+  Inter: () => ({
+    style: {
+      fontFamily: 'mocked',
+    },
+  }),
+  Lusitana: () => ({
+    style: {
+      fontFamily: 'mocked',
+    },
+  }),
+}))
+
+test('Componentes da página de cadastro', async () => {
+  render(<Cadastro />);
+  const main = within(document.querySelector('#cadastro'));
+  expect(
+      main.getByRole('heading', { level: 2, name: 'Cadastro de vagas', exact: true })
+  ).toBeDefined();
+})
+
+test('Formulário de cadastro de estágios', async () => {
+  render(<SubmitForm />);
+  [ 'Empresa', 'CNPJ da Empresa', 'Descrição da Vaga', 'Cidade',
+    'Estado', 'Modalidade do Estágio', 'Carga Horária', 'Remuneração',
+    'Benefícios', 'Responsabilidades', 'Responsável pelo Estágio',
+    'Email do Responsável', 'Como se Candidatar?'
+  ].map((label) => (
+    expect(screen.getByLabelText(label)).toBeRequired()
+  ))
+
+  expect(screen.getAllByRole('button', { name: 'Cadastrar' })).toBeDefined()
+})

__tests__/nav-links.test.tsx

@@ -0,0 +1,35 @@
+import { expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import NavLinks from '@/app/ui/cadastro/nav-links'
+
+vi.mock('next/font/google', () => ({
+  Inter: () => ({
+    style: {
+      fontFamily: 'mocked',
+    },
+  }),
+  Lusitana: () => ({
+    style: {
+      fontFamily: 'mocked',
+    },
+  }),
+}))
+
+test('Barra de Links lateral', async () => {
+  render(<NavLinks />);
+  const home = screen.getByRole('link', { name: 'Home', exact: true })
+  const cadastro = screen.getByRole('link', { name: 'Cadastro', exact: true })
+  const busca = screen.getByRole('link', { name: 'Busca', exact: true })
+  const sobre = screen.getByRole('link', { name: 'Sobre', exact: true })
+
+  expect(home).toHaveAttribute('href', '/')
+  expect(cadastro).toHaveAttribute('href', '/cadastro')
+  expect(busca).toHaveAttribute('href', '/busca')
+  expect(sobre).toHaveAttribute('href', '/sobre')
+
+  expect(home).toHaveAccessibleDescription()
+  expect(cadastro).toHaveAccessibleDescription()
+  expect(busca).toHaveAccessibleDescription()
+  expect(sobre).toHaveAccessibleDescription()
+})

__tests__/search-form.test.tsx

@@ -0,0 +1,27 @@
+import { expect, test, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/vitest';
+import SearchForm from '@/app/busca/SearchForm'
+
+vi.mock('next/font/google', () => ({
+  Inter: () => ({
+    style: {
+      fontFamily: 'mocked',
+    },
+  }),
+  Lusitana: () => ({
+    style: {
+      fontFamily: 'mocked',
+    },
+  }),
+}))
+
+
+test('Formulário de cadastro de estágios', async () => {
+  render(<SearchForm />);
+  [ 
+      'Buscar por empresa', 'Buscar por regime'
+  ].map((label) => (
+    expect(screen.getByLabelText(label)).toBeDefined()
+  ))
+})

app/busca/SearchForm.tsx

@@ -1,17 +1,20 @@
+import { useId } from 'react';
+
 
 export default function SearchForm() {
+    const formId = useId();
     return (
         <form>
             <div className="flex flex-col gap-6 rounded-lg bg-gray-50 px-6 py-10 md:px-20">
                 <div className="flex flex-col">
-                    <label>Buscar por empresa</label>
-                    <input type="text" name="empresa" required />
+                    <label htmlFor={formId + '-buscaEmpresa'}>Buscar por empresa</label>
+                    <input id={formId + '-buscaEmpresa'} type="text" name="empresa" required />
                 </div>
             </div>
             <div className="flex flex-col gap-6 rounded-lg bg-gray-50 px-6 py-10 md:px-20">
                 <div className="flex flex-col">
-                    <label>Buscar por regime</label>
-                    <select name="ufs">
+                    <label htmlFor={formId + '-buscaRegime'}>Buscar por regime</label>
+                    <select id={formId + '-buscaRegime'} name="ufs">
                         <option value="remoto">Remoto</option>
                         <option value="hibrido">Hibrido</option>
                         <option value="presencial">Presencial</option>
@@ -20,4 +23,4 @@ export default function SearchForm() {
             </div>     
         </form>
     )
-}
+}

app/cadastro/SubmitForm.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FormEvent } from 'react';
+import { FormEvent, useId } from 'react';
 
 export default function SubmitForm() {
   async function onSubmit(event: FormEvent<HTMLFormElement>) {
@@ -17,77 +17,49 @@ export default function SubmitForm() {
     // ...
   }
 
+  function Required_input({inputLabel, inputName}) {
+        const inputId = useId();
+        return <div className="flex flex-col">
+          <label className="after:content-['*'] after:ml-0.5 after:text-red-500" htmlFor="{inputId}">
+            {inputLabel}</label>
+          <input id="{inputId}" type="text" name="{inputName}" required />
+        </div>;
+  }
+
   return (
     <form onSubmit={onSubmit}>
       <div className="flex flex-col gap-6 rounded-lg bg-gray-50 px-6 py-10 md:px-20"> 
-        <div className="flex flex-col">
-          <label>Empresa<span className="text-red-500">*</span></label>
-          <input type="text" name="empresa" required />
-        </div>
-
-        <div className="flex flex-col">
-            <label>CNPJ da Empresa<span className="text-red-500">*</span></label>
-            <input type="text" name="CNPJ" required />
-        </div>
-
-        <div className="flex flex-col">
-          <label>Descrição da Vaga<span className="text-red-500">*</span></label>
-          <input type="text" name="descricao" required />
-        </div>
+        {[
+            ['Empresa', 'empresa'],
+            ['CNPJ da Empresa', 'CNPJ'],
+            ['Descrição da Vaga', 'descricao'],
+            ['Cidade', 'cidade'],
+            ['Estado', 'estado']
+        ].map(([label, name]) => (
+            <Required_input inputLabel={label} inputName={name} />
+        ))}
 
         <div className="flex flex-col">
-          <label>Cidade<span className="text-red-500">*</span></label>
-          <input type="text" name="cidade" required />
-        </div>
-
-        <div className="flex flex-col">
-            <label>Estado<span className="text-red-500">*</span></label>
-            <input type="text" name="estado" required />
-        </div>
-
-        <div className="flex flex-col">
-            <label>Modalidade do Estágio<span className="text-red-500">*</span></label>
-            <select name="Modalidade" required>
+            <label htmlFor="modalidade-select" className="after:content-['*'] after:ml-0.5 after:text-red-500">
+            Modalidade do Estágio</label>
+            <select id="modalidade-select" name="Modalidade" required>
                 <option value="Presencial">Presencial</option>
                 <option value="Remoto">Remoto</option>
                 <option value="Híbrido">Híbrido</option>
             </select>
         </div>
 
-        <div className="flex flex-col">
-            <label>Carga Horária<span className="text-red-500">*</span></label>
-            <input type="text" name="CargaHoraria" required />
-        </div>
-
-        <div className="flex flex-col">
-            <label>Remuneração<span className="text-red-500">*</span></label>
-            <input type="text" name="Remuneracao" required />
-        </div>
-
-        <div className="flex flex-col">
-            <label>Benefícios<span className="text-red-500">*</span></label>
-            <input type="text" name="Beneficios" required />
-        </div>
-
-        <div className="flex flex-col">
-            <label>Responsabilidades<span className="text-red-500">*</span></label>
-            <textarea name="Responsabilidades" required></textarea>
-        </div>
-
-        <div className="flex flex-col">
-            <label>Responsável pelo Estágio<span className="text-red-500">*</span></label>
-            <input type="text" name="ResponsavelEstagio" required />
-        </div>
-
-        <div className="flex flex-col">
-            <label>Email do responsável<span className="text-red-500">*</span></label>
-            <input type="email" name="EmailResponsavel" required />
-        </div>
-
-        <div className="flex flex-col">
-            <label>Como se candidatar?<span className="text-red-500">*</span></label>
-            <input type="text" name="ComoCandidatar" required />
-        </div>
+        {[
+            ['Carga Horária', 'CargaHoraria'],
+            ['Remuneração', 'Remuneracao'],
+            ['Benefícios', 'Beneficios'],
+            ['Responsabilidades', 'Responsabilidades'],
+            ['Responsável pelo Estágio', 'ResponsavelEstagio'],
+            ['Email do Responsável', 'EmailResponsavel'],
+            ['Como se Candidatar?', 'ComoCandidatar'],
+        ].map(([label, name]) => (
+            <Required_input inputLabel={label} inputName={name} />
+        ))}
 
         <div className="flex h-10 items-center justify-center rounded-lg bg-blue-500 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500 active:bg-blue-600 aria-disabled:cursor-not-allowed aria-disabled:opacity-50">
             <button type="submit">Cadastrar</button>

app/cadastro/page.tsx

@@ -5,16 +5,16 @@ const SubmitForm = dynamic(() => import('./SubmitForm'));
 
 export default function Page() {
   return (
-    <main className="flex min-h-screen flex-col p-6">
+    <main id="cadastro" className="flex min-h-screen flex-col p-6">
       <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-26">
         {<EstagioLogo />}
       </div>
       <BuscaLayout>
         <div className="flex gap-6 rounded-lg bg-gray-50 px-6 py-10 md:px-20"> 
           <div className="h-0 w-0 border-b-[35px] border-l-[25px] border-r-[25px] border-b-black border-l-transparent border-r-transparent"/>
-          <p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
+          <h2 className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
             <strong>Cadastro de vagas</strong>
-          </p>
+          </h2>
         </div>
         <SubmitForm />
       </BuscaLayout>

app/page.tsx

@@ -8,7 +8,7 @@ import Layout from './ui/layout';
 
 export default function Page() {
   return (
-    <main className="flex min-h-screen flex-col p-6">
+    <main id="inicio" className="flex min-h-screen flex-col p-6">
       <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-26">
         {<EstagioLogo />}
       </div>
@@ -18,18 +18,20 @@ export default function Page() {
           <div
     className="h-0 w-0 border-b-[30px] border-l-[20px] border-r-[20px] border-b-black border-l-transparent border-r-transparent"
   />
-            <p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
-              <strong>Quer estagiar ou tem um estágio para oferecer?</strong>
-            </p>
+            <h2 className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
+              Quer estagiar ou tem um estágio para oferecer?
+            </h2>
             <Link
               href="/cadastro"
               className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-9 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
+              title="Clique para cadastrar uma oportunidade de Estágio"
             >
               <span>Cadastrar Estágio</span> <ArrowRightIcon className="w-5 md:w-6" />
             </Link>
             <Link
               href="/busca"
               className="flex items-center gap-5 self-start rounded-lg bg-green-500 px-10 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
+              title="Clique para procurar uma oportunidade de Estágio"
             >
               <span>Procurar Estágio</span> <ArrowRightIcon className="w-5 md:w-6" />
             </Link>

app/ui/cadastro/nav-links.tsx

@@ -6,10 +6,10 @@ import {
 } from '@heroicons/react/24/outline';
 
 const links = [
-  { name: 'Home', href: '/', icon: HomeIcon },
-  { name: 'Cadastro', href: '/cadastro', icon: DocumentDuplicateIcon, },
-  { name: 'Busca', href: '/busca', icon: MagnifyingGlassIcon },
-  { name: 'Sobre', href: '/sobre', icon: QuestionMarkCircleIcon },
+  { name: 'Home', href: '/', title: 'Página Inicial', icon: HomeIcon },
+  { name: 'Cadastro', href: '/cadastro', title: 'Cadastrar Estágio', icon: DocumentDuplicateIcon, },
+  { name: 'Busca', href: '/busca', title: 'Buscar Estágio', icon: MagnifyingGlassIcon },
+  { name: 'Sobre', href: '/sobre', title: 'Sobre o Portal Estágio', icon: QuestionMarkCircleIcon },
 ];
 
 export default function NavLinks() {
@@ -21,6 +21,7 @@ export default function NavLinks() {
           <a
             key={link.name}
             href={link.href}
+            title={link.title}
             className="flex items-center gap-2 h-[52px] grow rounded-md px-0 text-sm font-medium hover:bg-sky-100 hover:text-blue-600"
           >
             <LinkIcon className="w-7 mt-8 " />