使用 Karma/Jasmine 进行 Angular 8 测试 -> Angular 路由中的 loadChildren 未覆盖 100% 代码覆盖率

Question

从 Angular 7 升级到 8 后，您的应用程序路由的 loadChildren 发生了重大变化。当这些问题得到修复并且所有测试都在运行时，我不再获得 100% 的代码覆盖率，因为 loadChildren 不再是“字符串”，而是 LoadChildrenCallBack。

我如何测试这部分代码

设置:

import { NgModule } from '@angular/core';
import { RouterModule, RouterStateSnapshot, Routes } from '@angular/router';
import {
    RouterStateSerializer,
    StoreRouterConnectingModule,
} from '@ngrx/router-store';

import { LanguageGuard } from '@routes/guards/language-guard.service';
import { RouterStateUrl } from 'interfaces';
import { ErrorPageComponent } from 'pages';

/**
 * Class to implements the RouterStateSerializer with a custom serializer
 */
export class CustomSerializer implements RouterStateSerializer<RouterStateUrl> {
    /**
     * Serialize the RouterState with the CustomSerialzer
     * @param {RouterStateSnapshot} routerState
     * @returns RouterStateUrl
     */
    serialize(routerState: RouterStateSnapshot): RouterStateUrl {
        let route = routerState.root;
        while (route.firstChild) {
            route = route.firstChild;
        }
        const {
            url,
            root: { queryParams },
        } = routerState;
        const { params } = route;
        return { url, params, queryParams };
    }
}

const appRoutes: Routes = [
    {
        children: [
            {
                path: '',
                pathMatch: 'prefix',
                redirectTo: 'en',
            },
            {
                component: ErrorPageComponent,
                path: '404',
            },
            {
                canActivate: [LanguageGuard],
                children: [
                    {
                        loadChildren: () =>
                            import('../modules/home.module').then(
                                m => m.HomeModule,
                            ),
                        path: '',
                        pathMatch: 'full',
                    },
                ],
                path: ':language',
            },
        ],
        path: '',
        runGuardsAndResolvers: 'always',
    },
];

/**
 * Marks an class as an NgModule so it could be configured
 */
@NgModule({
    exports: [RouterModule],
    imports: [
        RouterModule.forRoot(appRoutes, {
            enableTracing: false,
            onSameUrlNavigation: 'reload',
        }),
        StoreRouterConnectingModule.forRoot({
            serializer: CustomSerializer,
        }),
    ],
    providers: [{ provide: RouterStateSerializer, useClass: CustomSerializer }],
})

/**
 * Exports the AppRoutingModule from the NgModule
 */
export class AppRoutingModule {}

Answer 1

在您的spec.ts文件中

let router: Router;

beforeEach(async(() => {
   TestBed.configureTestingModule({
       // You need to config your TestBed and load any dependencies that are required by your Module.
       imports: [<more-here>, RouterTestingModule, <more-here>]
   });
   
   router = TestBed.get(Router);

}));

describe('Route XXXXX', () => {
   it('should load specific module', async () => {
       // locate the route config you are after
       // could be in the main config or in children or children of children
       const { YourModule } = await import('/path/to/module');
       const route = router.config[0].children.find(rc => rc.path === '<DESIRED_PATH>');
       expect(await route.loadChildren()).toEqual(YourModule)

   });
});