feat(template): accept subscribable on rxLet input

AlirezaEbrahimkhani · AlirezaEbrahimkhani · commit c9e9c94e029e · 2023-12-14T20:32:10.000+03:30
resolves #1541
diff --git a/libs/cdk/notifications/src/lib/create-template-notifier.ts b/libs/cdk/notifications/src/lib/create-template-notifier.ts
@@ -5,6 +5,7 @@ import {
   Observable,
   ObservableInput,
   ReplaySubject,
+  Subscribable,
 } from 'rxjs';
 import {
   distinctUntilChanged,
@@ -91,11 +92,13 @@ const handleSuspenseAndLastValueInNotifications = <T>() => {
  */
 export function createTemplateNotifier<U>(): {
   values$: Observable<RxNotification<U>>;
-  next(observable: ObservableInput<U> | U): void;
+  next(observable: ObservableInput<U> | U | Subscribable<U>): void;
   withInitialSuspense(withInitialSuspense: boolean): void;
 } {
   // A Subject driven from the outside, it can contain Observables, static values null and undefined on purpose of from unassigned properties
-  const observablesSubject = new ReplaySubject<ObservableInput<U> | U>(1);
+  const observablesSubject = new ReplaySubject<
+    ObservableInput<U> | U | Subscribable<U>
+  >(1);
 
   let emittedValueOnce = false;
 
@@ -121,7 +124,7 @@ export function createTemplateNotifier<U>(): {
   );
 
   return {
-    next(observable: ObservableInput<U> | U) {
+    next(observable: ObservableInput<U> | U | Subscribable<U>) {
       observablesSubject.next(observable);
     },
     withInitialSuspense(withInitialSuspense: boolean) {
diff --git a/libs/template/let/src/lib/let.directive.ts b/libs/template/let/src/lib/let.directive.ts
@@ -39,6 +39,7 @@ import {
   ObservableInput,
   ReplaySubject,
   Subject,
+  Subscribable,
   Subscription,
 } from 'rxjs';
 import { filter, map } from 'rxjs/operators';
@@ -130,7 +131,7 @@ export class RxLet<U> implements OnInit, OnDestroy, OnChanges {
    *
    * @param { ObservableInput<U> | U | null | undefined } rxLet
    */
-  @Input() rxLet: ObservableInput<U> | U | null | undefined;
+  @Input() rxLet: ObservableInput<U> | Subscribable<U> | U | null | undefined;
 
   /**
    * @description
diff --git a/libs/template/let/src/lib/tests/let.directive.subscribable.spec.ts b/libs/template/let/src/lib/tests/let.directive.subscribable.spec.ts
@@ -0,0 +1,72 @@
+import { RxLet } from '../let.directive';
+import { TestBed, fakeAsync } from '@angular/core/testing';
+import {
+  ChangeDetectorRef,
+  Component,
+  TemplateRef,
+  ViewContainerRef,
+} from '@angular/core';
+import { Subscribable, BehaviorSubject, Observable } from 'rxjs';
+import { MockChangeDetectorRef } from './fixtures';
+import { RX_RENDER_STRATEGIES_CONFIG } from '@rx-angular/cdk/render-strategies';
+import { mockConsole } from '@test-helpers/rx-angular';
+
+@Component({
+  template: `
+    <ng-container *rxLet="value$; let val">
+      <div>{{ val }}</div>
+    </ng-container>
+  `,
+})
+class LetDirectiveTestComponent {
+  value$: Subscribable<number> = new BehaviorSubject<number>(0);
+}
+
+let fixtureLetDirectiveTestComponent: any;
+let letDirectiveTestComponent: {
+  strategy: string;
+  value$: Observable<unknown> | unknown | undefined | null;
+};
+let componentNativeElement: any;
+
+const setupLetDirectiveTestComponent = (): void => {
+  TestBed.configureTestingModule({
+    declarations: [LetDirectiveTestComponent],
+    imports: [RxLet],
+    providers: [
+      { provide: ChangeDetectorRef, useClass: MockChangeDetectorRef },
+      TemplateRef,
+      ViewContainerRef,
+      {
+        provide: RX_RENDER_STRATEGIES_CONFIG,
+        useValue: {
+          primaryStrategy: 'native',
+        },
+      },
+    ],
+    teardown: { destroyAfterEach: true },
+  });
+  fixtureLetDirectiveTestComponent = TestBed.createComponent(
+    LetDirectiveTestComponent
+  );
+  letDirectiveTestComponent =
+    fixtureLetDirectiveTestComponent.componentInstance;
+  componentNativeElement = fixtureLetDirectiveTestComponent.nativeElement;
+};
+
+describe('RxLet Directive with Subscribable input', () => {
+  beforeAll(() => mockConsole());
+  beforeEach(setupLetDirectiveTestComponent);
+
+  it('should be instantiable', () => {
+    expect(fixtureLetDirectiveTestComponent).toBeDefined();
+    expect(letDirectiveTestComponent).toBeDefined();
+    expect(componentNativeElement).toBeDefined();
+  });
+
+  it('should display value from Subscribable', fakeAsync(() => {
+    letDirectiveTestComponent.value$ = 42;
+    fixtureLetDirectiveTestComponent.detectChanges();
+    expect(componentNativeElement.textContent.trim()).toBe('42');
+  }));
+});
