如何测试 angular 组件

Question

I have a component, which depend on a service, which has some dependencies too. (Component call service method, and get an observable back using subject.)

Component:

export class CoursesComponent implements OnInit {
  courses: Observable<Course[]>;

  constructor(private courseService: CourseService) {
    this.courseService.loadCourses();
  }

  ngOnInit(): void {
    this.courses = this.courseService.course;
  }

}

Service

@Injectable()
export class CourseService {
  private courseSubject: Subject<Course[]> = new Subject();
  course = this.courseSubject.asObservable();

  constructor(private courseApiService: CourseApiService,
              private router: Router,
              private route: ActivatedRoute) { }

  loadCourses(title?: string, end?: number): Subscription {
    return this.getCourses(title, end).subscribe((courses: Course[]) => this.courseSubject.next(courses));
  }

  private getCourses(title?: string, end?: number): Observable<Course[]> {
    return this.courseApiService.getCourses(title, end);
  }
}

I try to test component and have trouble: I don't want inject real service to TestBed, so at first I tried to spy on all courseService methods:

const courseServiceMethods = [
  'loadCourses',
  'postCourse',
  'editCourse',
  'getCourseById',
  'removeCourseById',
  'navigateById'];

describe('CoursesComponent', () => {
  let component: CoursesComponent;
  let fixture: ComponentFixture<CoursesComponent>;
  let courseService: SpyObj<CourseService>;

  beforeEach(async(() => {
    courseService = jasmine.createSpyObj('CourseService', courseServiceMethods);
    TestBed.configureTestingModule({
      declarations: [ CoursesComponent, SearchComponent ],
      providers: [
        {provide: CourseService, useValue: courseService},
      ]
    })
    .compileComponents();
  }));

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

  describe('onDelete()', () => {
    it('should call removeCourseById()',  () => {
      component.onDelete('2');

      expect(courseService.removeCourseById).toHaveBeenCalled();
    });
  });

but with this method I can only check if some of the methods from service are called and can`t get observable which gives me my data. So I have another option: in spec.ts write my own mock class for course.service and provide it in TestBed:

@Injectable()
class Mock {
  private courseSubject: Subject<Course[]> = new Subject();
  course = this.courseSubject.asObservable();
  loadCourses(title?: string, end?: number): Subscription {
    return this.getCourses(title, end).subscribe((courses: Course[]) => this.courseSubject.next(courses));
  }

  private getCourses(title?: string, end?: number): Observable<Course[]> {
    return of(coursesMockArray);
  }
}

but with this option I have to mock all methods from courseService, and if it is too big? Is there any chance to spy on methods from course service and check returning data?

Answer 1

You can do:

it('should call removeCourseById()',  () => {
      spyOn(courseService.removeCourseById).and.returnValue(of(true)); // or whatever you want to mock
      component.onDelete('2');

      expect(courseService.removeCourseById).toHaveBeenCalled();
    });

I would do the subscribing in the components and not in the services although they are finite observables, it seems weird to me that they are being subscribed in the service.

Answer 2

Solution 1

You need to create fixture of the service (probably you have if by default) if not you can create like:

export class CourseServiceFixture implements Readonly<CourseService>{
 public loadCourses= jest.fn(); 
//i am using jest you might be using jasmine you may have to write jasmine mock fun
}

then in spec.ts file of component create a variable:

let mockCourseService: CourseServiceFixture;

now you need to assign the variable as object and use it in the providers[] array:

beforeEach(async(() => {
//this is must
mockCourseService = new CourseServiceFixture();
 courseService = jasmine.createSpyObj('CourseService', courseServiceMethods);
    TestBed.configureTestingModule({
      declarations: [ CoursesComponent, SearchComponent ],
      providers: [
        {provide: CourseService, useValue: mockCourseService},
      ]
    })
    .compileComponents();
  }));

now each time you want to use the service you can make it mock return value of the method defined in the fixture file eg:

it('should have some courses',  () => {
 mockCourseService.loadCourses.mockReturnValue(['a','b','c']);
fixture.detectChanges();

expect(component.courses).toBe([...]);
});

Solution 2 incase you don't want to create fixture file it is also given in the docs

let mockCourseService: Partial<CourseService>;

beforeEach(() => {
 mockCourseService= {
    courses: [...],
  };
  providers: [ { provide: CourseService, useValue: mockCourseService} ],
}

you also need to inject the service:

userService = TestBed.inject(UserService);