Тестирование HTML-кнопки с жасмином и кармой - PullRequest
Новая
       27

Тестирование HTML-кнопки с жасмином и кармой

0 голосов
/ 25 февраля 2019

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 ().У меня есть HTML-страница с кнопкой (id = 'MyButton').Если я нажимаю кнопку, вызывается функция OnSubmit ().

Если я запускаю 'ng test', я получаю эту картинку:

Вывод кармы

он говорит: «Ожидается, что шпион onSubmit был вызван один раз. Это было названо 0 раз. "

Итак, как я могу определить функцию onSubmit для вызова, если я использую кнопку HTML?

1 Ответ

0 голосов
/ 25 февраля 2019

Есть несколько вещей, которые не настроены должным образом, но в основном это способ, которым вы настраиваете событие click.Это должно быть (click)="onSubmit()", а не click="onSubmit()".

Также я бы изменил способ настройки вашего шпиона следующим образом: 

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

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

Здесь является рабочим стеком.

...