test: use rxState for SSR specs

edbzn · edbzn · commit 3771fa8084ab · 2023-10-27T14:39:52.000+02:00
diff --git a/apps/ssr-e2e/src/e2e/app.cy.ts b/apps/ssr-e2e/src/e2e/app.cy.ts
@@ -1,4 +1,4 @@
-describe('@rx-angular/template universal rendering', () => {
+describe('RxAngular SSR', () => {
   describe('PushPipe', () => {
     it('should display green text', () => {
       cy.request('http://localhost:4200')
@@ -10,7 +10,7 @@ describe('@rx-angular/template universal rendering', () => {
     });
   });
 
-  describe('LetDirective', () => {
+  describe('RxLet', () => {
     it('should display green text', () => {
       cy.request('http://localhost:4200')
         .its('body')
diff --git a/apps/ssr/src/app/app.component.ts b/apps/ssr/src/app/app.component.ts
@@ -1,26 +1,34 @@
 import { isPlatformServer } from '@angular/common';
 import { Component, Inject, NgZone, OnInit, PLATFORM_ID } from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
+import { rxState } from '@rx-angular/state';
+import { of } from 'rxjs';
 
 @Component({
   selector: 'rx-angular-root',
   template: `
-    <div id="let" *rxLet="color$ as color; strategy">{{ color }}</div>
+    <div id="let" *rxLet="color$; let color">{{ color }}</div>
     <div id="push">{{ color$ | push }}</div>
     <div id="unpatch" [unpatch]="['click']" (click)="onClick()"></div>
     <div class="for" *rxFor="let color of colors$">{{ color }}</div>
   `,
 })
 export class AppComponent implements OnInit {
-  color$ = new BehaviorSubject('red');
-  colors$ = new BehaviorSubject(['red']);
+  private readonly state = rxState<{ color: string; colors: string[] }>(
+    ({ set, connect }) => {
+      set('color', () => 'red');
+      connect('colors', of(['red']));
+    }
+  );
+
+  readonly color$ = this.state.select('color');
+  readonly colors$ = this.state.select('colors');
 
   constructor(@Inject(PLATFORM_ID) private platformId: string) {}
 
   ngOnInit() {
     if (isPlatformServer(this.platformId)) {
-      this.color$.next('green');
-      this.colors$.next(['green', 'purple']);
+      this.state.set('color', () => 'green');
+      this.state.set('colors', () => ['green', 'purple']);
     }
   }
 
