ipsos-components/tools/screenshot-test/src/app/viewer/viewer.component.html

Material Design components for Angular

<div *ngIf="screenshotResultSummary.prNumber">
  <mat-card>
    <p>
      <a mat-button [href]="screenshotResultSummary.prUrl" target="_blank" color="primary">
        Pull Request: {{screenshotResultSummary.prNumber}}
      </a>
      <a mat-button [href]="screenshotResultSummary.commitLink" target="_blank" color="primary">
        Commit: {{screenshotResultSummary.sha}}
      </a>
      <a mat-button [href]="screenshotResultSummary.travisLink" target="_blank" color="primary">
        Travis: {{screenshotResultSummary.travis}}
      </a>
    </p>
    <p *ngIf="!isApproved">
      <button mat-button (click)="approve()" color="primary" >
        Copy To Goldens
      </button>
      <span class="description">
        This will copy all failed test result images to goldens.
        Please go to Travis to restart the job manually after approval.
      </span>
    </p>
    <p *ngIf="isApproved">
      <button mat-button disabled>Approved.</button>
      <button mat-button (click)="approve()">Copy to Goldens (Again)</button>
      <span class="description">
        Test images should be the same as golden images. Expand all to verify.
      </span>
    </p>
    <p>
      <button mat-button
              [disabled]="screenshotResultSummary.allTestsPassedOrApproved" color="primary"
              (click)="updateGithubStatus()">
        Set Github to Success
      </button>
      <a mat-icon-button *ngIf="githubStatus" [ngClass]="githubClass">
        <mat-icon>{{githubIcon}}</mat-icon>
      </a>
      <a matTooltip="Refresh Github Status" (click)="refreshGithubStatus()" mat-icon-button>
        <mat-icon>refresh</mat-icon>
      </a>
      <br>
      <span class="description">
        This will not update golds, but only change the screenshot test status on current commit.
        Once the PR checked in, the golds will be updated automatically.
      </span>
    </p>
    <mat-card-actions>
      <button mat-raised-button color="primary" (click)="screenshotResultSummary.setCollapse(true)">
        Collapse All
      </button>
      <button mat-raised-button color="primary" (click)="screenshotResultSummary.setCollapse(false)">
        Expand All
      </button>
    </mat-card-actions>
  </mat-card>

  <div *ngFor="let testname of screenshotResultSummary.testNames; let i = index">
    <app-result [filename]="testname"
                [result]="screenshotResultSummary.testResultsByName.get(testname)"
                [(mode)]="screenshotResultSummary.mode"
                [(flipping)]="screenshotResultSummary.isFlipped"
                [(collapse)]="screenshotResultSummary.collapse[i]"></app-result>
  </div>
</div>