Тестовая кнопка c по идентификатору

Question

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

<a class="sub-menu-button" [matMenuTriggerFor]="menu" id ="subMenuBtn"
[class.full-opacity]="getNodeResult(node).highlight" [class.highlight]="text.highlight"
matTooltip="Search options..." [matTooltipShowDelay]="1000">{{ text.text }}</a>
      <button id="MyButton" mat-menu-item matTooltip="New search for '{{ 
      text.text }}''"
      (click)="newSearch(text.text)">New Search</button>

Я хочу проверить эту кнопку c в файле spe c .ts, поэтому я добавили к нему тег id.

Однако тест spe c возвращает ноль при поиске кнопки:

    it('should call the newSearch function if New button is clicked', () => {
        spyOn(component, 'newSearch');
        let origButton = 
            fixture.nativeElement.querySelector('#subMenuBtn');
        expect(origButton).toBeTruthy(); //this works
        let button = fixture.nativeElement.querySelector('#MyButton');
        expect(button).toBeTruthy(); //this doesn't
        button.click();
        expect(component.newSearch).toHaveBeenCalled();
    });

Бит истины не выполняется, поскольку кнопка возвращается как значение NULL. Кто-нибудь может увидеть, что я делаю не так?

Answer 1

Есть ли *ngIf на родительском элементе кнопки, препятствующей ее отображению? Если это так, убедитесь, что это условие выполнено, чтобы отображалась кнопка. Кроме того, директива mat-menu-item преобразует кнопку / удаляет идентификатор? Мне придется взглянуть на ваш полный файл TypeScript, HTML и Spe c, но при съемке в темноте, попробуйте:

// You have to import `By` from '@angular/platform-browser` I believe.
let button = fixture.debugElement.query(By.css('#MyButton')).nativeElement;
console.log(button); // ===> Make sure you see some HTML being outputted

Также попробуйте console.log(fixture.nativeElement), чтобы увидеть HTML в определенный момент времени убедитесь, что кнопка есть.