web-dev-qa-db-fra.com

Comment tester uniquement la case à cocher dans Angular2

J'ai un exemple de code pour case à cocher écrit avec Angular2.

<div class="col-sm-7 align-left" *ngIf="Some-Condtion">
    <input type="checkbox" id="mob_Q1" value="Q1" />
    <label for="mob_Q1">Express</label>
</div>

Je veux tester uniquement la case ci-dessus. Comme je veux reconnaître la case à cocher et tester si elle est vérifiable. Comment puis-je tester cela avec Karma Jasmine?

unit-testingangularcheckboxkarma-jasmine
11
Protagonist

Composant, par ex. CheckboxComponent, contient l'élément d'entrée. Le test unitaire devrait ressembler à:

import {ComponentFixture, TestBed} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
import {CheckboxComponent} from './checkbox.component';

describe('Checkbox test.', () => {

let comp: CheckboxComponent;
let fixture: ComponentFixture<CheckboxComponent>;
let input: Element;

beforeEach(() => {
    TestBed.configureTestingModule(
        {
            declarations: [CheckboxComponent],
        },
    );

    fixture = TestBed.createComponent(CheckboxComponent);
    comp = fixture.componentInstance;
    input = fixture.debugElement.query(By.css('#mob_Q1')).nativeElement;
});

it('should click change value', () => {
    expect(input.checked).toBeFalsy(); // default state

    input.click();
    fixture.detectChanges();

    expect(input.checked).toBeTruthy(); // state after click
});
});
13
EvgenyV

EST-IL nécessaire d'écrire fixture.detectChanges()?

J'ai passé le même test sans ça et ça se termine avec succès. Le bouton 1 est "coché" par défaut

  const button1 = debugElement.nativeElement.querySelector(selectorBtn1);
  const button2 = debugElement.nativeElement.querySelector(selectorBtn2);
  ...
  expect(button1.checked).toBeTruthy();
  expect(button2.checked).toBeFalsy();

  button2.click();

  expect(button1.checked).toBeFalsy();
  expect(button2.checked).toBeTruthy();
  ...
1
Georgi Kirov