/
matchRoutes-test.tsx
129 lines (113 loc) · 3.85 KB
/
matchRoutes-test.tsx
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
118
119
120
121
122
123
124
125
126
127
128
129
import { AgnosticRouteObject } from "@remix-run/router";
import * as React from "react";
import type { RouteObject } from "react-router";
import { matchRoutes } from "react-router";
function pickPaths(
routes: RouteObject[],
pathname: string,
basename?: string
): string[] | null {
let matches = matchRoutes(routes, pathname, basename);
return matches && matches.map((match) => match.route.path || "");
}
describe("matchRoutes", () => {
let userEditRoute: RouteObject = {
path: "edit",
element: <h1>User Edit</h1>,
};
let userProfileRoute: RouteObject = {
path: ":id",
element: <h1>User Profile</h1>,
children: [userEditRoute],
};
let usersRoute: RouteObject = {
path: "/users",
element: <h1>Users</h1>,
children: [{ index: true, element: <h1>Index</h1> }, userProfileRoute],
};
let layoutRoute: RouteObject = {
path: "/layout",
children: [
{ path: "item", element: <h1>Item</h1> },
{ path: ":id", element: <h1>ID</h1> },
{ path: "*", element: <h1>Not Found</h1> },
],
};
let routes: RouteObject[] = [
{ path: "/", element: <h1>Root Layout</h1> },
{
path: "/home",
element: <h1>Home</h1>,
children: [
{ index: true, element: <h1>Index</h1> },
{ path: "*", element: <h1>Not Found</h1> },
],
},
layoutRoute,
usersRoute,
{ path: "*", element: <h1>Not Found</h1> },
];
it("matches root * routes correctly", () => {
expect(pickPaths(routes, "/not-found")).toEqual(["*"]);
expect(pickPaths(routes, "/hometypo")).toEqual(["*"]);
});
it("matches layout routes", () => {
expect(matchRoutes(routes, "/layout")?.length).toBe(1);
expect(pickPaths(routes, "/layout")).toEqual(["/layout"]);
});
it("matches static path over index", () => {
expect(pickPaths(routes, "/layout/item")).toEqual(["/layout", "item"]);
});
it("matches dynamic layout path with param over index", () => {
expect(pickPaths(routes, "/layout/id")).toEqual(["/layout", ":id"]);
});
it("matches dynamic layout path with splat over index", () => {
expect(pickPaths(routes, "/layout/id/more")).toEqual(["/layout", "*"]);
});
it("matches nested index routes correctly", () => {
expect(pickPaths(routes, "/users")).toEqual(["/users", ""]);
});
it("matches nested dynamic routes correctly", () => {
expect(pickPaths(routes, "/users/mj")).toEqual(["/users", ":id"]);
expect(pickPaths(routes, "/users/mj/edit")).toEqual([
"/users",
":id",
"edit",
]);
});
it("matches nested dynamic routes with params ending in = (e.x. base64 encoded Id)", () => {
expect(pickPaths(routes, "/users/VXNlcnM6MQ==")).toEqual(["/users", ":id"]);
expect(pickPaths(routes, "/users/VXNlcnM6MQ==/edit")).toEqual([
"/users",
":id",
"edit",
]);
});
it("matches nested * routes correctly", () => {
expect(pickPaths(routes, "/home/typo")).toEqual(["/home", "*"]);
});
it("returns the same route object on match.route as the one that was passed in", () => {
let matches = matchRoutes(routes, "/users/mj")!;
expect(matches[0].route).toBe(usersRoute);
expect(matches[1].route).toBe(userProfileRoute);
});
describe("with a basename", () => {
it("matches a pathname that starts with the basename", () => {
expect(pickPaths(routes, "/app/users/mj", "/app")).toEqual([
"/users",
":id",
]);
// basename should not be case-sensitive
expect(pickPaths(routes, "/APP/users/mj", "/app")).toEqual([
"/users",
":id",
]);
});
it("does not match a pathname that does not start with the basename", () => {
expect(pickPaths(routes, "/home", "/app")).toBeNull();
});
it("does not match a pathname that does not start with basename/", () => {
expect(pickPaths(routes, "/appextra/home", "/app")).toBeNull();
});
});
});