使用 Jasmine 和 Karma 测试 HTML 按钮答案

【问题标题】：Testing HTML Button with Jasmine & Karma使用 Jasmine 和 Karma 测试 HTML 按钮
【发布时间】：2019-02-25 11:06:54
【问题描述】：

contact.component.html

<div>
    {{ text }}
</div>

<form id="contact-form" [formGroup] = "contactForm" novalidate>
    <div class = "form-group">
        <label class = "center-block">Name:
            <input class = "form-control" formControlName = "name">
        </label>
        <label class="center-block"> Email:
            <input class="form-control" formControlName="email">
        </label>
        <label class="center-block"> Text:
            <input class="form-control" formControlName="text">
        </label>
    </div>
    <button id="MyButton" click="onSubmit()">Click Me!</button>
</form>

contact.component.ts

import { Component } from '@angular/core';
import { FormControl, FormGroup, Validators} from '@angular/forms';

@Component({
    templateUrl : './contact.component.html',
    styleUrls: ['./contact.component.sass']
})

export class ContactComponent {
    text = 'contact Page';
    contactForm: FormGroup;

    contact = {
        name: '',
        email: '',
        text: ''
    };
    submitted = false;

    constructor() {

    }

    onSubmit(): void {
        this.submitted = true;
    }
}

contact.component.spec.ts

import { BrowserModule, By } from '@angular/platform-browser';
import { TestBed, async, ComponentFixture } from '@angular/core/testing';
import { DebugElement } from '@angular/core';


import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ContactComponent } from 'src/component/contact/contact.component';




describe('ContactComponent', () => {
    let comp: ContactComponent;
    let fixture: ComponentFixture<ContactComponent>;
    let de: DebugElement;
    let el: HTMLElement;
    beforeEach(async(() => {
        TestBed.configureTestingModule({
        declarations: [
            ContactComponent
        ],
        imports: [
            BrowserModule,
            FormsModule,
            ReactiveFormsModule
        ]
        }).compileComponents().then( () => {
            fixture = TestBed.createComponent(ContactComponent);
            comp = fixture.componentInstance;
        });
    }));

    it('should call the onSubmit method 1 times', async( () => {
        fixture.detectChanges();

        spyOn(comp, 'onSubmit');
        document.getElementById('MyButton').click();

        expect(comp.onSubmit).toHaveBeenCalledTimes(1);
    }));

这些是我的文件。我想对我的onSubmit() 函数进行测试。我有一个带有按钮 id='MyButton' 的 HTML 页面。如果我单击该按钮，则会调用 OnSubmit() 函数。

如果我跑了

ng 测试

我明白了：

它说：“预计 spy onSubmit 已被调用一次。它是调用了 0 次。”

那么，如果我使用 html 按钮，如何检测要调用的 onSubmit 函数？

【问题讨论】：

标签： javascript unit-testing jasmine karma-runner

【解决方案1】：

有一些设置不正确，但主要是您设置 click 事件的方式。应该是(click)="onSubmit()" 而不是click="onSubmit()"。

另外，我会将您设置间谍的方式更改为以下内容：

let onSubmitSpy = spyOn(component, 'onSubmit').and.callThrough();
expect(onSubmitSpy).not.toHaveBeenCalled();

// more code ..
expect(onSubmitSpy).toHaveBeenCalledTimes(1);

Here 是一个有效的堆栈闪电战。

【讨论】：

现在可以完美运行了。谢谢！我是公司的新人，整天都在挣扎。喜欢它。