📦 cloudflare / vinext

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118import { test, expect } from "@playwright/test";

const BASE = "http://localhost:4173";

test.describe("Middleware (Pages Router)", () => {
  test("redirects /old-page to /about", async ({ page }) => {
    const response = await page.goto(`${BASE}/old-page`);

    // After redirect, URL should be /about
    expect(page.url()).toBe(`${BASE}/about`);

    // The about page content should be visible
    await expect(page.locator("h1")).toHaveText("About");

    // The response chain should have a redirect (Playwright follows it)
    expect(response?.ok()).toBe(true);
  });

  test("rewrites /rewritten to serve /ssr page content", async ({ page }) => {
    const response = await page.goto(`${BASE}/rewritten`);

    // URL should remain /rewritten (not change to /ssr)
    expect(page.url()).toBe(`${BASE}/rewritten`);

    // But the content should be from the /ssr page
    await expect(page.locator("h1")).toHaveText("Server-Side Rendered");
    await expect(page.locator('[data-testid="message"]')).toHaveText(
      "Hello from getServerSideProps",
    );

    expect(response?.ok()).toBe(true);
  });

  test("blocks /blocked with 403 status", async ({ page }) => {
    const response = await page.goto(`${BASE}/blocked`);

    expect(response?.status()).toBe(403);

    // Body should contain the denial message
    const body = await page.textContent("body");
    expect(body).toContain("Access Denied");
  });

  test("injects x-custom-middleware header on matched pages", async ({ page }) => {
    // Use the API response to check headers since page.goto doesn't expose
    // response headers easily. Use a route handler instead.
    const response = await page.goto(`${BASE}/about`);
    const headers = response?.headers();

    expect(headers?.["x-custom-middleware"]).toBe("active");
  });

  test("does not inject middleware header on /api routes", async ({ request }) => {
    // The matcher excludes /api paths
    const response = await request.get(`${BASE}/api/hello`);

    expect(response.status()).toBe(200);
    expect(response.headers()["x-custom-middleware"]).toBeUndefined();
  });

  test("sets middleware header on the index page", async ({ page }) => {
    const response = await page.goto(`${BASE}/`);
    const headers = response?.headers();

    expect(headers?.["x-custom-middleware"]).toBe("active");
    await expect(page.locator("h1")).toHaveText("Hello, vinext!");
  });

  test("redirect preserves functionality of target page", async ({ page }) => {
    // After redirect from /old-page to /about, verify the page is fully functional
    await page.goto(`${BASE}/old-page`);
    await expect(page.locator("h1")).toHaveText("About");

    // The about page should have a link back to home
    const homeLink = page.locator('a[href="/"]');
    await expect(homeLink).toBeVisible();

    // Click the home link — client-side nav should work
    await page.evaluate(() => {
      (window as any).__NAV_MARKER__ = true;
    });
    await homeLink.click();
    await expect(page.locator("h1")).toHaveText("Hello, vinext!");

    // Client-side nav should have worked (no full page reload)
    const marker = await page.evaluate(() => (window as any).__NAV_MARKER__);
    expect(marker).toBe(true);
  });

  test("rewrite preserves getServerSideProps data", async ({ page }) => {
    await page.goto(`${BASE}/rewritten`);

    // The rewritten page should have the SSR data from getServerSideProps
    await expect(page.locator('[data-testid="message"]')).toHaveText(
      "Hello from getServerSideProps",
    );

    // __NEXT_DATA__ should be present for hydration
    const nextData = await page.evaluate(
      () => (window as any).__NEXT_DATA__,
    );
    expect(nextData).toBeDefined();
    expect(nextData.props.pageProps).toBeDefined();
  });

  test("middleware does not affect static file requests", async ({ request }) => {
    // The matcher pattern excludes paths with dots (static files)
    // and paths starting with /_next. This is implicit from the matcher
    // config: /((?!api|_next|favicon\.ico).*)
    // We verify that /_next and /favicon.ico paths aren't intercepted

    // /favicon.ico should not get middleware headers
    const faviconRes = await request.get(`${BASE}/favicon.ico`);
    // May be 404 if no favicon exists, but shouldn't have middleware header
    expect(faviconRes.headers()["x-custom-middleware"]).toBeUndefined();
  });
});