Angular如何測驗組件方法？-有解無憂

我是 Angular 的新手，我正在嘗試學習如何撰寫測驗。我不明白如何從組件模擬和測驗方法。

我的 HTML 如下：（您有一個包含所有證書的表格。通過使用“bewerken”按鈕，您可以添加新證書。將出現一個表格，您可以填寫然后將證書添加到表格中）

<h1>Certificaten</h1>
<button id="editButton" *ngIf="!edit" (click)="edit = !this.edit">Bewerken</button>
<button id="saveButton" *ngIf="edit" (click)="saveCertificates()">Opslaan</button>

<div id="certificatesFormBox" *ngIf="edit">
  <h2>Voeg opleidingen toe</h2>

  <form id="addCertificateForm" [formGroup]="certificateForm" (ngSubmit)="onSubmit()">
    <label for="institute">Instituut</label>
    <input id="institute" type="text"  formControlName="institute">
    <p *ngIf="institute?.invalid && (institute?.dirty || institute?.touched)"
       >
      Dit veld is verplicht
    </p>

    <label for="name">Naam</label>
    <input id="name" type="text"  formControlName="name">
    <p *ngIf="name?.invalid && (name?.dirty || name?.touched)"
       >
      Dit veld is verplicht
    </p>

    <label for="description">Omschrijving</label>
    <input id="description" type="text"  formControlName="description">
    <p *ngIf="description?.invalid && (description?.dirty || description?.touched)"
       >
      Dit veld is verplicht
    </p>

    <label for="achievementDate">Datum behaald</label>
    <input id="achievementDate" type="date"  formControlName="achievementDate"/>
    <p *ngIf="achievementDate?.invalid && (achievementDate?.dirty || achievementDate?.touched)"
       >
      Dit veld is verplicht
    </p>

    <label for="expirationDate">Datum verloop</label>
    <input id="expirationDate" type="date"  formControlName="expirationDate"/>
    <p *ngIf="expirationDate?.invalid && (expirationDate?.dirty || expirationDate?.touched)"
       >
      Dit veld is verplicht
    </p>
    <p *ngIf="invalidDates" >De datum van verloop mag zich niet voor de datum van behaald
      bevinden.</p>

    <label for="url">Url</label>
    <input id="url" type="url"  formControlName="url">

    <button id="submitButton" type="submit" [disabled]="!certificateForm.valid">Voeg toe</button>
  </form>
</div>

<div id="certificatesTabelBox"  *ngIf="certificates$ | async as certificateList">
  <h2>Mijn Certificaten</h2>
  <table mat-table [dataSource]="certificateList">

    <ng-container matColumnDef="institute">
      <th mat-header-cell *matHeaderCellDef>Instituut</th>
      <td mat-cell *matCellDef="let certificate"> {{ certificate.institute }} </td>
    </ng-container>

    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef>Name</th>
      <td mat-cell *matCellDef="let certificate"> {{ certificate.name }} </td>
    </ng-container>

    <ng-container matColumnDef="description">
      <th mat-header-cell *matHeaderCellDef>Description</th>
      <td mat-cell *matCellDef="let certificate"> {{ certificate.description }} </td>
    </ng-container>

    <ng-container matColumnDef="achievementDate">
      <th mat-header-cell *matHeaderCellDef>AchievementDate</th>
      <td mat-cell *matCellDef="let certificate"> {{ certificate.achievementDate }} </td>
    </ng-container>

    <ng-container matColumnDef="expirationDate">
      <th mat-header-cell *matHeaderCellDef>ExpirationDate</th>
      <td mat-cell *matCellDef="let certificate"> {{ certificate.expirationDate }} </td>
    </ng-container>

    <ng-container matColumnDef="url">
      <th mat-header-cell *matHeaderCellDef>Url</th>
      <td mat-cell *matCellDef="let certificate"> {{ certificate.url }} </td>
    </ng-container>

    <ng-container matColumnDef="delete">
      <th mat-header-cell *matHeaderCellDef></th>
      <td mat-cell *matCellDef="let certificate; index as i">
        <a (click)="removeDegree(i)"  *ngIf="edit">
          <mat-icon aria-hidden="false" aria-label="delete icon" >delete</mat-icon>
        </a>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>

  </table>
</div>

我的certificates.component.ts

