angularunit-testingserviceangular-dynamic-components

Can I test the service together with the component. Angular unit tests


I have a service that creates a dynamic component in a slide component.

// service
  open<T, R>(component: Type<T>, params?: { wide?: boolean; data?: R }): IxSlideInRef<T, R> {
    const slideInRef = this.slideIn2Component.openSlideIn<T, R>(component, params);

    return slideInRef;
  } 
//slideIn2Component
openSlideIn<T, R>(
    componentType: Type<T>,
    params?: { wide?: boolean; data?: R },
  ): IxSlideInRef<T, R> {
    return this.createSlideInRef<T, R>(componentType, params?.data);
  }
  createSlideInRef<T, R>(
    componentType: Type<T>,
    data?: R,
  ): IxSlideInRef<T, R> {
    const slideInRef = new IxSlideInRef<T, R>(this.slideIn2Service, this);
    const injector = Injector.create({
      providers: [
        { provide: SLIDE_IN_DATA, useValue: data },
        { provide: IxSlideInRef, useValue: slideInRef },
      ],
    });
    slideInRef.componentRef = this.slideInBody.createComponent<T>(componentType, { injector });

    return slideInRef;
  }

The service has some more methods such as closeAll, closeLast, etc. Can I test the service together with the component(because they interact very closely), or should I test them separately ?
Testing alone, what should I test in a service if it only manages slideIn2Component ?


Solution

  • If you test them together (actual component and actual service), it is an integration test.

    If you test with actual component and mocked service, it is a unit test.

    I usually write unit tests because I find them easier to manage and easier to test. If I already tested the service and it's satisfactory, no need to provide the actual instance for a component test.

    However, integration tests brings high quality of assurance but requires more maintenance.

    Here is a write up on the topic and how to do both integration and unit tests: https://testing-angular.com/testing-components-depending-on-services/.