Devextreme-angular: Fix popup resizing after show by popupService (DevExpress#28934)

- changed order of adding content component for correct repaint timing
- get rid of AplicationRef.tick()
- insert DOM by NG renderer
- extend test

Author: GoodDayForSurf

packages/devextreme-angular/package.json

@@ -42,6 +42,7 @@
     "codelyzer": "6.0.2",
     "core-js": "2.6.12",
     "cross-env": "7.0.3",
+    "css-loader": "6.10.0",
     "del": "2.2.2",
     "eslint": "8.56.0",
     "gulp": "4.0.2",
@@ -60,6 +61,7 @@
     "reflect-metadata": "0.1.13",
     "rxjs": "7.8.1",
     "stream-browserify": "3.0.0",
+    "style-loader": "3.3.4",
     "tslib": "2.6.3",
     "typescript": "5.4.5",
     "webpack": "5.96.1",

packages/devextreme-angular/src/ui/popup/service/insertion.directive.ts

@@ -1,12 +1,15 @@
 import {
-  AfterViewInit,
-  Component, ComponentRef,
+  OnInit,
+  Component,
+  ComponentRef,
   ElementRef,
   Inject,
   NgZone,
   PLATFORM_ID,
-  TransferState, Type,
+  TransferState,
+  Type,
   ViewChild,
+  ViewContainerRef,
 } from '@angular/core';
 import {
   DxTemplateHost,
@@ -15,21 +18,19 @@ import {
   WatcherHelper,
 } from 'devextreme-angular/core';
 import { DxPopupComponent, DxPopupTypes } from '../component';
-import { DxServicePopupInsertionDirective } from './insertion.directive';
 
 @Component({
   standalone: true,
-  imports: [DxServicePopupInsertionDirective],
   providers: [
     DxTemplateHost,
     WatcherHelper,
     NestedOptionHost,
     IterableDifferHelper,
   ],
-  template: '<ng-template popup-content-insertion></ng-template>',
+  template: `<ng-container #dxPopupContentContainer></ng-container>`,
 })
-export class PopupServiceComponent<T> extends DxPopupComponent implements AfterViewInit {
-  @ViewChild(DxServicePopupInsertionDirective) contentInsertion: DxServicePopupInsertionDirective;
+export class PopupServiceComponent<T> extends DxPopupComponent implements OnInit {
+  @ViewChild('dxPopupContentContainer', { read: ViewContainerRef, static: true }) contentContainer!: ViewContainerRef;
 
   contentRef: ComponentRef<T>;
 
@@ -48,13 +49,13 @@ export class PopupServiceComponent<T> extends DxPopupComponent implements AfterV
     super(elementRef, ngZone, templateHost, _watcherHelper, _idh, optionHost, transferState, platformId);
   }
 
-  ngAfterViewInit() {
-    super.ngAfterViewInit();
+  ngOnInit() {
+    super.ngOnInit();
 
-    if(this.popupOptions) {
-      this.instance.option(this.popupOptions)
+    if (this.popupOptions) {
+      this.instance.option(this.popupOptions);
     }
 
-    this.contentRef = this.contentInsertion?.viewContainerRef.createComponent(this.contentComponent);
+    this.contentRef = this.contentContainer.createComponent(this.contentComponent);
   }
 }

packages/devextreme-angular/src/ui/popup/service/service.component.ts

@@ -4,7 +4,9 @@ import {
   ComponentFactoryResolver,
   Injector,
   EmbeddedViewRef,
-  ComponentRef, Type,
+  ComponentRef,
+  Type,
+  RendererFactory2,
 } from '@angular/core';
 import { DxPopupComponent, DxPopupTypes } from '../component';
 import { PopupServiceComponent } from './service.component';
@@ -19,6 +21,7 @@ export class DxPopupService {
     private readonly injector: Injector,
     private readonly applicationRef: ApplicationRef,
     private readonly componentFactoryResolver: ComponentFactoryResolver,
+    private readonly rendererFactory: RendererFactory2,
   ) {}
 
   open<T>(contentComponent: Type<T>, popupOptions?: DxPopupTypes.Properties): DxPopupServiceComponent<T> {
@@ -39,16 +42,17 @@ export class DxPopupService {
       componentRef.destroy();
     });
 
+    componentRef.changeDetectorRef.detectChanges();
+
     this.applicationRef.attachView(componentRef.hostView);
 
     const domElem = (componentRef.hostView as EmbeddedViewRef<any>).rootNodes[0] as HTMLElement;
+    const renderer = this.rendererFactory.createRenderer(null, null);
 
-    document.body.appendChild(domElem);
+    renderer.appendChild(document.body, domElem);
 
     cmpInstance.visible = true;
 
-    this.applicationRef.tick();
-
     return componentRef.instance;
   }
 }

packages/devextreme-angular/src/ui/popup/service/service.ts

@@ -1,62 +1,86 @@
-import { TestBed } from '@angular/core/testing';
-import { DxPopupService } from 'devextreme-angular/ui/popup';
-import { DxButtonModule } from 'devextreme-angular';
-import {Component, Input } from '@angular/core';
+import { TestBed, fakeAsync, tick } from '@angular/core/testing';
+import { Component, Input } from '@angular/core';
+import { DxPopupService, type DxPopupTypes } from 'devextreme-angular/ui/popup';
+import { DxButtonModule } from 'devextreme-angular/ui/button';
 
-@Component({
-    selector: 'stub-component',
-    template: '<div class="stub"></div>'
-})
-class StubComponent {}
+import 'devextreme/dist/css/dx.light.css';
 
 @Component({
-    standalone: true,
-    imports: [DxButtonModule],
-    selector: '',
-    template: `<div class="popup-content">
+  standalone: true,
+  imports: [DxButtonModule],
+  selector: '',
+  template: `<div class="popup-content" style="height:300px">
         <dx-button text="Test Button" (onClick)="onClick()"></dx-button>
-    </div>`
+    </div>`,
 })
 class PopupContentComponent {
-    @Input() onClick = () => {};
+  @Input() onClick = () => {};
 }
 
 describe('Using DxPopupService', () => {
-    let popupService: DxPopupService;
+  let popupService: DxPopupService;
+
+  beforeEach(() => {
+    popupService = TestBed.inject(DxPopupService);
+  });
+
+  it('DxPopupService opens DxPopup with component passed as argument', fakeAsync(() => {
+    const TITLE_MIN_WIDTH = 150;
+    const POPUP_CONTENT_MAX_HEIGHT = 240;
+    const popupOptions: DxPopupTypes.Properties = {
+      showTitle: true,
+      showCloseButton: true,
+      title: 'TEST-POPUP-TITLE',
+      height: 400,
+      width: 600,
+      toolbarItems: [{
+        location: 'after',
+        toolbar: 'bottom',
+        widget: 'dxButton',
+        options: {
+          text: 'Disable',
+        },
+      }],
+      onShown() {
+        isPopupHidden = false;
+      },
+    };
 
-    beforeEach(() => {
-        TestBed.configureTestingModule({
-            declarations: [StubComponent],
-            imports: [],
-            providers: [],
-        });
+    let isPopupHidden = true;
 
-        popupService = TestBed.inject(DxPopupService);
+    const popupRef = popupService.open(PopupContentComponent, popupOptions);
+
+    popupRef.onHidden.subscribe(() => {
+      isPopupHidden = true;
     });
 
-    it('DxPopupService opens DxPopup with component passed as argument', (done) => {
-        const fixture = TestBed.createComponent(StubComponent);
-        const popupRef = popupService.open(PopupContentComponent, { showTitle: true, showCloseButton: true });
+    expect(popupRef.contentRef.instance).toBeTruthy();
 
-        popupRef.onHidden.subscribe(() => {
-            done();
-        });
+    popupRef.contentRef.instance.onClick = () => {
+      popupRef.visible = false;
+    };
 
-        popupRef.contentRef.instance.onClick = () => {
-            popupRef.visible = false;
-        };
+    const popupEl: HTMLElement = document.querySelector('.dx-overlay-wrapper.dx-popup-wrapper .dx-overlay-content.dx-popup-normal');
+    const popupCloseEl = popupEl.querySelector('.dx-toolbar .dx-button .dx-icon-close');
+    const popupContentButtonEl: HTMLButtonElement = popupEl.querySelector('.popup-content .dx-button');
 
-        fixture.detectChanges();
+    const popupTitleBarEl: HTMLElement = popupEl.querySelector('.dx-toolbar .dx-toolbar-before .dx-toolbar-label');
+    const popupContentEl: HTMLElement = popupEl.querySelector('.dx-popup-content');
 
-        const popupEl = document.querySelector('.dx-overlay-wrapper.dx-popup-wrapper .dx-overlay-content.dx-popup-normal');
-        const popupCloseEl = popupEl.querySelector('.dx-toolbar .dx-button .dx-icon-close');
-        const popupContentComponentEl: HTMLButtonElement = popupEl.querySelector('.popup-content .dx-button');
+    tick(500);
 
-        expect(popupEl).toBeTruthy();
-        expect(popupCloseEl).toBeTruthy();
-        expect(popupRef.contentRef).toBeTruthy();
-        expect(popupContentComponentEl.textContent).toEqual('Test Button');
+    expect(isPopupHidden).toBeFalsy();
+    expect(popupEl).toBeTruthy();
+    expect(popupCloseEl).toBeTruthy();
+    expect(Number.parseInt(popupTitleBarEl.style.maxWidth, 10)).toBeGreaterThan(TITLE_MIN_WIDTH);
+    expect(Number.parseInt(popupContentEl.style.height, 10)).toBeLessThan(POPUP_CONTENT_MAX_HEIGHT);
+    expect(popupContentButtonEl.textContent).toEqual('Test Button');
 
-        popupContentComponentEl.click();
-    });
+    popupContentButtonEl.click();
+
+    tick(500);
+
+    expect(isPopupHidden).toBeTruthy();
+    expect(popupRef.contentRef.hostView.destroyed).toBeTruthy();
+  }));
 });

packages/devextreme-angular/tests/src/services/popup-service.spec.ts

@@ -13,7 +13,11 @@ module.exports = {
               resolve: {
                 fullySpecified: false,
               },
-            }
+            },
+              {
+                  test: /\.css$/,
+                  use: ['style-loader', 'css-loader']
+              }
           ],
       }]
     }