茉莉花测试盒关闭按钮

时间:2018-09-06 18:32:42

标签: angular jasmine karma-jasmine

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

我想为close方法编写测试用例,该方法将隐藏标语并且还将设置cookie,以便用户第二次访问该站点时不会再次出现。

我想介绍以下情况

  • 点击按钮时应调用close方法
  • 调用close方法后,
  • 纸牌应该已经被隐藏
  • 应该已经创建了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(() => {

    }));

});

1 个答案:

答案 0 :(得分:0)

这是对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的规范文件中进行。要断言某个方法已被调用,请使用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');
}));