From 091b1ad562fab323513f2788c147bdf33c1170f5 Mon Sep 17 00:00:00 2001
From: Maciek Sitkowski <58401630+sitek94@users.noreply.github.com>
Date: Thu, 5 Oct 2023 12:16:13 +0200
Subject: [PATCH] test(e2e): add E2E tests for signout-modal ui component
 (#51772)

Co-authored-by: Naomi Carrigan <nhcarrigan@gmail.com>
---
 e2e/signout-modal.spec.ts | 66 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 e2e/signout-modal.spec.ts

diff --git a/e2e/signout-modal.spec.ts b/e2e/signout-modal.spec.ts
new file mode 100644
index 00000000000..2667a860390
--- /dev/null
+++ b/e2e/signout-modal.spec.ts
@@ -0,0 +1,66 @@
+import { test, expect } from '@playwright/test';
+import translations from '../client/i18n/locales/english/translations.json';
+
+test.use({ storageState: 'playwright/.auth/certified-user.json' });
+
+test.beforeEach(async ({ page }) => {
+  await page.goto('/');
+});
+
+test.afterEach(async ({ page }) => {
+  await page.close();
+});
+
+test.describe('Signout Modal component', () => {
+  test('renders the modal correctly', async ({ page }) => {
+    await page.getByRole('button', { name: translations.buttons.menu }).click();
+    await page
+      .getByRole('button', { name: translations.buttons['sign-out'] })
+      .click();
+
+    await expect(page.getByText(translations.signout.heading)).toBeVisible();
+    await expect(page.getByText(translations.signout.p1)).toBeVisible();
+    await expect(page.getByText(translations.signout.p2)).toBeVisible();
+
+    await expect(
+      page.getByRole('button', { name: translations.signout.nevermind })
+    ).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: translations.signout.certain })
+    ).toBeVisible();
+    await expect(
+      page.getByRole('button', { name: translations.buttons.close })
+    ).toBeVisible();
+  });
+
+  test('signs out and redirects to /learn after user confirms they want to sign out', async ({
+    page
+  }) => {
+    await page.getByRole('button', { name: translations.buttons.menu }).click();
+    await page
+      .getByRole('button', { name: translations.buttons['sign-out'] })
+      .click();
+
+    await page
+      .getByRole('button', { name: translations.signout.certain })
+      .click();
+
+    await expect(page).toHaveURL(/.*\/learn\/?$/);
+  });
+
+  test('closes modal after user cancels signing out', async ({ page }) => {
+    await page.getByRole('button', { name: translations.buttons.menu }).click();
+    await page
+      .getByRole('button', { name: translations.buttons['sign-out'] })
+      .click();
+
+    await page
+      .getByRole('button', { name: translations.signout.nevermind })
+      .click();
+
+    await expect(page).toHaveURL('/');
+    await expect(
+      page.getByText(translations.signout.heading)
+    ).not.toBeVisible();
+  });
+});