I'm extremely new to cypress and I want to test if I click my a tag, then the video should change but I don't know how to target the video attribute in my app-video component:

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
});

the attribute containing the video object is @Output() public currentVid: Video;

Can I target this one and ask it's value to check if it changed?

<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>

1 Answers

0
Mr. J. On Best Solutions

You should be able to use this syntax:

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')
});

This is using the chainer 'attr(name, [value])' of Chai which is explained here: https://docs.cypress.io/guides/references/assertions.html#Chai-jQuery.