小编S.G*_*eau的帖子

如何在angular2中模拟一个activatedRoute父路由以进行测试?

假设我有这个

export class QuestionnaireQuestionsComponent {

    questions: Question[] = [];
    private loading:boolean = true;


    constructor(
        private route: ActivatedRoute,
        public questionnaireService:QuestionnaireService) {}

    ngOnInit(){
        this.route.parent.params.subscribe((params:any)=>{
            this.questionnaireService.getQuestionsForQuestionnaire(params.id).subscribe((questions)=>{
                this.questions = questions;
                this.loading = false;
            });
        });
    }


}
Run Code Online (Sandbox Code Playgroud)

我的组件实际上工作得很好.问题是我想对它进行单元测试,但我无法弄清楚如何模拟this.route.parent对象.这是我的测试失败了

beforeEach(()=>{
    route = new ActivatedRoute();
    route.parent.params = Observable.of({id:"testId"});

    questionnaireService = jasmine.createSpyObj('QuestionnaireService', ['getQuestionsForQuestionnaire']);
    questionnaireService.getQuestionsForQuestionnaire.and.callFake(() => Observable.of(undefined));
    component = new QuestionnaireQuestionsComponent(route, questionnaireService);
});


describe("on init", ()=>{
    it("must call the service get questions for questionnaire",()=>{
        component.ngOnInit();
        expect(questionnaireService.getQuestionsForQuestionnaire).toHaveBeenCalled();
    });  
});
Run Code Online (Sandbox Code Playgroud)

测试因此错误而失败

TypeError: undefined is not an object (evaluating …
Run Code Online (Sandbox Code Playgroud)

unit-testing mocking jasmine typescript angular

37
推荐指数
5
解决办法
3万
查看次数

如何根据所调用的URL动态定位<router-outlet>?

我有一个复杂的界面,我在页面(这里是关于页面)中有一个动态项目列表(想象一个手风琴小部件),当我调用这个url时:

/about/item/1
Run Code Online (Sandbox Code Playgroud)

它"路由"到一个手风琴项目并加载点击列表项目中的内容(手风琴的一个项目).

具体来说,我想要做的是:

@Component({
    selector: 'app-about',
    template: `
      <ul>
          // dynamic list
          <li>
              <a [routerLink]="['/about/item', 1]">Item 1</a>
              // <router-outlet></router-outlet>
              // if url is /about/item/1
          </li>
          <li>
              <a [routerLink]="['/about/item', 2]">Item 2</a>
              // <router-outlet></router-outlet>
              // if url is /about/item/2
          </li>
      </ul>         
    `
})
export class AboutComponent { }
Run Code Online (Sandbox Code Playgroud)

我正在使用angular:2.0.0-rc.4,angular/router:3.0.0-beta.2

这似乎不是正确的做法.我怎么能这样做"有角度的方式"?

非常感谢

angular2-routing angular

7
推荐指数
1
解决办法
2201
查看次数