茉莉花测试案例关闭按钮

Question

这是我第一次写测试用例。

我想为close方法编写测试用例，该方法将隐藏横幅，并且还会设置一个cookie，以便当用户第二次访问该网站时，它将不再出现。

我想介绍以下场景

• 单击按钮时应调用close方法
• 在调用close方法后，应该隐藏mat-card
• Cookie应该已经创建。

请指导我。

以下是我的代码

零件

export class APComponent {

  private cookie: any;
  private cpBanner: boolean;

  constructor(
    private cookieService: CookieService) {
    this.cookie = this.cookieService.get('CP_BANNER');
    this.cpBanner = this.cookie ? false : true;
  }

  close() {
    this.cpBanner = false;
    this.cookieService.put( 'CP_BANNER', 'true' );
  }

}

HTML

<mat-card *ngIf="apBanner"><mat-card-actions>
    <mat-icon name="cross" cropped="cropped" (click)="close()"></mat-icon>
  </mat-card-actions></mat-card>

我的规格

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

    beforeEach(() => {
        TestBed.configureTestingModule({
            schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
            declarations: [ APComponent ],
            imports: [CommonModule, CookieModule.forRoot()],

        });
        TestBed.compileComponents();
        fixture = TestBed.createComponent(APComponent);
    });

    it('should create the app', async(() => {
        const app = fixture.debugElement.componentInstance;
        expect(app).toBeTruthy();
    }));

    it('should close the banner', async(() => {

    }));

});

Answer 1

这就是你需要在单元测试close方法时所要考虑的。在点击按钮时调用它更适合在e2e测试中进行功能测试。

第一个测试检查它确实将实例变量设置为false。为了确保这种情况，我们在调用close（）之前手动将变量设置为true。

it('should close the banner', async(() => {
  // Arrange
  const app = fixture.debugElement.componentInstance;
  app.cpBanner = true;

  // Act
  app.close();

  // Assert
  expect(app.cpBanner).toBe(false);
}));

第二个测试检查它是否调用服务来创建cookie。 close方法实际上并不会创建cookie。测试cookie的实际创建应该在CookieService的spec文件中。要声明已调用方法，请使用Jasmine spies。因此，我们首先获得已注入应用程序并监视其put方法的服务的句柄。

注意：我无法验证下面的代码是否有效，因为我没有服务，但它至少应该演示逻辑。

it('should call the cookie service to create the cookie', async(() => {
  // Arrange
  const app = fixture.debugElement.componentInstance;
  const cookieService = fixture.TestBed.get(CookieService);
  spyOn(cookieService, 'put');

  // Act
  app.close();

  // Assert
  expect(cookieService.put).toHaveBeenCalledWith('CP_BANNER', 'true');
}));