Angular 模态弹出单元测试

Question

我想为模态弹出组件编写单元测试用例，请你帮我写一个构造函数的测试用例。

Popup.component.ts

import { Inject, Component } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";

export interface IPopupData {
  title: string;
  body: string;
}

export interface IPopupInput {
  data: IPopupData
}

@Component({})
export class PopupComponent {
  val: IPopupInput;
  constructor(
    @Inject(MAT_DIALOG_DATA)
    public popupValue: IPopupInput,
    public ref: MatDialogRef<PopupComponent>) {
    this.val = this.popupValue;
  }
}

popValue 参数的输入值：

data: {
 title:'popup', 
 body:'modalpopup desc'
}

Answer 1

popup.component.spec.ts

import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { PopupComponent } from './popup.component';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';

describe('src/popup/popup.component.ts', () => {
  let popupComponent: PopupComponent;
  let componentFixture: ComponentFixture<PopupComponent>;

  beforeEach(waitForAsync(() => {
    const popupBody = 'modalpopup desc';
    const popupTitle = 'popup';

    TestBed.configureTestingModule({
      declarations: [PopupComponent],
      providers: [
        { provide: MatDialogRef, useValue: {} },
        {
          provide: MAT_DIALOG_DATA, useValue: {
            data: {
              title: popupTitle,
              body: popupBody
            }
          }
        }
      ]
    }).compileComponents();
  }));

  beforeEach(() => {
    componentFixture = TestBed.createComponent(PopupComponent);
    popupComponent = componentFixture.componentInstance;
  });

  it('popup component created', () => {
    expect(popupComponent.val).toBeTruthy();
  });

  it('popup component val data test', () => {

    const expectedTitle = 'popup';
    const expectedBody = 'modalpopup desc';

    expect(popupComponent.val.data.title).toEqual(expectedTitle);
    expect(popupComponent.val.data.body).toEqual(expectedBody);
  });
})

popup.component.ts

import { Inject, Component } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from "@angular/material/dialog";

export interface IPopupData {
  title: string;
  body: string;
}

export interface IPopupInput {
  data: IPopupData
}

@Component({})
export class PopupComponent {
  val: IPopupInput;
  constructor(
    @Inject(MAT_DIALOG_DATA)
    public popupValue: IPopupInput,
    public ref: MatDialogRef<PopupComponent>) {
    this.val = this.popupValue;
  }
}

Angular 模态弹出单元测试

Angular unit test for modal popup

angular

typescript

karma-jasmine