Skip to content

Commit

Permalink
add client-side navigation tests in middleware features
Browse files Browse the repository at this point in the history
  • Loading branch information
@dario-piotrowicz
dario-piotrowicz committed Aug 2, 2023
1 parent 4448fcf commit 9dbefa1
Show file tree
Hide file tree
Showing 8 changed files with 176 additions and 39 deletions.
2 changes: 1 addition & 1 deletion .../assets/app/middleware-test/page/page.jsx → ...assets/app/middleware-test/pageA/page.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export default function Page() {

return (
<div>
<h1>Some Page</h1>
<h1>Page A</h1>
<h2>Headers</h2>
<p>The request contained the following headers:</p>
<ul>
Expand Down
27 changes: 27 additions & 0 deletions pages-e2e/features/appMiddleware/assets/app/middleware-test/pageB/page.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import Link from 'next/link';

export default function Page() {
const links = [
{
href: '/middleware-test/pageC?redirect-to-page-a',
text: 'go to page A via middleware redirect',
},
{
href: '/middleware-test/pageC?rewrite-to-page-a',
text: 'go to page C which is page A served via middleware rewrite',
},
];

return (
<div>
<h1>Page B</h1>
{links.map(({ href, text }) => (
<div key={href}>
<Link href={href}>{text}</Link>
</div>
))}
</div>
);
}

export const runtime = 'edge';
10 changes: 6 additions & 4 deletions pages-e2e/features/appMiddleware/assets/middleware.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,14 @@ export function middleware(request) {
return new NextResponse('The requested route is non-existent');
}

if (request.nextUrl.searchParams.has('rewrite-to-page')) {
return NextResponse.rewrite(new URL('/middleware-test/page', request.url));
if (request.nextUrl.searchParams.has('rewrite-to-page-a')) {
return NextResponse.rewrite(new URL('/middleware-test/pageA', request.url));
}

if (request.nextUrl.searchParams.has('redirect-to-page')) {
return NextResponse.redirect(new URL('/middleware-test/page', request.url));
if (request.nextUrl.searchParams.has('redirect-to-page-a')) {
return NextResponse.redirect(
new URL('/middleware-test/pageA', request.url),
);
}

if (request.nextUrl.searchParams.has('set-request-headers')) {
Expand Down
67 changes: 53 additions & 14 deletions pages-e2e/features/appMiddleware/middleware.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,12 +73,12 @@ describe('App Middleware', () => {
const assertVisible = getAssertVisible(page);

await page.goto(
`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page`,
`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page-a`,
);

await assertVisible('h1', { hasText: 'Page' });
await assertVisible('h1', { hasText: 'Page A' });
expect(page.url()).toEqual(
`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page`,
`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page-a`,
);
});

Expand All @@ -87,15 +87,12 @@ describe('App Middleware', () => {
const assertVisible = getAssertVisible(page);

await page.goto(
`${DEPLOYMENT_URL}/api/middleware-test/hello?redirect-to-page`,
`${DEPLOYMENT_URL}/api/middleware-test/hello?redirect-to-page-a`,
);

await assertVisible('h1', { hasText: 'Page' });
const url = page.url();
const fixedUrlForLocalTesting = url.replace('localhost', '127.0.0.1');
expect(fixedUrlForLocalTesting).toEqual(
`${DEPLOYMENT_URL}/middleware-test/page`,
);
await assertVisible('h1', { hasText: 'Page A' });
// Note: we can't match the full url because with redirects locally instead of 'localhost' we get '127.0.0.1'
expect(page.url()).toMatch(/.*\/middleware-test\/pageA$/);
});

test('request headers modification', async ({ expect }) => {
Expand All @@ -107,15 +104,15 @@ describe('App Middleware', () => {
const assertVisible = getAssertVisible(page);

await page.goto(
`${DEPLOYMENT_URL}/middleware-test/page?set-request-headers`,
`${DEPLOYMENT_URL}/middleware-test/pageA?set-request-headers`,
);

await assertVisible('h1', { hasText: 'Page' });
await assertVisible('h1', { hasText: 'Page A' });
expect(page.url()).toEqual(
`${DEPLOYMENT_URL}/middleware-test/page?set-request-headers`,
`${DEPLOYMENT_URL}/middleware-test/pageA?set-request-headers`,
);

await assertVisible('h1', { hasText: 'Page' });
await assertVisible('h1', { hasText: 'Page A' });
await assertVisible('li#header-req-header-set-from-middleware');
expect(
await page
Expand Down Expand Up @@ -181,4 +178,46 @@ describe('App Middleware', () => {
'middleware-test-count=1',
);
});

describe('with client-side navigation', () => {
test('redirection to page', async ({ expect }) => {
const page = await BROWSER.newPage();
const assertVisible = getAssertVisible(page);

await page.goto(`${DEPLOYMENT_URL}/middleware-test/pageB`);

await assertVisible('h1', { hasText: 'Page B' });
await page
.locator('a[href="/middleware-test/pageC?redirect-to-page-a"]')
.click();

await assertVisible('h1', { hasText: 'Page A' });
// Note: we can't match the full url because with redirects locally instead of 'localhost' we get '127.0.0.1'
expect(page.url()).toMatch(/.*\/middleware-test\/pageA$/);
});

test('rewrite to page', async ({ expect }) => {
const page = await BROWSER.newPage();
const assertVisible = getAssertVisible(page);

await page.goto(`${DEPLOYMENT_URL}/middleware-test/pageB`);

await assertVisible('h1', { hasText: 'Page B' });
await page
.locator('a[href="/middleware-test/pageC?rewrite-to-page-a"]')
.click();

await assertVisible('h1', { hasText: 'Page A' });
// Note: we can't match the full url because with redirects locally instead of 'localhost' we get '127.0.0.1'
expect(page.url()).toMatch(
/.*\/middleware-test\/pageC\?rewrite-to-page-a$/,
);
});

test.skip('middleware to be invoked for each navigation', async ({
expect,
}) => {
// We need access to playwright's browser to be able to set cookies
});
});
});
14 changes: 8 additions & 6 deletions pages-e2e/features/pagesMiddleware/assets/middleware.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,17 +18,19 @@ export function middleware(request) {
// return new NextResponse('The requested api route is non-existent');
// }
//
// if (request.nextUrl.pathname === '/middleware-test/non-existent/page') {
// if (request.nextUrl.pathname === '/middleware-test/non-existent-page') {
// return new NextResponse('The requested route is non-existent');
// }
//

if (request.nextUrl.searchParams.has('rewrite-to-page')) {
return NextResponse.rewrite(new URL('/middleware-test-page', request.url));
if (request.nextUrl.searchParams.has('rewrite-to-page-a')) {
return NextResponse.rewrite(new URL('/middleware-test/pageA', request.url));
}

if (request.nextUrl.searchParams.has('redirect-to-page')) {
return NextResponse.redirect(new URL('/middleware-test-page', request.url));
if (request.nextUrl.searchParams.has('redirect-to-page-a')) {
return NextResponse.redirect(
new URL('/middleware-test/pageA', request.url),
);
}

if (request.nextUrl.searchParams.has('set-request-headers')) {
Expand Down Expand Up @@ -92,5 +94,5 @@ export function middleware(request) {
}

export const config = {
matcher: ['/api/middleware-test/:path*', '/middleware-test-page'],
matcher: ['/api/middleware-test/:path*', '/middleware-test/:path*'],
};
2 changes: 1 addition & 1 deletion ...are/assets/pages/middleware-test-page.jsx → ...re/assets/pages/middleware-test/pageA.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ export async function getServerSideProps(context) {
export default function Page({ requestHeaders }) {
return (
<div>
<h1>Some Page</h1>
<h1>Page A</h1>
<h2>Headers</h2>
<p>The request contained the following headers:</p>
<ul>
Expand Down
27 changes: 27 additions & 0 deletions pages-e2e/features/pagesMiddleware/assets/pages/middleware-test/pageB.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import Link from 'next/link';

export const config = { runtime: 'experimental-edge' };

export default function Page() {
const links = [
{
href: '/middleware-test/pageC?redirect-to-page-a',
text: 'go to page A via middleware redirect',
},
{
href: '/middleware-test/pageC?rewrite-to-page-a',
text: 'go to page C which is page A served via middleware rewrite',
},
];

return (
<div>
<h1>Page B</h1>
{links.map(({ href, text }) => (
<div key={href}>
<Link href={href}>{text}</Link>
</div>
))}
</div>
);
}
66 changes: 53 additions & 13 deletions pages-e2e/features/pagesMiddleware/middleware.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,12 @@ describe('Pages Middleware', () => {
const assertVisible = getAssertVisible(page);

await page.goto(
`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page`,
`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page-a`,
);

await assertVisible('h1', { hasText: 'Page' });
await assertVisible('h1', { hasText: 'Page A' });
expect(page.url()).toEqual(
`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page`,
`${DEPLOYMENT_URL}/api/middleware-test/hello?rewrite-to-page-a`,
);
});

Expand All @@ -70,15 +70,13 @@ describe('Pages Middleware', () => {
const assertVisible = getAssertVisible(page);

await page.goto(
`${DEPLOYMENT_URL}/api/middleware-test/hello?redirect-to-page`,
`${DEPLOYMENT_URL}/api/middleware-test/hello?redirect-to-page-a`,
);

await assertVisible('h1', { hasText: 'Page' });
await assertVisible('h1', { hasText: 'Page A' });
const url = page.url();
const fixedUrlForLocalTesting = url.replace('localhost', '127.0.0.1');
expect(fixedUrlForLocalTesting).toEqual(
`${DEPLOYMENT_URL}/middleware-test-page`,
);
// Note: we can't match the full url because with redirects locally instead of 'localhost' we get '127.0.0.1'
expect(page.url()).toMatch(/.*\/middleware-test\/pageA$/);
});

test('request headers modification', async ({ expect }) => {
Expand All @@ -90,12 +88,12 @@ describe('Pages Middleware', () => {
const assertVisible = getAssertVisible(page);

await page.goto(
`${DEPLOYMENT_URL}/middleware-test-page?set-request-headers`,
`${DEPLOYMENT_URL}/middleware-test/pageA?set-request-headers`,
);

await assertVisible('h1', { hasText: 'Page' });
await assertVisible('h1', { hasText: 'Page A' });
expect(page.url()).toEqual(
`${DEPLOYMENT_URL}/middleware-test-page?set-request-headers`,
`${DEPLOYMENT_URL}/middleware-test/pageA?set-request-headers`,
);

const isV12 = (await page.content()).includes(
Expand All @@ -105,7 +103,7 @@ describe('Pages Middleware', () => {
// the headers settings doesn't seem to work in v12, it's probably a Next.js bug
// it's probably not worth investigating
if (!isV12) {
await assertVisible('h1', { hasText: 'Page' });
await assertVisible('h1', { hasText: 'Page A' });
await assertVisible('li#header-req-header-set-from-middleware');
expect(
await page
Expand Down Expand Up @@ -173,4 +171,46 @@ describe('Pages Middleware', () => {
'middleware-test-count=1',
);
});

describe('with client-side navigation', () => {
test('redirection to page', async ({ expect }) => {
const page = await BROWSER.newPage();
const assertVisible = getAssertVisible(page);

await page.goto(`${DEPLOYMENT_URL}/middleware-test/pageB`);

await assertVisible('h1', { hasText: 'Page B' });
await page
.locator('a[href="/middleware-test/pageC?redirect-to-page-a"]')
.click();

await assertVisible('h1', { hasText: 'Page A' });
// Note: we can't match the full url because with redirects locally instead of 'localhost' we get '127.0.0.1'
expect(page.url()).toMatch(/.*\/middleware-test\/pageA$/);
});

test('rewrite to page', async ({ expect }) => {
const page = await BROWSER.newPage();
const assertVisible = getAssertVisible(page);

await page.goto(`${DEPLOYMENT_URL}/middleware-test/pageB`);

await assertVisible('h1', { hasText: 'Page B' });
await page
.locator('a[href="/middleware-test/pageC?rewrite-to-page-a"]')
.click();

await assertVisible('h1', { hasText: 'Page A' });
// Note: we can't match the full url because with redirects locally instead of 'localhost' we get '127.0.0.1'
expect(page.url()).toMatch(
/.*\/middleware-test\/pageC\?rewrite-to-page-a$/,
);
});

test.skip('middleware to be invoked for each navigation', async ({
expect,
}) => {
// We need access to playwright's browser to be able to set cookies
});
});
});

0 comments on commit 9dbefa1

Please sign in to comment.