fix(components/modals): use optional injector for `SkyModalConfigurat…

…ion` (#1615)
blackbaud · Aug 21, 2023 · ac86119 · ac86119
1 parent 880332f
commit ac86119
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 9 deletions.
diff --git a/libs/components/modals/src/lib/modules/modal/modal.component.spec.ts b/libs/components/modals/src/lib/modules/modal/modal.component.spec.ts
@@ -38,6 +38,7 @@ import { SkyModalHostComponent } from './modal-host.component';
 import { SkyModalHostService } from './modal-host.service';
 import { SkyModalInstance } from './modal-instance';
 import { SkyModalScrollShadowDirective } from './modal-scroll-shadow.directive';
+import { SkyModalModule } from './modal.module';
 import { SkyModalService } from './modal.service';
 
 describe('Modal component', () => {
@@ -1268,3 +1269,32 @@ describe('Modal component', () => {
     }));
   });
 });
+
+describe('Modal component (created w/o SkyModalService)', () => {
+  it('should setup a default modal configuration', () => {
+    TestBed.configureTestingModule({
+      declarations: [ModalTestComponent],
+      imports: [SkyModalModule],
+      providers: [
+        {
+          provide: SkyModalHostService,
+          useValue: {
+            onClose: (): void => {
+              /** */
+            },
+          },
+        },
+      ],
+    });
+
+    const fixture = TestBed.createComponent(ModalTestComponent);
+
+    fixture.detectChanges();
+
+    // Medium is the default size for modals.
+    expect(fixture.nativeElement.querySelector('.sky-modal-medium')).toExist();
+
+    // Close the modal.
+    fixture.nativeElement.querySelector('.sky-modal-btn-close').click();
+  });
+});
diff --git a/libs/components/modals/src/lib/modules/modal/modal.component.ts b/libs/components/modals/src/lib/modules/modal/modal.component.ts
@@ -132,9 +132,18 @@ export class SkyModalComponent implements AfterViewInit, OnDestroy, OnInit {
   #errorsSvc = inject(SkyModalErrorsService);
   #liveAnnouncerSvc = inject(SkyLiveAnnouncerService);
 
+  /**
+   * This provider is optional to account for situations where a modal component
+   * is implemented without the modal service. For example, when a consumer tests
+   * a component that uses the modal component but doesn't launch the modal from
+   * the modal service before executing assertions.
+   */
+  #config =
+    inject(SkyModalConfiguration, { optional: true }) ??
+    new SkyModalConfiguration();
+
   constructor(
     hostService: SkyModalHostService,
-    config: SkyModalConfiguration,
     elRef: ElementRef,
     windowRef: SkyAppWindowRef,
     componentAdapter: SkyModalComponentAdapterService,
@@ -151,16 +160,16 @@ export class SkyModalComponent implements AfterViewInit, OnDestroy, OnInit {
     this.#dockService = dockService;
     this.#mediaQueryService = mediaQueryService;
 
-    this.ariaDescribedBy = config.ariaDescribedBy;
-    this.ariaLabelledBy = config.ariaLabelledBy;
-    this.ariaRole = config.ariaRole;
-    this.helpKey = config.helpKey;
-    this.tiledBody = config.tiledBody;
-    this.wrapperClass = config.wrapperClass;
+    this.ariaDescribedBy = this.#config.ariaDescribedBy;
+    this.ariaLabelledBy = this.#config.ariaLabelledBy;
+    this.ariaRole = this.#config.ariaRole;
+    this.helpKey = this.#config.helpKey;
+    this.tiledBody = this.#config.tiledBody;
+    this.wrapperClass = this.#config.wrapperClass;
 
-    this.size = config.fullPage
+    this.size = this.#config.fullPage
       ? 'full-page'
-      : config.size?.toLowerCase() || 'medium';
+      : this.#config.size?.toLowerCase() || 'medium';
 
     this.modalZIndex = this.#hostService.zIndex;
   }