Testing with API Mocking | Noroff Front-end Development

Understanding API Mocking

In the last lesson, we tested the login form using a real test user account. That worked because logging in doesn’t change anything in the database.

But registration is different - it creates new users in the database. This means:

We can’t use real API calls in our tests
Each test would create a new user
The database would quickly fill up with test users
Tests would fail when trying to register the same email twice

This is where API mocking comes in. Instead of letting our test actually call the API, we:

Intercept the request before it reaches the API
Send back a fake response that looks like the real API
Test how our app handles these responses

It’s like having a fake API that we control completely.

How Mocking Works in Playwright

// This catches any request to our registration endpoint
await page.route("*/**/holidaze/auth/register", (route) =>
  // We send back a fake successful response
  route.fulfill({
    status: 200,
    json: { name: "Test", email: "test@noroff.no" },
  })
);

When the registration form makes its API call:

Playwright catches it using the URL pattern
Instead of sending it to the real API it immediately returns our fake response

Complete Test Example

import { test, expect } from "@playwright/test";

test.describe("registration", () => {
  test("successful registration shows success message", async ({ page }) => {
    await page.route("*/**/holidaze/auth/register", (route) =>
      route.fulfill({
        status: 200,
        json: { name: "Test", email: "test@noroff.no" },
      })
    );

    // Go to register page
    await page.goto("/auth/register");

    // Fill the form
    await page.locator('input[name="name"]').fill("Test User");
    await page.locator('input[name="email"]').fill("success@stud.noroff.no");
    await page.locator('input[name="password"]').fill("password123");

    // Click register button
    await page.getByRole("button", { name: "Register" }).click();

    // Check for success message
    await expect(page.locator("#message-container")).toContainText(
      "Registration successful"
    );
  });

  test("failed registration shows error message", async ({ page }) => {
    await page.route("*/**/holidaze/auth/register", (route) =>
      route.fulfill({
        status: 400,
        json: { message: "Registration failed" },
      })
    );
    await page.goto("/auth/register");

    // Fill the form with an email that will trigger a failure
    await page.locator('input[name="name"]').fill("Test User");
    await page.locator('input[name="email"]').fill("fail@stud.noroff.no");
    await page.locator('input[name="password"]').fill("password123");

    await page.getByRole("button", { name: "Register" }).click();

    // Check for error message
    await expect(page.locator("#message-container")).toContainText(
      "Registration failed"
    );
  });
});

Let’s break down what’s happening:

Setting up the Mock Response:

await page.route("*/**/holidaze/auth/register", (route) =>
  route.fulfill({
    status: 200,
    json: { name: "Test", email: "test@noroff.no" },
  })
);

The URL pattern */**/holidaze/auth/register catches the API call your registration form makes
When the form submits, instead of going to the real API, Playwright catches it
route.fulfill() sends back a fake response immediately
We set status: 200 to simulate a successful API response

Testing When Things Go Wrong:

test("failed registration shows error message", async ({ page }) => {
  await page.route("*/**/holidaze/auth/register", (route) =>
    route.fulfill({
      status: 400,
      json: { message: "Registration failed" },
    })
  );

  // Rest of the test...
});

Uses the same URL pattern to catch the API call
This time we set status: 400 to simulate a failed registration

Why This Approach Works

Reliability:

- Tests don't depend on API availability
- No real users created

Speed:

- Mock responses are instant
- No waiting for real API
- Tests run faster

Control:

- We can easily test both success and error cases
- Same results every time

Running the Tests

npx playwright test

What We Learned

In this lesson, we:

Learned why API mocking is needed for registration tests (to avoid creating real users)
Used page.route() to catch API calls and send back fake responses
Created tests for both successful and failed registration
Discovered how mocking makes tests faster and more reliable

Remember:

Test both success and error cases
Mock APIs when testing features that create or change data

Tags: