使用 Karma/Jasmine 进行 Angular 8 测试 ->角度路线中的 loadChildren 未涵盖 100% 的代码覆盖率 [英] Angular 8 test with Karma / Jasmine -> 100% code coverage not covered for loadChildren in angular routes

问题描述

从 angular 7 升级到 8 后，您的应用程序路由的 loadChildren 发生了重大变化.当这些被修复并且所有测试都在运行时，我没有得到 100% 的代码覆盖率(不再)，因为 loadChildren 不再是一个字符串"，而是一个 LoadChildrenCallBack.

After upgrading from angular 7 to 8, there were breaking changes in loadChildren for your application routes. When these are fixed and all test are running, i don't get a 100% code coverage (anymore), because the loadChildren isn't a 'string' anymore, but a 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 {}

推荐答案

在您的 spec.ts 文件中

In your spec.ts file

import { YourModule } from '....'

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 route = router.config[0].children.find(rc => rc.path === '<DESIRED_PATH>');
       // you can also make this an expectation...
       if (typeof route.loadChildren === 'function') {
           expect(await route.loadChildren()).toEqual(YourModule)
       }

   });
});

这篇关于使用 Karma/Jasmine 进行 Angular 8 测试 ->角度路线中的 loadChildren 未涵盖 100% 的代码覆盖率的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！