feat(tests): add alert spec (#1336)

Author: slavman

src/spec/ng-bootstrap/alert.spec.ts

@@ -0,0 +1,99 @@
+/* tslint:disable:max-classes-per-file max-file-line-count component-class-suffix */
+/**
+ * @copyright Angular ng-bootstrap team
+ */
+import { TestBed, ComponentFixture, inject } from '@angular/core/testing';
+import { createGenericTestComponent } from './test/common';
+import { Component } from '@angular/core';
+import { AlertModule, AlertComponent, AlertConfig } from '../../alert';
+
+const createTestComponent = (html: string) =>
+    createGenericTestComponent(html, TestComponent) as ComponentFixture<TestComponent>;
+
+function getAlertElement(element: HTMLElement): HTMLDivElement {
+  return element.querySelector('.alert') as HTMLDivElement;
+}
+
+function getCloseButton(element: HTMLElement): HTMLButtonElement {
+  return element.querySelector('button') as HTMLButtonElement;
+}
+
+describe('ngb-alert', () => {
+
+  beforeEach(
+      () => { TestBed.configureTestingModule({declarations: [TestComponent], imports: [AlertModule.forRoot()]}); });
+
+  it('should initialize inputs with default values', () => {
+    const defaultConfig = new AlertConfig();
+    const alertCmp = new AlertComponent(new AlertConfig());
+
+    expect(alertCmp.dismissible).toBe(defaultConfig.dismissible);
+    expect(alertCmp.type).toBe(defaultConfig.type);
+  });
+
+  it('should allow specifying alert type', () => {
+    const fixture = createTestComponent('<alert type="success">Cool!</alert>');
+    const alertEl = getAlertElement(fixture.nativeElement);
+
+    expect(alertEl.getAttribute('role')).toEqual('alert');
+    expect(alertEl).toHaveCssClass('alert-success');
+  });
+
+  it('should render close button when dismissible', () => {
+    const fixture = createTestComponent('<alert [dismissible]="true">Watch out!</alert>');
+
+    expect(getCloseButton(getAlertElement(fixture.nativeElement))).toBeTruthy();
+  });
+
+  it('should render close button only if dismissible', () => {
+    const fixture = createTestComponent(`<alert [dismissible]="false">Don't close!</alert>`);
+    expect(getCloseButton(getAlertElement(fixture.nativeElement))).toBeFalsy();
+  });
+
+  describe('Custom config', () => {
+    let config: AlertConfig;
+
+    beforeEach(() => { TestBed.configureTestingModule({imports: [AlertModule.forRoot()]}); });
+
+    beforeEach(inject([AlertConfig], (c: AlertConfig) => {
+      config = c;
+      config.dismissible = false;
+      config.type = 'success';
+    }));
+
+    it('should initialize inputs with provided config', () => {
+      const fixture = TestBed.createComponent(AlertComponent);
+      fixture.detectChanges();
+
+      const alert = fixture.componentInstance;
+      expect(alert.dismissible).toBe(config.dismissible);
+      expect(alert.type).toBe(config.type);
+    });
+  });
+
+  describe('Custom config as provider', () => {
+    let config = new AlertConfig();
+    config.dismissible = false;
+    config.type = 'success';
+
+    beforeEach(() => {
+      TestBed.configureTestingModule(
+          {imports: [AlertModule.forRoot()], providers: [{provide: AlertConfig, useValue: config}]});
+    });
+
+    it('should initialize inputs with provided config as provider', () => {
+      const fixture = TestBed.createComponent(AlertComponent);
+      fixture.detectChanges();
+
+      const alert = fixture.componentInstance;
+      expect(alert.dismissible).toBe(config.dismissible);
+      expect(alert.type).toBe(config.type);
+    });
+  });
+});
+
+@Component({selector: 'test-cmp', template: '', entryComponents: [AlertComponent]})
+class TestComponent {
+  public name: string = 'World';
+  public closed: boolean = false;
+}