feat: create base of tests from pages

test/SideBar.spec.tsx

@@ -0,0 +1,80 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+//import { BrowserRouter } from 'react-router-dom';
+import { ChakraProvider } from '@chakra-ui/react';
+import { SideBar } from '../src/components/SideBar/index.tsx';
+
+// Mock do hook useAuth
+jest.mock('../../hooks/useAuth', () => ({
+  useAuth: jest.fn(() => ({
+    signOut: jest.fn(),
+  })),
+}));
+
+// Mock do useNavigate
+const mockNavigate = jest.fn();
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useNavigate: () => mockNavigate,
+  useLocation: () => ({ pathname: '/inicio' }),
+}));
+
+describe('SideBar', () => {
+  it.skip('renders all tabs and sign-out button', () => {
+    render(
+      <ChakraProvider value={system}>
+        <BrowserRouter>
+          <SideBar />
+        </BrowserRouter>
+      </ChakraProvider>
+    );
+
+    // Verifica se os botões das abas estão renderizados
+    const homeTab = screen.getByText('Início');
+    const usersTab = screen.getByText('Usuários');
+    expect(homeTab).toBeInTheDocument();
+    expect(usersTab).toBeInTheDocument();
+
+    // Verifica se o botão "Sair" está renderizado
+    const logoutButton = screen.getByText('Sair');
+    expect(logoutButton).toBeInTheDocument();
+  });
+
+  it.skip('navigates to the correct tab on click', () => {
+    render(
+      <ChakraProvider>
+        <BrowserRouter>
+          <SideBar />
+        </BrowserRouter>
+      </ChakraProvider>
+    );
+
+    // Clica no botão "Usuários" e verifica se o navigate foi chamado corretamente
+    const usersTab = screen.getByText('Usuários');
+    fireEvent.click(usersTab);
+    expect(mockNavigate).toHaveBeenCalledWith('/usuarios');
+  });
+
+  it.skip('calls signOut and navigates to login on sign-out button click', () => {
+    const mockSignOut = jest.fn();
+    jest.mock('../../hooks/useAuth', () => ({
+      useAuth: () => ({
+        signOut: mockSignOut,
+      }),
+    }));
+
+    render(
+      <ChakraProvider>
+        <BrowserRouter>
+          <SideBar />
+        </BrowserRouter>
+      </ChakraProvider>
+    );
+
+    // Clica no botão "Sair" e verifica os efeitos
+    const logoutButton = screen.getByText('Sair');
+    fireEvent.click(logoutButton);
+
+    expect(mockSignOut).toHaveBeenCalled();
+    expect(mockNavigate).toHaveBeenCalledWith('/login');
+  });
+});

test/SignInForm.spec.tsx

