refactor(kit): add lazy loading logic to tuiGenerateDialogableRoute

taiga-family · Feb 17, 2023 · 84df153 · 84df153
1 parent 2651f81
commit 84df153
Show file tree

Hide file tree

Showing 15 changed files with 92 additions and 87 deletions.
diff --git a/projects/demo/src/modules/customization/routable/eager/examples/1/page-1.module.ts b/projects/demo/src/modules/customization/routable/eager/examples/1/page-1.module.ts
@@ -16,7 +16,9 @@ import {TuiPage1ExampleComponent} from './page-1.component';
                 component: TuiPage1ExampleComponent,
                 children: [
                     // step 3: use tuiGenerateDialogableRoute inside children property
-                    tuiGenerateDialogableRoute(`path/to/dialog`, DialogContentComponent),
+                    tuiGenerateDialogableRoute(DialogContentComponent, {
+                        path: `path/to/dialog`,
+                    }),
                 ],
             },
         ]),

diff --git a/...utable/eager/examples/setup/use-helper.md → ...ger/examples/setup/use-route-generator.md b/...utable/eager/examples/setup/use-helper.md → ...ger/examples/setup/use-route-generator.md
@@ -10,7 +10,7 @@ import {TuiRoutableDialogModule} from '@taiga-ui/kit';
       {
         path: ``,
         component: MyPageComponent,
-        children: [tuiGenerateDialogableRoute(`path/to/dialog`, MyDialogComponent)],
+        children: [tuiGenerateDialogableRoute(MyDialogComponent, {path: `path/to/dialog`})],
       },
     ]),
   ],

diff --git a/projects/demo/src/modules/customization/routable/eager/routable-dialog.component.ts b/projects/demo/src/modules/customization/routable/eager/routable-dialog.component.ts
@@ -18,5 +18,5 @@ export class RoutableDialogComponent {
 
     readonly addRouterOutlet = import('./examples/setup/add-router-outlet.md?raw');
     readonly importModule = import('./examples/setup/import-module.md?raw');
-    readonly useWrapper = import('./examples/setup/use-helper.md?raw');
+    readonly useRouteGenerator = import('./examples/setup/use-route-generator.md?raw');
 }
diff --git a/projects/demo/src/modules/customization/routable/eager/routable-dialog.template.html b/projects/demo/src/modules/customization/routable/eager/routable-dialog.template.html
@@ -50,7 +50,7 @@
                 </p>
                 <tui-doc-code
                     filename="my-page.module.ts"
-                    [code]="useWrapper"
+                    [code]="useRouteGenerator"
                 ></tui-doc-code>
             </li>
         </ol>

diff --git a/...rc/modules/customization/routable/lazy/examples/1/dialog-content/dialog-content.module.ts b/...rc/modules/customization/routable/lazy/examples/1/dialog-content/dialog-content.module.ts
@@ -1,13 +1,13 @@
 import {NgModule} from '@angular/core';
 import {RouterModule} from '@angular/router';
