TEST: Testes na tela de tabela de usuários (#74)

* test: altera a configuracao dos workers

* test: ajusta um teste flacky

* test: cria mock para gerar usuarios fakers

* test: adiciona testes na tela de lista de usuarios

* test: adiciona o changesets

.changeset/breezy-moose-tap.md

@@ -0,0 +1,5 @@
+---
+"playwright-ui-tests": minor
+---
+
+test: adiciona testes na tela de listagem de usuários com o projeto Playwright

test/playwright/playwright.config.ts

@@ -5,7 +5,7 @@ export default defineConfig({
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
-  workers: process.env.CI ? 1 : undefined,
+  workers: 1,
   reporter: 'html',
   use: {
     baseURL: 'http://localhost:8181',

test/playwright/tests/shared/mocks/generateUsers.ts

@@ -0,0 +1,37 @@
+import { faker } from '@faker-js/faker';
+import { request } from '@playwright/test';
+import { generateValidCPF } from '../commands/generateValidCPF';
+
+/**
+ * Realiza o mock de criação de um usuário através de requisições HTTP.
+ */
+async function mockGenerateUsers(): Promise<void> {
+  const apiContext = await request.newContext({
+    baseURL: 'http://localhost:3001/register',
+  });
+
+  const response = await apiContext.post('/register', {
+    data: {
+      fullName: faker.person.fullName(),
+      socialName: faker.person.lastName(),
+      document: generateValidCPF(),
+      docType: 'cpf',
+      phone: faker.phone.number({ style: 'national' }),
+      email: faker.internet.email({ provider: 'example.qa.solar' }),
+      password: '123456',
+    },
+  });
+
+  if (!response.ok()) {
+    throw new Error(`Erro ao criar usuário: ${response.status()}`);
+  }
+}
+
+/**
+ * Gera múltiplos usuários simulados.
+ */
+export async function generateUsers(): Promise<void> {
+  for (let i = 0; i < 10; i++) {
+    await mockGenerateUsers();
+  }
+}

test/playwright/tests/specs/listUsers.spec.ts

@@ -0,0 +1,40 @@
+import { expect, test } from '@playwright/test';
+import { login } from '../shared/commands/login';
+import { generateUsers } from '../shared/mocks/generateUsers';
+
+test.describe('Tela de listagem de Usuários', () => {
+
+  test.beforeAll(async () => {
+    await generateUsers();
+  });
+
+  test.beforeEach(async ({ page }) => {
+    login(page, '[email protected]', '123456');
+    await page.goto('/listusers')
+    await page.waitForURL('/listusers');
+  });
+
+  test('Deveria ser possível visualizar os elementos da tela de listagem de Usuários', async ({ page }) => {
+    await expect(page.locator('[data-testid="table-users"]')).toBeVisible();
+    await expect(page.locator('[data-testid="checkbox-select-all"]')).toBeVisible();
+    await page.locator('[data-testid="btn-delete-user"]').scrollIntoViewIfNeeded();
+    await expect(page.locator('[data-testid="btn-delete-user"]')).toBeVisible();
+  });
+
+  test('Deveria ser possível selecionar todos os usuários', async ({ page }) => {
+    const selectAllCheckbox = page.locator('[data-testid="checkbox-select-all"]');
+    await selectAllCheckbox.check();
+    await expect(selectAllCheckbox).toBeChecked();
+  });
+
+  test('Deveria ser possível selecionar um usuário e excluí-lo', async ({ page }) => {
+    const userCheckbox = page.locator('[data-testid="checkbox-select-users"]').nth(2);
+    await userCheckbox.check();
+    const deleteButton = page.locator('[data-testid="btn-delete-user"]');
+    await deleteButton.scrollIntoViewIfNeeded();
+    await deleteButton.click();
+    const toastContent = page.locator('[data-testid="toast-content"]').first();
+    await expect(toastContent).toBeVisible();
+    await expect(toastContent).toHaveText('1 usuário(s) excluído(s) com sucesso!');
+  });
+});

test/playwright/tests/specs/registerUser.spec.ts

@@ -15,16 +15,18 @@ test.describe('Tela de Cadastro de Usuários', () => {
     await expect(page.locator('[data-testid="link-go-to-login"]')).toBeVisible();
   });
 
-  test('Deveria ser possivel visualizar o toast ao clicar no botão sem adicionar algum valor nos campos', async ({ page }) => {
+  test('Deveria ser possível visualizar o toast ao clicar no botão sem adicionar algum valor nos campos', async ({ page }) => {
     await page.locator('[data-testid="btn-register"]').click();
     await expect(page.locator('[data-testid="toast-content"]')).toHaveText('Por favor, corrija os erros no formulário.');
 
     const inputName = ['fullname', 'cpfcnpj', 'email', 'password'];
     const inputError = ['O Nome Completo é obrigatório.', 'O CPF/CNPJ é obrigatório.', 'O Email é obrigatório.', 'A Senha é obrigatória.'];
 
-    inputName.forEach((name, index) => {
-      expect(page.locator(`[data-testid="input-error-${name}"]`)).toHaveText(inputError[index]);
-    })
+    for (let i = 0; i < inputName.length; i++) {
+      const name = inputName[i];
+      const error = inputError[i];
+      await expect(page.locator(`[data-testid="input-error-${name}"]`)).toHaveText(error);
+    }
   });
 
   test('Não deveria ser possivel criar o usuário com o Nome Completo errado', async ({ page }) => {