Tests de fenêtres modales

Les tests de fenêtres modales ne sont pas si différents, mais ils regroupent plusieurs des éléments vus précédemment dans un seul test.

Par exemple, pour un test de création d'issue dans une fenêtre modale, la "recette" pourrait ressembler à ceci.

test('il devrait être possible de créer une issue', async ({ page }) => {
  /**
   * Charger la page qui contient le bouton sur lequel appuyer pour lancer la fenêtre modale
   */
  await page.goto('http://localhost:4200/projets/1');


  // N'est pas montré dans l'exemple, mais on devrait s'assurer qu'un "mock"
  // existe pour retourner un projet pour l'id "1".

  // N'est pas montré dans l'exemple, mais vous assurer qu'un mock d'API est présent
  // pour la requête POST.

  /**
   * Clic du bouton qui lance le modal
   */ 
  await page.getByRole('button', { name: 'Ajouter une tâche' }).click();

  /**
   * Remplir le formulaire et cliquer sur le bouton pour confirmer
   */
  await page.getByPlaceholder('Nom').click();
  await page.getByPlaceholder('Nom').fill('Nouvelle tâche');
  await page.getByPlaceholder('Nom').press('Tab');
  await page.getByPlaceholder('Description').fill('Une description');


    // Attendre la complétion de l'appel d'API
    const responsePromise = page.waitForResponse('http://localhost:3000/projets/1/issues');
    await page.getByRole('button', { name: 'Créer' }).click();
    await responsePromise;

    // Assertions
    await expect(page.locator('.modal')).not.toBeVisible(); // Modal devrait être fermé
    await expect(page.locator('.issue-list')).toContainText('Un titre'); // Vérifier que l'issue apparait dans la liste
});