title: angular spectator mock Observable<string>
body: <p>I am trying to write a (fairly) complicated test using <a href="https://github.com/ngneat/spectator" rel="nofollow noreferrer">https://github.com/ngneat/spectator</a>
  I have a component which has 3 http services in <strong>ngOnInit</strong>.</p>
  
  <p>Two of them are easy to mock, I can do it 2 ways (I think):</p>
  
  <pre><code>const FieldServiceMock = {
      list: (categoryId: string, specificationOnly: boolean) =&gt;
          of([
              {
                  id: 0,
                  canCopy: false,
                  categoryId: 'cameras',
                  dataType: 0,
                  display: false,
                  isSpecification: true,
                  name: 'gtin',
                  order: 0,
                  required: true,
              },
          ]),
  };
  
  const ProductServiceMock = {
      listValidatedRangeProducts: (categoryId: string) =&gt;
          of([
              {
                  gtin: 0,
              },
              {
                  gtin: 1,
              },
          ]),
  };
  
  let spectator: Spectator&lt;SpecificationsSaveComponent&gt;;
  const createComponent = createComponentFactory({
      component: SpecificationsSaveComponent,
      imports: [],
      providers: [
          mockProvider(FieldService, FieldServiceMock),
          mockProvider(ProductService, ProductServiceMock)
      ],
  });
  </code></pre>
  
  <p>or</p>
  
  <pre><code>let spectator: Spectator&lt;SpecificationsSaveComponent&gt;;
  const createComponent = createComponentFactory({
      component: SpecificationsSaveComponent
  });
  
  beforeEach(() =&gt; {
      spectator = createComponent();
      spectator.get(FieldService).list.andReturn(of([
          {
              id: 0,
              canCopy: false,
              categoryId: 'cameras',
              dataType: 0,
              display: false,
              isSpecification: true,
              name: 'gtin',
              order: 0,
              required: true,
          },
      ]));
      spectator.get(ProductService).listValidatedRangeProducts.andReturn(of([
          {
              gtin: 0,
          },
          {
              gtin: 1,
          },
      ]));
  });
  </code></pre>
  
  <p>The problem is, I have another service that doesn't quite work like the other two. The service looks like this:</p>
  
  <pre><code>import { Injectable } from '@angular/core';
  import { BehaviorSubject, Observable } from 'rxjs';
  
  import { Category } from '@models';
  
  @Injectable({
      providedIn: 'root',
  })
  export class SelectorService {
      private currentCategoriesSubject: BehaviorSubject&lt;Category[]&gt;;
      private currentCategorySubject: BehaviorSubject&lt;string&gt;;
  
      public categories: Observable&lt;Category[]&gt;;
      public category: Observable&lt;string&gt;;
  
      constructor() {
          this.currentCategoriesSubject = new BehaviorSubject&lt;Category[]&gt;(null);
          this.categories = this.currentCategoriesSubject.asObservable();
  
          this.currentCategorySubject = new BehaviorSubject&lt;string&gt;(null);
          this.category = this.currentCategorySubject.asObservable();
      }
  
      public setCategories(categories: Category[]): void {
          if (!categories.length) return;
          this.setCategory(categories[0].id);
          this.currentCategoriesSubject.next(categories);
      }
  
      public setCategory(categoryId: string): void {
          this.currentCategorySubject.next(categoryId);
      }
  
      public get currentCategory(): string {
          return this.currentCategorySubject.value;
      }
  
      public add(category: Category) {
          let categories = this.currentCategoriesSubject.value;
          if (!categories) categories = [];
  
          categories.push(category);
  
          this.currentCategoriesSubject.next(categories);
          this.currentCategorySubject.next(category.id);
      }
  
      public remove(categoryId: string) {
          let categories = this.currentCategoriesSubject.value;
          for (var i = 0; i &lt; categories.length; i++) {
              if (categories[i].id === categoryId) {
                  categories.splice(i, 1);
              }
          }
  
          this.currentCategoriesSubject.next(categories);
  
          if (!categories.length) return;
  
          this.currentCategorySubject.next(categories[0].id);
      }
  }
  </code></pre>
  
  <p>The part I need to mock is the public property <strong>category</strong>.
  I am not sure how to go about mocking that. Does anyone have any idea?</p>
  
  <p>This is the <strong>ngOnInit</strong> method for the component I am testing:</p>
  
  <pre><code>ngOnInit() {
      console.log(this.selectorService);
  
      this.selectorService.category.subscribe(category =&gt; {
          if (!category) return;
  
          this.fieldService.list(category, false).subscribe(fields =&gt; {
              let rangeFields = fields.filter(field =&gt; !field.isSpecification);
              let specificationFields = fields.filter(field =&gt; field.isSpecification);
  
              this.fields = specificationFields;
  
              this.productService.listValidatedRangeProducts(category).subscribe(range =&gt; {
                  if (!range.length) return;
                  this.products = range;
                  this.range = this.productModelService.mapProducts(rangeFields, range);
                  this.saveForm = this.toFormGroup(range[0]);
              });
          });
      });
  }
  
  private toFormGroup(product: any): FormGroup {
      let group: any = {};
  
      this.fields.forEach(field =&gt; {
          group[field.name] = new FormControl(product[field.name]);
      });
  
      return new FormGroup(group);
  }
  </code></pre>