Angular 2 单元测试数据从父组件传递到子组件

Posted 2023-02-23

【中文标题】Angular 2 单元测试数据从父组件传递到子组件

【英文标题】：Angular 2 unit testing data passed from parent component to child component

【发布时间】：2016-10-25 06:03:02

【问题描述】：

我有一个关于我看到的（极少数）测试从父组件传递到子组件的数据示例的方式的问题。目前，在Angular2 docs 中，他们正在通过检查子组件的 dom 值来测试数据是否已从父组件传递到子组件。我对这种方法的问题是它强制父规范了解子组件的 html 结构。父组件的工作只是将数据传递给子组件。一个例子……

我有一个故事组件如下：

'use strict';

import Component, OnInit, Input from '@angular/core';
import StoryService from '../../services/story.service';
import StoryModel from '../../models/story-model';
import AlbumCover from './album-cover/album-cover';
import Author from "./author/author";
import StoryDuration from "./story-duration/story-duration";

@Component(
    selector: 'story',
    templateUrl: 'build/components/story/story.html',
    providers: [StoryService],
    directives: [AlbumCover, Author, StoryDuration]
)

export class Story implements OnInit 
    @Input('id') id:number;
    public story:StoryModel;

    constructor(private storyService:StoryService) 

    ngOnInit() 
        this.getStory();
    

    private getStory() 
        this.storyService.getStory(this.id).subscribe(story => this.story = story);
    

注意它是如何在@Component 装饰器的directives 数组中具有AlbumCover 组件依赖关系的。

这是我的故事模板：

<div *ngIf="story">
    <album-cover [image]="story.albumCover" [title]="story.title"></album-cover>
    <div class="author-duration-container">
        <author [avatar]="story.author.avatar" [name]="story.author.name"></author>
        <story-duration [word-count]="story.wordCount"></story-duration>
    </div>
</div>

请注意<album-cover [image]="story.albumCover" [title]="story.title"></album-cover> 行，我将story.albumCover 从Story 控制器绑定到AlbumCover 的image 属性。这一切都很完美。现在开始测试：

import provide from '@angular/core';
import beforeEach, beforeEachProviders, describe, expect, injectAsync, it, setBaseTestProviders, resetBaseTestProviders from '@angular/core/testing';
import HTTP_PROVIDERS from '@angular/http';
import BROWSER_APP_DYNAMIC_PROVIDERS from "@angular/platform-browser-dynamic";
import TEST_BROWSER_STATIC_PLATFORM_PROVIDERS, ADDITIONAL_TEST_BROWSER_PROVIDERS from '@angular/platform-browser/testing';
import ComponentFixture, TestComponentBuilder from '@angular/compiler/testing';
import Observable from 'rxjs/Observable';

// TODO: this pattern of importing 'of' can probably go away once rxjs is fixed
// https://github.com/ReactiveX/rxjs/issues/1713
import 'rxjs/add/observable/of';

resetBaseTestProviders();
setBaseTestProviders(
    TEST_BROWSER_STATIC_PLATFORM_PROVIDERS,
    [BROWSER_APP_DYNAMIC_PROVIDERS, ADDITIONAL_TEST_BROWSER_PROVIDERS]
);

import Story from './story';
import StoryModel from '../../models/story-model';
import StoryService from '../../services/story.service';

var mockStory = 
    id: 1,
    title: 'Benefit',
    albumCover: 'images/placeholders/story-4.jpg',
    author: 
        id: 2,
        name: 'Brett Beach',
        avatar: 'images/placeholders/author-1.jpg'
    ,
    wordCount: 4340,
    content: '<p>This is going to be a great book! I <strong>swear!</strong></p>'
;

class MockStoryService 
    public getStory(id):Observable<StoryModel> 
        return Observable.of(mockStory);
    


describe('Story', () => 
    var storyFixture,
        story,
        storyEl;

    beforeEachProviders(() => [
        HTTP_PROVIDERS
    ]);

    beforeEach(injectAsync([TestComponentBuilder], (tcb:TestComponentBuilder) => 
        return tcb
            .overrideProviders(Story, [
                provide(StoryService, 
                    useClass: MockStoryService
                )
            ])
            .createAsync(Story)
            .then((componentFixture:ComponentFixture<Story>) => 
                storyFixture = componentFixture;
                story = componentFixture.componentInstance;
                storyEl = componentFixture.nativeElement;
                componentFixture.detectChanges();
            );
    ));

    describe(`ngOnInit`, () => 
        describe(`storyService.getStory`, () => 
            it(`should be called, and on success, set this.story`, () => 
                spyOn(story.storyService, 'getStory').and.callThrough();
                story.ngOnInit();
                expect(story.storyService.getStory).toHaveBeenCalled();
                expect(story.story.title).toBe('Benefit');
            );
        );
    );

    it('should not show the story component if story does not exist', () => 
        story.story = null;
        storyFixture.detectChanges();
        expect(storyEl.children.length).toBe(0);
    );

    it('should show the story component if story exists', () => 
        story.story = mockStory;
        storyFixture.detectChanges();
        expect(storyEl.children.length).not.toBe(0);
    );

    describe('story components', () => 
        beforeEach(() => 
            story.story = mockStory;
            storyFixture.detectChanges();
        );

        describe('album cover', () => 
            var element,
                img;

            beforeEach(() => 
                element = storyEl.querySelector('album-cover');
                img = element.querySelector('img');
            );

            it(`should be passed the story albumCover and title to the album cover component`, () => 
                expect(img.attributes.src.value).toBe(mockStory.albumCover);
                expect(img.attributes.alt.value).toBe(mockStory.title);
            );
        );

        describe('author', () => 
            var element,
                img,
                nameEl;

            beforeEach(() => 
                element = storyEl.querySelector('author');
                img = element.querySelector('img');
                nameEl = element.querySelector('.name');
            );

            it(`should be passed the author name and avatar`, () => 
                expect(img.attributes.src.value).toBe(story.story.author.avatar);
                expect(img.attributes.alt.value).toBe(story.story.author.name);
                expect(nameEl.innerText).toBe(story.story.author.name);
            );
        );

        describe('story duration', () => 
            var element;

            beforeEach(() => 
                element = storyEl.querySelector('.story-duration');
            );

            it(`should be passed the word count to generate the total read time`, () => 
                story.story.wordCount = 234234;
                storyFixture.detectChanges();
                expect(element.innerText).toBe(`852 min read`);
            );
        );
    );
);

看看我的describe('album cover'...。我通过这种期望的方式是找到<album-cover> 元素，然后在其中找到<img> 标记，然后检查<img> 的DOM 属性。对我来说，这个期望应该在 album-cover.spec.ts 内部 - 而不是 story.spec.ts。

我的问题是：有没有办法测试父组件是否在不依赖读取 dom 值的情况下将数据传递给子组件？

【参考方案1】：

您可以使用overrideTemplate 传递视图，仅用于测试。

   return tcb
        .overrideTemplate(AlbumCover, '<div>valueFromParent</div>')
        .overrideProviders(Story, [

【讨论】：

Gunter，这正是我想要的。刚刚更新了我的测试，它运行良好。谢谢！！！！