added unit test

revert back to original files
primefaces · May 2, 2024 · 1db9750 · 1db9750
1 parent f0310f0
commit 1db9750
Show file tree

Hide file tree

Showing 2 changed files with 85 additions and 27 deletions.
diff --git a/src/app/components/dynamicdialog/dynamicdialog.spec.ts b/src/app/components/dynamicdialog/dynamicdialog.spec.ts
@@ -31,6 +31,24 @@ export class TestDynamicDialogComponent {
         });
     }
 }
+@Component({
+    template: ` <div class="TestDynamicDialogClosableFalse"></div> `
+})
+export class TestDynamicDialogWithClosableFalseComponent {
+    constructor(public dialogService: DialogService) {}
+
+    show() {
+        this.dialogService.open(TestComponent, {
+            header: 'Demo Header',
+            width: '70%',
+            contentStyle: { 'max-height': '350px', overflow: 'auto' },
+            closable: false,
+            closeOnEscape: true,
+            dismissableMask: true,
+            baseZIndex: 0
+        });
+    }
+}
 @NgModule({
     imports: [CommonModule, DynamicDialogModule],
     declarations: [TestComponent, TestDynamicDialogComponent],
@@ -39,20 +57,20 @@ export class TestDynamicDialogComponent {
 })
 export class FakeTestDialogModule {}
 
-describe('DynamicDialog', () => {
-    let fixture: ComponentFixture<TestDynamicDialogComponent>;
-    let testDynamicDialogComponent: TestDynamicDialogComponent;
-
+fdescribe('DynamicDialog', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [NoopAnimationsModule, FakeTestDialogModule],
             declarations: [Footer]
         });
-        fixture = TestBed.createComponent(TestDynamicDialogComponent);
-        testDynamicDialogComponent = fixture.debugElement.componentInstance;
     });
 
     it('should open dialog and close dialog', fakeAsync(() => {
+        let fixture: ComponentFixture<TestDynamicDialogComponent>;
+        let testDynamicDialogComponent: TestDynamicDialogComponent;
+
+        fixture = TestBed.createComponent(TestDynamicDialogComponent);
+        testDynamicDialogComponent = fixture.debugElement.componentInstance;
         fixture.detectChanges();
 
         testDynamicDialogComponent.show();
@@ -74,4 +92,31 @@ describe('DynamicDialog', () => {
         expect(dynamicDialogEl).toBeUndefined();
         flush();
     }));
+
+    it('should open dialog and close dialog without the closing icon enabled', fakeAsync(() => {
+        let fixture: ComponentFixture<TestDynamicDialogWithClosableFalseComponent>;
+        let testDynamicDialogComponent: TestDynamicDialogWithClosableFalseComponent;
+        fixture = TestBed.createComponent(TestDynamicDialogComponent);
+        testDynamicDialogComponent = fixture.debugElement.componentInstance;
+        fixture.detectChanges();
+
+        testDynamicDialogComponent.show();
+        fixture.detectChanges();
+        tick(300);
+
+        let dynamicDialogEl = document.getElementsByClassName('p-dynamic-dialog')[0];
+        expect(dynamicDialogEl).toBeTruthy();
+        const titleEl = dynamicDialogEl.getElementsByClassName('p-dialog-title')[0];
+        const testComponentHeader = dynamicDialogEl.getElementsByTagName('h2')[0];
+        expect(titleEl.textContent).toEqual('Demo Header');
+        expect(testComponentHeader.textContent).toEqual('PrimeNG ROCKS!');
+        const backdropEl = document.getElementsByClassName('p-dialog-mask')[0];
+        backdropEl.dispatchEvent(new Event('mousedown'));
+        fixture.detectChanges();
+        tick(700);
+
+        dynamicDialogEl = document.getElementsByClassName('p-dynamic-dialog')[0];
+        expect(dynamicDialogEl).toBeUndefined();
+        flush();
+    }));
 });
diff --git a/src/app/showcase/doc/dynamicdialog/exampledoc.ts b/src/app/showcase/doc/dynamicdialog/exampledoc.ts
@@ -1,7 +1,7 @@
 import { Component, OnDestroy } from '@angular/core';
 import { MessageService } from 'primeng/api';
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { Code } from '../../domain/code';
+import { Code } from '@domain/code';
 import { ProductListDemo } from './productlistdemo';
 import { Footer } from './footer';
 
@@ -15,8 +15,8 @@ import { Footer } from './footer';
             </p>
         </app-docsectiontext>
         <div class="card flex justify-content-center">
