0

我正在尝试为我的应用程序中的组件编写单元测试。这是一个非常简单的组件，称为 TroubleShootingPage，如果有人在我的应用程序的其余部分出现问题，它只应该显示帮助页面。

所有测试都通过了，但在 Karma 的输出中我看到了一个提示：SPEC HAS NO EXPECTATIONS：

我的业力输出

据称没有预期的测试正在处理getTroubleShootingPage()我的 TroubleShootingPage 组件中的函数，如下所示：

export interface Entry<T> {
    sys: Sys;
    fields: T;
    toPlainObject(): object;
    update(): Promise<Entry<T>>;
}

troubleShootingPage: Entry<any>;

constructor(private contentfulService: ContentfulService) {}

ngOnInit() {
    this.getTroubleShootingPage("en-US")
}

getTroubleShootingPage(locale: string) {
    this.contentfulService.getTroubleShootingPage(locale).then(page => {
      this.troubleShootingPage = page;
      ...
  }
}

如您所见，故障排除页面的内容/文本必须从 contentfulService 加载，并且根据用户的语言从 API（Contentful）加载。所以我只想确保函数被调用，并且从 contentfulService 返回的输入正确分配给变量this.troubleShootingPage。

测试看起来像这样：

describe('TroubleshootingPageComponent', () => {
    let component: TroubleshootingPageComponent;
    let fixture: ComponentFixture<TroubleshootingPageComponent>;
    
    let contentfulServiceStub: Partial<ContentfulService> = {
        getTroubleShootingPage: () => {
            return new Promise<Entry<any>>(() => {
                return troubleShootingPageMock;
            });
        }
    };

    let troubleShootingPageMock: Entry<any>;
    troubleShootingPageMock = {
        fields: {
            description: "Please read here for further help:",
            mainText: {},
            textCancelButton: "Quit",
            textConfirmButton: "Continue",
            title: "Need Help?"
        },
        toPlainObject() {
            return null;
        },
        update() {
            return null;
        },
        sys: {
            type: "",
            id: "string",
            createdAt: "string",
            updatedAt: "string",
            locale: "string",
            contentType: {
                sys: null
            },
        },
    };

    beforeEach(async(() => {
        TestBed.configureTestingModule({
            imports: [],
            declarations: [TroubleshootingPageComponent],
            schemas: [NO_ERRORS_SCHEMA],
            providers: [{ provide: ContentfulService, useValue: contentfulServiceStub }]
        })
            .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(TroubleshootingPageComponent);
        component = fixture.componentInstance;
        fixture.detectChanges();
    });

   it('should get the troubleShootingPage form Contentful', () => {
        component.getTroubleShootingPage("en-GB");
        setTimeout(() => {
            expect(component.troubleShootingPage).toEqual(troubleShootingPageMock.fields);
        }, 1000)
    });

    // I also tried:
    // it('should get the troubleShootingPage form Contentful', (done) => {
    //     component.getTroubleShootingPage("en-GB");
    //     setTimeout(() => {
    //         expect(component.troubleShootingPage).toEqual(troubleShootingPageMock.fields);
    //         done();
    //     }, 1000)
    // });
});

我添加了一个 timeout ，setTimeout()因为没有它component.troubleShootingPagealways undefined，因为在解决 getTroubleShootingPage() 函数中的 Promise 之前，测试进入了ecpect()语句：

it('should get the troubleShootingPage form Contentful', () => {
            component.getTroubleShootingPage("en-GB");
            expect(component.troubleShootingPage).toEqual(troubleShootingPageMock.fields);            
});

-> 这失败了，因为component.troubleShootingPageis undefined。

我怎么能解决这个问题，有什么想法吗？

4

1 回答 1

0

好的，感谢您的评论，使函数返回承诺的提示是必要的部分：

在组件中，我创建了一个仅返回承诺的函数：

 getTroubleShootingPage(locale: string) {
    this.getTroubleShootingPageFromService(locale).then(page => {
      this.troubleShootingPage = page;
   })
}

getTroubleShootingPageFromService(locale: string) {
    return this.contentfulService.getTroubleShootingPage(locale);
}

在我的测试中，我现在有了这个，效果很好：

it('should get the troubleShootingPage form Contentful', async () => {
        spyOn(contentfulServiceStub, 'getTroubleShootingPage').and.returnValue(Promise.resolve(troubleShootingPageMock))
        await component.getTroubleShootingPage("en-US");
        expect(component.troubleShootingPage).toEqual(troubleShootingPageMock);
    });
于 2021-01-25T10:05:53.177 回答