title: How can I test the data coming from server in my component test file
body: <p>I am writing a unit test for a component in which I get a list of employees.</p>
  
  <p>I have an app service whose making the http request. App Service also has dependency on another common-crud service which defines http get method.</p>
  
  <p><strong>I want to test my GET data with the <code>testObject</code> (in .spec file), so that the object should be equal to one of my data's object.</strong> </p>
  
  <p>I tried to mock both services in my .spec file, but I guess they are not implemented in the right way, as I not getting the data in my .spec file.</p>
  
  <p>I am a bit new to this so don't know how to implement it in the right way.</p>
  
  <p>Thanks for help.</p>
  
  <p>.ts file: </p>
  
  <pre><code>  ngOnInit() {
      this.getItems();
    }
  
    getItems() {
      this.service.getData().
      subscribe(
        response =&gt; {
          this.itemsArray = response.data;
          console.log(this.itemsArray);
        },
        error =&gt; console.log('Error: ' + error)
      );
    }
  </code></pre>
  
  <p>.app.service:</p>
  
  <pre><code>@Injectable()
  export class AppService {
  
    constructor(private service: CommonCrudService) { }
  
      getData(): Observable&lt;any&gt; {
        return this.service.get('http://dummy.restapiexample.com/api/v1/employees');
      }
  }
  </code></pre>
  
  <p>common-crud.service.ts:</p>
  
  <pre><code>@Injectable()
  export class CommonCrudService {
  
    constructor(private http: HttpClient) { }
  
    private handleError(error: any) {
      console.error(error);
      return throwError(error);
    }
  
    public get(url: string) {
      return this.http.get(url).pipe(
      map((response: Response) =&gt; {
        return response;
      }),
      catchError((error: Response | any) =&gt; {
        console.error(error);
        return observableThrowError(error);
      }));
    }
  </code></pre>
  
  <p>.spec.ts:</p>
  
  <pre><code>import { TestBed, async, ComponentFixture } from '@angular/core/testing';
  import { AppComponent } from './app.component';
  import { AppService } from './app.service';
  import { CommonCrudService } from './common-crud.service';
  import { Observable, of } from 'rxjs';
  import { HttpClientTestingModule } from '@angular/common/http/testing';
  import { NO_ERRORS_SCHEMA } from '@angular/core';
  import { mockPipe } from './app-pipe.mock';
  
  const testObject = {
    id: '1',
    employee_name: 'Tiger Nixon',
    employee_salary: '320800',
    employee_age: '61',
    profile_image: ''
  };
  
  describe('AppComponent', () =&gt; {
    let component: AppComponent;
    let fixture: ComponentFixture&lt;AppComponent&gt;;
  
    beforeEach(async(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent,
          mockPipe({name: 'itemSearch'})
        ],
        imports: [
          HttpClientTestingModule
        ],
        providers: [
          {
            provide: AppService,
            useClass: MockAppService
          },
          {
            provide: CommonCrudService,
            useClass: MockCommonCrudService
          }
        ],
        schemas: [NO_ERRORS_SCHEMA]
      }).compileComponents();
    }));
  
    beforeEach(() =&gt; {
      fixture = TestBed.createComponent(AppComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  
    it('should create the app', async(() =&gt; {
      expect(component).toBeTruthy();
    }));
  
  });
  
  class MockAppService {
    getData(): Observable&lt;any&gt; {
      return of([]);
    }
  }
  
  class MockCommonCrudService {
    get(): Observable&lt;any&gt; {
      return of([]);
    }
  }
  </code></pre>