mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Jiachi LiuandGitHub
664073e86f
### What Exclude the cases like external urls and relative urls with query from appending trailing slash when it's needed. The process is: - If it's a uncertain string path (relative url, could start with `'./'` or `/`), convert to relative that starts with `/`; - then we covert the url (string or URL) to string url - We do the check if we need to append the trailing slash ### Why In #62109 we added functionality that can only append trailing slash when we appended trailing slash to some metadata url like `canonical` url and open graph url when the config is enabled. For urls with queries, the trailing slash can also be omitted. For the external urls (different origin comparing to `metadataBase`) we don't need to append trailing slash as they're not the same web app. x-ref: [slack thread](https://vercel.slack.com/archives/C0676QZBWKS/p1709845946033929) Closes NEXT-2762 Closes NEXT-2753
63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
import { createNextDescribe } from 'e2e-utils'
|
|
|
|
createNextDescribe(
|
|
'app-dir trailingSlash handling',
|
|
{
|
|
files: __dirname,
|
|
skipDeployment: true,
|
|
},
|
|
({ next }) => {
|
|
it('should redirect route when requesting it directly', async () => {
|
|
const res = await next.fetch('/a', {
|
|
redirect: 'manual',
|
|
})
|
|
expect(res.status).toBe(308)
|
|
expect(new URL(res.headers.get('location'), next.url).pathname).toBe(
|
|
'/a/'
|
|
)
|
|
})
|
|
|
|
it('should render link with trailing slash', async () => {
|
|
const $ = await next.render$('/')
|
|
|
|
expect($('#to-a-trailing-slash').attr('href')).toBe('/a/')
|
|
})
|
|
|
|
it('should contain trailing slash to canonical url', async () => {
|
|
const $ = await next.render$('/')
|
|
expect($(`link[rel="canonical"]`).attr('href')).toBe(
|
|
'http://trailingslash.com/'
|
|
)
|
|
|
|
const $a = await next.render$('/a')
|
|
expect($a(`link[rel="canonical"]`).attr('href')).toBe(
|
|
'http://trailingslash.com/a/'
|
|
)
|
|
})
|
|
|
|
it('should redirect route when requesting it directly by browser', async () => {
|
|
const browser = await next.browser('/a')
|
|
expect(await browser.waitForElementByCss('#a-page').text()).toBe('A page')
|
|
})
|
|
|
|
it('should redirect route when clicking link', async () => {
|
|
const browser = await next.browser('/')
|
|
await browser
|
|
.elementByCss('#to-a-trailing-slash')
|
|
.click()
|
|
.waitForElementByCss('#a-page')
|
|
expect(await browser.waitForElementByCss('#a-page').text()).toBe('A page')
|
|
})
|
|
|
|
it('should not add trailing slash to external url or relative url with query', async () => {
|
|
const $ = await next.render$('/metadata')
|
|
expect($('[rel="canonical"]').attr('href')).toBe(
|
|
'http://trailingslash.com/metadata?query=string'
|
|
)
|
|
expect($('[property="og:url"]').attr('content')).toBe(
|
|
'http://trailingslash-another.com/metadata'
|
|
)
|
|
})
|
|
}
|
|
)
|