Skip to content

Commit fae4fef

Browse files
LayZeeDKLayZeeDK
committed
test: cover nested route URL
1 parent ee72284 commit fae4fef

4 files changed

Lines changed: 546 additions & 0 deletions

File tree

‎packages/router-component-store/src/lib/global-router-store/nested-route-title.spec.ts‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import { ResolveFn, RouterConfigOptions, Routes } from '@angular/router';
2+
import { firstValueFrom } from 'rxjs';
3+
import { RouterStore } from '../router-store';
4+
import { GlobalRouterStore } from './global-router-store';
5+
import { globalRouterStoreSetup } from './test-util/global-router-store-setup';
6+
import {
7+
GlobalRouterStoreTestChildComponent,
8+
GlobalRouterStoreTestGrandchildComponent,
9+
GlobalRouterStoreTestParentComponent,
10+
} from './test-util/global-router-store-test-components';
11+
12+
const shadowedTitleResolver: ResolveFn<string> = (route) =>
13+
route.data['shadowed'];
14+
15+
const routes: Routes = [
16+
{
17+
path: 'parent',
18+
component: GlobalRouterStoreTestParentComponent,
19+
data: {
20+
parent: 'parent-route-data',
21+
shadowed: 'parent-route-title',
22+
},
23+
title: shadowedTitleResolver,
24+
children: [
25+
{
26+
path: 'child',
27+
component: GlobalRouterStoreTestChildComponent,
28+
data: {
29+
child: 'child-route-data',
30+
shadowed: 'child-route-title',
31+
},
32+
title: shadowedTitleResolver,
33+
children: [
34+
{
35+
path: 'grandchild',
36+
component: GlobalRouterStoreTestGrandchildComponent,
37+
data: {
38+
grandchild: 'grandchild-route-data',
39+
shadowed: 'grandchild-route-title',
40+
},
41+
title: shadowedTitleResolver,
42+
},
43+
],
44+
},
45+
],
46+
},
47+
];
48+
49+
describe(`${GlobalRouterStore.name} nested route title`, () => {
50+
describe('Given three layers of routes with components and route title resolvers', () => {
51+
const paramsInheritanceStrategies: RouterConfigOptions['paramsInheritanceStrategy'][] =
52+
['always', 'emptyOnly'];
53+
54+
describe.each(paramsInheritanceStrategies)(
55+
' And the "%s" route parameter inheritance strategy is used',
56+
(paramsInheritanceStrategy) => {
57+
it.each(
58+
[
59+
GlobalRouterStoreTestParentComponent,
60+
GlobalRouterStoreTestChildComponent,
61+
GlobalRouterStoreTestGrandchildComponent,
62+
].map((RoutedComponent) => ({ RoutedComponent }))
63+
)(
64+
` And ${RouterStore.name} is injected at $RoutedComponent.name
65+
When the ${GlobalRouterStoreTestGrandchildComponent.name} route is activated
66+
Then the route title for the ${GlobalRouterStoreTestGrandchildComponent.name} route is emitted`,
67+
async ({ RoutedComponent }) => {
68+
expect.assertions(2);
69+
const { ngrxRouterStore, ngrxStore, routerStore } =
70+
await globalRouterStoreSetup({
71+
navigateTo: '/parent/child/grandchild',
72+
paramsInheritanceStrategy,
73+
RoutedComponent,
74+
routes,
75+
});
76+
77+
const expectedTitle = 'grandchild-route-title';
78+
await expect(firstValueFrom(routerStore.title$)).resolves.toBe(
79+
expectedTitle
80+
);
81+
await expect(
82+
firstValueFrom(ngrxStore.select(ngrxRouterStore.selectTitle))
83+
).resolves.toBe(
84+
// NOTE(@LayZeeDK) Seems to be a bug in NgRx Router Store 15.0.0
85+
undefined
86+
);
87+
}
88+
);
89+
90+
it.each(
91+
[
92+
GlobalRouterStoreTestParentComponent,
93+
GlobalRouterStoreTestChildComponent,
94+
].map((RoutedComponent) => ({
95+
RoutedComponent,
96+
}))
97+
)(
98+
` And ${RouterStore.name} is injected at $RoutedComponent.name
99+
When the ${GlobalRouterStoreTestChildComponent.name} route is activated
100+
Then route title for the ${GlobalRouterStoreTestChildComponent.name} route is emitted`,
101+
async ({ RoutedComponent }) => {
102+
expect.assertions(2);
103+
const { ngrxRouterStore, ngrxStore, routerStore } =
104+
await globalRouterStoreSetup({
105+
navigateTo: '/parent/child',
106+
paramsInheritanceStrategy,
107+
RoutedComponent,
108+
routes,
109+
});
110+
111+
const expectedTitle = 'child-route-title';
112+
await expect(firstValueFrom(routerStore.title$)).resolves.toBe(
113+
expectedTitle
114+
);
115+
await expect(
116+
firstValueFrom(ngrxStore.select(ngrxRouterStore.selectTitle))
117+
).resolves.toBe(
118+
// NOTE(@LayZeeDK) Seems to be a bug in NgRx Router Store 15.0.0
119+
undefined
120+
);
121+
}
122+
);
123+
124+
it(` And ${RouterStore.name} is injected at ${GlobalRouterStoreTestParentComponent.name}
125+
When the ${GlobalRouterStoreTestParentComponent.name} route is activated
126+
Then route title for the ${GlobalRouterStoreTestParentComponent.name} route is emitted`, async () => {
127+
expect.assertions(2);
128+
const { ngrxRouterStore, ngrxStore, routerStore } =
129+
await globalRouterStoreSetup({
130+
navigateTo: '/parent',
131+
paramsInheritanceStrategy,
132+
RoutedComponent: GlobalRouterStoreTestParentComponent,
133+
routes,
134+
});
135+
136+
const expectedTitle = 'parent-route-title';
137+
await expect(firstValueFrom(routerStore.title$)).resolves.toBe(
138+
expectedTitle
139+
);
140+
await expect(
141+
firstValueFrom(ngrxStore.select(ngrxRouterStore.selectTitle))
142+
).resolves.toBe(
143+
// NOTE(@LayZeeDK) Seems to be a bug in NgRx Router Store 15.0.0
144+
undefined
145+
);
146+
});
147+
}
148+
);
149+
});
150+
});

