From a6fbe9df64ef59dc38c36a38b63ff9ac7ae1d9f9 Mon Sep 17 00:00:00 2001
From: Alejandra <90076947+alejsdev@users.noreply.github.com>
Date: Mon, 22 Jul 2024 18:04:29 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20Login=20e2e=20tests=20(#1264)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Sebastián Ramírez <tiangolo@gmail.com>
---
 frontend/src/components/Common/UserMenu.tsx |   1 +
 frontend/tests/example.spec.ts              |   8 --
 frontend/tests/login.spec.ts                | 114 ++++++++++++++++++++
 3 files changed, 115 insertions(+), 8 deletions(-)
 delete mode 100644 frontend/tests/example.spec.ts
 create mode 100644 frontend/tests/login.spec.ts

diff --git a/frontend/src/components/Common/UserMenu.tsx b/frontend/src/components/Common/UserMenu.tsx
index 324dd92..e3d54ac 100644
--- a/frontend/src/components/Common/UserMenu.tsx
+++ b/frontend/src/components/Common/UserMenu.tsx
@@ -35,6 +35,7 @@ const UserMenu = () => {
             icon={<FaUserAstronaut color="white" fontSize="18px" />}
             bg="ui.main"
             isRound
+            data-testid="user-menu"
           />
           <MenuList>
             <MenuItem icon={<FiUser fontSize="18px" />} as={Link} to="settings">
diff --git a/frontend/tests/example.spec.ts b/frontend/tests/example.spec.ts
deleted file mode 100644
index f5dc2e7..0000000
--- a/frontend/tests/example.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { test, expect } from '@playwright/test';
-
-test('has title', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
-
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Playwright/);
-});
diff --git a/frontend/tests/login.spec.ts b/frontend/tests/login.spec.ts
new file mode 100644
index 0000000..eb7d5e4
--- /dev/null
+++ b/frontend/tests/login.spec.ts
@@ -0,0 +1,114 @@
+import { type Page, expect, test } from "@playwright/test"
+
+test.use({ storageState: { cookies: [], origins: [] } })
+
+type OptionsType = {
+  exact?: boolean
+}
+
+const fillForm = async (page: Page, email: string, password: string) => {
+  await page.getByPlaceholder("Email").fill(email)
+  await page.getByPlaceholder("Password", { exact: true }).fill(password)
+}
+
+const verifyInput = async (
+  page: Page,
+  placeholder: string,
+  options?: OptionsType,
+) => {
+  const input = page.getByPlaceholder(placeholder, options)
+  await expect(input).toBeVisible()
+  await expect(input).toHaveText("")
+  await expect(input).toBeEditable()
+}
+
+test("Inputs are visible, empty and editable", async ({ page }) => {
+  await page.goto("/login")
+
+  await verifyInput(page, "Email")
+  await verifyInput(page, "Password", { exact: true })
+})
+
+test("Log In button is visible", async ({ page }) => {
+  await page.goto("/login")
+
+  await expect(page.getByRole("button", { name: "Log In" })).toBeVisible()
+})
+
+test("Forgot Password link is visible", async ({ page }) => {
+  await page.goto("/login")
+
+  await expect(
+    page.getByRole("link", { name: "Forgot password?" }),
+  ).toBeVisible()
+})
+
+test("Log in with valid email and password ", async ({ page }) => {
+  await page.goto("/login")
+
+  await fillForm(page, "admin@example.com", "changethis")
+  await page.getByRole("button", { name: "Log In" }).click()
+
+  await page.waitForURL("/")
+
+  await expect(
+    page.getByText("Welcome back, nice to see you again!"),
+  ).toBeVisible()
+})
+
+test("Log in with invalid email", async ({ page }) => {
+  await page.goto("/login")
+
+  await fillForm(page, "invalidemail", "changethis")
+  await page.getByRole("button", { name: "Log In" }).click()
+
+  await expect(page.getByText("Invalid email address")).toBeVisible()
+})
+
+test("Log in with invalid password", async ({ page }) => {
+  await page.goto("/login")
+
+  await fillForm(page, "admin@example.com", "changethat")
+  await page.getByRole("button", { name: "Log In" }).click()
+
+  await expect(page.getByText("Incorrect email or password")).toBeVisible()
+})
+
+// Log out
+
+test("Successful log out", async ({ page }) => {
+  await page.goto("/login")
+
+  await fillForm(page, "admin@example.com", "changethis")
+  await page.getByRole("button", { name: "Log In" }).click()
+
+  await page.waitForURL("/")
+
+  await expect(
+    page.getByText("Welcome back, nice to see you again!"),
+  ).toBeVisible()
+
+  await page.getByTestId("user-menu").click()
+  await page.getByRole("menuitem", { name: "Log out" }).click()
+  await page.waitForURL("/login")
+})
+
+test("Logged-out user cannot access protected routes", async ({ page }) => {
+  await page.goto("/login")
+
+  await fillForm(page, "admin@example.com", "changethis")
+  await page.getByRole("button", { name: "Log In" }).click()
+
+  await page.waitForURL("/")
+
+  await expect(
+    page.getByText("Welcome back, nice to see you again!"),
+  ).toBeVisible()
+
+  await page.getByTestId("user-menu").click()
+  await page.getByRole("menuitem", { name: "Log out" }).click()
+  await page.waitForURL("/login")
+
+  await page.goto("/settings")
+  await page.waitForURL("/login")
+})