/
navigate-encode-params-test.tsx
96 lines (81 loc) · 2.51 KB
/
navigate-encode-params-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
import * as React from "react";
import * as ReactDOM from "react-dom/client";
import { act } from "react-dom/test-utils";
import {
BrowserRouter,
Routes,
Route,
useNavigate,
useParams,
} from "react-router-dom";
describe("navigate with params", () => {
let node: HTMLDivElement;
beforeEach(() => {
global.history.pushState({}, "", "/");
node = document.createElement("div");
document.body.appendChild(node);
});
afterEach(() => {
document.body.removeChild(node);
node = null!;
});
describe("when navigate params are not already encoded", () => {
it("correctly encodes the param in the URL and decodes the param when it is used", () => {
function Start() {
let navigate = useNavigate();
React.useEffect(() => {
navigate("/blog/react router");
});
return null;
}
function Blog() {
let params = useParams();
return <h1>Blog: {params.slug}</h1>;
}
act(() => {
ReactDOM.createRoot(node).render(
<BrowserRouter>
<Routes>
<Route path="/" element={<Start />} />
<Route path="blog/:slug" element={<Blog />} />
</Routes>
</BrowserRouter>
);
});
expect(window.location.pathname).toEqual("/blog/react%20router");
expect(node.innerHTML).toMatch(/react router/);
});
});
describe("when navigate params are encoded using +", () => {
it("does not alter the param encoding in the URL and decodes the param when it is used", () => {
function Start() {
let navigate = useNavigate();
React.useEffect(() => {
navigate("/blog/react+router");
});
return null;
}
function Blog() {
let params = useParams();
return <h1>Blog: {params.slug}</h1>;
}
act(() => {
ReactDOM.createRoot(node).render(
<BrowserRouter>
<Routes>
<Route path="/" element={<Start />} />
<Route path="blog/:slug" element={<Blog />} />
</Routes>
</BrowserRouter>
);
});
// Need to add the + back for JSDom, but normal browsers leave
// the + in the URL pathname. Should probably report this as a
// bug in JSDom...
let pathname = window.location.pathname.replace(/%20/g, "+");
expect(pathname).toEqual("/blog/react+router");
// Note decodeURIComponent doesn't decode +
expect(node.innerHTML).toMatch(/react\+router/);
});
});
});