title: Peculiar result from observable: testing with Jasmine marbles
body: <p>I have a little function in Angular 7 that I am testing with Jest. The function looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>private checkFreeProduct(allowance: SubscriberConnectivityAllowanceInterface): Observable&lt;SubscriberConnectivityAllowanceInterface&gt; {
  
      // TODO: This is currently just a temp function to be extended when required
      return of(allowance);
  
  }
  </code></pre>
  
  <p>As you can see, for the moment all it is doing is creating an observable from its input, but it is under development and will be extended.</p>
  
  <p>I am testing it with Jest like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>it('should return an observable of the allowance', () =&gt; {
  
      const allowance: SubscriberConnectivityAllowanceInterface = {
          hotspotAuthenticated: HotspotAuthenticationEnum.TRUE,
          remainingOctets: 100,
          remainingSeconds: 200,
          activeProductCost: ConnectivityProductCostEnum.PAID,
          activeProductDuration: ConnectivityProductDurationEnum.FLIGHT,
          activeProductType: ConnectivityProductTypeEnum.PREMIUM,
          connectivityProducts: []
      };
  
      const expected = hot('a|', {
          a: allowance
      });
  
      expect(hotspotService['checkFreeProduct'](allowance)).toBeObservable(expected);
  
  });
  </code></pre>
  
  <p>However, the test is failing because of some timing issue. The <code>expected</code> observable result looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>[
    {
      "frame": 0,
      "notification": {
        "error": undefined,
        "hasValue": true,
        "kind": "N",
        "value": {
          "activeProductCost": "paid",
          "activeProductDuration": "flight",
          "activeProductType": "premium",
          "connectivityProducts": [],
          "hotspotAuthenticated": 1,
          "remainingOctets": 100,
          "remainingSeconds": 200
        }
      }
    },
    {
      "frame": 10,
      "notification": {
        "error": undefined,
        "hasValue": false,
        "kind": "C",
        "value": undefined
      }
    }
  ]
  </code></pre>
  
  <p>and the observable created from the function call <code>hotspotService['checkFreeProduct'](allowance)</code> looks like this:</p>
  
  <pre class="lang-js prettyprint-override"><code>[
    {
      "frame": 0,
      "notification": {
        "error": undefined,
        "hasValue": true,
        "kind": "N",
        "value": {
          "activeProductCost": "paid",
          "activeProductDuration": "flight",
          "activeProductType": "premium",
          "connectivityProducts": [],
          "hotspotAuthenticated": 1,
          "remainingOctets": 100,
          "remainingSeconds": 200
        }
      }
    },
    {
      "frame": 0, // &lt;------- this is the only difference
      "notification": {
        "error": undefined,
        "hasValue": false,
        "kind": "C",
        "value": undefined
      }
    }
  ]
  </code></pre>
  
  <p>Now I'm not exactly sure why there are two emissions from these observables, but I'll go with it. What I don't understand is why the observable from the function call emits two events, both on frame 0. I have tried both <code>hot()</code> and <code>cold()</code>, and have experimented with various marbles in these calls but no joy. Can someone please explain?</p>