fix(alert): add missing alert-dismissible CSS class

Closes #1267 Closes #1270
ng-bootstrap · Jan 27, 2017 · e2691b9 · e2691b9
1 parent e2410f9
commit e2691b9
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/src/alert/alert.spec.ts b/src/alert/alert.spec.ts
@@ -39,14 +39,19 @@ describe('ngb-alert', () => {
     expect(alertEl).toHaveCssClass('alert-success');
   });
 
-  it('should render close button when dismissible', () => {
+  it('should render close button and have "alert-dismissible" CSS class when dismissible', () => {
     const fixture = createTestComponent('<ngb-alert [dismissible]="true">Watch out!</ngb-alert>');
+    const alertEl = getAlertElement(fixture.nativeElement);
 
-    expect(getCloseButton(getAlertElement(fixture.nativeElement))).toBeTruthy();
+    expect(alertEl).toHaveCssClass('alert-dismissible');
+    expect(getCloseButton(alertEl)).toBeTruthy();
   });
 
-  it('should render close button only if dismissible', () => {
+  it('should render close button and not have "alert-dismissible" CSS class only if dismissible', () => {
     const fixture = createTestComponent(`<ngb-alert [dismissible]="false">Don't close!</ngb-alert>`);
+    const alertEl = getAlertElement(fixture.nativeElement);
+
+    expect(alertEl).not.toHaveCssClass('alert-dismissible');
     expect(getCloseButton(getAlertElement(fixture.nativeElement))).toBeFalsy();
   });
 

diff --git a/src/alert/alert.ts b/src/alert/alert.ts
@@ -15,7 +15,7 @@ import {NgbAlertConfig} from './alert-config';
   selector: 'ngb-alert',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <div [class]="'alert alert-' + type" role="alert">
+    <div [class]="'alert alert-' + type + (dismissible ? ' alert-dismissible' : '')" role="alert">
       <button *ngIf="dismissible" type="button" class="close" aria-label="Close" (click)="closeHandler()">
             <span aria-hidden="true">&times;</span>
       </button>