| 235 | 240 | | }); |
| 236 | 241 | | }); |
| 237 | 242 | | |
| 243 | + | // ── Route matchers ── |
| 244 | + | |
| 245 | + | describe("typed-file-router — route matchers", () => { |
| 246 | + | test("[sku=uppercase] matches uppercase SKU, sibling [sku] does not steal", async () => { |
| 247 | + | await page.goto(`${hostname}/product/ABC-123`); |
| 248 | + | await page.waitForLoadState("load"); |
| 249 | + | expect(await page.textContent('[data-testid="route"]')).toBe( |
| 250 | + | "matched=[sku=uppercase]" |
| 251 | + | ); |
| 252 | + | expect(await page.textContent('[data-testid="sku-upper"]')).toBe("ABC-123"); |
| 253 | + | }); |
| 254 | + | |
| 255 | + | test("[sku=uppercase] rejects lowercase, [sku] catches the fallback", async () => { |
| 256 | + | await page.goto(`${hostname}/product/abc-123`); |
| 257 | + | await page.waitForLoadState("load"); |
| 258 | + | expect(await page.textContent('[data-testid="route"]')).toBe( |
| 259 | + | "matched=[sku]" |
| 260 | + | ); |
| 261 | + | expect(await page.textContent('[data-testid="sku-any"]')).toBe("abc-123"); |
| 262 | + | }); |
| 263 | + | |
| 264 | + | test("[...slug=nested] matcher receives array, matches when length ≥ 2", async () => { |
| 265 | + | await page.goto(`${hostname}/docs/getting-started/install`); |
| 266 | + | await page.waitForLoadState("load"); |
| 267 | + | expect(await page.textContent('[data-testid="route"]')).toBe( |
| 268 | + | "matched=[...slug=nested]" |
| 269 | + | ); |
| 270 | + | expect(await page.textContent('[data-testid="slug"]')).toBe( |
| 271 | + | "getting-started/install" |
| 272 | + | ); |
| 273 | + | }); |
| 274 | + | |
| 275 | + | test("[...slug=nested] rejects single segment, [...slug] catches fallback", async () => { |
| 276 | + | await page.goto(`${hostname}/docs/intro`); |
| 277 | + | await page.waitForLoadState("load"); |
| 278 | + | expect(await page.textContent('[data-testid="route"]')).toBe( |
| 279 | + | "matched=[...slug]" |
| 280 | + | ); |
| 281 | + | expect(await page.textContent('[data-testid="slug"]')).toBe("intro"); |
| 282 | + | }); |
| 283 | + | |
| 284 | + | // Typed Link href construction — these asserts lock in the buildHref fix |
| 285 | + | // for matcher-aliased brackets. Before the fix, an alias-gated bracket was |
| 286 | + | // left verbatim in the emitted href (e.g. `/product/[sku=uppercase]`). |
| 287 | + | test("typed Link for [sku=uppercase] emits concrete URL with substituted params", async () => { |
| 288 | + | await page.goto(hostname); |
| 289 | + | await page.waitForLoadState("load"); |
| 290 | + | const link = await page.$('nav a[href="/product/ABC-123"]'); |
| 291 | + | expect(link).not.toBeNull(); |
| 292 | + | expect(await link.textContent()).toContain("Product ABC-123"); |
| 293 | + | }); |
| 294 | + | |
| 295 | + | test("typed Link for [sku] fallback emits concrete URL with substituted params", async () => { |
| 296 | + | await page.goto(hostname); |
| 297 | + | await page.waitForLoadState("load"); |
| 298 | + | const link = await page.$('nav a[href="/product/abc-123"]'); |
| 299 | + | expect(link).not.toBeNull(); |
| 300 | + | expect(await link.textContent()).toContain("Product abc-123"); |
| 301 | + | }); |
| 302 | + | |
| 303 | + | test("typed Link for [...slug=nested] joins array params into a concrete URL", async () => { |
| 304 | + | await page.goto(hostname); |
| 305 | + | await page.waitForLoadState("load"); |
| 306 | + | const link = await page.$('nav a[href="/docs/getting-started/install"]'); |
| 307 | + | expect(link).not.toBeNull(); |
| 308 | + | expect(await link.textContent()).toContain("Docs nested"); |
| 309 | + | }); |
| 310 | + | |
| 311 | + | test("typed Link for [...slug] catch-all joins a single segment into a URL", async () => { |
| 312 | + | await page.goto(hostname); |
| 313 | + | await page.waitForLoadState("load"); |
| 314 | + | const link = await page.$('nav a[href="/docs/intro"]'); |
| 315 | + | expect(link).not.toBeNull(); |
| 316 | + | expect(await link.textContent()).toContain("Docs flat"); |
| 317 | + | }); |
| 318 | + | |
| 319 | + | // Client-side navigation — verifies matcher dispatch still runs correctly |
| 320 | + | // after hydration, not just on initial SSR. The cross-link on each demo |
| 321 | + | // page points at its sibling; clicking must re-match against the matcher. |
| 322 | + | test("client-side navigation from matcher page to fallback sibling re-runs matcher dispatch", async () => { |
| 323 | + | await page.goto(`${hostname}/product/ABC-123`); |
| 324 | + | await page.waitForLoadState("load"); |
| 325 | + | await waitForHydration(); |
| 326 | + | |
| 327 | + | const prevUrl = page.url(); |
| 328 | + | const fallbackLink = await page.$('a[href="/product/abc-123"]'); |
| 329 | + | expect(fallbackLink).not.toBeNull(); |
| 330 | + | await fallbackLink.click(); |
| 331 | + | await waitForChange(null, () => page.url(), prevUrl); |
| 332 | + | |
| 333 | + | expect(page.url()).toContain("/product/abc-123"); |
| 334 | + | expect(await page.textContent('[data-testid="route"]')).toBe( |
| 335 | + | "matched=[sku]" |
| 336 | + | ); |
| 337 | + | }); |
| 338 | + | |
| 339 | + | test("client-side navigation from fallback back to matcher page", async () => { |
| 340 | + | await page.goto(`${hostname}/product/abc-123`); |
| 341 | + | await page.waitForLoadState("load"); |
| 342 | + | await waitForHydration(); |
| 343 | + | |
| 344 | + | const prevUrl = page.url(); |
| 345 | + | const matcherLink = await page.$('a[href="/product/ABC-123"]'); |
| 346 | + | expect(matcherLink).not.toBeNull(); |
| 347 | + | await matcherLink.click(); |
| 348 | + | await waitForChange(null, () => page.url(), prevUrl); |
| 349 | + | |
| 350 | + | expect(page.url()).toContain("/product/ABC-123"); |
| 351 | + | expect(await page.textContent('[data-testid="route"]')).toBe( |
| 352 | + | "matched=[sku=uppercase]" |
| 353 | + | ); |
| 354 | + | }); |
| 355 | + | |
| 356 | + | test("client-side navigation from flat docs fallback to nested docs matcher", async () => { |
| 357 | + | await page.goto(`${hostname}/docs/intro`); |
| 358 | + | await page.waitForLoadState("load"); |
| 359 | + | await waitForHydration(); |
| 360 | + | |
| 361 | + | const prevUrl = page.url(); |
| 362 | + | const nestedLink = await page.$('a[href="/docs/getting-started/install"]'); |
| 363 | + | expect(nestedLink).not.toBeNull(); |
| 364 | + | await nestedLink.click(); |
| 365 | + | await waitForChange(null, () => page.url(), prevUrl); |
| 366 | + | |
| 367 | + | expect(page.url()).toContain("/docs/getting-started/install"); |
| 368 | + | expect(await page.textContent('[data-testid="route"]')).toBe( |
| 369 | + | "matched=[...slug=nested]" |
| 370 | + | ); |
| 371 | + | }); |
| 372 | + | }); |
| 373 | + | |
| 238 | 374 | | // ── Browser history ── |
| 239 | 375 | | |
| 240 | 376 | | describe("typed-file-router — browser history", () => { |