使用 Jasmine & Karma 测试 HTML 按钮

Question

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);
    }));

These are my files. I want to do a test on my onSubmit() function. I Have a HTML Page with a button id='MyButton' . If I click the button the OnSubmit() function get called.

If I run

ng test

I get this:

It says: "Expected spy onSubmit to have been called once. It was called 0 times."

So how can I detect the onSubmit function to be called if I use a html Button?

Answer 1

There are a few things that are not properly set up, but mainly the way you are setting up your click event. It should be (click)="onSubmit()" and not click="onSubmit()" .

Also I would change the way you are setting up your spy to the following:

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

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

Here is a working stackblitz.