title: Angular 5: Testing a service with native method and .then
body: <p>About 3 months ago, I asked this question (<a href="https://stackoverflow.com/questions/48165201/angular-5-testing-a-service-using-window/48165648?noredirect=1#comment83313298_48165648">earlier question</a>) about testing a service that has a method that checks the available browser quota storage and returns an Observable. Since the functionality of this service only works with Google Chrome, I changed it to be applicable with Firefox as well. The service now looks as follows:</p>
  
  <pre><code>import { Injectable } from "@angular/core";
  import { Observable } from "rxjs/Observable";
  import * as bowser from "bowser";
  
  @Injectable()
  export class StorageService {
      hasAvailableStorage(): Observable&lt;boolean&gt; {
          if (!bowser.chrome &amp;&amp; !bowser.firefox) {
              return Observable.create(obs =&gt; obs.next(true));
          }
          if (bowser.chrome || bowser.firefox) {
              return Observable.create(observer =&gt; {
                  (navigator as any).storage.estimate().then(
                      estimate =&gt; {
                          observer.next(estimate.usage &lt;= estimate.quota * 0.8);
                      });
              });
          }
      }
  }
  </code></pre>
  
  <p>I want to unit test this service, so I created a spec-file containing the following:</p>
  
  <pre><code>import { Injectable } from "@angular/core";
  
  import { StorageService } from "./storage.service";
  
  @Injectable()
  class MockStorage {
      estimate() {
          return { usage: 10, quota: 15 };
      }
  }
  
  describe("storage.service", () =&gt; {
      let service: StorageService;
  
      beforeAll(() =&gt; service = new StorageService());
  
      it("should return the result of hasAvailableStorage()", () =&gt; {
          const spy = spyOn(navigator["storage"], "estimate").and.callFake(MockStorage);
          service.hasAvailableStorage().subscribe(() =&gt; {
              expect(spy).toHaveBeenCalled();
          });
      });
  });
  </code></pre>
  
  <p>When running this test I get the following TypeError:</p>
  
  <pre><code>Cannot read property 'then' of undefined
  </code></pre>
  
  <p>I do not really understand:</p>
  
  <ol>
  <li>why estimate() is undefined</li>
  <li>how to fix the test</li>
  </ol>
  
  <p>Besides this, I was wondering if there is anything like this that works for IE as well? (no clear explanation I have found on The Internet...)</p>
  
  <p>It would be great if someone could help me and provide some example in a detail! :) </p>