title: How to mock Angular service properly? Karma Jasmine test: Expected spy service.getShipPhotos to have been called once. It was called 0 times
body: <p>I am working with Angular 12 and Karma-Jasmine 4 and am testing to verify that the function getSingleShip is being called by the function retrieveShip, but the test result shows it has not been called at all.
  I suspect the real service is being called instead of the mock.
  How do I mock the service properly?</p>
  <p>The below and similar tests that depend on mockShipsService.getSingleShip fail (Expected spy ShipsService.getSingleShip to have been called once. It was called 0 times.).</p>
  <p>spec.ts:</p>
  <pre><code> beforeEach(async () =&gt; {
      const spyShipServ = jasmine.createSpyObj('ShipsService', ['getSingleShip']);
      mockActivatedRoute = {
        snapshot: {
          paramMap: {
            get: () =&gt; { return &quot;610a80fd485a6ad03b43b539&quot; }
          }
        }
      }
  
      await TestBed.configureTestingModule({
        imports: [
          HttpClientTestingModule,
          RouterTestingModule.withRoutes(routes),
        ],
        declarations: [
          DetailedShipComponent
        ],
        providers: [
          { provide: ShipsService, useValue: spyShipServ },
          { provide: ActivatedRoute, useValue: mockActivatedRoute },
        ],
      }).compileComponents();
      mockShipsService = TestBed.inject(ShipsService) as jasmine.SpyObj&lt;ShipsService&gt;
      router = TestBed.inject(Router);
    });
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(DetailedShipComponent);
      component = fixture.componentInstance;
    });
  
  
    describe('retrieveShip', () =&gt; {
      it('should call getSingleShip once', () =&gt; {
        getSingleShipResponse = {
          _id: &quot;610a80fd485a6ad03b43b539&quot;,
          name: &quot;Sabrina&quot;,
          type: &quot;cruise&quot;
        };
        mockShipsService.getSingleShip.and.returnValue(of(getSingleShipResponse));
  
        component.retrieveShip(&quot;610a80fd485a6ad03b43b539&quot;);
  
        expect(mockShipsService.getSingleShip).toHaveBeenCalledTimes(1);
      })
    })
  </code></pre>
  <p>The above is done according to Angular docs here: <a href="https://angular.io/guide/testing-services" rel="nofollow noreferrer">Testing services</a></p>
  <p>component.ts:</p>
  <pre><code>  retrieveShip(shipId: string): void {
      this.shipsService.getSingleShip(shipId).subscribe({
        next: response =&gt; {
          this.ship = response;
        },
        error: err =&gt; this.errorMessage = err
      });
    }
  </code></pre>
  <p>service.ts:</p>
  <pre><code>@Injectable({
    providedIn: 'root'
  })
  export class ShipsService {
    readonly ROOT_URL: string = environment.ROOT_URL;
  
    constructor(
      private http: HttpClient,
    ) {
    }
  
    getSingleShip(shipId: string): Observable&lt;Ship&gt; {
      return this.http.get&lt;Ship&gt;(`${this.ROOT_URL}/ships/${shipId}`);
    }
  }
  </code></pre>
  <p>Any tips would be greatly appreciated!</p>