-            <p-toast></p-toast>
-            <p-button (click)="show()" icon="pi pi-search" label="Select a Product"></p-button>
+            <p-toast />
+            <p-button (click)="show()" icon="pi pi-search" label="Select a Product" />
         </div>
         <app-code [code]="code" selector="dynamic-dialog-example-demo" [extFiles]="extFiles" [routeFiles]="routeFiles"></app-code>
     `,
@@ -64,27 +64,28 @@ export class ExampleDoc implements OnDestroy {
     }
 
     code: Code = {
-        basic: `<p-toast></p-toast>
-<p-button (click)="show()" icon="pi pi-search" label="Select a Product"></p-button>`,
+        basic: `<p-toast />
+<p-button (click)="show()" icon="pi pi-search" label="Select a Product" />`,
 
-        html: `
-<div class="card flex justify-content-center">
-    <p-toast></p-toast>
-    <p-button (click)="show()" icon="pi pi-search" label="Select a Product"></p-button>
+        html: `<div class="card flex justify-content-center">
+    <p-toast />
+    <p-button (click)="show()" icon="pi pi-search" label="Select a Product" />
 </div>`,
 
-        typescript: `
-import { Component, OnDestroy } from '@angular/core';
+        typescript: `import { Component, OnDestroy } from '@angular/core';
 import { MessageService } from 'primeng/api';
-import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
-import { Product } from '../../domain/product';
-import { ProductListDemo } from './productlistdemo';
-import { Footer } from './footer';
+import { DialogService, DynamicDialogModule, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { ProductListDemo } from './demo/productlistdemo';
+import { Footer } from './demo/footer';
+import { ToastModule } from 'primeng/toast';
+import { ButtonModule } from 'primeng/button';
 
 @Component({
     selector: 'dynamic-dialog-example-demo',
     templateUrl: './dynamic-dialog-example-demo.html',
-    providers: [DialogService, MessageService]
+    imports: [DynamicDialogModule, ToastModule, ButtonModule],
+    providers: [DialogService, MessageService],
+    standalone: true,
 })
 export class DynamicDialogExampleDemo implements OnDestroy {
 
@@ -156,13 +157,18 @@ export interface Product {
             path: 'src/app/demo/productlistdemo.ts',
             name: 'ProductListDemo',
             content: `import { Component, OnInit } from '@angular/core';
-import { Product } from '../../domain/product';
-import { ProductService } from '../../service/productservice';
+import { Product } from '@domain/product';
+import { ProductService } from '@service/productservice';
 import { MessageService } from 'primeng/api';
 import { DialogService, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { InfoDemo } from './infodemo';
+import { TableModule } from 'primeng/table'
+import { ButtonModule } from 'primeng/button';
+
 @Component({
     providers: [DialogService, MessageService, ProductService],
+    standalone:true,
+    imports:[TableModule, ButtonModule],
     template: \`<div class="flex justify-content-end mt-1 mb-3">
             <p-button icon="pi pi-external-link" label="Nested Dialog" [outlined]="true" severity="success" (click)="showInfo()" />
         </div>
@@ -187,7 +193,7 @@ import { InfoDemo } from './infodemo';
                         {{ product.quantity }}
                     </td>
                     <td>
-                        <p-button type="button" [text]="true" [rounded]="true" icon="pi pi-plus" (click)="selectProduct(product)"></p-button>
+                        <p-button type="button" [text]="true" [rounded]="true" icon="pi pi-plus" (click)="selectProduct(product)" />
                     </td>
                 </tr>
             </ng-template>
@@ -239,14 +245,18 @@ export class ProductListDemo implements OnInit {
             content: `import { Component} from '@angular/core';
 import { DialogService, DynamicDialogComponent, DynamicDialogRef } from 'primeng/dynamicdialog';
 import { MessageService } from 'primeng/api';
+import { ButtonModule } from 'primeng/button';
+
 @Component({
     providers: [DialogService, MessageService],
+    standalone: true,
+    imports:[ButtonModule],
     template: \`<div>
     <p>
         There are <strong>{{ totalProducts }}</strong> products in total in this list.
     </p>
     <div class="flex justify-content-end">
-        <p-button type="button" label="Close" (click)="close()"></p-button>
+        <p-button type="button" label="Close" (click)="close()" />
     </div>
 </div>\`
 })
@@ -281,12 +291,15 @@ export class InfoDemo {
             name: 'Footer',
             content: `import { Component } from '@angular/core';
 import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { ButtonModule } from 'primeng/button';
 
 @Component({
     selector: 'footer',
+    standalone: true,
+    imports: [ButtonModule],
     template:  \`
         <div class="flex w-full justify-content-end mt-3">
-            <p-button type="button" label="Cancel" icon="pi pi-times" (click)="closeDialog({ buttonType: 'Cancel', summary: 'No Product Selected' })"></p-button>
+            <p-button type="button" label="Cancel" icon="pi pi-times" (click)="closeDialog({ buttonType: 'Cancel', summary: 'No Product Selected' })" />
         </div> \`
 })
 export class Footer {