import {Component, OnInit} from '@angular/core';
import {MatTableDataSource} from "@angular/material/table";
import {Certificate} from "../../../models";
import {Observable} from "rxjs";
import {FormBuilder, Validators} from "@angular/forms";
import {Store} from "@ngrx/store";
import {State} from 'src/app/state/app.state';
import {getUser} from "../../../state/user/user.reducer";
import {getCertificates} from "../../../state/education/education.reducer";
import {EducationPageActions} from "../../../state/education/actions";

@Component({
  selector: 'app-my-certificates',
  templateUrl: './my-certificates.component.html',
  styleUrls: ['./my-certificates.component.css']
})
export class MyCertificatesComponent implements OnInit {
  certificateForm = this.fb.group({
    institute: ['', Validators.required],
    name: ['', Validators.required],
    description: ['', Validators.required],
    achievementDate: ['', Validators.required],
    expirationDate: ['', Validators.required],
    url: [''],
  })
  edit: boolean = false;
  invalidDates: boolean = false;
  displayedColumns: string[] = ['institute', 'name', 'description', 'achievementDate', 'expirationDate', 'url', 'delete'];
  userId: string = "";
  dataSource!: MatTableDataSource<Certificate>;
  certificates!: Certificate[];
  certificates$: Observable<Certificate[]> | undefined;

  constructor(private fb: FormBuilder, private store: Store<State>) {
  }

  ngOnInit(): void {
    this.store.select(getUser).subscribe(
      user => { this.userId = user.id; this.store.dispatch(EducationPageActions.loadCertificates({id: this.userId})); });
    this.certificates$ = this.store.select(getCertificates);
  }

  onSubmit() {
    this.invalidDates = this.validateDateRange();
    if (this.invalidDates) {
      return;
    }
    let newCertificate = new Certificate(this.certificateForm.value.institute, this.certificateForm.value.name, this.certificateForm.value.description, this.certificateForm.value.achievementDate, this.certificateForm.value.expirationDate, this.certificateForm.value.url);
    this.store.dispatch(EducationPageActions.addCertificate({certificate: newCertificate}))
    this.certificateForm.reset();
  }

  get institute() {
    return this.certificateForm.get('institute');
  }

  get name() {
    return this.certificateForm.get('name');
  }

  get description() {
    return this.certificateForm.get('description');
  }

  get achievementDate() {
    return this.certificateForm.get('achievementDate');
  }

  get expirationDate() {
    return this.certificateForm.get('expirationDate');
  }

  get url() {
    return this.certificateForm.get('url');
  }

  validateDateRange() {
    return this.certificateForm.get('achievementDate')?.value > this.certificateForm.get('expirationDate')?.value;
  }

  saveCertificates() {
    this.edit = !this.edit;
    this.certificates$?.subscribe((certificates) => {
      this.certificates = certificates;
    });
    this.store.dispatch(EducationPageActions.saveCertificates({certificates: this.certificates}));
  }

  removeDegree(index: number) {
    this.store.dispatch(EducationPageActions.removeCertificate({index}));
  }
}

我當前正在嘗試撰寫的測驗檔案：

import { ComponentFixture, TestBed } from '@angular/core/testing';

import { MyCertificatesComponent } from './my-certificates.component';
import {FormsModule, ReactiveFormsModule} from "@angular/forms";
import { StoreModule } from "@ngrx/store";
import {educationReducer} from "../../../state/education/education.reducer";
import { userReducer } from "../../../state/user/user.reducer";
import { MatTableModule } from "@angular/material/table";

