Add Playwright testing framework and implement initial tests; update .gitignore and package files

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [main, master]
+  pull_request:
+    branches: [main, master]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: lts/*
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -255,3 +255,9 @@ Thumbs.db
 
 # Backup files
 *.bak
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.vscode/extensions.json

@@ -2,6 +2,7 @@
   "recommendations": [
     "prisma.prisma",
     "dbaeumer.vscode-eslint",
-    "rvest.vs-code-prettier-eslint"
+    "rvest.vs-code-prettier-eslint",
+    "ms-playwright.playwright"
   ]
 }

e2e/example.spec.ts

@@ -0,0 +1,20 @@
+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/);
+});
+
+test("get started link", async ({ page }) => {
+  await page.goto("https://playwright.dev/");
+
+  // Click the get started link.
+  await page.getByRole("link", { name: "Get started" }).click();
+
+  // Expects page to have a heading with the name of Installation.
+  await expect(
+    page.getByRole("heading", { name: "Installation" })
+  ).toBeVisible();
+});

package-lock.json

@@ -38,6 +38,7 @@
       "devDependencies": {
         "@eslint/eslintrc": "^3.3.1",
         "@eslint/js": "^9.27.0",
+        "@playwright/test": "^1.52.0",
         "@tailwindcss/postcss": "^4.1.7",
         "@types/bcryptjs": "^2.4.2",
         "@types/node": "^22.15.21",
@@ -1069,6 +1070,22 @@
         "url": "https://opencollective.com/pkgr"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.52.0.tgz",
+      "integrity": "sha512-uh6W7sb55hl7D6vsAeA+V2p5JnlAqzhqFyF0VcJkKZXkgnFcVG9PziERRHQfPLfNGx1C292a4JqbWzhR8L4R1g==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright": "1.52.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@prisma/client": {
       "version": "6.8.2",
       "resolved": "https://registry.npmjs.org/@prisma/client/-/client-6.8.2.tgz",
@@ -4655,6 +4672,21 @@
         "node": ">=12.20.0"
       }
     },
+    "node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/function-bind": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
@@ -7374,6 +7406,38 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.52.0.tgz",
+      "integrity": "sha512-JAwMNMBlxJ2oD1kce4KPtMkDeKGHQstdpFPcPH3maElAXon/QZeTvtsfXmTMRyO9TslfoYOXkSsvao2nE1ilTw==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "playwright-core": "1.52.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.52.0.tgz",
+      "integrity": "sha512-l2osTgLXSMeuLZOML9qYODUQoPPnUsKsb5/P6LJ2e6uPKXUdPK5WYhN4z03G+YNbWmGDY4YENauNu4ZKczreHg==",
+      "devOptional": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",

package.json

@@ -34,6 +34,7 @@
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.27.0",
+    "@playwright/test": "^1.52.0",
     "@tailwindcss/postcss": "^4.1.7",
     "@types/bcryptjs": "^2.4.2",
     "@types/node": "^22.15.21",

pages/api/reset-password.ts

@@ -1,34 +1,46 @@
 import { prisma } from "../../lib/prisma";
 import bcrypt from "bcryptjs";
-import type { IncomingMessage, ServerResponse } from "http";
-
-type NextApiRequest = IncomingMessage & {
-  body: {
-    token: string;
-    password: string;
-    [key: string]: unknown;
-  };
-};
-
-type NextApiResponse = ServerResponse & {
-  status: (code: number) => NextApiResponse;
-  json: (data: Record<string, unknown>) => void;
-  end: () => void;
-};
+import type { NextApiRequest, NextApiResponse } from "next"; // Import official Next.js types
 
 export default async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse
+  req: NextApiRequest, // Use official NextApiRequest
+  res: NextApiResponse // Use official NextApiResponse
 ) {
-  if (req.method !== "POST") return res.status(405).end();
-  const { token, password } = req.body;
+  if (req.method !== "POST") {
+    res.setHeader("Allow", ["POST"]); // Good practice to set Allow header for 405
+    return res.status(405).end(`Method ${req.method} Not Allowed`);
+  }
+
+  // It's good practice to explicitly type the expected body for clarity and safety
+  const { token, password } = req.body as { token?: string; password?: string };
+
+  if (!token || !password) {
+    return res.status(400).json({ error: "Token and password are required." });
+  }
+
+  if (password.length < 8) {
+    // Example: Add password complexity rule
+    return res
+      .status(400)
+      .json({ error: "Password must be at least 8 characters long." });
+  }
+
+  try {
     const user = await prisma.user.findFirst({
       where: {
         resetToken: token,
         resetTokenExpiry: { gte: new Date() },
       },
     });
-  if (!user) return res.status(400).json({ error: "Invalid or expired token" });
+
+    if (!user) {
+      return res
+        .status(400)
+        .json({
+          error:
+            "Invalid or expired token. Please request a new password reset.",
+        });
+    }
 
     const hash = await bcrypt.hash(password, 10);
     await prisma.user.update({
@@ -39,5 +51,18 @@ export default async function handler(
         resetTokenExpiry: null,
       },
     });
-  res.status(200).end();
+
+    // Instead of just res.status(200).end(), send a success message
+    return res
+      .status(200)
+      .json({ message: "Password has been reset successfully." });
+  } catch (error) {
+    console.error("Reset password error:", error); // Log the error for server-side debugging
+    // Provide a generic error message to the client
+    return res
+      .status(500)
+      .json({
+        error: "An internal server error occurred. Please try again later.",
+      });
+  }
 }

playwright.config.ts

@@ -0,0 +1,79 @@
+import { defineConfig, devices } from "@playwright/test";
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env.development') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: "./e2e",
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: "html",
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://127.0.0.1:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: "on-first-retry",
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+
+    {
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
+    },
+
+    {
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
+    },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: "npm run start",
+    url: "http://127.0.0.1:3000",
+    reuseExistingServer: !process.env.CI,
+  },
+});

tests-examples/demo-todo-app.spec.ts

@@ -0,0 +1,489 @@
+import { test, expect, type Page } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+  await page.goto("https://demo.playwright.dev/todomvc");
+});
+
+const TODO_ITEMS = [
+  "buy some cheese",
+  "feed the cat",
+  "book a doctors appointment",
+] as const;
+
+test.describe("New Todo", () => {
+  test("should allow me to add todo items", async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder("What needs to be done?");
+
+    // Create 1st todo.
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press("Enter");
+
+    // Make sure the list only has one todo item.
+    await expect(page.getByTestId("todo-title")).toHaveText([TODO_ITEMS[0]]);
+
+    // Create 2nd todo.
+    await newTodo.fill(TODO_ITEMS[1]);
+    await newTodo.press("Enter");
+
+    // Make sure the list now has two todo items.
+    await expect(page.getByTestId("todo-title")).toHaveText([
+      TODO_ITEMS[0],
+      TODO_ITEMS[1],
+    ]);
+
+    await checkNumberOfTodosInLocalStorage(page, 2);
+  });
+
+  test("should clear text input field when an item is added", async ({
+    page,
+  }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder("What needs to be done?");
+
+    // Create one todo item.
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press("Enter");
+
+    // Check that input is empty.
+    await expect(newTodo).toBeEmpty();
+    await checkNumberOfTodosInLocalStorage(page, 1);
+  });
+
+  test("should append new items to the bottom of the list", async ({
+    page,
+  }) => {
+    // Create 3 items.
+    await createDefaultTodos(page);
+
+    // create a todo count locator
+    const todoCount = page.getByTestId("todo-count");
+
+    // Check test using different methods.
+    await expect(page.getByText("3 items left")).toBeVisible();
+    await expect(todoCount).toHaveText("3 items left");
+    await expect(todoCount).toContainText("3");
+    await expect(todoCount).toHaveText(/3/);
+
+    // Check all items in one call.
+    await expect(page.getByTestId("todo-title")).toHaveText(TODO_ITEMS);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+});
+
+test.describe("Mark all as completed", () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test.afterEach(async ({ page }) => {
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test("should allow me to mark all items as completed", async ({ page }) => {
+    // Complete all todos.
+    await page.getByLabel("Mark all as complete").check();
+
+    // Ensure all todos have 'completed' class.
+    await expect(page.getByTestId("todo-item")).toHaveClass([
+      "completed",
+      "completed",
+      "completed",
+    ]);
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+  });
+
+  test("should allow me to clear the complete state of all items", async ({
+    page,
+  }) => {
+    const toggleAll = page.getByLabel("Mark all as complete");
+    // Check and then immediately uncheck.
+    await toggleAll.check();
+    await toggleAll.uncheck();
+
+    // Should be no completed classes.
+    await expect(page.getByTestId("todo-item")).toHaveClass(["", "", ""]);
+  });
+
+  test("complete all checkbox should update state when items are completed / cleared", async ({
+    page,
+  }) => {
+    const toggleAll = page.getByLabel("Mark all as complete");
+    await toggleAll.check();
+    await expect(toggleAll).toBeChecked();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+    // Uncheck first todo.
+    const firstTodo = page.getByTestId("todo-item").nth(0);
+    await firstTodo.getByRole("checkbox").uncheck();
+
+    // Reuse toggleAll locator and make sure its not checked.
+    await expect(toggleAll).not.toBeChecked();
+
+    await firstTodo.getByRole("checkbox").check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 3);
+
+    // Assert the toggle all is checked again.
+    await expect(toggleAll).toBeChecked();
+  });
+});
+
+test.describe("Item", () => {
+  test("should allow me to mark items as complete", async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder("What needs to be done?");
+
+    // Create two items.
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press("Enter");
+    }
+
+    // Check first item.
+    const firstTodo = page.getByTestId("todo-item").nth(0);
+    await firstTodo.getByRole("checkbox").check();
+    await expect(firstTodo).toHaveClass("completed");
+
+    // Check second item.
+    const secondTodo = page.getByTestId("todo-item").nth(1);
+    await expect(secondTodo).not.toHaveClass("completed");
+    await secondTodo.getByRole("checkbox").check();
+
+    // Assert completed class.
+    await expect(firstTodo).toHaveClass("completed");
+    await expect(secondTodo).toHaveClass("completed");
+  });
+
+  test("should allow me to un-mark items as complete", async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder("What needs to be done?");
+
+    // Create two items.
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press("Enter");
+    }
+
+    const firstTodo = page.getByTestId("todo-item").nth(0);
+    const secondTodo = page.getByTestId("todo-item").nth(1);
+    const firstTodoCheckbox = firstTodo.getByRole("checkbox");
+
+    await firstTodoCheckbox.check();
+    await expect(firstTodo).toHaveClass("completed");
+    await expect(secondTodo).not.toHaveClass("completed");
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    await firstTodoCheckbox.uncheck();
+    await expect(firstTodo).not.toHaveClass("completed");
+    await expect(secondTodo).not.toHaveClass("completed");
+    await checkNumberOfCompletedTodosInLocalStorage(page, 0);
+  });
+
+  test("should allow me to edit an item", async ({ page }) => {
+    await createDefaultTodos(page);
+
+    const todoItems = page.getByTestId("todo-item");
+    const secondTodo = todoItems.nth(1);
+    await secondTodo.dblclick();
+    await expect(secondTodo.getByRole("textbox", { name: "Edit" })).toHaveValue(
+      TODO_ITEMS[1]
+    );
+    await secondTodo
+      .getByRole("textbox", { name: "Edit" })
+      .fill("buy some sausages");
+    await secondTodo.getByRole("textbox", { name: "Edit" }).press("Enter");
+
+    // Explicitly assert the new text value.
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      "buy some sausages",
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, "buy some sausages");
+  });
+});
+
+test.describe("Editing", () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test("should hide other controls when editing", async ({ page }) => {
+    const todoItem = page.getByTestId("todo-item").nth(1);
+    await todoItem.dblclick();
+    await expect(todoItem.getByRole("checkbox")).not.toBeVisible();
+    await expect(
+      todoItem.locator("label", {
+        hasText: TODO_ITEMS[1],
+      })
+    ).not.toBeVisible();
+    await checkNumberOfTodosInLocalStorage(page, 3);
+  });
+
+  test("should save edits on blur", async ({ page }) => {
+    const todoItems = page.getByTestId("todo-item");
+    await todoItems.nth(1).dblclick();
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .fill("buy some sausages");
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .dispatchEvent("blur");
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      "buy some sausages",
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, "buy some sausages");
+  });
+
+  test("should trim entered text", async ({ page }) => {
+    const todoItems = page.getByTestId("todo-item");
+    await todoItems.nth(1).dblclick();
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .fill("    buy some sausages    ");
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .press("Enter");
+
+    await expect(todoItems).toHaveText([
+      TODO_ITEMS[0],
+      "buy some sausages",
+      TODO_ITEMS[2],
+    ]);
+    await checkTodosInLocalStorage(page, "buy some sausages");
+  });
+
+  test("should remove the item if an empty text string was entered", async ({
+    page,
+  }) => {
+    const todoItems = page.getByTestId("todo-item");
+    await todoItems.nth(1).dblclick();
+    await todoItems.nth(1).getByRole("textbox", { name: "Edit" }).fill("");
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .press("Enter");
+
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test("should cancel edits on escape", async ({ page }) => {
+    const todoItems = page.getByTestId("todo-item");
+    await todoItems.nth(1).dblclick();
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .fill("buy some sausages");
+    await todoItems
+      .nth(1)
+      .getByRole("textbox", { name: "Edit" })
+      .press("Escape");
+    await expect(todoItems).toHaveText(TODO_ITEMS);
+  });
+});
+
+test.describe("Counter", () => {
+  test("should display the current number of todo items", async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder("What needs to be done?");
+
+    // create a todo count locator
+    const todoCount = page.getByTestId("todo-count");
+
+    await newTodo.fill(TODO_ITEMS[0]);
+    await newTodo.press("Enter");
+
+    await expect(todoCount).toContainText("1");
+
+    await newTodo.fill(TODO_ITEMS[1]);
+    await newTodo.press("Enter");
+    await expect(todoCount).toContainText("2");
+
+    await checkNumberOfTodosInLocalStorage(page, 2);
+  });
+});
+
+test.describe("Clear completed button", () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+  });
+
+  test("should display the correct text", async ({ page }) => {
+    await page.locator(".todo-list li .toggle").first().check();
+    await expect(
+      page.getByRole("button", { name: "Clear completed" })
+    ).toBeVisible();
+  });
+
+  test("should remove completed items when clicked", async ({ page }) => {
+    const todoItems = page.getByTestId("todo-item");
+    await todoItems.nth(1).getByRole("checkbox").check();
+    await page.getByRole("button", { name: "Clear completed" }).click();
+    await expect(todoItems).toHaveCount(2);
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test("should be hidden when there are no items that are completed", async ({
+    page,
+  }) => {
+    await page.locator(".todo-list li .toggle").first().check();
+    await page.getByRole("button", { name: "Clear completed" }).click();
+    await expect(
+      page.getByRole("button", { name: "Clear completed" })
+    ).toBeHidden();
+  });
+});
+
+test.describe("Persistence", () => {
+  test("should persist its data", async ({ page }) => {
+    // create a new todo locator
+    const newTodo = page.getByPlaceholder("What needs to be done?");
+
+    for (const item of TODO_ITEMS.slice(0, 2)) {
+      await newTodo.fill(item);
+      await newTodo.press("Enter");
+    }
+
+    const todoItems = page.getByTestId("todo-item");
+    const firstTodoCheck = todoItems.nth(0).getByRole("checkbox");
+    await firstTodoCheck.check();
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(firstTodoCheck).toBeChecked();
+    await expect(todoItems).toHaveClass(["completed", ""]);
+
+    // Ensure there is 1 completed item.
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    // Now reload.
+    await page.reload();
+    await expect(todoItems).toHaveText([TODO_ITEMS[0], TODO_ITEMS[1]]);
+    await expect(firstTodoCheck).toBeChecked();
+    await expect(todoItems).toHaveClass(["completed", ""]);
+  });
+});
+
+test.describe("Routing", () => {
+  test.beforeEach(async ({ page }) => {
+    await createDefaultTodos(page);
+    // make sure the app had a chance to save updated todos in storage
+    // before navigating to a new view, otherwise the items can get lost :(
+    // in some frameworks like Durandal
+    await checkTodosInLocalStorage(page, TODO_ITEMS[0]);
+  });
+
+  test("should allow me to display active items", async ({ page }) => {
+    const todoItem = page.getByTestId("todo-item");
+    await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check();
+
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole("link", { name: "Active" }).click();
+    await expect(todoItem).toHaveCount(2);
+    await expect(todoItem).toHaveText([TODO_ITEMS[0], TODO_ITEMS[2]]);
+  });
+
+  test("should respect the back button", async ({ page }) => {
+    const todoItem = page.getByTestId("todo-item");
+    await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check();
+
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+
+    await test.step("Showing all items", async () => {
+      await page.getByRole("link", { name: "All" }).click();
+      await expect(todoItem).toHaveCount(3);
+    });
+
+    await test.step("Showing active items", async () => {
+      await page.getByRole("link", { name: "Active" }).click();
+    });
+
+    await test.step("Showing completed items", async () => {
+      await page.getByRole("link", { name: "Completed" }).click();
+    });
+
+    await expect(todoItem).toHaveCount(1);
+    await page.goBack();
+    await expect(todoItem).toHaveCount(2);
+    await page.goBack();
+    await expect(todoItem).toHaveCount(3);
+  });
+
+  test("should allow me to display completed items", async ({ page }) => {
+    await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole("link", { name: "Completed" }).click();
+    await expect(page.getByTestId("todo-item")).toHaveCount(1);
+  });
+
+  test("should allow me to display all items", async ({ page }) => {
+    await page.getByTestId("todo-item").nth(1).getByRole("checkbox").check();
+    await checkNumberOfCompletedTodosInLocalStorage(page, 1);
+    await page.getByRole("link", { name: "Active" }).click();
+    await page.getByRole("link", { name: "Completed" }).click();
+    await page.getByRole("link", { name: "All" }).click();
+    await expect(page.getByTestId("todo-item")).toHaveCount(3);
+  });
+
+  test("should highlight the currently applied filter", async ({ page }) => {
+    await expect(page.getByRole("link", { name: "All" })).toHaveClass(
+      "selected"
+    );
+
+    //create locators for active and completed links
+    const activeLink = page.getByRole("link", { name: "Active" });
+    const completedLink = page.getByRole("link", { name: "Completed" });
+    await activeLink.click();
+
+    // Page change - active items.
+    await expect(activeLink).toHaveClass("selected");
+    await completedLink.click();
+
+    // Page change - completed items.
+    await expect(completedLink).toHaveClass("selected");
+  });
+});
+
+async function createDefaultTodos(page: Page) {
+  // create a new todo locator
+  const newTodo = page.getByPlaceholder("What needs to be done?");
+
+  for (const item of TODO_ITEMS) {
+    await newTodo.fill(item);
+    await newTodo.press("Enter");
+  }
+}
+
+async function checkNumberOfTodosInLocalStorage(page: Page, expected: number) {
+  return await page.waitForFunction((e) => {
+    return JSON.parse(localStorage["react-todos"]).length === e;
+  }, expected);
+}
+
+async function checkNumberOfCompletedTodosInLocalStorage(
+  page: Page,
+  expected: number
+) {
+  return await page.waitForFunction((e) => {
+    return (
+      JSON.parse(localStorage["react-todos"]).filter(
+        (todo: any) => todo.completed
+      ).length === e
+    );
+  }, expected);
+}
+
+async function checkTodosInLocalStorage(page: Page, title: string) {
+  return await page.waitForFunction((t) => {
+    return JSON.parse(localStorage["react-todos"])
+      .map((todo: any) => todo.title)
+      .includes(t);
+  }, title);
+}