在茉莉花测试中模拟 DirectLine api 调用？答案

【问题标题】：Mocking a DirectLine api call in a jasmine test?在茉莉花测试中模拟 DirectLine api 调用？
【发布时间】：2019-04-17 10:04:36
【问题描述】：

我目前在我的 Angular 7 网络应用程序中使用 WebChat.js javascript 库来呈现网络聊天界面。我正在尝试对组件进行一些茉莉花测试，并且在模拟库中的某些函数时遇到了一些问题。

这是我的组件的代码：

import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';

/**
* Declares the WebChat property on the window object.
*/
declare global {
    interface Window {
        WebChat: any;
    }
}

window.WebChat = window.WebChat || {};

@Component({
    selector: 'app-web-chat',
    templateUrl: './web-chat.component.html',
    styleUrls: ['./web-chat.component.css']
})
export class WebChatComponent implements OnInit {
    @ViewChild("botWindow") botWindowElement: ElementRef;

    constructor() { }

    ngOnInit() {
        const directLine = window.WebChat.createDirectLine({
            secret: "mysecretkey",
            webSocket: false
        });

        window.WebChat.renderWebChat(
            {
                directLine: directLine,
                userID: "Agent"
            },
            this.botWindowElement.nativeElement
        );

        directLine
            .postActivity({
                from: { id: "Agent", name: "Agent" },
                text: "command watch",
                type: "message",
                value: "token"
            })
            .subscribe(
                id => console.log(`Posted activity, assigned ID ${id}`),
                error => console.log(`Error posting activity ${error}`)
            );

    }
}

这是我目前在我的 spec.ts 文件中得到的内容：

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

import { WebChatComponent } from './web-chat.component';

fdescribe('WebChatComponent', () => {
    let component: WebChatComponent;
    let fixture: ComponentFixture<WebChatComponent>;

    beforeEach(async(() => {
        const spy = jasmine.createSpyObj('window.WebChat', ['renderWebChat', 'createDirectLine']);

        TestBed.configureTestingModule({
            declarations: [WebChatComponent],
            providers: [
                { provide: window.WebChat, useValue: spy }
            ]
        }).compileComponents();
    }));

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

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

基本上，我正在逐步完成它，目前我遇到了一个错误，说 TypeError: window.WebChat.createDirectLine is not a function 但我认为创建一个间谍并在 beforeEach 部分中提供它可以解决这个问题。

我这样做的方式是否正确？老实说，我不太确定如何有效地模拟 DirectLine API 在我的 WebChatComponent 中进行的调用

【问题讨论】：

标签： angular unit-testing jasmine botframework direct-line-botframework

【解决方案1】：

问题是网络聊天向全局window 写入了太多内容，而测试中没有发生这种情况。您所要做的就是确保为测试加载网络聊天脚本（在您的 index.html 文件中）。

为此，请在karma.conf.js 中添加：

files: [
    'https://cdn.botframework.com/botframework-webchat/latest/webchat.js',
],

您可能正在使用不同的 webchat.js，例如 /master/webchat.js。只需使用您在index.html 中的同一个即可。

结果：

【讨论】：