Tests de la page d'accueil

package.json

@@ -7,7 +7,8 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "e2e": "playwright test",
+    "e2e": "npx playwright test",
+    "e2e-ui": "npx playwright test --ui",
     "predev": "react-dsfr update-icons",
     "prebuild": "react-dsfr update-icons",
     "prepare": "husky"

tests/home-page.spec.ts

@@ -0,0 +1,71 @@
+import { test, expect } from '@playwright/test';
+import { HomePage } from '@/tests/pages/home-page';
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.describe("Page d'accueil", () => {
+  test('doit contenir les éléments nécessaires', async ({ page }) => {
+    const home = new HomePage(page);
+    await expect(home.boutonCarte).toBeVisible();
+    await expect(home.boutonCarte).toHaveAttribute('href', /carte/);
+    await expect(home.titreBdd).toBeVisible();
+    await expect(home.titreOutils).toBeVisible();
+    await expect(home.titreCasUsage).toBeVisible();
+    await expect(home.boutonFaq).toBeVisible();
+    await expect(home.boutonFaq).toHaveAttribute('href', /faq/);
+  });
+
+  test('doit contenir le champ de recherche rapide pour la carte qui fonctionne avec clavier', async ({
+    page,
+  }) => {
+    const home = new HomePage(page);
+    await expect(home.champRechercheCarte).toBeVisible();
+    await home.champRechercheCarte.scrollIntoViewIfNeeded();
+    await home.champRechercheCarte.fill('73 Av. de Paris, 94160 Saint-Mandé');
+    await expect(home.suggestionsRechercheCarte).toBeVisible();
+    await home.champRechercheCarte.press('ArrowDown');
+    await home.champRechercheCarte.press('Enter');
+    await page.waitForURL('**/carte*');
+  });
+
+  test('doit contenir le champ de recherche rapide pour la carte qui fonctionne avec la souris', async ({
+    page,
+  }) => {
+    const home = new HomePage(page);
+    await expect(home.champRechercheCarte).toBeVisible();
+    await home.champRechercheCarte.scrollIntoViewIfNeeded();
+    await home.champRechercheCarte.fill('73 Av. de Paris, 94160 Saint-Mandé');
+    await home.suggestionsRechercheCarte
+      .locator('[class*="suggestion"]')
+      .first()
+      .click();
+    await page.waitForURL('**/carte*');
+  });
+
+  test("doit contenir un formulaire d'inscription à l'infolettre fonctionnel", async ({
+    page,
+    context,
+  }) => {
+    const email = 'email123@beta.gouv.fr';
+    await page.route(/sibforms\.com/, (route) =>
+      route.fulfill({
+        status: 200,
+        body: JSON.stringify({}),
+      }),
+    );
+
+    const home = new HomePage(page);
+    await expect(home.champInfolettre).toBeVisible();
+    await expect(home.boutonInfolettre).toBeVisible();
+    await home.champInfolettre.fill(email);
+    const [request] = await Promise.all([
+      page.waitForRequest(/sibforms\.com/),
+      home.boutonInfolettre.click(),
+    ]);
+    expect(request.url()).toContain('sibforms.com');
+    expect(request.method()).toBe('POST');
+    expect(request.postData()).toContain(email);
+  });
+});

tests/pages/home-page.ts

@@ -0,0 +1,38 @@
+import { RNBPage } from '@/tests/pages/page';
+import { Locator, Page } from '@playwright/test';
+
+export class HomePage extends RNBPage {
+  readonly boutonCarte: Locator;
+  readonly champRechercheCarte: Locator;
+  readonly boutonRechercheCarte: Locator;
+  readonly suggestionsRechercheCarte: Locator;
+  readonly titreBdd: Locator;
+  readonly titreOutils: Locator;
+  readonly titreCasUsage: Locator;
+  readonly boutonFaq: Locator;
+  readonly champInfolettre: Locator;
+  readonly boutonInfolettre: Locator;
+
+  constructor(page: Page) {
+    super(page);
+
+    this.boutonCarte = page.locator('a', {
+      hasText: 'Voir la carte des bâtiments',
+    });
+    this.champRechercheCarte = page.getByPlaceholder(/un identifiant RNB/);
+    this.boutonRechercheCarte = page.locator(
+      '.fr-search-bar button[type="submit"]',
+    );
+    this.suggestionsRechercheCarte = page.locator(
+      '[class*="addressAutocomplete_autocomplete_suggestions"]',
+    );
+    this.titreBdd = page
+      .locator('h2')
+      .getByText('Enrichissez vos bases de données bâtimentaires');
+    this.titreOutils = page.locator('h2').getByText('Outils et services');
+    this.titreCasUsage = page.locator('h2').getByText("Cas d'usage");
+    this.boutonFaq = page.getByText('Consulter la Foire aux Questions');
+    this.champInfolettre = page.getByPlaceholder('Votre adresse email');
+    this.boutonInfolettre = page.locator('[value="S\'inscrire"]');
+  }
+}

tests/pages/page.ts

@@ -0,0 +1,9 @@
+import { type Page } from '@playwright/test';
+
+export abstract class RNBPage {
+  readonly page: Page;
+
+  protected constructor(page: Page) {
+    this.page = page;
+  }
+}