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 index a7a1554cf6..6c304440fa 100644 --- 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 index f22175e28b..cb6a396801 100644 --- 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; }