refactor: adjusted button-dialog harness to fetch its body more clear

libs/portal-integration-angular/src/lib/core/components/button-dialog/button-dialog.component.spec.ts

@@ -7,12 +7,12 @@ import { ButtonModule } from 'primeng/button'
 
 import { ButtonDialogComponent } from './button-dialog.component'
 import { MockAuthModule } from '../../../mock-auth/mock-auth.module'
-import { ButtonDialogHarness } from '../../../../../testing'
+import { ButtonDialogHarness, DivHarness } from '../../../../../testing'
 import { ButtonDialogConfig } from '../../../model/button-dialog'
 
 @Component({
   template: `<ocx-button-dialog>
-    <div id="host">HostComponentContent</div>
+    <div class="host">HostComponentContent</div>
   </ocx-button-dialog>`,
 })
 class TestBaseHostComponent {}
@@ -31,7 +31,7 @@ const config: ButtonDialogConfig = {
 
 @Component({
   template: ` <ocx-button-dialog [config]="this.buttonDialogConfig">
-    <div id="host">HostComponentContent</div>
+    <div class="host">HostComponentContent</div>
   </ocx-button-dialog>`,
 })
 class TestHostWithConfigComponent {
@@ -40,7 +40,7 @@ class TestHostWithConfigComponent {
 
 @Component({
   template: ` <ocx-button-dialog (resultEmitter)="handleResult($event)">
-    <div id="host">HostComponentContent</div>
+    <div class="host">HostComponentContent</div>
   </ocx-button-dialog>`,
 })
 class TestHostWithResultSubComponent {
@@ -301,7 +301,9 @@ describe('ButtonDialogComponent', () => {
       harnessLoader = await TestbedHarnessEnvironment.loader(fixtureWithHost)
       buttonDialogHarness = await harnessLoader.getHarness(ButtonDialogHarness)
 
-      expect(await buttonDialogHarness.getTextFor('#host')).toBe('HostComponentContent')
+      const contentDiv = await buttonDialogHarness.getHarness(DivHarness.with({ class: 'host' }))
+      expect(contentDiv).toBeDefined()
+      expect(await contentDiv.getText()).toBe('HostComponentContent')
     })
 
     it('should use passed config', async () => {

libs/portal-integration-angular/src/lib/core/components/button-dialog/dialog-message-content/dialog-message-content.component.html

@@ -1,4 +1,4 @@
-<div>
+<div class="dialogMessageContent">
   <h2>
     <i *ngIf="icon !== ''" [class]="icon"></i>
     <span id="dialogMessage">{{message | translate:messageParameters}}</span>

libs/portal-integration-angular/src/lib/services/portal-dialog.service.spec.ts

@@ -57,7 +57,7 @@ class BaseTestComponent {
 }
 
 @Component({
-  template: `<h1 id="testHeader">{{ header }}</h1>`,
+  template: `<div class="testHeader">{{ header }}</div>`,
 })
 class TestWithInputsComponent {
   @Input() header = 'header'
@@ -279,8 +279,8 @@ describe('PortalDialogService', () => {
     fixture.componentInstance.show('title', 'MESSAGE', 'button1', 'button2')
 
     const dialogHarness = await rootLoader.getHarness(ButtonDialogHarness)
-    const message = await dialogHarness.getTextFor('#dialogMessage')
-    expect(message).toEqual(translations['MESSAGE'])
+    const dialogMessageContentHarness = await dialogHarness.getDialogMessageContent()
+    expect(await dialogMessageContentHarness?.getMessageContent()).toEqual(translations['MESSAGE'])
   })
 
   it('should display dialog with translated message with parameters', async () => {
@@ -294,7 +294,8 @@ describe('PortalDialogService', () => {
     )
 
     const dialogHarness = await rootLoader.getHarness(ButtonDialogHarness)
-    const message = await dialogHarness.getTextFor('#dialogMessage')
+    const dialogMessageContentHarness = await dialogHarness.getDialogMessageContent()
+    const message = await dialogMessageContentHarness?.getMessageContent()
     expect(message).toEqual('myMessage myMsgParam')
   })
 
@@ -355,9 +356,10 @@ describe('PortalDialogService', () => {
     fixture.componentInstance.show('title', { message: 'MESSAGE', icon: 'pi pi-times' }, 'button1', 'button2')
 
     const dialogHarness = await rootLoader.getHarness(ButtonDialogHarness)
-    const message = await dialogHarness.getTextFor('#dialogMessage')
+    const dialogMessageContentHarness = await dialogHarness.getDialogMessageContent()
+    const message = await dialogMessageContentHarness?.getMessageContent()
     expect(message).toEqual(translations['MESSAGE'])
-    const icon = await dialogHarness.getAttributeFor('i', 'class')
+    const icon = await dialogMessageContentHarness?.getIconValue()
     expect(icon).toContain('pi pi-times')
   })
 
@@ -372,9 +374,10 @@ describe('PortalDialogService', () => {
     )
 
     const dialogHarness = await rootLoader.getHarness(ButtonDialogHarness)
-    const message = await dialogHarness.getTextFor('#dialogMessage')
+    const dialogMessageContentHarness = await dialogHarness.getDialogMessageContent()
+    const message = await dialogMessageContentHarness?.getMessageContent()
     expect(message).toEqual('myMessage dialogMessageParam')
-    const icon = await dialogHarness.getAttributeFor('i', 'class')
+    const icon = await dialogMessageContentHarness?.getIconValue()
     expect(icon).toContain('pi pi-times')
   })
 
@@ -384,7 +387,8 @@ describe('PortalDialogService', () => {
     fixture.componentInstance.show('title', { type: TestWithInputsComponent }, 'button1', 'button2')
 
     const dialogHarness = await rootLoader.getHarness(ButtonDialogHarness)
-    const headerValue = await dialogHarness.getTextFor('#testHeader')
+    const headerDiv = await dialogHarness.getHarness(DivHarness.with({ class: 'testHeader' }))
+    const headerValue = await headerDiv.getText()
     expect(headerValue).toEqual('header')
   })
 
@@ -404,7 +408,8 @@ describe('PortalDialogService', () => {
     )
 
     const dialogHarness = await rootLoader.getHarness(ButtonDialogHarness)
-    const headerValue = await dialogHarness.getTextFor('#testHeader')
+    const headerDiv = await dialogHarness.getHarness(DivHarness.with({ class: 'testHeader' }))
+    const headerValue = await headerDiv.getText()
     expect(headerValue).toEqual('myCustomHeader')
   })
 

libs/portal-integration-angular/testing/button-dialog.harness.ts

@@ -1,11 +1,13 @@
 import { ContentContainerComponentHarness } from '@angular/cdk/testing'
 import { PButtonDirectiveHarness } from './primeng/p-button-directive.harness'
+import { DialogMessageContentHarness } from './dialog-message-content.harness'
 
 export class ButtonDialogHarness extends ContentContainerComponentHarness {
   static hostSelector = 'ocx-button-dialog'
 
   getPrimaryButton = this.locatorFor(PButtonDirectiveHarness.with({ id: 'buttonDialogPrimaryButton' }))
   getSecondaryButton = this.locatorForOptional(PButtonDirectiveHarness.with({ id: 'buttonDialogSecondaryButton' }))
+  getDialogMessageContent = this.locatorForOptional(DialogMessageContentHarness)
 
   async clickPrimaryButton() {
     await (await this.getPrimaryButton()).click()
@@ -31,16 +33,6 @@ export class ButtonDialogHarness extends ContentContainerComponentHarness {
     return await (await this.getSecondaryButton())?.getIcon()
   }
 
-  async getTextFor(selector: string): Promise<string | undefined> {
-    const element = await this.locatorForOptional(selector)
-    return await (await element())?.text()
-  }
-
-  async getAttributeFor(selector: string, attribute: string): Promise<string | null | undefined> {
-    const element = await this.locatorForOptional(selector)
-    return await (await element())?.getAttribute(attribute)
-  }
-
   async getPrimaryButtonDisabled(): Promise<boolean> {
     return await (await this.getPrimaryButton()).getDisabled()
   }

libs/portal-integration-angular/testing/dialog-message-content.harness.ts

@@ -0,0 +1,16 @@
+import { ComponentHarness } from '@angular/cdk/testing'
+
+export class DialogMessageContentHarness extends ComponentHarness {
+  static hostSelector = '.dialogMessageContent'
+
+  private getMessageSpan = this.locatorFor('#dialogMessage')
+  private getIcon = this.locatorForOptional('i')
+
+  async getMessageContent(): Promise<string> {
+    return await (await this.getMessageSpan()).text()
+  }
+
+  async getIconValue(): Promise<string | null | undefined> {
+    return await (await this.getIcon())?.getAttribute('class')
+  }
+}