Skip to content

Commit

Permalink
feat: implemented playwright test e2e
Browse files Browse the repository at this point in the history
  • Loading branch information
Luisfp0 committed Oct 11, 2024
1 parent 2d5a5fd commit 13d54f7
Show file tree
Hide file tree
Showing 12 changed files with 1,779 additions and 1,090 deletions.
8 changes: 5 additions & 3 deletions apps/web/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ yarn-error.log*
# Ignore Prisma client but don't ignore Prisma client type definition
/prisma/client/*
!/prisma/client/index.d.ts



node_modules/
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
5 changes: 4 additions & 1 deletion apps/web/app/(roles)/dashboard/[id]/DashboardPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,10 @@ export const DashboardPage = ({ skillsFromServer, jobsFromServer }) => {

return (
<div className="container mx-auto px-4 py-8">
<h1 className="mb-2 text-3xl font-bold text-gray-800">
<h1
data-testid="dashboard-title"
className="mb-2 text-3xl font-bold text-gray-800"
>
Dashboard de Vagas
</h1>
<p className="mb-8 text-gray-600">Gerencie suas vagas publicadas</p>
Expand Down
3 changes: 1 addition & 2 deletions apps/web/app/(roles)/vagas/publique/page.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -154,8 +154,6 @@ export default function RolesCreate() {
return
}

const userId = await login(email)

try {
const roleData: RolesInsert = {
language: formData.language === 'Português' ? 'Portuguese' : 'English',
Expand All @@ -178,6 +176,7 @@ export default function RolesCreate() {

const newRole = await createRole(roleData, '[email protected]')
await createRoleOwner(newRole.id, userID)
console.log('should redirect')
router.push(`/vaga/${newRole.id}`)

form.reset({
Expand Down
12 changes: 10 additions & 2 deletions apps/web/app/components/PTBRRolePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -114,10 +114,18 @@ export const PTBRRolePage = ({ role }) => {
)}
</div>
<div>
<h1 className="max-w-[500px] text-3xl font-bold">
<h1
data-testid="role-title"
className="max-w-[500px] text-3xl font-bold"
>
{role.title}
</h1>
<p className="text-lg text-indigo-200">{role.company}</p>
<p
data-testid="role-company"
className="text-lg text-indigo-200"
>
{role.company}
</p>
</div>
</div>
<div className="relative flex space-x-2">
Expand Down
12 changes: 10 additions & 2 deletions apps/web/app/components/USRolePage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -115,10 +115,18 @@ export const USRolePage = ({ role }) => {
)}
</div>
<div>
<h1 className="max-w-[500px] text-3xl font-bold">
<h1
data-testid="role-title"
className="max-w-[500px] text-3xl font-bold"
>
{role.title}
</h1>
<p className="text-lg text-indigo-200">{role.company}</p>
<p
data-testid="role-company"
className="text-lg text-indigo-200"
>
{role.company}
</p>
</div>
</div>
<div className="relative flex space-x-2">
Expand Down
15 changes: 10 additions & 5 deletions apps/web/app/components/ui/JobCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,12 +47,19 @@ const JobCard = ({ job, skillsFromProps }) => {
rel="noreferrer"
>
<div className="flex justify-between">
<p className="mb-2 text-sm text-gray-600">{job.company}</p>
<p
data-testid="job-card-company"
className="mb-2 text-sm text-gray-600"
>
{job.company}
</p>
<span className="text-[13px] sm:text-[16px] md:text-[16px] lg:text-[16px]">
{salaryText}
</span>
</div>
<h2 className="text-lg font-semibold">{job.title}</h2>
<h2 data-testid="job-card-title" className="text-lg font-semibold">
{job.title}
</h2>
<div className="my-4">
{job.skillsId?.length > 0 ? (
job.skillsId.slice(0, 1).map((skillId) => {
Expand All @@ -73,9 +80,7 @@ const JobCard = ({ job, skillsFromProps }) => {
)}
</div>
<div className="flex items-center text-sm text-gray-600">
<span className="mr-4">
📍 {job.country || 'Internacional'}
</span>
<span className="mr-4">📍 {job.country || 'Internacional'}</span>
<span>
💬 {job.language === 'Portuguese' ? 'Português' : job.language}
</span>
Expand Down
96 changes: 96 additions & 0 deletions apps/web/e2e/create-and-view-job.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import { test, expect } from '@playwright/test'

test.describe('Fluxo de Criação de Vaga e Visualização no Dashboard', () => {
test('deve criar uma vaga e visualizá-la no dashboard', async ({
page,
context,
}) => {
test.setTimeout(60000)
// 1. Navegar para a página inicial e simular login
await page.goto('/')
await page.evaluate(() => {
localStorage.setItem('loginEmail', '[email protected]')
})

// 2. Navegar para a página de criação de vaga
await page.goto('/vagas/publique')

// 3. Preencher o formulário de vaga sem selecionar skills
await page.fill('input[name="title"]', 'Desenvolvedor React')
await page.fill('input[name="company"]', 'Empresa Teste')
await page.fill('input[name="url"]', 'https://teste.com/vaga')
await page.fill('input[name="country"]', 'Brasil')
await page.selectOption('select[name="language"]', 'Português')
await page.selectOption('select[name="currency"]', 'BRL')
await page.fill('input[name="salary"]', '5000')
await page.fill('input[name="minimumYears"]', '2')
await page.fill(
'input[name="description"]',
'<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea voluptatem impedit illum quam, explicabo repudiandae rerum id praesentium cumque et, labore a non quis modi. Iure suscipit placeat laudantium ex?</p>'
)

// 4. Tentar enviar o formulário sem selecionar skills
await page.click('button:has-text("Enviar")')

// 5. Verificar se aparece uma mensagem de erro
await expect(
page.locator('text=Adicione ao menos uma habilidade.')
).toBeVisible()

// 6. Agora, selecionar uma skill
await page.click('text=TypeScript, React, .NET')
await page.waitForTimeout(2000)
await page.keyboard.type('React')
await page.keyboard.press('Enter')
await page.click('text=Quais habilidades são necessárias para a vaga?')

// 7. Enviar o formulário novamente
await page.click('button:has-text("Enviar")')

// 8. Verificar se foi redirecionado para a página da vaga
await expect(page).toHaveURL(/\/vaga\/[a-f0-9-]+/)

// 9. Verificar se a vaga foi criada corretamente
await expect(page.locator('[data-testid="role-title"]')).toContainText(
'Desenvolvedor React'
)
await expect(page.locator('[data-testid="role-company"]')).toContainText(
'Empresa Teste'
)
await page.waitForTimeout(2000)

// 10. Navegar para o dashboard
await page.goto('/vagas/publique')
await page.reload({ timeout: 10000, waitUntil: 'networkidle' })
await page.waitForTimeout(4000)
await page.click('text=Ir para o Dashboard')

// 11. Verificar se a vaga aparece no dashboard
await expect(page.locator('[data-testid="dashboard-title"]')).toContainText(
'Dashboard de Vagas'
)
await expect(page.locator('[data-testid="job-card-title"]')).toContainText(
'Desenvolvedor React'
)
await expect(
page.locator('[data-testid="job-card-company"]')
).toContainText('Empresa Teste')

// 12. Clicar na vaga no dashboard e verificar se leva à página da vaga em uma nova aba
const [newPage] = await Promise.all([
context.waitForEvent('page'),
page.click('text=Desenvolvedor React'),
])

await newPage.waitForLoadState('networkidle')

await expect(newPage).toHaveURL(/\/vaga\/[0-9a-fA-F-]{36}/)

await expect(newPage.locator('[data-testid="role-title"]')).toContainText(
'Desenvolvedor React'
)
await expect(newPage.locator('[data-testid="role-company"]')).toContainText(
'Empresa Teste'
)
})
})
4 changes: 3 additions & 1 deletion apps/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
"build": "next build",
"start": "next start",
"lint": "eslint ./app --fix",
"test": "vitest run"
"test": "npx playwright test"
},
"dependencies": {
"@headlessui/react": "^1.7.15",
Expand Down Expand Up @@ -75,6 +75,7 @@
},
"devDependencies": {
"@faker-js/faker": "^8.3.1",
"@playwright/test": "^1.48.0",
"@react-email/render": "^0.0.10",
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^14.0.0",
Expand All @@ -96,6 +97,7 @@
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-turbo": "^2.0.3",
"jsdom": "^22.1.0",
"playwright-expect": "^0.1.2",
"postcss": "^8.4.24",
"prettier": "^2.8.8",
"prettier-plugin-tailwindcss": "^0.4.1",
Expand Down
82 changes: 82 additions & 0 deletions apps/web/playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
import { defineConfig, devices } from '@playwright/test'
import { expect } from '@playwright/test'
import { matchers } from 'playwright-expect'

expect.extend(matchers)
/**
* Read environment variables from file.
* https://github.com/motdotla/dotenv
*/
// import dotenv from 'dotenv';
// import path from 'path';
// dotenv.config({ path: path.resolve(__dirname, '.env') });

