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 { RouterTestingModule } from '@angular/router/testing';
   5
   6 import { NgbActiveModal, NgbModalModule, NgbModalRef } from '@ng-bootstrap/ng-bootstrap';
   7
   8 import { ModalService } from '~/app/shared/services/modal.service';
   9 import { configureTestBed, FixtureHelper } from '~/testing/unit-test-helper';
  10 import { BackButtonComponent } from '../back-button/back-button.component';
  11 import { FormButtonPanelComponent } from '../form-button-panel/form-button-panel.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       FormButtonPanelComponent
  77     ],
  78     schemas: [NO_ERRORS_SCHEMA],
  79     imports: [ReactiveFormsModule, MockModule, RouterTestingModule, NgbModalModule],
  80     providers: [NgbActiveModal, SubmitButtonComponent, FormButtonPanelComponent]
  81   });
  82
  83   beforeEach(() => {
  84     fh = new FixtureHelper();
  85     mockFixture = TestBed.createComponent(MockComponent);
  86     mockComponent = mockFixture.componentInstance;
  87     mockFixture.detectChanges();
  88
  89     spyOn(TestBed.inject(ModalService), 'show').and.callFake((_modalComp, config) => {
  90       fixture = TestBed.createComponent(ConfirmationModalComponent);
  91       component = fixture.componentInstance;
  92       component = Object.assign(component, config);
  93       component.activeModal = { close: () => true } as any;
  94       spyOn(component.activeModal, 'close').and.callThrough();
  95       fh.updateFixture(fixture);
  96     });
  97   });
  98
  99   it('should create', () => {
 100     mockComponent.basicModal();
 101     expect(component).toBeTruthy();
 102   });
 103
 104   describe('Throws errors', () => {
 105     const expectError = (config: object, expected: string) => {
 106       mockComponent.basicModal();
 107       component = Object.assign(component, config);
 108       expect(() => component.ngOnInit()).toThrowError(expected);
 109     };
 110
 111     it('has no submit action defined', () => {
 112       expectError(
 113         {
 114           onSubmit: undefined
 115         },
 116         'No submit action defined'
 117       );
 118     });
 119
 120     it('has no title defined', () => {
 121       expectError(
 122         {
 123           titleText: undefined
 124         },
 125         'No title defined'
 126       );
 127     });
 128
 129     it('has no action name defined', () => {
 130       expectError(
 131         {
 132           buttonText: undefined
 133         },
 134         'No action name defined'
 135       );
 136     });
 137
 138     it('has no description defined', () => {
 139       expectError(
 140         {
 141           bodyTpl: undefined,
 142           description: undefined
 143         },
 144         'No description defined'
 145       );
 146     });
 147   });
 148
 149   describe('basics', () => {
 150     beforeEach(() => {
 151       mockComponent.basicModal();
 152       spyOn(component, 'onSubmit').and.callThrough();
 153     });
 154
 155     it('should show the correct title', () => {
 156       expect(fh.getText('.modal-title')).toBe('Title is a must have');
 157     });
 158
 159     it('should show the correct action name', () => {
 160       expect(fh.getText('.tc_submitButton')).toBe('Action label');
 161     });
 162
 163     it('should use the correct submit action', () => {
 164       // In order to ignore the `ElementRef` usage of `SubmitButtonComponent`
 165       spyOn(fh.getElementByCss('.tc_submitButton').componentInstance, 'focusButton');
 166       fh.clickElement('.tc_submitButton');
 167       expect(component.onSubmit).toHaveBeenCalledTimes(1);
 168       expect(component.activeModal.close).toHaveBeenCalledTimes(0);
 169       expectReturnValue('The submit action has to hide manually.');
 170     });
 171
 172     it('should use the default cancel action', () => {
 173       fh.clickElement('.tc_backButton');
 174       expect(component.onSubmit).toHaveBeenCalledTimes(0);
 175       expect(component.activeModal.close).toHaveBeenCalledTimes(1);
 176       expectReturnValue(undefined);
 177     });
 178
 179     it('should show the description', () => {
 180       expect(fh.getText('.modal-body')).toBe(
 181         'Template based description. String based description.'
 182       );
 183     });
 184   });
 185 });