refactor: migrate profile description line to signals (#926)

src/app/resume-page/profile-section/profile-description/profile-description-line/profile-description-line.component.html

@@ -1,9 +1,7 @@
-@if (line.data) {
-  <span class="symbol" aria-hidden="true" appMaterialSymbol>{{
-    line.data.symbol
-  }}</span>
-  <span
-    class="content"
-    [innerHtml]="_domSanitizer.bypassSecurityTrustHtml(line.data.html)"
-  ></span>
-}
+<span class="symbol" aria-hidden="true" appMaterialSymbol>{{
+  data().symbol
+}}</span>
+<span
+  class="content"
+  [innerHtml]="_domSanitizer.bypassSecurityTrustHtml(data().html)"
+></span>

src/app/resume-page/profile-section/profile-description/profile-description-line/profile-description-line.component.spec.ts

@@ -4,72 +4,57 @@ import { ProfileDescriptionLineComponent } from './profile-description-line.comp
 import { MATERIAL_SYMBOLS_SELECTOR } from '@/test/helpers/material-symbols'
 import { By } from '@angular/platform-browser'
 import { componentTestSetup } from '@/test/helpers/component-test-setup'
-import { DescriptionLine } from '@/data/metadata'
+import { DescriptionLineData } 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'
+import { setFixtureInputsAndDetectChanges } from '@/test/helpers/set-fixture-inputs'
 
 describe('ProfileDescriptionLineComponent', () => {
   let component: ProfileDescriptionLineComponent
   let fixture: ComponentFixture<ProfileDescriptionLineComponent>
 
-  it('should create', () => {
-    ;[fixture, component] = makeSut()
-
-    expect(component).toBeTruthy()
+  beforeEach(() => {
+    ;[fixture, component] = makeSut({ data: DUMMY_LINE_DATA })
+    fixture.detectChanges()
   })
 
-  describe('when line has no data', () => {
-    const DUMMY_LINE_NO_DATA = new DescriptionLine()
-
-    beforeEach(() => {
-      ;[fixture, component] = makeSut()
-      component.line = DUMMY_LINE_NO_DATA
-      fixture.detectChanges()
-    })
-
-    it('should be empty', () => {
-      expect(textContent(fixture.debugElement)).toHaveSize(0)
-    })
+  it('should create', () => {
+    expect(component).toBeTruthy()
   })
 
-  describe('when line has data', () => {
-    const DUMMY_LINE = DescriptionLine.fromData(
-      {
-        symbol: 'symbol',
-        html: '<span>Content</span>',
-      },
-      [new DescriptionLine()],
+  it('should display symbol', () => {
+    const materialSymbolSpan = fixture.debugElement.query(
+      MATERIAL_SYMBOLS_SELECTOR,
     )
 
-    beforeEach(() => {
-      ;[fixture, component] = makeSut()
-      component.line = DUMMY_LINE
-      fixture.detectChanges()
-    })
+    expect(textContent(materialSymbolSpan))
+      .withContext('symbol')
+      .toEqual(DUMMY_LINE_DATA.symbol)
 
-    it('should display symbol', () => {
-      const materialSymbolSpan = fixture.debugElement.query(
-        MATERIAL_SYMBOLS_SELECTOR,
-      )
-
-      expect(textContent(materialSymbolSpan))
-        .withContext('symbol')
-        .toEqual(DUMMY_LINE.data!.symbol)
-
-      expect(materialSymbolSpan.attributes[ATTRIBUTE_ARIA_HIDDEN])
-        .withContext('symbol is hidden from screen readers')
-        .toBe(true.toString())
-    })
+    expect(materialSymbolSpan.attributes[ATTRIBUTE_ARIA_HIDDEN])
+      .withContext('symbol is hidden from screen readers')
+      .toBe(true.toString())
+  })
 
-    it('should display HTML content', () => {
-      const htmlSpan = fixture.debugElement.query(By.css('.content'))
+  it('should display HTML content', () => {
+    const htmlSpan = fixture.debugElement.query(By.css('.content'))
 
-      expect(innerHtml(htmlSpan)).toEqual(DUMMY_LINE.data!.html)
-    })
+    expect(innerHtml(htmlSpan)).toEqual(DUMMY_LINE_DATA.html)
   })
 })
 
-function makeSut() {
-  return componentTestSetup(ProfileDescriptionLineComponent)
+function makeSut(opts: { data?: DescriptionLineData } = {}) {
+  const [fixture, component] = componentTestSetup(
+    ProfileDescriptionLineComponent,
+  )
+  setFixtureInputsAndDetectChanges(fixture, {
+    data: opts.data ?? DUMMY_LINE_DATA,
+  })
+  return [fixture, component] as const
 }
+
+const DUMMY_LINE_DATA = new DescriptionLineData({
+  symbol: 'symbol',
+  html: '<span>Content</span>',
+})

src/app/resume-page/profile-section/profile-description/profile-description-line/profile-description-line.component.ts

@@ -1,7 +1,7 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { MaterialSymbolDirective } from '@/common/material-symbol.directive'
 
-import { DescriptionLine } from '@/data/metadata'
+import { DescriptionLineData } from '@/data/metadata'
 import { DomSanitizer } from '@angular/platform-browser'
 
 @Component({
@@ -11,7 +11,7 @@ import { DomSanitizer } from '@angular/platform-browser'
   styleUrl: './profile-description-line.component.scss',
 })
 export class ProfileDescriptionLineComponent {
-  @Input({ required: true }) line!: DescriptionLine
+  readonly data = input.required<DescriptionLineData>()
 
   constructor(protected readonly _domSanitizer: DomSanitizer) {}
 }

src/app/resume-page/profile-section/profile-description/profile-description.component.ts

@@ -10,6 +10,7 @@ import {
   CollapsibleTreeNodeData,
 } from '../../collapsible-tree/collapsible-tree-node'
 import { ProfileDescriptionLineComponent } from './profile-description-line/profile-description-line.component'
+import { ComponentInputs } from '@/common/component-inputs'
 
 @Component({
   selector: 'app-profile-description',
@@ -40,8 +41,13 @@ const descriptionLineToCollapsibleTreeNode = (
   line: DescriptionLine,
 ): CollapsibleTreeNode =>
   new CollapsibleTreeNode(
-    new CollapsibleTreeNodeData(ProfileDescriptionLineComponent, {
-      inputs: { line } satisfies Partial<ProfileDescriptionLineComponent>,
-    }),
+    /* istanbul ignore next */
+    line.data
+      ? new CollapsibleTreeNodeData(ProfileDescriptionLineComponent, {
+          inputs: {
+            data: line.data,
+          } satisfies ComponentInputs<ProfileDescriptionLineComponent>,
+        })
+      : undefined,
     line.children.map(descriptionLineToCollapsibleTreeNode),
   )