describe('MyCertificatesComponent', () => {
  let component: MyCertificatesComponent;
  let fixture: ComponentFixture<MyCertificatesComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      imports: [FormsModule, ReactiveFormsModule,
        StoreModule.forRoot({education: educationReducer, user: userReducer}, {}),
        MatTableModule],
      declarations: [ MyCertificatesComponent ]
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyCertificatesComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });

  /* Html testen*/
  it('Should contain h1 with "Certificaten"', () => {
    const h1 = fixture.debugElement.nativeElement.querySelector('h1');
    expect(h1.textContent).toContain('Certificaten');
  });

  it('Should contain h2 with "Mijn Certificaten"', () => {
    const h2 = fixture.debugElement.nativeElement.querySelector('h2');
    expect(h2.textContent).toContain('Mijn Certificaten');
  });

  it('Should click button and reveal form', () => {
    const button = fixture.debugElement.nativeElement.querySelector('#editButton');
    button.click();

    expect(component.edit).toBeTruthy();
  });

  it('Should have 6 form inputs after edit button click', () => {
    const button = fixture.debugElement.nativeElement.querySelector('#editButton');
    button.click();
    fixture.detectChanges();

    const formElement = fixture.debugElement.nativeElement.querySelector('#addCertificateForm')
    const inputElements = formElement.querySelectorAll('input');
    expect(inputElements.length).toBe(6);
  });

  it('Should have 6 form labels after edit button click', () => {
    const button = fixture.debugElement.nativeElement.querySelector('#editButton');
    button.click();
    fixture.detectChanges();

    const formElement = fixture.debugElement.nativeElement.querySelector('#addCertificateForm')
    const inputElements = formElement.querySelectorAll('label');
    expect(inputElements.length).toBe(6);
  });

  it('Should be false if button is not clicked', () => {
    expect(component.edit).toBeFalse();
  });

  /*Initial value testing*/
  it('Check initial add certificate form values', () => {
    const addCertificateFormGroup = component.certificateForm;
    const addCertificatesFormValues = {
      institute: '',
      name: '',
      description: '',
      achievementDate: '',
      expirationDate: '',
      url: ''
    };

    expect(addCertificateFormGroup.value).toEqual(addCertificatesFormValues);
  })

  /*Testing methods*/

  it('should handle onSubmit correctly', () => {
    const addCertificateFormGroup = component.certificateForm;
    const addCertificatesFormValues = {
      institute: 'PXL',
      name: 'Professionele Bachelor in Informatica',
      description: 'FullStack Development',
      achievementDate: '23/06/2021',
      expirationDate: '23/06/2030',
      url: ''
    };

    addCertificateFormGroup.setValue(addCertificatesFormValues);
    component.onSubmit();

    expect(component.certificates[0].name).toEqual(addCertificatesFormValues.name);
  });
});

我很想測驗 onSubmit、validateDateRange、saveCertificates 和 removeDegree。感謝您的幫助，祝您周末愉快！

uj5u.com熱心網友回復：

我看到的一個問題是，在中ngOnInit，您訂閱了商店，但從未取消訂閱。這將導致泄漏，在某個時間點該組件甚至不在螢屏上（它已被銷毀），但該訂閱仍將運行。

這樣做來修復它：

export class MyCertificatesComponent implements OnInit, OnDestroy {
...
 private storeSubscription: Subscription;

ngOnInit(): void {
    this.storeSubscription = this.store.select(getUser).subscribe(
      user => { this.userId = user.id; this.store.dispatch(EducationPageActions.loadCertificates({id: this.userId})); });
    this.certificates$ = this.store.select(getCertificates);
  }
  
 ngOnDestroy(): void {
   this.storeSubcription.unsubscribe();
 }

我所展示的是退訂最入門的方式。還有更復雜的取消訂閱方式：https : //medium.com/angular-in-depth/the-best-way-to-unsubscribe-rxjs-observable-in-the-angular-applications-d8f9aa42f6a0。

至于測驗，我會舉一個例子來說明如何測驗onSubmit.

it('does not dispatch addCertificate and reset the form if the dates are invalid', () => {
  const store = TestBed.inject(Store);
  const dispatchSpy = spyOn(store, 'dispatch').and.callThrough();
  const formResetSpy = spyOn(component.certificateForm, 'reset').and.callThrough();
  // set invalid date
  component.achievementDate.setValue('01/01/2020');
  component.expirationDate.setValue('01/01/2019');
  // call onSubmit
  component.onSubmit();
  // expect these not to be called
  expect(dispatchSpy).not.toHaveBeenCalled();
  expect(formResetSpy).not.toHaveBeenCalled();
});

it('does dispatch addCertificate and reset the form if the dates are valid', () => {
  const store = TestBed.inject(Store);
  const dispatchSpy = spyOn(store, 'dispatch').and.callThrough();
  const formResetSpy = spyOn(component.certificateForm, 'reset').and.callThrough();
  // set valid date
  component.achievementDate.setValue('01/01/2020');
  component.expirationDate.setValue('01/01/2021');
  // call onSubmit
  component.onSubmit();
  // expect these to be called
  expect(dispatchSpy).toHaveBeenCalled();
  expect(formResetSpy).toHaveBeenCalled();
});

這是onSubmit. 這應該可以讓您開始使用saveCertificates，以及removeDegree其余的。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/379798.html

標籤：有角的单元测试茉莉花业力茉莉角度测试

上一篇：在單獨的檔案中運行Rust測驗

下一篇：簡單python函式的單元測驗例外塊