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