Skip to content

Commit

Permalink
Merge pull request #101 from pedrolivaresanchez/pablogracia/add-playw…
Browse files Browse the repository at this point in the history
…right

Añadir Playwright
  • Loading branch information
Pinx0 authored Nov 6, 2024
2 parents 0734575 + 636426e commit 05feba8
Show file tree
Hide file tree
Showing 6 changed files with 192 additions and 10 deletions.
7 changes: 6 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -55,4 +55,9 @@ next-env.d.ts
# vscode
.vscode

.kubeconfig
.kubeconfig
node_modules/
/test-results/
/playwright-report/
/blob-report/
/playwright/.cache/
60 changes: 60 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,8 @@
"start": "next start",
"lint": "next lint",
"prettier:check": "prettier . --check",
"prettier:write": "prettier . --write"
"prettier:write": "prettier . --write",
"test:e2e": "npx playwright test"
},
"dependencies": {
"@emailjs/browser": "^4.4.1",
Expand All @@ -27,6 +28,7 @@
"sonner": "^1.7.0"
},
"devDependencies": {
"@playwright/test": "^1.48.2",
"@types/node": "^22.8.7",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
Expand Down
80 changes: 80 additions & 0 deletions playwright.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import { defineConfig, devices } from '@playwright/test';

/**
* 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: './tests',
/* 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: process.env.CI ? 1 : undefined,
/* 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',
video: 'on',
},

/* 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,
// },
});
21 changes: 13 additions & 8 deletions src/components/OfferHelp.js
Original file line number Diff line number Diff line change
Expand Up @@ -200,8 +200,11 @@ export default function OfferHelp({
{/* Datos personales */}
<div className="grid md:grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Nombre completo</label>
<label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="fullName">
Nombre completo
</label>
<input
id="fullName"
type="text"
value={formData.nombre}
onChange={(e) => setFormData({ ...formData, nombre: e.target.value })}
Expand All @@ -213,8 +216,11 @@ export default function OfferHelp({

{submitType === 'create' && (
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Correo electrónico</label>
<label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="userEmail">
Correo electrónico
</label>
<input
id="userEmail"
type="email"
value={formData.email}
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
Expand All @@ -241,7 +247,7 @@ export default function OfferHelp({
</div>
)}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
<label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="address">
Ubicación exacta <span className="text-red-500">*</span>
</label>
<AddressAutocomplete
Expand Down Expand Up @@ -362,12 +368,11 @@ export default function OfferHelp({

{/* Pueblos */}
<div>
<div className="flex flex-row justify-between mb-2 items-end">
<label className="block text-sm font-medium text-gray-700 mb-1">
Pueblo <span className="text-red-500">*</span>
</label>
</div>
<label className="block text-sm font-medium text-gray-700 mb-1" htmlFor="townName">
Pueblo <span className="text-red-500">*</span>
</label>
<select
id="townName"
name="pueblo"
value={formData.pueblo}
onChange={(e) => setFormData({ ...formData, pueblo: e.target.value })}
Expand Down
30 changes: 30 additions & 0 deletions tests/ofrecer-ayuda.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import { test, expect } from '@playwright/test';

test('should navigate to the "Ofrecer ayuda" page and fill in the data', async ({ page }) => {
await page.goto('/');

// Find the button with "Necesito ayuda"
await page.click('text=Quiero Ayudar');

await expect(page).toHaveURL('/ofrecer-ayuda');

// Fill in information
await page.getByLabel('Nombre completo').fill('Testing Testington');
await page.getByLabel('Número de teléfono').fill('123456789');
await page.getByLabel('Correo electrónico').fill('[email protected]');
await page.getByLabel('Ubicación exacta').fill('[email protected]');
await page.getByLabel('Alojamiento temporal').check();
expect(page.getByLabel('Alojamiento temporal')).toBeChecked();
await page.locator('#townName').selectOption('1');

await page
.getByLabel(
'Acepto seguir el protocolo de actuación y las indicaciones de las autoridades competentes. Entiendo que mi seguridad y la de los demás es prioritaria.',
)
.scrollIntoViewIfNeeded();
expect(
page.getByLabel(
'Acepto seguir el protocolo de actuación y las indicaciones de las autoridades competentes. Entiendo que mi seguridad y la de los demás es prioritaria.',
),
).toBeChecked();
});

0 comments on commit 05feba8

Please sign in to comment.