convert old rxjs code from angular 18+ to signals as this is the new recommended approach since then

Author: AtofStryker

system-tests/project-fixtures/angular/src/app/components/another-child-providers.component.ts

@@ -1,21 +1,20 @@
-import { Component } from '@angular/core'
+import { Component, signal } from '@angular/core'
 import { ChildProvidersService } from './child-providers.service'
-import { take } from 'rxjs/operators'
 
 @Component({
   selector: 'app-another-child',
   standalone: false,
-  template: `<button (click)="handleClick()">{{ message }}</button>`,
+  template: `<button (click)="handleClick()">{{ message() }}</button>`,
   providers: [ChildProvidersService],
 })
 export class AnotherChildProvidersComponent {
-  message = 'default another child message'
+  message = signal('default another child message')
 
   constructor (private readonly service: ChildProvidersService) {}
 
-  handleClick (): void {
-    this.service.getMessage().pipe(
-      take(1),
-    ).subscribe((message) => this.message = message)
+  async handleClick (): Promise<void> {
+    const message = await this.service.getMessage()
+
+    this.message.set(message)
   }
 }

system-tests/project-fixtures/angular/src/app/components/child-providers.component.ts

@@ -1,20 +1,19 @@
-import { Component } from '@angular/core'
+import { Component, signal } from '@angular/core'
 import { ChildProvidersService } from './child-providers.service'
-import { take } from 'rxjs/operators'
 
 @Component({
   selector: 'app-child-providers',
   standalone: false,
-  template: `<button (click)="handleClick()">{{ message }}</button>`,
+  template: `<button (click)="handleClick()">{{ message() }}</button>`,
 })
 export class ChildProvidersComponent {
-  message = 'default message'
+  message = signal('default message')
 
   constructor (private readonly service: ChildProvidersService) {}
 
-  handleClick (): void {
-    this.service.getMessage().pipe(
-      take(1),
-    ).subscribe((message) => this.message = message)
+  async handleClick (): Promise<void> {
+    const message = await this.service.getMessage()
+
+    this.message.set(message)
   }
 }

system-tests/project-fixtures/angular/src/app/components/child-providers.service.ts

@@ -1,15 +1,11 @@
 import { Injectable } from '@angular/core'
-import { HttpClient } from '@angular/common/http'
-import { Observable } from 'rxjs'
-import { map } from 'rxjs/operators'
 
 @Injectable()
 export class ChildProvidersService {
-  constructor (private readonly http: HttpClient) {}
+  async getMessage (): Promise<string> {
+    const response = await fetch('https://myfakeapiurl.com/api/message')
+    const data = await response.json()
 
-  getMessage (): Observable<string> {
-    return this.http.get<{ message: string }>('https://myfakeapiurl.com/api/message').pipe(
-      map((response) => response.message),
-    )
+    return data.message
   }
 }

system-tests/project-fixtures/angular/src/app/components/counter.component.ts

@@ -1,21 +1,16 @@
-import { Component } from '@angular/core'
-import { CounterService } from './counter.service'
+import { Component, model } from '@angular/core'
 
 @Component({
   selector: 'counter-component',
   standalone: false,
   template: `<button (click)="increment()">
-    Increment: {{ count$ | async }}
+    Increment: {{ count() }}
   </button>`,
 })
 export class CounterComponent {
-  count$
-
-  constructor (private counterService: CounterService) {
-    this.count$ = this.counterService.count$
-  }
+  count = model<number>(0)
 
   increment () {
-    this.counterService.increment()
+    this.count.set(this.count() + 1)
   }
 }

system-tests/project-fixtures/angular/src/app/components/counter.service.ts

@@ -1,7 +1,6 @@
 import { ParentChildModule } from './components/parent-child.module'
 import { ParentComponent } from './components/parent.component'
 import { CounterComponent } from './components/counter.component'
-import { CounterService } from './components/counter.service'
 import { ChildComponent } from './components/child.component'
 import { WithDirectivesComponent } from './components/with-directives.component'
 import { ButtonOutputComponent } from './components/button-output.component'
@@ -10,8 +9,6 @@ import { EventEmitter, Component } from '@angular/core'
 import { ProjectionComponent } from './components/projection.component'
 import { ChildProvidersComponent } from './components/child-providers.component'
 import { ParentProvidersComponent } from './components/parent-providers.component'
-import { HttpClientModule } from '@angular/common/http'
-import { of } from 'rxjs'
 import { ChildProvidersService } from './components/child-providers.service'
 import { AnotherChildProvidersComponent } from './components/another-child-providers.component'
 import { TestBed } from '@angular/core/testing'
@@ -28,7 +25,7 @@ import { UrlImageComponent } from './components/url-image.component'
 })
 class WrapperComponent {}
 
-// Staring with Angular v19, standalone = true is the new default behavior.
+// Starting with Angular v19, standalone = true is the new default behavior.
 // This means that the ng module configurations, including test module configurations,
 // do not work by default with components. Cypress for non standalone components
 // injects the CommonModule by default and allows users to add module declarations.
@@ -58,7 +55,7 @@ describe('angular mount', () => {
   })
 
   it('accepts providers', () => {
-    cy.mount(CounterComponent, { providers: [CounterService] })
+    cy.mount(CounterComponent)
     cy.contains('button', 'Increment: 0').click().contains('Increment: 1')
   })
 
@@ -203,7 +200,6 @@ describe('angular mount', () => {
     })
 
     cy.mount(ChildProvidersComponent, {
-      imports: [HttpClientModule],
       providers: [ChildProvidersService],
     })
 
@@ -220,7 +216,6 @@ describe('angular mount', () => {
 
     cy.mount(ParentProvidersComponent, {
       declarations: [ChildProvidersComponent, AnotherChildProvidersComponent],
-      imports: [HttpClientModule],
       providers: [ChildProvidersService],
     })
 
@@ -231,13 +226,12 @@ describe('angular mount', () => {
   it('can make test doubles for child components', () => {
     cy.mount(ParentProvidersComponent, {
       declarations: [ChildProvidersComponent, AnotherChildProvidersComponent],
-      imports: [HttpClientModule],
       providers: [
         {
           provide: ChildProvidersService,
           useValue: {
-            getMessage () {
-              return of('test')
+            async getMessage (): Promise<string> {
+              return 'test'
             },
           } as ChildProvidersService,
         },
@@ -257,7 +251,6 @@ describe('angular mount', () => {
     })
 
     cy.mount(AnotherChildProvidersComponent, {
-      imports: [HttpClientModule],
       providers: [ChildProvidersService],
     })
 
@@ -266,12 +259,12 @@ describe('angular mount', () => {
   })
 
   it('can use a test double for a component with a provider override', () => {
-    cy.mount(AnotherChildProvidersComponent, { imports: [HttpClientModule] })
+    cy.mount(AnotherChildProvidersComponent)
     TestBed.overrideComponent(AnotherChildProvidersComponent, { add: { providers: [{
       provide: ChildProvidersService,
       useValue: {
-        getMessage () {
-          return of('test')
+        async getMessage (): Promise<string> {
+          return 'test'
         },
       },
     }] } })
@@ -290,7 +283,6 @@ describe('angular mount', () => {
 
     cy.mount(ParentProvidersComponent, {
       declarations: [ChildProvidersComponent, AnotherChildProvidersComponent],
-      imports: [HttpClientModule],
       providers: [ChildProvidersService],
     })
 
@@ -301,15 +293,14 @@ describe('angular mount', () => {
   it('can use a test double for a child component with a provider override', () => {
     TestBed.overrideProvider(ChildProvidersService, {
       useValue: {
-        getMessage () {
-          return of('test')
+        async getMessage (): Promise<string> {
+          return 'test'
         },
       } as ChildProvidersService,
     })
 
     cy.mount(ParentProvidersComponent, {
       declarations: [ChildProvidersComponent, AnotherChildProvidersComponent],
-      imports: [HttpClientModule],
     })
 
     cy.get('button').contains('default another child message').click()