diff --git a/src/spec/ng-bootstrap/alert.spec.ts b/src/spec/ng-bootstrap/alert.spec.ts new file mode 100644 index 0000000000..8457bf6aa5 --- /dev/null +++ b/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; + +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('Cool!'); + 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('Watch out!'); + + expect(getCloseButton(getAlertElement(fixture.nativeElement))).toBeTruthy(); + }); + + it('should render close button only if dismissible', () => { + const fixture = createTestComponent(`Don't close!`); + 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; +}