typescript NGX-易于测试zippy.component.spec.ts

Posted 2021-05-21

import { createHost, EasyTestWithHost } from 'ngx-easy-test';

describe('ZippyComponent', () => {
  type Context = EasyTestWithHost<ZippyComponent>;

  createHost(ZippyComponent);

  it('should display the title', function ( this : Context ) {
    this.create(`<zippy title="Zippy title"></zippy>`);
    expect(this.query('.zippy__title')).toContainText('Zippy title');
  });

  it('should display the content', function ( this : Context ) {
    this.create(`<zippy title="Zippy title">Zippy content</zippy>`);
    this.trigger('click', '.zippy__title');
    expect(this.query('.zippy__content')).toContainText('Zippy content');
  });

  it('should display the "Open" word if closed', function ( this : Context ) {
    this.create(`<zippy title="Zippy title">Zippy content</zippy>`);
    expect(this.query('.arrow')).toContainText('Open');
    expect(this.query('.arrow')).not.toContainText('Close');
  });

  it('should display the "Close" word if open', function ( this : Context ) {
    this.create(`<zippy title="Zippy title">Zippy content</zippy>`);
    this.trigger('click', '.zippy__title');
    expect(this.query('.arrow')).toContainText('Close');
    expect(this.query('.arrow')).not.toContainText('Open');
  });

  it('should be closed by default', function ( this : Context ) {
    this.create(`<zippy title="Zippy title"></zippy>`);
    expect('.zippy__content').not.toBeInDOM();
  });

  it('should toggle the content', function ( this : Context ) {
    this.create(`<zippy title="Zippy title"></zippy>`);
    this.trigger('click', '.zippy__title');
    expect('.zippy__content').toBeInDOM();
    this.trigger('click', '.zippy__title');
    expect('.zippy__content').not.toBeInDOM();
  });

});