From 2a061874b6936ba69e68b823cb4050f767b04a23 Mon Sep 17 00:00:00 2001 From: Arman Ozak Date: Sat, 11 Apr 2020 00:32:22 +0300 Subject: [PATCH] feat: add an empty modal container component --- .../modal/modal-container.component.ts | 12 +++++++ .../tests/modal-container.component.spec.ts | 34 +++++++++++++++++++ .../src/lib/theme-shared.module.ts | 16 +++++---- 3 files changed, 55 insertions(+), 7 deletions(-) create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal-container.component.ts create mode 100644 npm/ng-packs/packages/theme-shared/src/lib/tests/modal-container.component.spec.ts diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal-container.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal-container.component.ts new file mode 100644 index 0000000000..bd24bd84d2 --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/components/modal/modal-container.component.ts @@ -0,0 +1,12 @@ +import { Component, ViewChild, ViewContainerRef } from '@angular/core'; + +@Component({ + selector: 'abp-modal-container', + template: ` + + `, +}) +export class ModalContainerComponent { + @ViewChild('container', { static: true, read: ViewContainerRef }) + container: ViewContainerRef; +} diff --git a/npm/ng-packs/packages/theme-shared/src/lib/tests/modal-container.component.spec.ts b/npm/ng-packs/packages/theme-shared/src/lib/tests/modal-container.component.spec.ts new file mode 100644 index 0000000000..4ee654e9bd --- /dev/null +++ b/npm/ng-packs/packages/theme-shared/src/lib/tests/modal-container.component.spec.ts @@ -0,0 +1,34 @@ +import { Component, ComponentFactoryResolver, ComponentRef } from '@angular/core'; +import { createComponentFactory, Spectator } from '@ngneat/spectator/jest'; +import { ModalContainerComponent } from '../components/modal/modal-container.component'; + +describe('ModalContainerComponent', () => { + @Component({ template: '
bar
' }) + class TestComponent {} + + let componentRef: ComponentRef; + let spectator: Spectator; + + const createComponent = createComponentFactory({ + component: ModalContainerComponent, + entryComponents: [TestComponent], + }); + + beforeEach(() => (spectator = createComponent())); + + afterEach(() => componentRef.destroy()); + + describe('#container', () => { + it('should be a ViewContainerRef', () => { + let foo = document.querySelector('div.foo'); + expect(foo).toBeNull(); + + const cfResolver = spectator.get(ComponentFactoryResolver); + const factory = cfResolver.resolveComponentFactory(TestComponent); + componentRef = spectator.component.container.createComponent(factory); + + foo = document.querySelector('div.foo'); + expect(foo.textContent).toBe('bar'); + }); + }); +}); diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts index 15ba212944..f23410d6d0 100644 --- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts +++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts @@ -1,4 +1,4 @@ -import { CoreModule, noop, LazyLoadService } from '@abp/ng.core'; +import { CoreModule, LazyLoadService, noop } from '@abp/ng.core'; import { DatePipe } from '@angular/common'; import { APP_INITIALIZER, Injector, ModuleWithProviders, NgModule } from '@angular/core'; import { NgbDateParserFormatter, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'; @@ -9,23 +9,24 @@ import { ChartComponent } from './components/chart/chart.component'; import { ConfirmationComponent } from './components/confirmation/confirmation.component'; import { HttpErrorWrapperComponent } from './components/http-error-wrapper/http-error-wrapper.component'; import { LoaderBarComponent } from './components/loader-bar/loader-bar.component'; +import { LoadingComponent } from './components/loading/loading.component'; +import { ModalContainerComponent } from './components/modal/modal-container.component'; import { ModalComponent } from './components/modal/modal.component'; +import { PaginationComponent } from './components/pagination/pagination.component'; import { SortOrderIconComponent } from './components/sort-order-icon/sort-order-icon.component'; import { TableEmptyMessageComponent } from './components/table-empty-message/table-empty-message.component'; -import { ToastContainerComponent } from './components/toast-container/toast-container.component'; import { TableComponent } from './components/table/table.component'; +import { ToastContainerComponent } from './components/toast-container/toast-container.component'; import { ToastComponent } from './components/toast/toast.component'; import styles from './constants/styles'; +import { LoadingDirective } from './directives/loading.directive'; import { TableSortDirective } from './directives/table-sort.directive'; import { ErrorHandler } from './handlers/error.handler'; import { RootParams } from './models/common'; +import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token'; import { httpErrorConfigFactory, HTTP_ERROR_CONFIG } from './tokens/http-error.token'; import { DateParserFormatter } from './utils/date-parser-formatter'; import { chartJsLoaded$ } from './utils/widget-utils'; -import { PaginationComponent } from './components/pagination/pagination.component'; -import { LoadingComponent } from './components/loading/loading.component'; -import { LoadingDirective } from './directives/loading.directive'; -import { THEME_SHARED_APPEND_CONTENT } from './tokens/append-content.token'; /** * @@ -54,6 +55,7 @@ export function appendScript(injector: Injector) { LoaderBarComponent, LoadingComponent, ModalComponent, + ModalContainerComponent, PaginationComponent, TableComponent, TableEmptyMessageComponent, @@ -81,7 +83,7 @@ export function appendScript(injector: Injector) { TableSortDirective, ], providers: [DatePipe], - entryComponents: [HttpErrorWrapperComponent, LoadingComponent], + entryComponents: [HttpErrorWrapperComponent, LoadingComponent, ModalContainerComponent], }) export class ThemeSharedModule { constructor(private errorHandler: ErrorHandler) {}