120158: Emit response on modal closure when clicking outside the modal

alexandrevryghem · Nov 12, 2024 · 3458800 · 3458800
1 parent ca86437
commit 3458800
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 20 deletions.
diff --git a/src/app/shared/confirmation-modal/confirmation-modal.component.spec.ts b/src/app/shared/confirmation-modal/confirmation-modal.component.spec.ts
@@ -1,4 +1,4 @@
-import { DebugElement, NO_ERRORS_SCHEMA } from '@angular/core';
+import { DebugElement } from '@angular/core';
 import { ComponentFixture, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
@@ -13,15 +13,13 @@ describe('ConfirmationModalComponent', () => {
   const modalStub = jasmine.createSpyObj('modalStub', ['close']);
 
   beforeEach(waitForAsync(() => {
-    TestBed.configureTestingModule({
+    void TestBed.configureTestingModule({
       imports: [TranslateModule.forRoot()],
       declarations: [ConfirmationModalComponent],
       providers: [
         { provide: NgbActiveModal, useValue: modalStub }
       ],
-      schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
-
   }));
 
   beforeEach(() => {
@@ -31,8 +29,12 @@ describe('ConfirmationModalComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it('should emit false on destroy when no button has been clicked', () => {
+    spyOn(component.response, 'emit');
+
+    component.ngOnDestroy();
+
+    expect(component.response.emit).toHaveBeenCalledOnceWith(false);
   });
 
   describe('close', () => {
@@ -55,6 +57,11 @@ describe('ConfirmationModalComponent', () => {
     it('behaviour subject should emit true', () => {
       expect(component.response.emit).toHaveBeenCalledWith(true);
     });
+    it('should not emit again on destroy', () => {
+      component.ngOnDestroy();
+
+      expect(component.response.emit).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('cancelPressed', () => {
@@ -68,6 +75,11 @@ describe('ConfirmationModalComponent', () => {
     it('behaviour subject should emit false', () => {
       expect(component.response.emit).toHaveBeenCalledWith(false);
     });
+    it('should not emit again on destroy', () => {
+      component.ngOnDestroy();
+
+      expect(component.response.emit).toHaveBeenCalledTimes(1);
+    });
   });
 
   describe('when the click method emits on close button', () => {

diff --git a/src/app/shared/confirmation-modal/confirmation-modal.component.ts b/src/app/shared/confirmation-modal/confirmation-modal.component.ts
@@ -1,12 +1,12 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { Component, EventEmitter, Input, Output, OnDestroy } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 import { DSpaceObject } from '../../core/shared/dspace-object.model';
 
 @Component({
   selector: 'ds-confirmation-modal',
   templateUrl: 'confirmation-modal.component.html',
 })
-export class ConfirmationModalComponent {
+export class ConfirmationModalComponent implements OnDestroy {
   @Input() headerLabel: string;
   @Input() infoLabel: string;
   @Input() cancelLabel: string;
@@ -25,13 +25,26 @@ export class ConfirmationModalComponent {
   @Output()
   response = new EventEmitter<boolean>();
 
+  /**
+   * Keep track whether one of the buttons was directly pressed. Used to emit the {@link response} when the user clicks
+   * outside the modal.
+   */
+  buttonPressed = false;
+
   constructor(protected activeModal: NgbActiveModal) {
   }
 
+  ngOnDestroy(): void {
+    if (!this.buttonPressed) {
+      this.response.emit(false);
+    }
+  }
+
   /**
    * Confirm the action that led to the modal
    */
   confirmPressed() {
+    this.buttonPressed = true;
     this.response.emit(true);
     this.close();
   }
@@ -40,6 +53,7 @@ export class ConfirmationModalComponent {
    * Cancel the action that led to the modal and close modal
    */
   cancelPressed() {
+    this.buttonPressed = true;
     this.response.emit(false);
     this.close();
   }

diff --git a/...lector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.spec.ts b/...lector/modal-wrappers/export-metadata-selector/export-metadata-selector.component.spec.ts
@@ -42,7 +42,6 @@ class ModelTestModule {
 describe('ExportMetadataSelectorComponent', () => {
   let component: ExportMetadataSelectorComponent;
   let fixture: ComponentFixture<ExportMetadataSelectorComponent>;
-  let debugElement: DebugElement;
   let modalRef;
 
   let router;
@@ -132,17 +131,13 @@ describe('ExportMetadataSelectorComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(ExportMetadataSelectorComponent);
     component = fixture.componentInstance;
-    debugElement = fixture.debugElement;
     const modalService = TestBed.inject(NgbModal);
     modalRef = modalService.open(ConfirmationModalComponent);
     modalRef.componentInstance.response = observableOf(true);
+    modalRef.componentInstance.ngOnDestroy = () => {};
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
   describe('if item is selected', () => {
     let scriptRequestSucceeded;
     beforeEach((done) => {

diff --git a/...tem/item-versions/item-versions-delete-modal/item-versions-delete-modal.component.spec.ts b/...tem/item-versions/item-versions-delete-modal/item-versions-delete-modal.component.spec.ts
@@ -9,12 +9,16 @@ describe('ItemVersionsDeleteModalComponent', () => {
   let component: ItemVersionsDeleteModalComponent;
   let fixture: ComponentFixture<ItemVersionsDeleteModalComponent>;
 
+  let modalStub: any;
+
   beforeEach(async () => {
+    modalStub = jasmine.createSpyObj('modalStub', ['close', 'dismiss']);
+
     await TestBed.configureTestingModule({
       declarations: [ItemVersionsDeleteModalComponent],
-      imports: [ TranslateModule.forRoot(), RouterTestingModule.withRoutes([]) ],
+      imports: [TranslateModule.forRoot(), RouterTestingModule.withRoutes([])],
       providers: [
-        { provide: NgbActiveModal },
+        { provide: NgbActiveModal, useValue: modalStub },
       ]
     }).compileComponents();
   });
@@ -25,7 +29,54 @@ describe('ItemVersionsDeleteModalComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+
+  it('should emit false on destroy when no button has been clicked', () => {
+    spyOn(component.response, 'emit');
+
+    component.ngOnDestroy();
+
+    expect(component.response.emit).toHaveBeenCalledOnceWith(false);
+  });
+
+  describe('onModalClose', () => {
+    beforeEach(() => {
+      spyOn(component.response, 'emit');
+      component.onModalClose();
+    });
+
+    it('should call the close method on the active modal', () => {
+      expect(modalStub.dismiss).toHaveBeenCalled();
+    });
+
+    it('behaviour subject should emit false', () => {
+      expect(component.response.emit).toHaveBeenCalledWith(false);
+    });
+
+    it('should not emit again on destroy', () => {
+      component.ngOnDestroy();
+
+      expect(component.response.emit).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('onModalSubmit', () => {
+    beforeEach(() => {
+      spyOn(component.response, 'emit');
+      component.onModalSubmit();
+    });
+
+    it('should call the close method on the active modal', () => {
+      expect(modalStub.close).toHaveBeenCalled();
+    });
+
+    it('behaviour subject should emit true', () => {
+      expect(component.response.emit).toHaveBeenCalledWith(true);
+    });
+
+    it('should not emit again on destroy', () => {
+      component.ngOnDestroy();
+
+      expect(component.response.emit).toHaveBeenCalledTimes(1);
+    });
   });
 });
diff --git a/...red/item/item-versions/item-versions-delete-modal/item-versions-delete-modal.component.ts b/...red/item/item-versions/item-versions-delete-modal/item-versions-delete-modal.component.ts
@@ -1,30 +1,44 @@
-import { Component, EventEmitter, Output } from '@angular/core';
+import { Component, EventEmitter, Output, OnDestroy } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 
 @Component({
   selector: 'ds-item-versions-delete-modal',
   templateUrl: './item-versions-delete-modal.component.html',
   styleUrls: ['./item-versions-delete-modal.component.scss']
 })
-export class ItemVersionsDeleteModalComponent {
+export class ItemVersionsDeleteModalComponent implements OnDestroy {
   /**
    * An event fired when the cancel or confirm button is clicked, with respectively false or true
    */
   @Output()
   response = new EventEmitter<boolean>();
 
+  /**
+   * Keep track whether one of the buttons was directly pressed. Used to emit the {@link response} when the user clicks
+   * outside the modal.
+   */
+  buttonPressed = false;
+
   versionNumber: number;
 
   constructor(
     protected activeModal: NgbActiveModal,) {
   }
 
+  ngOnDestroy(): void {
+    if (!this.buttonPressed) {
+      this.response.emit(false);
+    }
+  }
+
   onModalClose() {
+    this.buttonPressed = true;
     this.response.emit(false);
     this.activeModal.dismiss();
   }
 
   onModalSubmit() {
+    this.buttonPressed = true;
     this.response.emit(true);
     this.activeModal.close();
   }