Cacher is the code snippet organizer for pro developers

describe('AlertComponent', () => {
  let fixture : ComponentFixture<HostComponent>;
  const getAlertElement = () : HTMLElement => fixture.debugElement.query(By.css('.alert')) ? fixture.debugElement.query(By.css('.alert')).nativeElement : null

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [HostComponent, AlertComponent],
    });
  });

  it('should be hidden by default', () => {
    const template = '<app-alert>Alert</app-alert>';
    fixture = createHostComponent(template);
    expect(getAlertElement()).toBeNull();
  });

  describe('When [show] is true', () => {
    it('should display the alert', () => {
      const template = '<app-alert [show]="true">Alert</app-alert>';
      fixture = createHostComponent(template);
      expect(getAlertElement()).toBeDefined();
    });

    it('should display the alert success by default', function () {
      const template = '<app-alert [show]="true">Alert</app-alert>';
      fixture = createHostComponent(template);
      expect(getAlertElement().classList.contains('alert-success')).toBe(true);
    });

    it('should add the alert-info class when [type] is info', function () {
      const template = '<app-alert [show]="true" type="info">Alert</app-alert>';
      fixture = createHostComponent(template);
      expect(getAlertElement().classList.contains('alert-success')).toBe(false);
      expect(getAlertElement().classList.contains('alert-info')).toBe(true);
    });
  });

});