diff options
Diffstat (limited to 'src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts')
-rw-r--r-- | src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts | 185 |
1 files changed, 185 insertions, 0 deletions
diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts new file mode 100644 index 000000000..a76c5d378 --- /dev/null +++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/confirmation-modal/confirmation-modal.component.spec.ts @@ -0,0 +1,185 @@ +import { Component, NgModule, NO_ERRORS_SCHEMA, TemplateRef, ViewChild } from '@angular/core'; +import { ComponentFixture, TestBed } from '@angular/core/testing'; +import { ReactiveFormsModule } from '@angular/forms'; +import { RouterTestingModule } from '@angular/router/testing'; + +import { NgbActiveModal, NgbModalModule, NgbModalRef } from '@ng-bootstrap/ng-bootstrap'; + +import { ModalService } from '~/app/shared/services/modal.service'; +import { configureTestBed, FixtureHelper } from '~/testing/unit-test-helper'; +import { BackButtonComponent } from '../back-button/back-button.component'; +import { FormButtonPanelComponent } from '../form-button-panel/form-button-panel.component'; +import { ModalComponent } from '../modal/modal.component'; +import { SubmitButtonComponent } from '../submit-button/submit-button.component'; +import { ConfirmationModalComponent } from './confirmation-modal.component'; + +@NgModule({}) +export class MockModule {} + +@Component({ + template: `<ng-template #fillTpl>Template based description.</ng-template>` +}) +class MockComponent { + @ViewChild('fillTpl', { static: true }) + fillTpl: TemplateRef<any>; + modalRef: NgbModalRef; + returnValue: any; + + // Normally private, but public is needed by tests + constructor(public modalService: ModalService) {} + + private openModal(extendBaseState = {}) { + this.modalRef = this.modalService.show( + ConfirmationModalComponent, + Object.assign( + { + titleText: 'Title is a must have', + buttonText: 'Action label', + bodyTpl: this.fillTpl, + description: 'String based description.', + onSubmit: () => { + this.returnValue = 'The submit action has to hide manually.'; + } + }, + extendBaseState + ) + ); + } + + basicModal() { + this.openModal(); + } + + customCancelModal() { + this.openModal({ + onCancel: () => (this.returnValue = 'If you have todo something besides hiding the modal.') + }); + } +} + +describe('ConfirmationModalComponent', () => { + let component: ConfirmationModalComponent; + let fixture: ComponentFixture<ConfirmationModalComponent>; + let mockComponent: MockComponent; + let mockFixture: ComponentFixture<MockComponent>; + let fh: FixtureHelper; + + const expectReturnValue = (v: string) => expect(mockComponent.returnValue).toBe(v); + + configureTestBed({ + declarations: [ + ConfirmationModalComponent, + BackButtonComponent, + MockComponent, + ModalComponent, + SubmitButtonComponent, + FormButtonPanelComponent + ], + schemas: [NO_ERRORS_SCHEMA], + imports: [ReactiveFormsModule, MockModule, RouterTestingModule, NgbModalModule], + providers: [NgbActiveModal, SubmitButtonComponent, FormButtonPanelComponent] + }); + + beforeEach(() => { + fh = new FixtureHelper(); + mockFixture = TestBed.createComponent(MockComponent); + mockComponent = mockFixture.componentInstance; + mockFixture.detectChanges(); + + spyOn(TestBed.inject(ModalService), 'show').and.callFake((_modalComp, config) => { + fixture = TestBed.createComponent(ConfirmationModalComponent); + component = fixture.componentInstance; + component = Object.assign(component, config); + component.activeModal = { close: () => true } as any; + spyOn(component.activeModal, 'close').and.callThrough(); + fh.updateFixture(fixture); + }); + }); + + it('should create', () => { + mockComponent.basicModal(); + expect(component).toBeTruthy(); + }); + + describe('Throws errors', () => { + const expectError = (config: object, expected: string) => { + mockComponent.basicModal(); + component = Object.assign(component, config); + expect(() => component.ngOnInit()).toThrowError(expected); + }; + + it('has no submit action defined', () => { + expectError( + { + onSubmit: undefined + }, + 'No submit action defined' + ); + }); + + it('has no title defined', () => { + expectError( + { + titleText: undefined + }, + 'No title defined' + ); + }); + + it('has no action name defined', () => { + expectError( + { + buttonText: undefined + }, + 'No action name defined' + ); + }); + + it('has no description defined', () => { + expectError( + { + bodyTpl: undefined, + description: undefined + }, + 'No description defined' + ); + }); + }); + + describe('basics', () => { + beforeEach(() => { + mockComponent.basicModal(); + spyOn(component, 'onSubmit').and.callThrough(); + }); + + it('should show the correct title', () => { + expect(fh.getText('.modal-title')).toBe('Title is a must have'); + }); + + it('should show the correct action name', () => { + expect(fh.getText('.tc_submitButton')).toBe('Action label'); + }); + + it('should use the correct submit action', () => { + // In order to ignore the `ElementRef` usage of `SubmitButtonComponent` + spyOn(fh.getElementByCss('.tc_submitButton').componentInstance, 'focusButton'); + fh.clickElement('.tc_submitButton'); + expect(component.onSubmit).toHaveBeenCalledTimes(1); + expect(component.activeModal.close).toHaveBeenCalledTimes(0); + expectReturnValue('The submit action has to hide manually.'); + }); + + it('should use the default cancel action', () => { + fh.clickElement('.tc_backButton'); + expect(component.onSubmit).toHaveBeenCalledTimes(0); + expect(component.activeModal.close).toHaveBeenCalledTimes(1); + expectReturnValue(undefined); + }); + + it('should show the description', () => { + expect(fh.getText('.modal-body')).toBe( + 'Template based description. String based description.' + ); + }); + }); +}); |