/**
* See https://playwright.dev/docs/test-configuration.
*/
export default defineConfig({
testDir: './e2e',
/* Run tests in files in parallel */
fullyParallel: true,
/* Fail the build on CI if you accidentally left test.only in the source code. */
forbidOnly: !!process.env.CI,
/* Retry on CI only */
retries: process.env.CI ? 2 : 0,
/* Opt out of parallel tests on CI. */
workers: 1,
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
reporter: 'html',
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
use: {
/* Base URL to use in actions like `await page.goto('/')`. */
baseURL: 'http://localhost:3000',

/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
trace: 'on-first-retry',
},

/* Configure projects for major browsers */
projects: [
{
name: 'chromium',
use: { ...devices['Desktop Chrome'] },
},

// {
// name: 'firefox',
// use: { ...devices['Desktop Firefox'] },
// },

// {
// name: 'webkit',
// use: { ...devices['Desktop Safari'] },
// },

/* Test against mobile viewports. */
// {
// name: 'Mobile Chrome',
// use: { ...devices['Pixel 5'] },
// },
// {
// name: 'Mobile Safari',
// use: { ...devices['iPhone 12'] },
// },

/* Test against branded browsers. */
// {
// name: 'Microsoft Edge',
// use: { ...devices['Desktop Edge'], channel: 'msedge' },
// },
// {
// name: 'Google Chrome',
// use: { ...devices['Desktop Chrome'], channel: 'chrome' },
// },
],

/* Run your local dev server before starting the tests */
// webServer: {
// command: 'npm run start',
// url: 'http://127.0.0.1:3000',
// reuseExistingServer: !process.env.CI,
// },
})
Loading

0 comments on commit 13d54f7

Please sign in to comment.