‎packages/router-component-store/src/lib/global-router-store/nested-route-url.spec.ts‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { RouterConfigOptions, Routes } from '@angular/router';
2+
import { firstValueFrom } from 'rxjs';
3+
import { RouterStore } from '../router-store';
4+
import { GlobalRouterStore } from './global-router-store';
5+
import { globalRouterStoreSetup } from './test-util/global-router-store-setup';
6+
import {
7+
GlobalRouterStoreTestChildComponent,
8+
GlobalRouterStoreTestGrandchildComponent,
9+
GlobalRouterStoreTestParentComponent,
10+
} from './test-util/global-router-store-test-components';
11+
12+
const routes: Routes = [
13+
{
14+
path: 'parent',
15+
component: GlobalRouterStoreTestParentComponent,
16+
children: [
17+
{
18+
path: 'child',
19+
component: GlobalRouterStoreTestChildComponent,
20+
children: [
21+
{
22+
path: 'grandchild',
23+
component: GlobalRouterStoreTestGrandchildComponent,
24+
},
25+
],
26+
},
27+
],
28+
},
29+
];
30+
31+
const expectedUrls = {
32+
parent: '/parent?query=param#fragment',
33+
child: '/parent/child?query=param#fragment',
34+
grandchild: '/parent/child/grandchild?query=param#fragment',
35+
} as const;
36+
37+
describe(`${GlobalRouterStore.name} nested route URL`, () => {
38+
describe('Given three layers of routes with components', () => {
39+
const paramsInheritanceStrategies: RouterConfigOptions['paramsInheritanceStrategy'][] =
40+
['always', 'emptyOnly'];
41+
42+
describe.each(paramsInheritanceStrategies)(
43+
' And the "%s" route parameter inheritance strategy is used',
44+
(paramsInheritanceStrategy) => {
45+
it.each(
46+
[
47+
GlobalRouterStoreTestParentComponent,
48+
GlobalRouterStoreTestChildComponent,
49+
GlobalRouterStoreTestGrandchildComponent,
50+
].map((RoutedComponent) => ({ RoutedComponent }))
51+
)(
52+
` And ${RouterStore.name} is injected at $RoutedComponent.name
53+
When the ${GlobalRouterStoreTestGrandchildComponent.name} route is activated
54+
Then the full URL for the ${GlobalRouterStoreTestGrandchildComponent.name} route is emitted`,
55+
async ({ RoutedComponent }) => {
56+
expect.assertions(1);
57+
const { routerStore } = await globalRouterStoreSetup({
58+
navigateTo: '/parent/child/grandchild?query=param#fragment',
59+
paramsInheritanceStrategy,
60+
RoutedComponent,
61+
routes,
62+
});
63+
64+
await expect(firstValueFrom(routerStore.url$)).resolves.toEqual(
65+
expectedUrls.grandchild
66+
);
67+
}
68+
);
69+
70+
it.each(
71+
[
72+
GlobalRouterStoreTestParentComponent,
73+
GlobalRouterStoreTestChildComponent,
74+
].map((RoutedComponent) => ({ RoutedComponent }))
75+
)(
76+
` And ${RouterStore.name} is injected at $RoutedComponent.name
77+
When the ${GlobalRouterStoreTestChildComponent.name} route is activated
78+
Then the full URL for the ${GlobalRouterStoreTestChildComponent.name} route is emitted`,
79+
async ({ RoutedComponent }) => {
80+
expect.assertions(1);
81+
const { routerStore } = await globalRouterStoreSetup({
82+
navigateTo: '/parent/child?query=param#fragment',
83+
paramsInheritanceStrategy,
84+
RoutedComponent,
85+
routes,
86+
});
87+
88+
await expect(firstValueFrom(routerStore.url$)).resolves.toEqual(
89+
expectedUrls.child
90+
);
91+
}
92+
);
93+
94+
it(` And ${RouterStore.name} is injected at ${GlobalRouterStoreTestParentComponent}.name
95+
When the ${GlobalRouterStoreTestParentComponent.name} route is activated
96+
Then full URL for the ${GlobalRouterStoreTestParentComponent.name} route is emitted`, async () => {
97+
expect.assertions(1);
98+
const { routerStore } = await globalRouterStoreSetup({
99+
navigateTo: '/parent?query=param#fragment',
100+
paramsInheritanceStrategy,
101+
RoutedComponent: GlobalRouterStoreTestParentComponent,
102+
routes,
103+
});
104+
105+
await expect(firstValueFrom(routerStore.url$)).resolves.toEqual(
106+
expectedUrls.parent
107+
);
108+
});
109+
}
110+
);
111+
});
112+
});

0 commit comments

Comments
 (0)
⚡