Тестирование угловых материалов элементов с мокко - PullRequest
Новая
       28

Тестирование угловых материалов элементов с мокко

0 голосов
/ 21 сентября 2019

Я хотел бы проверить, что моя верстка HTML верна.Я понимаю, как правильно тестировать компоненты и сервисы, но HTML-код бросает меня в тупик.

компонент: 

@Component({
  selector: 'navigation',
  templateUrl: './navigation.component.html',
  styleUrls: ['./navigation.component.scss']
})
export class NavigationComponent implements OnInit {

  @ViewChild('myToolbar', {static: false}) myToolbar: MatToolbar;

  constructor() { }

  ngOnInit() {
  }

}

Шаблон: 

<div style="height: 100vh"> 
  <mat-toolbar #myToolbar color="primary">
    <div fxShow="true" fxHide.gt-xs="true">
      <button mat-icon-button (click)="sidenav.toggle()">
        <mat-icon>menu</mat-icon>
      </button>
    </div>

    <a mat-button #logoButton routerLink="/">
      <div>LOGO</div>
    </a>
    <span class="example-spacer"></span>
    <div #menuLayout
         fxFlex
         fxLayout
         fxLayoutAlign="flex-end"
         fxShow="true"
         fxHide.lt-sm="true">
      <button mat-flat-button
              #myFirstButton
              [matMenuTriggerFor]="firstMenu"
              [disableRipple]="true"
              class="toolbar-button">Menu</button>
      <mat-menu #firstMenu="matMenu" yPosition="below">
        <button mat-menu-item>Item 1</button>
        <button mat-menu-item>Item 2</button>
      </mat-menu>
    </div>
  </mat-toolbar>

Тест 

  it('should have 100vh div', () => {
    const compiled = fixture.debugElement.nativeElement;
    // This works but seems like I'm not doing it right
    const values = compiled.querySelector('div').style._values;
    expect(values.hasOwnProperty('height')).toBe(true);
    expect(values['height']).toEqual('100vh');
  });

  it('should have correct toolbar', () => {
    // Using ViewChild, this seems okay
    expect(component.gamengaiToolbar).toBeDefined();
    expect(component.gamengaiToolbar.color).toEqual('primary');
  });

  it('should have correct buttons', () => {
    // This doesn't really give me a lot of useful info
    const compiled = fixture.debugElement.nativeElement;
    const buttons = compiled.querySelectorAll('button');
    expect(buttons.length).toEqual(5);
  });

Короче говоря, для моего я хочу проверить, что всенастройки fx есть.Я предполагаю, что querySelector возвращает элемент только в его окончательной форме javascript.Точно так же, я хотел бы проверить, что это плоская кнопка, со всеми привязками в такте.Как мне это сделать?

...