git.apps.os.sepia.ceph.com Git - ceph.git/blob

   1 import { Component, NgModule, NO_ERRORS_SCHEMA, TemplateRef, ViewChild } from '@angular/core';
   2 import { ComponentFixture, TestBed } from '@angular/core/testing';
   3 import { ReactiveFormsModule } from '@angular/forms';
   4 import { By } from '@angular/platform-browser';
   5 import { RouterTestingModule } from '@angular/router/testing';
   6
   7 import { NgbActiveModal, NgbModalModule, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
   8
   9 import { configureTestBed, FixtureHelper } from '../../../../testing/unit-test-helper';
  10 import { ModalService } from '../../services/modal.service';
  11 import { BackButtonComponent } from '../back-button/back-button.component';
  12 import { ModalComponent } from '../modal/modal.component';
  13 import { SubmitButtonComponent } from '../submit-button/submit-button.component';
  14 import { ConfirmationModalComponent } from './confirmation-modal.component';
  15
  16 @NgModule({})
  17 export class MockModule {}
  18
  19 @Component({
  20   template: `
  21     <ng-template #fillTpl>
  22       Template based description.
  23     </ng-template>
  24   `
  25 })
  26 class MockComponent {
  27   @ViewChild('fillTpl', { static: true })
  28   fillTpl: TemplateRef<any>;
  29   modalRef: NgbModalRef;
  30   returnValue: any;
  31
  32   // Normally private, but public is needed by tests
  33   constructor(public modalService: ModalService) {}
  34
  35   private openModal(extendBaseState = {}) {
  36     this.modalRef = this.modalService.show(
  37       ConfirmationModalComponent,
  38       Object.assign(
  39         {
  40           titleText: 'Title is a must have',
  41           buttonText: 'Action label',
  42           bodyTpl: this.fillTpl,
  43           description: 'String based description.',
  44           onSubmit: () => {
  45             this.returnValue = 'The submit action has to hide manually.';
  46           }
  47         },
  48         extendBaseState
  49       )
  50     );
  51   }
  52
  53   basicModal() {
  54     this.openModal();
  55   }
  56
  57   customCancelModal() {
  58     this.openModal({
  59       onCancel: () => (this.returnValue = 'If you have todo something besides hiding the modal.')
  60     });
  61   }
  62 }
  63
  64 describe('ConfirmationModalComponent', () => {
  65   let component: ConfirmationModalComponent;
  66   let fixture: ComponentFixture<ConfirmationModalComponent>;
  67   let mockComponent: MockComponent;
  68   let mockFixture: ComponentFixture<MockComponent>;
  69   let fh: FixtureHelper;
  70
  71   const expectReturnValue = (v: string) => expect(mockComponent.returnValue).toBe(v);
  72
  73   configureTestBed({
  74     declarations: [
  75       ConfirmationModalComponent,
  76       BackButtonComponent,
  77       MockComponent,
  78       ModalComponent,
  79       SubmitButtonComponent
  80     ],
  81     schemas: [NO_ERRORS_SCHEMA],
  82     imports: [ReactiveFormsModule, MockModule, RouterTestingModule, NgbModalModule],
  83     providers: [NgbActiveModal, SubmitButtonComponent]
  84   });
  85
  86   beforeEach(() => {
  87     fh = new FixtureHelper();
  88     mockFixture = TestBed.createComponent(MockComponent);
  89     mockComponent = mockFixture.componentInstance;
  90     mockFixture.detectChanges();
  91
  92     spyOn(TestBed.inject(ModalService), 'show').and.callFake((_modalComp, config) => {
  93       fixture = TestBed.createComponent(ConfirmationModalComponent);
  94       component = fixture.componentInstance;
  95       component = Object.assign(component, config);
  96       component.activeModal = { close: () => true } as any;
  97       spyOn(component.activeModal, 'close').and.callThrough();
  98       fh.updateFixture(fixture);
  99     });
 100   });
 101
 102   it('should create', () => {
 103     mockComponent.basicModal();
 104     expect(component).toBeTruthy();
 105   });
 106
 107   describe('Throws errors', () => {
 108     const expectError = (config: object, expected: string) => {
 109       mockComponent.basicModal();
 110       component = Object.assign(component, config);
 111       expect(() => component.ngOnInit()).toThrowError(expected);
 112     };
 113
 114     it('has no submit action defined', () => {
 115       expectError(
 116         {
 117           onSubmit: undefined
 118         },
 119         'No submit action defined'
 120       );
 121     });
 122
 123     it('has no title defined', () => {
 124       expectError(
 125         {
 126           titleText: undefined
 127         },
 128         'No title defined'
 129       );
 130     });
 131
 132     it('has no action name defined', () => {
 133       expectError(
 134         {
 135           buttonText: undefined
 136         },
 137         'No action name defined'
 138       );
 139     });
 140
 141     it('has no description defined', () => {
 142       expectError(
 143         {
 144           bodyTpl: undefined,
 145           description: undefined
 146         },
 147         'No description defined'
 148       );
 149     });
 150   });
 151
 152   describe('basics', () => {
 153     beforeEach(() => {
 154       mockComponent.basicModal();
 155       spyOn(component, 'onSubmit').and.callThrough();
 156     });
 157
 158     it('should show the correct title', () => {
 159       expect(fh.getText('.modal-title')).toBe('Title is a must have');
 160     });
 161
 162     it('should show the correct action name', () => {
 163       expect(fh.getText('.tc_submitButton')).toBe('Action label');
 164     });
 165
 166     it('should use the correct submit action', () => {
 167       // In order to ignore the `ElementRef` usage of `SubmitButtonComponent`
 168       spyOn(
 169         fixture.debugElement.query(By.directive(SubmitButtonComponent)).componentInstance,
 170         'focusButton'
 171       );
 172       fh.clickElement('.tc_submitButton');
 173       expect(component.onSubmit).toHaveBeenCalledTimes(1);
 174       expect(component.activeModal.close).toHaveBeenCalledTimes(0);
 175       expectReturnValue('The submit action has to hide manually.');
 176     });
 177
 178     it('should use the default cancel action', () => {
 179       fh.clickElement('.tc_backButton');
 180       expect(component.onSubmit).toHaveBeenCalledTimes(0);
 181       expect(component.activeModal.close).toHaveBeenCalledTimes(1);
 182       expectReturnValue(undefined);
 183     });
 184
 185     it('should show the description', () => {
 186       expect(fh.getText('.modal-body')).toBe(
 187         'Template based description.  String based description.'
 188       );
 189     });
 190   });
 191 });