1 Câu hỏi: Làm thế nào để nhắm mục tiêu một thuộc tính của một thành phần tự xác định trong cây bách?

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Tôi cực kỳ mới với cây bách và tôi muốn kiểm tra nếu tôi nhấp vào thẻ của mình thì video sẽ thay đổi nhưng tôi không biết cách nhắm mục tiêu thuộc tính video trong thành phần app-video của mình:

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

thuộc tính chứa đối tượng video là @Output() public currentVid: Video;

Tôi có thể nhắm mục tiêu này không và yêu cầu giá trị của nó để kiểm tra xem nó có thay đổi không?

<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>
    
0
  1. Bạn có thể thêm HTML của phần đó của trang không? Bạn cần sử dụng mã đó thay vì mã javascript thô (lập trình viên).
    2019-05-09 06: 18: 39Z
1 Câu trả lời                              1                         

Bạn sẽ có thể sử dụng cú pháp này:

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

Đây là sử dụng chuỗi 'attr (tên, [value])' của Chai được giải thích tại đây: https://docs.cypress.io/guides/references/assertions.html#Chai-jQuery .

    
0
2019-05-10 06: 41: 29Z
  1. Tôi đã xem qua mã của bạn và đó chắc chắn là một bước đi đúng hướng nhưng đối tượng không được đổi tên, nội dung của đối tượng sẽ thay đổi (mới id và url mới) và tôi đang cố kiểm tra xem id của đối tượng trong currentVid có thay đổi
    2019-05-11 16: 49: 59Z
  2. Kiểm tra, tôi không có kinh nghiệm nào với các loại đối tượng đó trong HTML. Nhưng tôi nghĩ sử dụng its() sẽ là cú hích cuối cùng. Cách thức hoạt động được mô tả ở đây: docs.cypress.io/api/commands/its .html # Cú pháp
    2019-05-13 06: 29: 53Z
nguồn đặt đây