-import {tuiGenerateLazyDialogableRoute} from '@taiga-ui/kit';
+import {tuiGenerateDialogableRoute} from '@taiga-ui/kit';
 
 import {DialogContentComponent} from './dialog-content.component';
 
 @NgModule({
-    // step 4:  use tuiGenerateLazyDialogableRoute
+    // step 4:  use tuiGenerateDialogableRoute
     imports: [
-        RouterModule.forChild([tuiGenerateLazyDialogableRoute(DialogContentComponent)]),
+        RouterModule.forChild([tuiGenerateDialogableRoute(DialogContentComponent)]),
     ],
     declarations: [DialogContentComponent],
     exports: [DialogContentComponent],

diff --git a/...outable/lazy/examples/setup/use-helper.md → ...azy/examples/setup/use-route-generator.md b/...outable/lazy/examples/setup/use-helper.md → ...azy/examples/setup/use-route-generator.md
@@ -1,12 +1,12 @@
 ```ts
-import {tuiGenerateLazyDialogableRoute} from '@taiga-ui/kit';
+import {tuiGenerateDialogableRoute} from '@taiga-ui/kit';
 
 // ...
 
 @NgModule({
   imports: [
     // ...
-    RouterModule.forChild([tuiGenerateLazyDialogableRoute(MyDialogComponent)]),
+    RouterModule.forChild([tuiGenerateDialogableRoute(MyDialogComponent)]),
   ],
   declarations: [MyDialogComponent],
   exports: [MyDialogComponent],

diff --git a/projects/demo/src/modules/customization/routable/lazy/lazy-routable-dialog.component.ts b/projects/demo/src/modules/customization/routable/lazy/lazy-routable-dialog.component.ts
@@ -21,7 +21,7 @@ export class LazyRoutableDialogComponent {
 
     readonly addRouterOutlet = import('./examples/setup/add-router-outlet.md?raw');
     readonly importModule = import('./examples/setup/import-module.md?raw');
-    readonly useWrapper = import('./examples/setup/use-helper.md?raw');
+    readonly useRouteGenerator = import('./examples/setup/use-route-generator.md?raw');
     readonly addLazyLoadedModule = import(
         './examples/setup/add-lazy-loaded-module.md?raw'
     );

diff --git a/projects/demo/src/modules/customization/routable/lazy/lazy-routable-dialog.template.html b/projects/demo/src/modules/customization/routable/lazy/lazy-routable-dialog.template.html
@@ -58,14 +58,14 @@
             <li>
                 <p i18n>
                     Use
-                    <code>tuiGenerateLazyDialogableRoute</code>
+                    <code>tuiGenerateDialogableRoute</code>
                     in the
                     <code>MyDialogModule</code>
                     router config
                 </p>
                 <tui-doc-code
                     filename="my-dialog.module.ts"
-                    [code]="useWrapper"
+                    [code]="useRouteGenerator"
                 ></tui-doc-code>
             </li>
         </ol>

diff --git a/projects/kit/components/routable-dialog/generate-dialogable-route.ts b/projects/kit/components/routable-dialog/generate-dialogable-route.ts
@@ -5,9 +5,8 @@ import {TuiDialogOptions} from '@taiga-ui/core';
 import {TuiRoutableDialogComponent} from './routable-dialog.component';
 
 export function tuiGenerateDialogableRoute<I>(
-    path: string,
     component: Type<any>,
-    options: Partial<TuiDialogOptions<I>> = {},
+    {path, ...dialogOptions}: Partial<TuiDialogOptions<I>> & {path: string} = {path: ``},
 ): Route {
     return {
         path,
@@ -18,7 +17,8 @@ export function tuiGenerateDialogableRoute<I>(
                 .split(`/`)
                 .map(() => `..`)
                 .join(`/`),
-            options,
+            isLazy: path === ``,
+            dialogOptions,
         },
     };
 }
diff --git a/projects/kit/components/routable-dialog/generate-lazy-dialogable-route.ts b/projects/kit/components/routable-dialog/generate-lazy-dialogable-route.ts
diff --git a/projects/kit/components/routable-dialog/index.ts b/projects/kit/components/routable-dialog/index.ts
@@ -1,4 +1,3 @@
 export * from './generate-dialogable-route';
-export * from './generate-lazy-dialogable-route';
 export * from './routable-dialog.component';
 export * from './routable-dialog.module';
diff --git a/projects/kit/components/routable-dialog/routable-dialog.component.ts b/projects/kit/components/routable-dialog/routable-dialog.component.ts
@@ -25,7 +25,7 @@ export class TuiRoutableDialogComponent {
                     this.route.snapshot.data['dialog'],
                     this.injector,
                 ),
-                this.route.snapshot.data['options'],
+                this.route.snapshot.data['dialogOptions'],
             )
             .pipe(takeUntil(this.destroy$))
             .subscribe({
@@ -34,8 +34,11 @@ export class TuiRoutableDialogComponent {
     }
 
     private navigateToParent(): void {
-        const backUrl =
-            this.route.snapshot.data['backUrl'] ?? this.getLazyLoadedBackUrl();
+        const isLazy = this.route.snapshot.data['isLazy'];
+
+        const backUrl = isLazy
+            ? this.getLazyLoadedBackUrl()
+            : this.route.snapshot.data['backUrl'];
 
         void this.router.navigate([backUrl], {
             relativeTo: this.route,

diff --git a/projects/kit/components/routable-dialog/test/generate-dialogable-route.spec.ts b/projects/kit/components/routable-dialog/test/generate-dialogable-route.spec.ts
@@ -4,30 +4,77 @@ import {TuiRoutableDialogComponent} from '../routable-dialog.component';
 class DialogComponent {}
 
 describe(`tuiGenerateDialogableRoute`, () => {
-    it(`route are configured correctly`, () => {
-        const result = tuiGenerateDialogableRoute(`path/to/dialog`, DialogComponent);
+    it(`generated route should have component: TuiRoutableDialogComponent`, () => {
+        const result = tuiGenerateDialogableRoute(DialogComponent);
 
-        const expected = {
+        expect(result.component).toBe(TuiRoutableDialogComponent);
+    });
+
+    it(`path passed correctly`, () => {
+        const result = tuiGenerateDialogableRoute(DialogComponent, {
             path: `path/to/dialog`,
-            component: TuiRoutableDialogComponent,
-            data: {
-                dialog: DialogComponent,
-                backUrl: `../../..`,
-                options: {},
-            },
-        };
+        });
 
-        expect(result).toEqual(expected);
+        expect(result.path).toEqual(`path/to/dialog`);
     });
 
-    it(`options are passed correctly`, () => {
-        const options = {
+    it(`dialog options are passed correctly`, () => {
+        const dialogOptions = {
             dismissible: true,
             closeable: true,
         };
 
-        const result = tuiGenerateDialogableRoute(``, DialogComponent, options);
+        const result = tuiGenerateDialogableRoute(DialogComponent, {
+            path: ``,
+            ...dialogOptions,
+        });
+
+        expect(result?.data?.dialogOptions).toEqual(dialogOptions);
+    });
+
+    it(`if path is empty string then isLazy: true`, () => {
+        const result = tuiGenerateDialogableRoute(DialogComponent);
+
+        expect(result?.data?.isLazy).toBe(true);
+    });
+
+    it(`if path is not empty string then isLazy: false`, () => {
+        const result = tuiGenerateDialogableRoute(DialogComponent, {path: `path`});
+
+        expect(result?.data?.isLazy).toBe(false);
+    });
+
+    describe(`checking back url calculation`, () => {
+        it(`back url calculated correctly for empty path`, () => {
+            const result = tuiGenerateDialogableRoute(DialogComponent, {
+                path: ``,
+            });
+
+            expect(result?.data?.backUrl).toBe(`..`);
+        });
+
+        it(`back url calculated correctly for single segment`, () => {
+            const result = tuiGenerateDialogableRoute(DialogComponent, {
+                path: `path`,
+            });
+
+            expect(result?.data?.backUrl).toBe(`..`);
+        });
+
+        it(`back url calculated correctly for double segments`, () => {
+            const result = tuiGenerateDialogableRoute(DialogComponent, {
+                path: `path/to`,
+            });
+
+            expect(result?.data?.backUrl).toBe(`../..`);
+        });
+
+        it(`back url calculated correctly for triple segments`, () => {
+            const result = tuiGenerateDialogableRoute(DialogComponent, {
+                path: `path/to/dialog`,
+            });
 
-        expect(result?.data?.options).toEqual(options);
+            expect(result?.data?.backUrl).toBe(`../../..`);
+        });
     });
 });
diff --git a/projects/kit/components/routable-dialog/test/generate-lazy-dialogable-route.spec.ts b/projects/kit/components/routable-dialog/test/generate-lazy-dialogable-route.spec.ts
diff --git a/projects/kit/components/routable-dialog/test/routable-dialog.component.spec.ts b/projects/kit/components/routable-dialog/test/routable-dialog.component.spec.ts
@@ -74,7 +74,7 @@ describe(`TuiRoutableDialog`, () => {
             snapshot: {
                 data: {
                     dialog: DialogComponent,
-                    options: dialogOptions,
+                    dialogOptions,
                 },
             } as any,
         });
@@ -86,7 +86,12 @@ describe(`TuiRoutableDialog`, () => {
 
     it(`Closing the dialog navigates back to the parent route for lazy loaded case`, fakeAsync(() => {
         createComponent({
-            ...DEFAULT_ACTIVATED_ROUTE_MOCK,
+            snapshot: {
+                data: {
+                    dialog: DialogComponent,
+                    isLazy: true,
+                },
+            },
             parent: {
                 snapshot: {
                     url: `path/to/lazy/dialog`,