angular testing unable to test component method

i was trying to write tests for my component that has a display() method that makes an request to service and assigns them to an array this is my component

    import { Ialbums } from './../ialbums';
import { AlbumService } from './../album.service';
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-album',
  templateUrl: './album.component.html',
  styleUrls: ['./album.component.css']
})
export class AlbumComponent implements OnInit {
albums: Ialbums[];
response:  Ialbums[];
start: number;
limit: number;
x: any;
pi: number = 1;
  constructor(private albumservice: AlbumService) {
   // this.albums = this.albumservice.getImages(10,5);
  this.start = 0;
    this.limit = 10;

  }

  ngOnInit() {
  }
  display(a)
  {
    if( a < 0 || a > 5000)
    {
      alert('enter a positive and max number is 5000');
    }else {
    this.albumservice.getImages(this.start, a).subscribe(response => {
      this.albums = response;
      // console.log(this.albums);
     // this.albums = response;
    });
  }
    // console.log(a);
  }
  displayimage(b)
  {
    this.x = b;
  }
}

then this is my service

import { Ipersons } from './ipersons';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Ialbums } from './ialbums';

@Injectable()
export class AlbumService {
  albums: any;
  persons: any;
  constructor(private http: HttpClient) {
   }
   getImages(start, limit)
   {
     const url = 'https://jsonplaceholder.typicode.com/photos?_start='+start+'&_limit='+limit;
      return this.http.get<Ialbums[]>(url);
   }
   getPersons(id)
   {
     const url= 'https://jsonplaceholder.typicode.com/users/'+id;
     return this.http.get<Ipersons[]>(url);
   }
}

this is how i am trying to test it

import { AlbumService } from './../album.service';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HttpClient } from '@angular/common/http';
import { AlbumComponent } from './album.component';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgxPaginationModule } from 'ngx-pagination';
describe('AlbumComponent', () => {
  let component: AlbumComponent;
  let fixture: ComponentFixture<AlbumComponent>;
  const getImages = null;
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [ AlbumComponent ],
      imports: [
        HttpClientModule,
        NgxPaginationModule
      ],
      providers: [AlbumService, HttpClient]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AlbumComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
  fit('should return eligible', async(() => {

    const initvalue = 1;
     component.display( initvalue );
     fixture.detectChanges();
    expect(component.albums[0].id).toBe(4);
  }));
});

this returns Cannot read property '0' of undefined i am aware that is should be using spy or something instead of actually requesting api for testing but i am not familiar with those methods if you can please explain or make this work!!!Thanks..