✅ Add login tests (#121)

Author: alejsdev

frontend/src/routes/_layout/$team/index.tsx

@@ -18,7 +18,7 @@ function Dashboard() {
   return (
     <>
       <Container maxW="full" p={12}>
-        <Box>
+        <Box data-testid="result">
           <Box fontSize="2xl" isTruncated maxWidth="250px">
             Hi,{" "}
             <Suspense fallback={<SkeletonText noOfLines={1} width={20} />}>

frontend/src/routes/login.tsx

@@ -7,6 +7,7 @@ import {
   FormControl,
   FormErrorMessage,
   FormLabel,
+  Heading,
   Icon,
   Input,
   InputGroup,
@@ -89,9 +90,7 @@ function Login() {
           gap={4}
         >
           <Box>
-            <Text fontWeight="bolder" fontSize="2xl">
-              Welcome!
-            </Text>
+            <Heading size="md">Welcome!</Heading>
             <Text fontSize="md" color="gray.500">
               Sign in to your account
             </Text>

frontend/tests/login.spec.ts

@@ -0,0 +1,140 @@
+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("Title is visible", async ({ page }) => {
+  await page.goto("/login")
+
+  await expect(page.getByRole("heading", { name: "Welcome!" })).toBeVisible()
+})
+
+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("Sign Up link is visible", async ({ page }) => {
+  await page.goto("/login")
+
+  await expect(page.getByRole("link", { name: "Sign Up" })).toBeVisible()
+})
+
+test("Log in with valid email and password ", async ({ page }) => {
+  await page.goto("/login")
+
+  await fillForm(page, "[email protected]", "changethis")
+  await page.getByRole("button", { name: "Log In" }).click()
+
+  await page.waitForURL("/")
+
+  await expect(page.getByTestId("result")).toContainText(
+    "Hi, fastapi admin 👋🏼",
+  )
+})
+
+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, "[email protected]", "changethat")
+  await page.getByRole("button", { name: "Log In" }).click()
+
+  await expect(page.getByText("Incorrect email or password")).toBeVisible()
+})
+
+test("User session is maintained after login", async ({ page }) => {
+  await page.goto("/login")
+
+  await fillForm(page, "[email protected]", "changethis")
+  await page.getByRole("button", { name: "Log In" }).click()
+
+  await page.waitForURL("/")
+  await page.reload()
+  await page.waitForURL("/")
+  await expect(page.getByTestId("result")).toContainText(
+    "Hi, fastapi admin 👋🏼",
+  )
+})
+
+// Log out
+
+test("Successful log out", async ({ page }) => {
+  await page.goto("/login")
+
+  await fillForm(page, "[email protected]", "changethis")
+  await page.getByRole("button", { name: "Log In" }).click()
+
+  await page.waitForURL("/")
+
+  await expect(page.getByTestId("result")).toContainText(
+    "Hi, fastapi admin 👋🏼",
+  )
+
+  await page.getByRole('button', { name: 'fastapi admin' }).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, "[email protected]", "changethis")
+  await page.getByRole("button", { name: "Log In" }).click()
+
+  await page.waitForURL("/")
+
+  await expect(page.getByTestId("result")).toContainText(
+    "Hi, fastapi admin 👋🏼",
+  )
+
+  await page.getByRole('button', { name: 'fastapi admin' }).click();
+  await page.getByRole('menuitem', { name: 'Log out' }).click();
+  await page.waitForURL("/login")
+
+  await page.goto("/settings")
+  await page.waitForURL("/login?redirect=%2Fsettings")
+})