Skip to content

tests: e2e test for active links with special char encoding #5681

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
+90 −0
Closed

tests: e2e test for active links with special char encoding #5681

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions e2e/react-start/basic/src/routes/encoding/link-active/$target.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { createFileRoute, Link } from '@tanstack/react-router'
import z from 'zod'
Comment on lines +1 to +2
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

Fix import sorting and verify zod import.

The static analysis tool flagged that Link should be sorted before createFileRoute alphabetically. Additionally, the zod import uses a default import pattern, but zod typically exports z as a named export.

Apply this diff to fix the import sorting:

-import { createFileRoute, Link } from '@tanstack/react-router'
+import { Link, createFileRoute } from '@tanstack/react-router'
 import z from 'zod'

Verify the zod import pattern with a web search:

As per coding guidelines.

🌐 Web query:

Does zod export z as a default export or named export?

💡 Result:

Zod does not use a default export. Import it as a namespace (recommended):

import * as z from "zod". [1][2]

Sources: Zod docs and repository. [1] https://zod.dev/intro (recommendation) [2] https://github.com/colinhacks/zod (README).

Fix import sorting and correct zod import pattern.

The zod import is incorrect. Zod does not use a default export and should be imported as a namespace: import * as z from "zod". Additionally, apply the import sorting fix to align with static analysis conventions.

-import { createFileRoute, Link } from '@tanstack/react-router'
-import z from 'zod'
+import { Link, createFileRoute } from '@tanstack/react-router'
+import * as z from 'zod'
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
import { createFileRoute, Link } from '@tanstack/react-router'
import z from 'zod'
import { Link, createFileRoute } from '@tanstack/react-router'
import * as z from 'zod'
🧰 Tools
🪛 ESLint

[error] 1-1: Member 'Link' of the import declaration should be sorted alphabetically.

(sort-imports)

🤖 Prompt for AI Agents 
In e2e/react-start/basic/src/routes/encoding/link-active/$target.tsx lines 1-2,
the zod import is incorrect and imports should be sorted: change the zod import
to a namespace import (import * as z from "zod") and reorder the import
statements according to your project's import-sorting rules (typically
alphabetically by module specifier or as enforced by your linter) so imports
follow the static analysis conventions.


export const Route = createFileRoute('/encoding/link-active/$target')({
validateSearch: z.object({ foo: z.string().optional() }),

component: RouteComponent,
})

function RouteComponent() {
return (
<Link
data-testid="self-link"
activeProps={{ className: 'font-bold' }}
activeOptions={{ includeSearch: true }}
to="/encoding/link-active/$target"
params={{ target: Route.useParams().target }}
search={Route.useSearch()}
>
link to self with $target={Route.useParams().target}, search.foo=
{Route.useSearch().foo}
</Link>
)
}
19 changes: 19 additions & 0 deletions e2e/react-start/basic/src/routes/encoding/link-active/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { createFileRoute } from '@tanstack/react-router'

export const Route = createFileRoute('/encoding/link-active/')({
component: RouteComponent,
})

function RouteComponent() {
return (
<div>
<Route.Link to="$target" params={{ target: 'ê' }}>
link to $target=ê
</Route.Link>
<br />
<Route.Link to="$target" params={{ target: 'hello' }}>
link to $target=hello
</Route.Link>
</div>
)
}
47 changes: 47 additions & 0 deletions e2e/react-start/basic/tests/encoding.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { expect } from '@playwright/test'

import { test } from '@tanstack/router-e2e-utils'
import combinateImport from 'combinate'

// somehow playwright does not correctly import default exports
const combinate = (combinateImport as any).default as typeof combinateImport

test.beforeEach(async ({ page }) => {
await page.goto('/')
})

test.use({
whitelistErrors: [
/Failed to load resource: the server responded with a status of 404/,
],
})

combinate
test.describe('link active', () => {
Comment on lines +19 to +20
Copy link
Contributor

@coderabbitai coderabbitai bot Oct 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Remove the stray combinate identifier.

Line 19 contains a standalone combinate identifier that has no effect. This appears to be an accidental leftover from development.

Apply this diff to remove it:

-combinate
 test.describe('link active', () => {
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
combinate
test.describe('link active', () => {
test.describe('link active', () => {
🤖 Prompt for AI Agents 
In e2e/react-start/basic/tests/encoding.spec.ts around lines 19 to 20, there is
a stray standalone identifier "combinate" on line 19 that should be removed;
delete that token so the file begins directly with the test.describe('link
active', () => { block, ensuring no other code or whitespace is accidentally
removed and the test file still compiles.

const testMatrix = combinate({
target: ['ê', 'hello'] as const,
search: [undefined, { foo: 'bar' }, { foo: 'ö' }] as const,
})

testMatrix.forEach(({ target, search }) => {
test(`should correctly highlight active link for $target=${target} and search=${JSON.stringify(search)}`, async ({
page,
}) => {
const url = new URL(
`/encoding/link-active/${target}`,
'http://localhost:3000',
)
if (search) {
Object.entries(search).forEach(([key, value]) => {
url.searchParams.set(key, value)
})
}
const hrefWithoutOrigin = url.href.replace(url.origin, '')
await page.goto(hrefWithoutOrigin)
const link = page.getByTestId('self-link')
await expect(link).toBeInViewport()
await expect(link).toHaveAttribute('class', 'font-bold')
await expect(link).toHaveAttribute('data-status', 'active')
})
})
})
Loading