使用 Jasmine 使用路由器测试 Angular 2 应用程序答案

【问题标题】：Using Jasmine to test Angular 2 App with Router使用 Jasmine 使用路由器测试 Angular 2 应用程序
【发布时间】：2016-05-03 19:11:58
【问题描述】：

我有一个 Angular 2 应用程序，它使用路由器导航到不同的页面。我想通过调用包含this.router.parent.navigate 的函数或“单击”UI 组件来触发导航来测试从一个组件到另一个组件的路由是否正确完成。

第一个问题： Jasmine 框架是一个很好的选择来测试它还是应该让 Jasmine 严格地单独对每个组件进行单元测试？

第二个问题：如果 Jasmine 有能力或是完成此类任务的不错选择，我该如何为我的组件创建一个包含路由器的测试（当它在应用程序的根目录）并将RouteConfig 路径分配给该路由器？下面是我的代码尝试......但它当然失败了。

describe('MyApp', () => {

    beforeEachProviders(() => [Router]);

    it('should have name property set', inject([Router], (router: Router) => {
        let myApp = new MyApp(router);
        expect(myApp).toBeDefined();
    }));
});

【问题讨论】：

标签： angular jasmine karma-jasmine angular2-routing

【解决方案1】：

Jasmine 框架将是一个不错的选择。以下测试示例可以扩展到您的应用程序，以确保正确完成从一个组件到另一个组件的路由（@angular/router 3.4.7）。

我最近在我的个人博客上写了一篇关于这个的文章：https://medium.com/burak-tasci/using-jasmine-framework-to-test-angular-router-b568a232efed

首先，让我们导入我们在这个测试中需要的依赖项：

import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
import { Component, NgModule } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { Routes } from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';

然后，让我们创建一个包含router-outlet 的TestBootstrapComponent - 用于引导测试应用程序；和TestComponent。

您无需为每条路线创建不同的组件。一个虚拟测试组件就足够了。

@Component({ template: '<router-outlet></router-outlet>' })
export class TestBootstrapComponent {}

@Component({ template: '' })
export class TestComponent {}

现在，您需要将这些组件导入应用程序。

请记住，组件只能由一个模块导入，您应该创建一个 shared module 并在那里导入组件 - 如果需要，可以由任何 feature modules 导入：

@NgModule({
    declarations: [TestComponent,TestBootstrapComponent],
    imports: [RouterTestingModule]
})
export class TestSharedModule { }

然后，您需要提供routes：

export const testRoutes: Routes = [
    {
        path: '',
        children: [
            {
                path: '',
                component: TestComponent
            },
            {
                path: 'about',
                component: TestComponent
            }
        ]
    },
    {
        path: 'change-language/:languageCode',
        component: TestComponent
    },
    {
        path: '**',
        redirectTo: '',
        pathMatch: 'full'
    }
];

最后，是时候为测试目的准备模块配置了：

// test module configuration for each test
export const testModuleConfig = () => {
    // reset the test environment before initializing it.
    TestBed.resetTestEnvironment();

    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting())
        .configureTestingModule({
            imports: [
                TestSharedModule,
                RouterTestingModule.withRoutes(testRoutes),
            ]
        });
};

毕竟，测试跨页面的路线导航就像下面这样简单：

describe('Some service',
    () => {
        beforeEach(() => {
            testModuleConfig();
        });

        it('should be able to navigate to `/`',
            fakeAsync(() => {
                const injector = getTestBed();
                const router = injector.get(Router);

                const fixture = TestBed.createComponent(TestBootstrapComponent);
                fixture.detectChanges();

                // initial navigation
                router.navigate(['/'])
                    .then(() => {
                        expect(router.url).toEqual('/');
                    });
            }));
});

【讨论】：