refactor: migrate to signal-based inputs & queries + output fns (#865)

* refactor: migrate to signal-based inputs & queries + output fns

* refactor: revert not-so-easy-to-migrate components

* test: fix unit tests with mocked components or missing inputs

* chore: use the navigation tabs makeSut arg around

src/app/common/simple-icon/simple-icon.component.ts

@@ -24,6 +24,8 @@ export class SimpleIconComponent {
 
   protected _fillColor?: string
 
+  // TODO: Skipped for migration because:
+  //  Accessor inputs cannot be migrated as they are too complex.
   @Input({ required: true }) set icon(icon: SimpleIcon) {
     this.loader(icon.slug)
       .pipe(

src/app/common/test-id.directive.ts

@@ -1,17 +1,17 @@
-import { Directive, ElementRef, Input, OnChanges } from '@angular/core'
+import { Directive, ElementRef, OnChanges, input } from '@angular/core'
 
 @Directive({
   selector: '[appTestId]',
   standalone: true,
 })
 export class TestIdDirective implements OnChanges {
-  @Input() public appTestId!: string
+  public readonly appTestId = input.required<string>()
 
   constructor(private el: ElementRef) {}
 
   ngOnChanges(): void {
     if (isDevMode) {
-      this.el.nativeElement.setAttribute(TEST_ID_ATTRIBUTE, this.appTestId)
+      this.el.nativeElement.setAttribute(TEST_ID_ATTRIBUTE, this.appTestId())
     }
   }
 }

src/app/header/navigation-tabs/navigation-tabs.component.html

@@ -1,6 +1,6 @@
 <nav>
   <app-tabs [selectedIndex]="_selectedIndex">
-    @for (item of items; track item.displayName) {
+    @for (item of items(); track item.displayName) {
       <app-tab
         [routerLink]="item.routerLink"
         (isActiveChange)="$event ? onActiveRouteChange($index) : undefined"

src/app/header/navigation-tabs/navigation-tabs.component.spec.ts

@@ -33,9 +33,7 @@ describe('NavigationTabsComponent', () => {
   })
 
   it('should display all items as tabs with their route links', () => {
-    const [fixture, component] = makeSut()
-    component.items = ITEMS
-    fixture.detectChanges()
+    const [fixture] = makeSut({ items: ITEMS })
 
     const tabsElement = fixture.debugElement.query(byComponent(TabsComponent))
 
@@ -56,9 +54,7 @@ describe('NavigationTabsComponent', () => {
   })
 
   it('should mark only active page tab as selected', async () => {
-    const [fixture, component] = makeSut()
-    component.items = ITEMS
-    fixture.detectChanges()
+    const [fixture] = makeSut({ items: ITEMS })
 
     await fixture.ngZone?.run(
       async () => await RouterTestingHarness.create(FOO_ROUTE.path),
@@ -85,10 +81,14 @@ describe('NavigationTabsComponent', () => {
     ).toBeFalse()
   })
 
-  const makeSut = () =>
-    componentTestSetup(NavigationTabsComponent, {
+  const makeSut = ({ items }: { items?: readonly NavigationItem[] } = {}) => {
+    const [fixture, component] = componentTestSetup(NavigationTabsComponent, {
       providers: [provideRouter(ROUTES)],
     })
+    fixture.componentRef.setInput('items', items ?? [])
+    fixture.detectChanges()
+    return [fixture, component] as const
+  }
 })
 
 function makeNavigationItemFromRoutePath(path: string): NavigationItem {

src/app/header/navigation-tabs/navigation-tabs.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, input } from '@angular/core'
 import { TabComponent } from '../tab/tab.component'
 import { TabsComponent } from '../tabs/tabs.component'
 import { RouterLink, RouterLinkActive } from '@angular/router'
@@ -11,7 +11,7 @@ import { RouterLink, RouterLinkActive } from '@angular/router'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NavigationTabsComponent {
-  @Input({ required: true }) items!: readonly NavigationItem[]
+  readonly items = input.required<readonly NavigationItem[]>()
   protected _selectedIndex?: number
 
   onActiveRouteChange(index: number) {

src/app/header/tab/tab.component.spec.ts

@@ -29,7 +29,7 @@ describe('TabComponent', () => {
 
   describe('when selected', () => {
     beforeEach(() => {
-      component.selected = true
+      fixture.componentRef.setInput('selected', true)
       fixture.detectChanges()
     })
 
@@ -46,7 +46,7 @@ describe('TabComponent', () => {
 
   describe('when not selected', () => {
     beforeEach(() => {
-      component.selected = false
+      fixture.componentRef.setInput('selected', false)
       fixture.detectChanges()
     })
 

src/app/header/tabs/tabs.component.ts

@@ -49,6 +49,8 @@ export class TabsComponent implements OnDestroy {
   private _currentTabs: readonly TabComponent[] = []
   private _indexToSelect?: number
   private _selectedIndex?: number
+  // TODO: Skipped for migration because:
+  //  Accessor inputs cannot be migrated as they are too complex.
   @Input({ transform: numberAttribute }) set selectedIndex(index: number) {
     this._indexToSelect = index
   }

src/app/header/toolbar-button/toolbar-button.component.html

@@ -1 +1 @@
-<span appMaterialSymbol>{{ icon }}</span>
+<span appMaterialSymbol>{{ icon() }}</span>

src/app/header/toolbar-button/toolbar-button.component.spec.ts

@@ -24,6 +24,6 @@ describe('ToolbarButtonComponent', () => {
 const DUMMY_ICON = 'icon'
 const makeSut = () => {
   const [fixture, component] = componentTestSetup(ToolbarButtonComponent)
-  component.icon = DUMMY_ICON
+  fixture.componentRef.setInput('icon', DUMMY_ICON)
   return [fixture, component] as const
 }

src/app/header/toolbar-button/toolbar-button.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { ChangeDetectionStrategy, Component, input } from '@angular/core'
 import { MaterialSymbolDirective } from '@/common/material-symbol.directive'
 
 @Component({
@@ -10,6 +10,7 @@ import { MaterialSymbolDirective } from '@/common/material-symbol.directive'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ToolbarButtonComponent {
-  @Input({ required: true }) icon!: string
+  readonly icon = input.required<string>()
+  // https://github.com/angular/components/blob/18.0.5/src/material/button/button-base.ts#L257-L266
   // https://github.com/angular/components/blob/18.0.5/src/material/button/button-base.ts#L257-L266
 }

src/app/resume-page/attribute/attribute.component.html

@@ -1,4 +1,4 @@
 <span [attr.aria-describedby]="_id" tabindex="0" appMaterialSymbol>
-  {{ symbol }}
+  {{ symbol() }}
 </span>
 <div [attr.id]="_id" role="tooltip"><ng-content></ng-content></div>

src/app/resume-page/attribute/attribute.component.spec.ts

@@ -10,7 +10,7 @@ describe('AttributeComponent', () => {
 
   function makeSut() {
     const [fixture, component] = componentTestSetup(AttributeComponent)
-    component.symbol = symbol
+    fixture.componentRef.setInput('symbol', symbol)
     fixture.detectChanges()
     return [fixture, component] as const
   }

src/app/resume-page/attribute/attribute.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { MaterialSymbolDirective } from '@/common/material-symbol.directive'
 
 /**
@@ -16,7 +16,7 @@ let nextId = 0
   imports: [MaterialSymbolDirective],
 })
 export class AttributeComponent {
-  @Input({ required: true }) symbol!: string
+  readonly symbol = input.required<string>()
 
   protected _id = `${ATTRIBUTE_ID_PREFIX}${nextId++}`
 }

src/app/resume-page/card/card-header/card-header-image/card-header-image.component.html

@@ -1 +1 @@
-<img [ngSrc]="src" width="64" height="64" [alt]="alt" />
+<img [ngSrc]="src()" width="64" height="64" [alt]="alt()" />

src/app/resume-page/card/card-header/card-header-image/card-header-image.component.spec.ts

@@ -13,9 +13,8 @@ describe('CardHeaderImageComponent', () => {
     TestBed.configureTestingModule({})
     fixture = TestBed.createComponent(CardHeaderImageComponent)
     component = fixture.componentInstance
-
-    component.src = src
-    component.alt = alt
+    fixture.componentRef.setInput('src', src)
+    fixture.componentRef.setInput('alt', alt)
     fixture.detectChanges()
   })
 

src/app/resume-page/card/card-header/card-header-image/card-header-image.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { NgOptimizedImage } from '@angular/common'
 
 @Component({
@@ -8,6 +8,6 @@ import { NgOptimizedImage } from '@angular/common'
   imports: [NgOptimizedImage],
 })
 export class CardHeaderImageComponent {
-  @Input({ required: true }) src!: string
-  @Input({ required: true }) alt!: string
+  readonly src = input.required<string>()
+  readonly alt = input.required<string>()
 }

src/app/resume-page/chip/chip.component.spec.ts

@@ -16,8 +16,8 @@ describe('ChipComponent', () => {
 
   describe('when selected attribute is false', () => {
     it('should not add the selected class', () => {
-      const [fixture, component] = componentTestSetup(ChipComponent)
-      component.selected = false
+      const [fixture] = componentTestSetup(ChipComponent)
+      fixture.componentRef.setInput('selected', false)
       fixture.detectChanges()
 
       expect(fixture.debugElement.classes['selected']).toBeFalsy()
@@ -26,8 +26,8 @@ describe('ChipComponent', () => {
 
   describe('when selected attribute is true', () => {
     it('should add the selected class', () => {
-      const [fixture, component] = componentTestSetup(ChipComponent)
-      component.selected = true
+      const [fixture] = componentTestSetup(ChipComponent)
+      fixture.componentRef.setInput('selected', true)
       fixture.detectChanges()
 
       expect(fixture.debugElement.classes['selected']).toBeTrue()
@@ -65,7 +65,7 @@ describe('ChipComponent', () => {
 
     beforeEach(() => {
       ;[fixture, component] = componentTestSetup(ChipComponent)
-      component.selected = false
+      fixture.componentRef.setInput('selected', false)
       subscription = component.selectedChange
         .pipe(first())
         .subscribe((selected) => (newSelectedValue = selected))

src/app/resume-page/chip/chip.component.ts

@@ -3,7 +3,7 @@ import {
   EventEmitter,
   HostBinding,
   HostListener,
-  Input,
+  input,
   Output,
 } from '@angular/core'
 
@@ -12,11 +12,10 @@ import {
   template: '<ng-content></ng-content>',
   styleUrls: ['./chip.component.scss'],
   standalone: true,
+  host: { '[class.selected]': 'selected()' },
 })
 export class ChipComponent {
-  @HostBinding('class.selected')
-  @Input()
-  public selected?: boolean
+  public readonly selected = input<boolean>()
 
   @Output()
   public selectedChange = new EventEmitter<boolean>()
@@ -49,6 +48,6 @@ export class ChipComponent {
   }
 
   private emitToggledSelected() {
-    this.selectedChange.emit(!this.selected)
+    this.selectedChange.emit(!this.selected())
   }
 }

src/app/resume-page/chipped-content/chipped-content.component.spec.ts

@@ -43,7 +43,7 @@ describe('ChippedContentComponent', () => {
     chipElements.forEach((chipElement, index) => {
       const content = CONTENTS[index]
 
-      expect(getComponentInstance(chipElement, ChipComponent).selected)
+      expect(getComponentInstance(chipElement, ChipComponent).selected())
         .withContext(`chip ${index} is unselected`)
         .toBeFalse()
 
@@ -102,7 +102,7 @@ describe('ChippedContentComponent', () => {
 
     it('should mark the chip as selected', () => {
       expect(
-        getComponentInstance(firstChipElement, ChipComponent).selected,
+        getComponentInstance(firstChipElement, ChipComponent).selected(),
       ).toBe(true)
     })
 
@@ -128,7 +128,7 @@ describe('ChippedContentComponent', () => {
 
       it('should mark the chip as unselected', () => {
         expect(
-          getComponentInstance(firstChipElement, ChipComponent).selected,
+          getComponentInstance(firstChipElement, ChipComponent).selected(),
         ).toBeFalse()
       })
 
@@ -154,11 +154,11 @@ describe('ChippedContentComponent', () => {
 
       it('should mark the previous chip as unselected and just tapped chip as selected', () => {
         expect(
-          getComponentInstance(firstChipElement, ChipComponent).selected,
+          getComponentInstance(firstChipElement, ChipComponent).selected(),
         ).toBeFalse()
 
         expect(
-          getComponentInstance(secondChipElement, ChipComponent).selected,
+          getComponentInstance(secondChipElement, ChipComponent).selected(),
         ).toBeTrue()
       })
 

src/app/resume-page/date-range/date-range.component.html

@@ -1,8 +1,8 @@
-<span class="start">{{ range.start | date: 'MMM yyyy' }}</span>
+<span class="start">{{ range().start | date: 'MMM yyyy' }}</span>
 <span class="separator"> → </span>
 <span class="end">
-  @if (range.end) {
-    {{ range.end | date: 'MMM yyyy' }}
+  @if (range().end) {
+    {{ range().end | date: 'MMM yyyy' }}
   } @else {
     Present
   }

src/app/resume-page/date-range/date-range.component.spec.ts

@@ -20,7 +20,7 @@ describe('DateRangeComponent', () => {
   })
 
   function setRangeAndDetectChanges(range: DateRange) {
-    component.range = range
+    fixture.componentRef.setInput('range', range)
     fixture.detectChanges()
   }
 

src/app/resume-page/date-range/date-range.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input } from '@angular/core'
+import { Component, input } from '@angular/core'
 import { DateRange } from './date-range'
 import { DatePipe } from '@angular/common'
 
@@ -8,5 +8,5 @@ import { DatePipe } from '@angular/common'
   imports: [DatePipe],
 })
 export class DateRangeComponent {
-  @Input({ required: true }) public range!: DateRange
+  public readonly range = input.required<DateRange>()
 }

src/app/resume-page/education-section/education-item/education-item.component.ts

@@ -38,6 +38,8 @@ import { educationItemToContents } from './education-item-to-contents'
   ],
 })
 export class EducationItemComponent {
+  // TODO: Skipped for migration because:
+  //  Accessor inputs cannot be migrated as they are too complex.
   @Input({ required: true }) public set item(item: EducationItem) {
     this._item = item
     if (item.institution.name.length > 15 && item.institution.shortName) {

src/app/resume-page/experience-section/experience-item/experience-item.component.ts

@@ -38,6 +38,8 @@ import { experienceItemToContents } from './experience-item-to-contents'
   ],
 })
 export class ExperienceItemComponent {
+  // TODO: Skipped for migration because:
+  //  Accessor inputs cannot be migrated as they are too complex.
   @Input({ required: true }) public set item(item: ExperienceItem) {
     this._item = item
     this._contents = experienceItemToContents(item)

src/app/resume-page/languages-section/language-item/language-item.component.html

@@ -1,18 +1,18 @@
 <app-card>
   <app-card-header>
-    <app-language-tag [tag]="item.tag"></app-language-tag>
+    <app-language-tag [tag]="item().tag"></app-language-tag>
     <app-card-header-texts>
       <app-card-header-title appTestId="name">
-        {{ item.name }}
+        {{ item().name }}
       </app-card-header-title>
       <app-card-header-subtitle appTestId="fluency">
-        {{ item.fluency }}
+        {{ item().fluency }}
       </app-card-header-subtitle>
     </app-card-header-texts>
   </app-card-header>
-  @if (item.comment) {
+  @if (item().comment) {
     <div appTestId="comment">
-      <p>{{ item.comment }}</p>
+      <p>{{ item().comment }}</p>
     </div>
   }
 </app-card>

src/app/resume-page/languages-section/language-item/language-item.component.spec.ts

@@ -114,6 +114,6 @@ function setLanguageItem(
   fixture: ComponentFixture<LanguageItemComponent>,
   overrides?: Partial<LanguageItem>,
 ) {
-  fixture.componentInstance.item = makeLanguageItem(overrides)
+  fixture.componentRef.setInput('item', makeLanguageItem(overrides))
   fixture.detectChanges()
 }