fix(routing): Add logic to add missing imports (#959)

* fix(routing): Add logic to add missing import statements to the routing file

* fix(tests): Add tests to ensure correct imports in toutes  file

* fix(routing): Fix dasherize logic in getRooute and fix tests

* fix(routing): Improve getRoute logic, add path optional param

* fix: combine services and components into one array

Author: ajivanyandev

packages/devextreme-schematics/src/add-layout/index.ts

@@ -68,6 +68,38 @@ import { Change } from '@schematics/angular/utility/change';
 import { PatchNodePackageInstallTask } from '../utility/patch';
 import { isAngularVersionHigherThan } from '../utility/angular-version';
 
+const routes = [
+  {
+    name: 'AuthGuardService',
+    type: 'service',
+    location: './shared/services'
+  },
+  {
+    name: 'LoginFormComponent',
+    path: 'login-form',
+    type: 'component',
+    location: './shared/components'
+  },
+  {
+    name: 'ResetPasswordFormComponent',
+    path: 'reset-password',
+    type: 'component',
+    location: './shared/components'
+  },
+  {
+    name: 'CreateAccountFormComponent',
+    path: 'create-account',
+    type: 'component',
+    location: './shared/components'
+  },
+  {
+    name: 'ChangePasswordFormComponent',
+    path: 'change-password/:recoveryCode',
+    type: 'component',
+    location: './shared/components'
+  }
+];
+
 const projectFilesSource = './files/src';
 const workspaceFilesSource = './files';
 
@@ -295,15 +327,23 @@ function updateDevextremeConfig(sourcePath: string = '') {
 const modifyRouting = (host: Tree, routingFilePath: string) => {
   // TODO: Try to use the isolated host to generate the result string
   let source = getSourceFile(host, routingFilePath)!;
-  const importChange = insertImport(source, routingFilePath, 'LoginFormComponent', './shared/components');
-  applyChanges(host, [ importChange ], routingFilePath);
-
-  source = getSourceFile(host, routingFilePath)!;
-  const routes = findRoutesInSource(source)!;
-  if (!hasComponentInRoutes(routes, 'login-form')) {
-    const loginFormRoute = getRoute('login-form');
-    insertItemToArray(host, routingFilePath, routes, loginFormRoute);
+  const importChanges = [];
+  for (const route of routes) {
+    importChanges.push(insertImport(source, routingFilePath, route.name, route.location));
   }
+
+  applyChanges(host, importChanges, routingFilePath);
+  for (const route of routes) {
+    if (route.type === 'component' && route.path) {
+      source = getSourceFile(host, routingFilePath)!;
+      const routeInSource = findRoutesInSource(source)!;
+      if (!hasComponentInRoutes(routeInSource, route.path)) {
+        const routeToAdd = getRoute(route.name, route.name, route.path);
+        insertItemToArray(host, routingFilePath, routeInSource, routeToAdd);
+      }
+    }
+  }
+
 };
 
 function setPostfix(host: Tree, name: string) {

packages/devextreme-schematics/src/add-layout/index_spec.ts

@@ -243,9 +243,25 @@ describe('layout', () => {
     const routesContent = tree.readContent('/src/app/app.routes.ts');
 
     expect(routesContent)
-      .toContain(`{\n    path: 'login-form',\n    component: LoginFormComponent,\n    canActivate: [ AuthGuardService ]\n  },`);
-  });
+      .toContain(`import { AuthGuardService } from './shared/services';`);
+    const loginFormComponentMatch = routesContent.match(/\bLoginFormComponent\b/g);
+    const resetPasswordFormComponentMatch = routesContent.match(/\bResetPasswordFormComponent\b/g);
+    const createAccountFormComponentMatch = routesContent.match(/\bCreateAccountFormComponent\b/g);
+    const changePasswordFormComponentMatch = routesContent.match(/\bChangePasswordFormComponent\b/g);
+    expect(loginFormComponentMatch?.length).toBe(2);
+    expect(resetPasswordFormComponentMatch?.length).toBe(2);
+    expect(createAccountFormComponentMatch?.length).toBe(2);
+    expect(changePasswordFormComponentMatch?.length).toBe(2);
 
+    expect(routesContent)
+      .toContain(`path: 'login-form'`);
+    expect(routesContent)
+      .toContain(`path: 'reset-password'`);
+    expect(routesContent)
+      .toContain(`path: 'create-account'`);
+    expect(routesContent)
+      .toContain(`path: 'change-password/:recoveryCode'`);
+  });
   it('should use selected layout', async () => {
     const runner = new SchematicTestRunner('schematics', collectionPath);
     options.layout = 'side-nav-inner-toolbar';

packages/devextreme-schematics/src/utility/routing.ts

@@ -20,10 +20,10 @@ export function hasComponentInRoutes(routes: Node, name: string) {
   return routesText.indexOf(componentName) !== -1;
 }
 
-export function getRoute(name: string) {
+export function getRoute(name: string, componentName?: string, componentPath?: string) {
   return `  {
-    path: '${strings.dasherize(name)}',
-    component: ${getRouteComponentName(name)},
+    path: '${componentPath || strings.dasherize(name)}',
+    component: ${componentName || getRouteComponentName(name)},
     canActivate: [ AuthGuardService ]
   }`;
 }