Как настроить атрибут самоопределяемого компонента в кипарисе?

Question

Я новичок в Cypress и хочу проверить, нажимаю ли я свой тег, тогда видео должно измениться, но я не знаю, как настроить таргетинг на атрибут видео в моем компоненте app-video:

it('button next should show next video', function() {
  cy.visit('/carousel/videos');
  cy.get('[data-cy=videoComponent]') //i want to see the current value
  cy.get('[data-cy=buttonNext]').click();
  // I want to see the next value
});

атрибут, содержащий видеообъект: @Output() public currentVid: Video;

Можно ли нацелиться на этот объект и спросить его значение, чтобы проверить, изменился ли он?

<div class="body">
  <h3>B-roll & Timelapse</h3>
  <div class="container">
    <div *ngIf="videos$ | async as videos; else loadingOrError">
      <div class="vidDiv">
        <app-video [video]="currentVid" data-cy="videoComponent"></app-video>
        <div class="videoControls">
          <a
            mat-raised-button
            (click)="previous()"
            class="controls"
            data-cy="buttonPrevious"
          >
            <i class="material-icons">keyboard_arrow_left</i>
          </a>
          <a
            mat-raised-button
            (click)="next()"
            class="controls"
            data-cy="buttonNext"
          >
            <i class="material-icons">keyboard_arrow_right</i>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>
<ng-template #loadingOrError>
  <mat-card>
    <mat-error
      *ngIf="loadingErrors$ | async as errorMessage; else loading"
      data-cy="appError"
    >
      Error loading the recipe list: {{ errorMessage }}. <br />
      Please try again later.
    </mat-error>
    <ng-template #loading>
      <mat-spinner class="spinner"></mat-spinner>
    </ng-template>
  </mat-card>
</ng-template>

Answer 1

Вы должны быть в состоянии использовать этот синтаксис:

it('button next should show next video', function() {
  cy.visit('/carousel/videos');
  cy.get('[data-cy=videoComponent]')
    .should('have.attr', '[video]', 'currentVid')
  cy.get('[data-cy=buttonNext]').click();
  cy.get('[data-cy=videoComponent]')
    .should('have.attr', '[video]', 'nextVid')
});

Это использует цепочку 'attr (name, [value])' Chai, которая объяснена здесь: https://docs.cypress.io/guides/references/assertions.html#Chai-jQuery.