@@ -0,0 +1,118 @@
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { ChakraProvider } from '@chakra-ui/react';
+//import { BrowserRouter } from 'react-router-dom';
+import SignInForm from '../src/pages/SignIn/SignInForm';
+
+// Mock do hook useAuth
+jest.mock('../../../hooks/useAuth', () => ({
+  useAuth: jest.fn(() => ({
+    signIn: jest.fn(),
+    isAuthenticated: false,
+  })),
+}));
+
+// Mock do useNavigate
+const mockNavigate = jest.fn();
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useNavigate: () => mockNavigate,
+}));
+
+describe('SignInForm', () => {
+  it.skip('renders form inputs and submit button', () => {
+    render(
+      <ChakraProvider>
+        <BrowserRouter>
+          <SignInForm />
+        </BrowserRouter>
+      </ChakraProvider>
+    );
+
+    // Verifica se os campos de input estão renderizados
+    expect(screen.getByPlaceholderText('E-mail')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Senha')).toBeInTheDocument();
+
+    // Verifica se o botão está renderizado
+    expect(screen.getByText('Entrar')).toBeInTheDocument();
+  });
+
+  it.skip('validates required fields and email format', async () => {
+    render(
+      <ChakraProvider>
+        <BrowserRouter>
+          <SignInForm />
+        </BrowserRouter>
+      </ChakraProvider>
+    );
+
+    // Submete o formulário sem preencher os campos
+    fireEvent.click(screen.getByText('Entrar'));
+
+    // Verifica as mensagens de erro
+    await waitFor(() => {
+      expect(screen.getByText('Campo obrigatório.')).toBeInTheDocument();
+    });
+
+    // Preenche o campo de e-mail com um valor inválido
+    fireEvent.change(screen.getByPlaceholderText('E-mail'), { target: { value: 'invalid-email' } });
+    fireEvent.click(screen.getByText('Entrar'));
+
+    // Verifica a mensagem de erro de e-mail inválido
+    await waitFor(() => {
+      expect(screen.getByText('E-mail inválido.')).toBeInTheDocument();
+    });
+  });
+
+  it.skip('submits the form with valid inputs', async () => {
+    const mockSignIn = jest.fn();
+    jest.mock('../../../hooks/useAuth', () => ({
+      useAuth: jest.fn(() => ({
+        signIn: mockSignIn,
+        isAuthenticated: false,
+      })),
+    }));
+
+    render(
+      <ChakraProvider>
+        <BrowserRouter>
+          <SignInForm />
+        </BrowserRouter>
+      </ChakraProvider>
+    );
+
+    // Preenche os campos de e-mail e senha com valores válidos
+    fireEvent.change(screen.getByPlaceholderText('E-mail'), { target: { value: '[email protected]' } });
+    fireEvent.change(screen.getByPlaceholderText('Senha'), { target: { value: 'password123' } });
+
+    // Submete o formulário
+    fireEvent.click(screen.getByText('Entrar'));
+
+    // Verifica se a função signIn foi chamada com os valores corretos
+    await waitFor(() => {
+      expect(mockSignIn).toHaveBeenCalledWith({
+        email: '[email protected]',
+        password: 'password123',
+      });
+    });
+  });
+
+  it.skip('redirects to "/inicio" when authenticated', () => {
+    jest.mock('../../../hooks/useAuth', () => ({
+      useAuth: jest.fn(() => ({
+        signIn: jest.fn(),
+        isAuthenticated: true,
+      })),
+    }));
+
+    render(
+      <ChakraProvider>
+        <BrowserRouter>
+          <SignInForm />
+        </BrowserRouter>
+      </ChakraProvider>
+    );
+
+    // Verifica se o usuário foi redirecionado para "/inicio"
+    expect(mockNavigate).toHaveBeenCalledWith('/inicio');
+  });
+});

test/Users.spec.tsx

@@ -0,0 +1,157 @@
+import { render, screen, waitFor, fireEvent } from '@testing-library/react';
+import { ChakraProvider } from '@chakra-ui/react';
+import Users from '../src/pages/Users/index.tsx';
+
+// Mock do SideBar
+jest.mock('../../components/SideBar', () => ({
+  SideBar: () => <div data-testid="sidebar">SideBar</div>,
+}));
+
+// Mock do useApi
+const mockGetUsers = jest.fn();
+jest.mock('../../hooks/useApi', () => ({
+  default: () => ({
+    getUsers: mockGetUsers,
+  }),
+}));
+
+// Mock do useAuth
+jest.mock('../../hooks/useAuth', () => ({
+  useAuth: () => ({
+    token: 'mockToken',
+  }),
+}));
+
+describe('Users Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it.skip('renders the sidebar and table', async () => {
+    // Configura o mock para a API
+    mockGetUsers.mockResolvedValue({
+      data: {
+        items: [
+          {
+            id: 1,
+            firstName: 'John',
+            lastName: 'Doe',
+            phone: '123-456-7890',
+            email: '[email protected]',
+            createdAt: '2022-01-01',
+            updatedAt: '2022-01-02',
+          },
+        ],
+        total: 1,
+      },
+    });
+
+    render(
+      <ChakraProvider>
+        <Users />
+      </ChakraProvider>
+    );
+
+    // Verifica se o SideBar foi renderizado
+    expect(screen.getByTestId('sidebar')).toBeInTheDocument();
+
+    // Verifica se a tabela está renderizada com o cabeçalho correto
+    expect(screen.getByText('Nome')).toBeInTheDocument();
+    expect(screen.getByText('Sobrenome')).toBeInTheDocument();
+
+    // Espera que os dados sejam carregados e renderizados na tabela
+    await waitFor(() => {
+      expect(screen.getByText('John')).toBeInTheDocument();
+      expect(screen.getByText('Doe')).toBeInTheDocument();
+      expect(screen.getByText('123-456-7890')).toBeInTheDocument();
+      expect(screen.getByText('[email protected]')).toBeInTheDocument();
+      expect(screen.getByText('2022-01-01')).toBeInTheDocument();
+      expect(screen.getByText('2022-01-02')).toBeInTheDocument();
+    });
+  });
+
+  it.skip('calls the API when page changes', async () => {
+    // Configura o mock para diferentes páginas
+    mockGetUsers
+      .mockResolvedValueOnce({
+        data: {
+          items: [
+            {
+              id: 1,
+              firstName: 'John',
+              lastName: 'Doe',
+              phone: '123-456-7890',
+              email: '[email protected]',
+              createdAt: '2022-01-01',
+              updatedAt: '2022-01-02',
+            },
+          ],
+          total: 2,
+        },
+      })
+      .mockResolvedValueOnce({
+        data: {
+          items: [
+            {
+              id: 2,
+              firstName: 'Jane',
+              lastName: 'Smith',
+              phone: '987-654-3210',
+              email: '[email protected]',
+              createdAt: '2022-01-03',
+              updatedAt: '2022-01-04',
+            },
+          ],
+          total: 2,
+        },
+      });
+
+    render(
+      <ChakraProvider>
+        <Users />
+      </ChakraProvider>
+    );
+
+    // Espera que a primeira página seja carregada
+    await waitFor(() => {
+      expect(screen.getByText('John')).toBeInTheDocument();
+    });
+
+    // Simula a troca para a próxima página
+    const nextButton = screen.getByRole('button', { name: /next/i });
+    fireEvent.click(nextButton);
+
+    // Espera que a segunda página seja carregada
+    await waitFor(() => {
+      expect(screen.getByText('Jane')).toBeInTheDocument();
+      expect(screen.getByText('Smith')).toBeInTheDocument();
+    });
+
+    // Verifica se a API foi chamada corretamente
+    expect(mockGetUsers).toHaveBeenCalledTimes(2);
+    expect(mockGetUsers).toHaveBeenCalledWith({ perPage: 10, page: 0 }, 'mockToken');
+    expect(mockGetUsers).toHaveBeenCalledWith({ perPage: 10, page: 1 }, 'mockToken');
+  });
+
+  it.skip('handles no users scenario', async () => {
+    // Configura o mock para retornar uma lista vazia
+    mockGetUsers.mockResolvedValue({
+      data: {
+        items: [],
+        total: 0,
+      },
+    });
+
+    render(
+      <ChakraProvider>
+        <Users />
+      </ChakraProvider>
+    );
+
+    // Verifica se uma mensagem ou estado vazio é renderizado
+    await waitFor(() => {
+      expect(screen.queryByText('Nome')).not.toBeInTheDocument();
+      expect(screen.getByText('Nenhum usuário encontrado')).toBeInTheDocument();
+    });
+  });
+});