title: returnValue not changing on spyOn mock service jasmine test
body: <p>I'm trying to test a component that uses a service, this service has a function that returns a boolean. Based on this boolean, my component can change its template.</p>
  <p>For some reason, returnValue within each test isn't overriding the returnValue to what I need so the template can actually change and be tested.</p>
  <p>Here's my test:</p>
  <pre><code>describe(&quot;LikeButtonComponent&quot;, () =&gt; {
      let component: LikeButtonComponent;
      let fixture: ComponentFixture&lt;LikeButtonComponent&gt;;
      const mockService = jasmine.createSpyObj(&quot;UserService&quot;, {
          isLiked$: of(true),
          getPostId$: of(&quot;12983&quot;),
          likePost: () =&gt; {},
          unlikePost: () =&gt; {}
      });
  
      beforeEach(async(() =&gt; {
          TestBed.configureTestingModule({
              declarations: [LikeButtonComponent]
          })
              .overrideComponent(LikeButtonComponent, {
                  set: { providers: [{ provide: UserService, useValue: mockService }] }
              })
              .compileComponents()
              .then(() =&gt; {
                  fixture = TestBed.createComponent(LikeButtonComponent);
                  component = fixture.componentInstance;
                  fixture.detectChanges();
              });
      }));
  
      it(&quot;should render component&quot;, () =&gt; {
          expect(component).toBeTruthy();
      });
  
      it(&quot;should call like&quot;, () =&gt; {
          component.likePost();
  
          expect(mockService.likePost).toHaveBeenCalledTimes(1);
      });
  
      it(&quot;should call unlike&quot;, () =&gt; {
          component.unlikePost();
  
          expect(mockService.unlikePost).toHaveBeenCalledTimes(1);
      });
  
      it(&quot;should have 'liked' class when isLiked is true&quot;, () =&gt; {
          mockService.isLiked$.and.returnValue(of(true));
          fixture.detectChanges();
  
          const container = fixture.debugElement.nativeElement.querySelector(&quot;.likedButton&quot;);
          expect(container.classList.contains(&quot;likedButton--active&quot;)).toBeTruthy();
      });
  
      it(&quot;should have 'unliked' class when isLiked is false&quot;, () =&gt; {
          mockService.isLiked$.and.returnValue(of(false)); // &lt;-- this isn't working as expected.
  
          fixture.detectChanges();
  
          const container = fixture.debugElement.nativeElement.querySelector(&quot;.unlikedButton&quot;);
          expect(container.classList.contains(&quot;unlikedButton--active&quot;)).toBeTruthy();
      });
  });
  
  </code></pre>
  <p>There seems to be some desync issue. Attempted using <code>fakeAsync</code> or <code>async</code>, but didn't solve it. It's always taking the main spyCreate values, so if I put it to return Observable.of(false), it will remain there and no matter how I want to change it later on within the individual tests cases, it won't work or the component can't update properly so I can check the classes applied.</p>
  <p>What am I missing?</p>
  <p>Thanks.</p>