Question

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

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

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

您不需要为每条路线创建不同的组件。虚拟测试组件绰绰有余。

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),
            ]
        });
};

使用Jasmine通过Router测试Angular 2 App

1 个答案: