Угловой 6 - модульное тестирование Mat-Select - PullRequest
Новая
       9

Угловой 6 - модульное тестирование Mat-Select

0 голосов
/ 25 сентября 2018

1: выбор циновки имеет 4 значения, 1,2,3,4.

Приведенный ниже код хорошо работает для избранных.Так что я хотел бы поделиться, если это поможет читателям. 

it('check the length of drop down', async () => {

    const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
    trigger.click();
    fixture.detectChanges();
    await fixture.whenStable().then(() => {
        const inquiryOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
        expect(inquiryOptions.length).toEqual(4);
    });
});

2: Мне нужен еще один тест, чтобы проверить, что значение по умолчанию в том же выборе коврика равно 3 или нет.При загрузке страницы значение по умолчанию для раскрывающегося списка устанавливается на 3. 

it('should validate the drop down value if it is set by default', async () => {

    const trigger = fixture.debugElement.query(By.css('.mat-select-trigger')).nativeElement;
    trigger.click();
    fixture.detectChanges();
    await fixture.whenStable().then(() => {
        const inquiryOptions = fixture.debugElement.queryAll(By.css('.mat-option-text'));
        const value = trigger.options[0].value;
        expect(value).toContain(3);
    });
});

Любая помощь приветствуется.

Ответы [ 2 ]

0 голосов
/ 05 апреля 2019

Этот работает для меня в Angular 7 

const debugElement = fixture.debugElement;
const matSelect = debugElement.query(By.css('.mat-select-trigger')).nativeElement;
matSelect.click();
fixture.detectChanges();
const matOption = debugElement.query(By.css('.mat-option'))[0].nativeElement;
matOption.click();
fixture.detectChanges();
fixture.whenStable().then( () => {
   const inputElement: HTMLElement = debugElement.query(By.css('.ask-input')).nativeElement;
   expect(inputElement.innerHTML.length).toBeGreaterThan(0);
});
0 голосов
/ 11 декабря 2018

После некоторого тестирования я нашел ответ (по крайней мере, для своего кода) и надеюсь, что это также полезно для вас:

Когда я смотрел на DOM, когда приложение работает, я заметилчто значение по умолчанию для mat-select находится внутри этой структуры DOM: 

<mat-select>
    <div class="mat-select-trigger">
        <div class="mat-select-value">
            <span class="something">
                <span class="something">
                The value is here!

Но в моем случае в моем файле .ts был конструктор форм, и он использовался в ngOnInit().Кажется, что нормальный TestBed.createComponent(MyComponent) не вызывает ngOnInit().Поэтому я должен был сделать это, чтобы получить значение.В противном случае был только заполнитель span.

Итак, мой окончательный код выглядит следующим образом: 

it('should validate the drop down value if it is set by default', async () => {

    const matSelectValueObject: HTMLElement = fixture.debugElement.query(By.css('.mat-select-value')).nativeElement;
    component.ngOnInit();
    fixture.detectChanges();

    const innerSpan = matSelectValueObject.children[0].children[0]; // for getting the inner span

    expect(innerSpan.innerHTML).toEqual(3); // or '3', I did not test that
});

Кстати, я использую Angular 7, на случай, если это имеет значение.

...