refactor: add innerHtml testing util (#871)

davidlj95 · Nov 27, 2024 · 761a658 · 761a658
1 parent 02e8321
commit 761a658
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 14 deletions.
diff --git a/src/app/common/simple-icon/simple-icon.component.spec.ts b/src/app/common/simple-icon/simple-icon.component.spec.ts
@@ -9,6 +9,7 @@ import { MockProvider } from 'ng-mocks'
 import { EMPTY, of } from 'rxjs'
 import { SVG } from '@/test/mocks/svg'
 import { AsyncPipe } from '@angular/common'
+import { innerHtml } from '@/test/helpers/inner-html'
 
 describe('SimpleIconComponent', () => {
   let component: SimpleIconComponent
@@ -53,9 +54,7 @@ describe('SimpleIconComponent', () => {
       component.icon = { slug: 'dummy-icon' }
       fixture.detectChanges()
 
-      expect((fixture.debugElement.nativeElement as Element).innerHTML).toEqual(
-        ICON_SVG,
-      )
+      expect(innerHtml(fixture.debugElement)).toEqual(ICON_SVG)
     })
   })
 
@@ -68,9 +67,7 @@ describe('SimpleIconComponent', () => {
       component.icon = { slug: 'dummy-icon' }
       fixture.detectChanges()
 
-      expect(
-        (fixture.debugElement.nativeElement as Element).innerHTML,
-      ).toHaveSize(0)
+      expect(innerHtml(fixture.debugElement)).toHaveSize(0)
     })
   })
 })

diff --git a/...n/profile-description/profile-description-line/profile-description-line.component.spec.ts b/...n/profile-description/profile-description-line/profile-description-line.component.spec.ts
@@ -7,6 +7,7 @@ import { componentTestSetup } from '@/test/helpers/component-test-setup'
 import { DescriptionLine } from '@/data/metadata'
 import { ATTRIBUTE_ARIA_HIDDEN } from '@/test/helpers/aria'
 import { textContent } from '@/test/helpers/text-content'
+import { innerHtml } from '@/test/helpers/inner-html'
 
 describe('ProfileDescriptionLineComponent', () => {
   let component: ProfileDescriptionLineComponent
@@ -64,9 +65,7 @@ describe('ProfileDescriptionLineComponent', () => {
     it('should display HTML content', () => {
       const htmlSpan = fixture.debugElement.query(By.css('.content'))
 
-      expect((htmlSpan.nativeElement as Element).innerHTML)
-        .withContext('html')
-        .toEqual(DUMMY_LINE.data!.html)
+      expect(innerHtml(htmlSpan)).toEqual(DUMMY_LINE.data!.html)
     })
   })
 })

diff --git a/src/test/helpers/component-testers.ts b/src/test/helpers/component-testers.ts
@@ -2,6 +2,7 @@ import { Component, DebugElement, Predicate, Type } from '@angular/core'
 import { ComponentFixture } from '@angular/core/testing'
 import { componentTestSetup } from './component-test-setup'
 import { byComponent, getComponentSelector } from './component-query-predicates'
+import { innerHtml } from '@/test/helpers/inner-html'
 
 /**
  * Tests a component is contained inside the provided fixture
@@ -73,10 +74,6 @@ export function shouldProjectContent(
       ? componentElement
       : componentElement.query(projectionContainerPredicate)
     expect(projectionContainerElement).toBeTruthy()
-    expect(
-      (
-        projectionContainerElement.nativeElement as HTMLElement
-      ).innerHTML.trim(),
-    ).toEqual(contentToProject)
+    expect(innerHtml(projectionContainerElement)).toEqual(contentToProject)
   })
 }
diff --git a/src/test/helpers/inner-html.ts b/src/test/helpers/inner-html.ts
@@ -0,0 +1,4 @@
+import { DebugElement } from '@angular/core'
+
+export const innerHtml = (debugElement: DebugElement) =>
+  (debugElement.nativeElement as Element).innerHTML.trim()