diff --git a/src/app/shared/alerts/alerts.component.html b/src/app/shared/alert/alert.component.html similarity index 100% rename from src/app/shared/alerts/alerts.component.html rename to src/app/shared/alert/alert.component.html diff --git a/src/app/shared/alerts/alerts.component.scss b/src/app/shared/alert/alert.component.scss similarity index 100% rename from src/app/shared/alerts/alerts.component.scss rename to src/app/shared/alert/alert.component.scss diff --git a/src/app/shared/alert/alert.component.spec.ts b/src/app/shared/alert/alert.component.spec.ts new file mode 100644 index 0000000000..e235e27b28 --- /dev/null +++ b/src/app/shared/alert/alert.component.spec.ts @@ -0,0 +1,114 @@ +import { ChangeDetectorRef, Component, NO_ERRORS_SCHEMA } from '@angular/core'; +import { BrowserModule, By } from '@angular/platform-browser'; +import { CommonModule } from '@angular/common'; +import { async, ComponentFixture, inject, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; + +import { TranslateModule } from '@ngx-translate/core'; + +import { AlertComponent } from './alert.component'; +import { createTestComponent } from '../testing/utils'; +import { AlertType } from './aletr-type'; + +describe('AlertComponent test suite', () => { + + let comp: AlertComponent; + let compAsAny: any; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + imports: [ + BrowserModule, + CommonModule, + NoopAnimationsModule, + TranslateModule.forRoot() + ], + declarations: [ + AlertComponent, + TestComponent + ], + providers: [ + ChangeDetectorRef, + AlertComponent + ], + schemas: [NO_ERRORS_SCHEMA] + }).compileComponents().then(); + })); + + describe('', () => { + let testComp: TestComponent; + let testFixture: ComponentFixture; + + // synchronous beforeEach + beforeEach(() => { + const html = ` + `; + + testFixture = createTestComponent(html, TestComponent) as ComponentFixture; + testComp = testFixture.componentInstance; + }); + + afterEach(() => { + testFixture.destroy(); + }); + + it('should create AlertComponent', inject([AlertComponent], (app: AlertComponent) => { + + expect(app).toBeDefined(); + })); + }); + + describe('', () => { + beforeEach(() => { + fixture = TestBed.createComponent(AlertComponent); + comp = fixture.componentInstance; + compAsAny = comp; + comp.content = 'test alert'; + comp.dismissible = true; + comp.type = AlertType.Info; + fixture.detectChanges(); + }); + + it('should display close icon when dismissible is true', () => { + + const btn = fixture.debugElement.query(By.css('.close')); + expect(btn).toBeDefined(); + }); + + it('should not display close icon when dismissible is false', () => { + comp.dismissible = false; + fixture.detectChanges(); + + const btn = fixture.debugElement.query(By.css('.close')); + expect(btn).toBeDefined(); + }); + + it('should dismiss alert when click on close icon', () => { + spyOn(comp, 'dismiss'); + const btn = fixture.debugElement.query(By.css('.close')); + + btn.nativeElement.click(); + + expect(comp.dismiss).toHaveBeenCalled(); + }); + + afterEach(() => { + fixture.destroy(); + comp = null; + compAsAny = null; + }); + }); +}); + +// declare a test component +@Component({ + selector: 'ds-test-cmp', + template: `` +}) +class TestComponent { + + content = 'test alert'; + dismissible = true; + type = AlertType.Info; +} diff --git a/src/app/shared/alerts/alerts.component.ts b/src/app/shared/alert/alert.component.ts similarity index 90% rename from src/app/shared/alerts/alerts.component.ts rename to src/app/shared/alert/alert.component.ts index d5fc2b48c7..93535d2057 100644 --- a/src/app/shared/alerts/alerts.component.ts +++ b/src/app/shared/alert/alert.component.ts @@ -1,7 +1,7 @@ import { ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core'; import { trigger } from '@angular/animations'; -import { AlertType } from './aletrs-type'; +import { AlertType } from './aletr-type'; import { fadeOutLeave, fadeOutState } from '../animations/fade'; /** @@ -15,10 +15,10 @@ import { fadeOutLeave, fadeOutState } from '../animations/fade'; fadeOutLeave, fadeOutState, ]) ], - templateUrl: './alerts.component.html', - styleUrls: ['./alerts.component.scss'] + templateUrl: './alert.component.html', + styleUrls: ['./alert.component.scss'] }) -export class AlertsComponent { +export class AlertComponent { /** * The alert content diff --git a/src/app/shared/alerts/aletrs-type.ts b/src/app/shared/alert/aletr-type.ts similarity index 100% rename from src/app/shared/alerts/aletrs-type.ts rename to src/app/shared/alert/aletr-type.ts diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts index 28ac5ef6b3..7ec41a301b 100644 --- a/src/app/shared/shared.module.ts +++ b/src/app/shared/shared.module.ts @@ -76,7 +76,7 @@ import { NumberPickerComponent } from './number-picker/number-picker.component'; import { DsDatePickerComponent } from './form/builder/ds-dynamic-form-ui/models/date-picker/date-picker.component'; import { DsDynamicLookupComponent } from './form/builder/ds-dynamic-form-ui/models/lookup/dynamic-lookup.component'; import { MockAdminGuard } from './mocks/mock-admin-guard.service'; -import { AlertsComponent } from './alerts/alerts.component'; +import { AlertComponent } from './alert/alert.component'; import { ObjNgFor } from './utils/object-ngfor.pipe'; import { BrowseByComponent } from './browse-by/browse-by.component'; import { BrowseEntryListElementComponent } from './object-list/browse-entry-list-element/browse-entry-list-element.component'; @@ -140,7 +140,7 @@ const PIPES = [ const COMPONENTS = [ // put shared components here - AlertsComponent, + AlertComponent, AuthNavMenuComponent, ChipsComponent, ComcolPageContentComponent, diff --git a/src/app/submission/sections/container/section-container.component.ts b/src/app/submission/sections/container/section-container.component.ts index b1453dffb3..cc7ef0bf87 100644 --- a/src/app/submission/sections/container/section-container.component.ts +++ b/src/app/submission/sections/container/section-container.component.ts @@ -3,7 +3,7 @@ import { Component, Injector, Input, OnInit, ViewChild } from '@angular/core'; import { SectionsDirective } from '../sections.directive'; import { SectionDataObject } from '../models/section-data.model'; import { rendersSectionType } from '../sections-decorator'; -import { AlertType } from '../../../shared/alerts/aletrs-type'; +import { AlertType } from '../../../shared/alert/aletr-type'; /** * This component represents a section that contains the submission license form. diff --git a/src/app/submission/sections/upload/section-upload.component.ts b/src/app/submission/sections/upload/section-upload.component.ts index 61a44fe46a..a14e970723 100644 --- a/src/app/submission/sections/upload/section-upload.component.ts +++ b/src/app/submission/sections/upload/section-upload.component.ts @@ -15,7 +15,7 @@ import { SectionsType } from '../sections-type'; import { renderSectionFor } from '../sections-decorator'; import { SectionDataObject } from '../models/section-data.model'; import { SubmissionObjectEntry } from '../../objects/submission-objects.reducer'; -import { AlertType } from '../../../shared/alerts/aletrs-type'; +import { AlertType } from '../../../shared/alert/aletr-type'; import { RemoteData } from '../../../core/data/remote-data'; import { Group } from '../../../core/eperson/models/group.model'; import { SectionsService } from '../sections.service';