Angular 在角度管线定义中发布测试数据

我试图测试一个基于路由中的数据动态设置标题的组件，但在测试位时遇到了问题

我试图模拟路由数据，但在我获取数据的方法中，

findulotedata

在调试测试时，它只是没有定义

我可以直观地验证组件本身是否执行了我希望它执行的操作，但是我在模拟路由数据位时遇到了问题

就像我说的，一切都在被调用，但我对routerState的模拟并没有正常工作。数据未定义

如何正确模拟路由数据

@Injectable()
class FakeRouter {
    url: string;
    subject = new Subject();
    events = this.subject.asObservable();
    routerState = {
        snapshot: {
            root: {
                data: {title: 'Title'}
            }
        }
    };
    navigate(url: Array<string>): void {
        this.url = url.join('');
        this.triggerNavEvents(this.url);
    }

    triggerNavEvents(url: string): void {
        this.subject.next(new NavigationEnd(0, url, null));
    }
}

测试：

import { async, ComponentFixture, TestBed } from '@angular/core/testing';

import { PageTitleComponent } from './page-title.component';
import {NavigationEnd, Router} from '@angular/router';
import { RouterTestingModule } from '@angular/router/testing';
import {Subject} from 'rxjs/Subject';
import {Injectable} from '@angular/core';

@Injectable()
class FakeRouter {
    url: string;
    subject = new Subject();
    events = this.subject.asObservable();
    routerState = {
        snapshot: {
            root: {
                data: {title: 'Title'}
            }
        }
    };
    navigate(url: Array<string>): void {
        this.url = url.join('');
        this.triggerNavEvents(this.url);
    }

    triggerNavEvents(url: string): void {
        this.subject.next(new NavigationEnd(0, url, null));
    }
}

describe('PageTitleComponent', () => {
    let component: PageTitleComponent;
    let fixture: ComponentFixture<PageTitleComponent>;
    let router: Router;

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [RouterTestingModule],
            declarations: [
                PageTitleComponent
            ],
            providers: [
                { provide: router, useClass: FakeRouter }
            ]
        })
            .compileComponents()
            .then(() => {
                fixture = TestBed.createComponent(PageTitleComponent);
                component = fixture.componentInstance;

                router = TestBed.get(Router);
                fixture.detectChanges();
            });
    }));
    it('should create', () => {
        expect(component).toBeTruthy();
    });

    describe('the title should be title', () => {
        beforeEach(async(() => {
            router.navigate(['']);
        }));
        it('the title should be title', () => {
            expect(component.title).toBe('Title');
        });
    });
});

从'@angular/core/testing'导入{async，ComponentFixture，TestBed}；
从“./page title.component”导入{PageTitleComponent}；
从'@angular/Router'导入{NavigationEnd，Router}；
从“@angular/router/testing”导入{RouterTestingModule}；
从'rxjs/Subject'导入{Subject}；
从“@angular/core”导入{Injectable}；
@可注射（）
冒牌货{
url:string；
主题=新主题（）；
events=this.subject.asObservable（）；
路由器状态={
快照：{
根目录：{
数据：{title:'title'}
}
}
};
导航（url:Array）：无效{
this.url=url.join（“”）；
this.triggerNavEvents（this.url）；
}
triggerNavEvents（url:string）：无效{
this.subject.next（新的NavigationEnd（0，url，null））；
}
}
描述（'PageTitleComponent'，（）=>{
let组件：PageTitleComponent；
let夹具：组件夹具；
让路由器：路由器；
beforeach（异步（（）=>{
TestBed.configureTestingModule({
导入：[RouterTestingModule]，
声明：[
页面标题组件
],
供应商：[
{提供：路由器，useClass:FakeRouter}
]
})
.compileComponents（）
.然后（（）=>{
fixture=TestBed.createComponent（页面标题组件）；
组件=fixture.componentInstance；
路由器=测试台.get（路由器）；
fixture.detectChanges（）；
});
}));
它（'应该创建'，（）=>{
expect（component.toBeTruthy（）；
});
描述（'标题应为标题'，（）=>{
beforeach（异步（（）=>{
路由器。导航（['']）；
}));
它（'标题应该是标题'，（）=>{
expect（component.title）.toBe（“title”）；
});
});
});

我解决了自己的问题，就像这些事情经常发生的那样

我没有试图进入

router.routerState

获取路由数据，而是切换到使用

ActivatedRoute

，并使用了其中的快照。早些时候，我回避了该实现，因为我发现订阅

ActivatedRoute

的

data

属性不会产生路由

data

。它只是一个空白的物体

然而，我发现，一旦路由事件到达

NavigationEnd

时，如果我查看

ActivatedRoute

，我要查找的所有数据都在那里

ActivatedRoute

更容易模拟。在

TestBed.configureTestingModule（）内部

我将这一部分添加到提供程序中：

{
    provide: ActivatedRoute,
    useValue: {
        snapshot: {
            data: {title: 'Title'}
        }
    },
},

我的主TS文件中的更改如下：

constructor(private router: Router, private activatedRoute: ActivatedRoute, private cdRef: ChangeDetectorRef) {
}

ngOnInit(): void {
    this.router.events
        .filter((event: any) => event instanceof NavigationEnd)
        .takeUntil(this.unsubscribe)
        .subscribe(() => {
            const routeData = this.findRouteData(this.activatedRoute.snapshot);
            if (routeData.hasOwnProperty('title')) {
                this.title = routeData.title;
                this.cdRef.detectChanges();
            }
        });
}

我从模拟路由器中删除了以下内容：

routerState = {
    snapshot: {
        root: {
            data: {title: 'Title'}
        }
    }
};

真的没有太多的变化

注意：我可能仍然遗漏了一些东西。如果你认为我是，请告诉我

constructor(private router: Router, private activatedRoute: ActivatedRoute, private cdRef: ChangeDetectorRef) {
}

ngOnInit(): void {
    this.router.events
        .filter((event: any) => event instanceof NavigationEnd)
        .takeUntil(this.unsubscribe)
        .subscribe(() => {
            const routeData = this.findRouteData(this.activatedRoute.snapshot);
            if (routeData.hasOwnProperty('title')) {
                this.title = routeData.title;
                this.cdRef.detectChanges();
            }
        });
}

routerState = {
    snapshot: {
        root: {
            data: {title: 'Title'}
        }
    }
};