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

我有一个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();
    }));
});

---

Jasmine框架将是一个不错的选择。以下测试样本可以根据您的应用程序进行缩放，以确保从一个组件到另一个组件的路由正确完成（@angular/router 3.4.7）

我最近在我的个人博客上写了一篇关于这一点的文章：

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

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';

然后，让我们创建一个

TestBootstrapComponent

，其中包含用于引导测试应用程序的

路由器出口

；和一个

TestComponent

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

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

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

然后，您需要提供

路线

：

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('/');
                    });
            }));
});

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('/');
                    });
            }));
});