Angular5 Jasmine测试：共享MappingService实例注入Layer组件问题

Hey Thalion, let's break down how to solve this Angular testing problem step by step!

Core Approach: Share a Single MappingService Instance Across Tests #

The key here is ensuring both tests use the exact same instance of MappingService—so when your first test initializes the map via MapBuilderComponent, the second test's LayerComponent can reuse that already-configured service.

Here's how to set this up:

1. Declare a Shared Service Variable

First, define a variable outside your test suite to hold the shared service instance. This keeps it alive across all test cases:

import { MappingService } from './path-to-your-service';
// ... other imports

let sharedMappingService: MappingService;

2. Initialize the Shared Service Once

Use beforeAll to create the service instance once before any tests run. If your service has dependencies, you can use TestBed.inject to resolve them instead of instantiating manually:

beforeAll(async () => {
  // Configure a minimal TestBed to resolve any dependencies MappingService might have
  await TestBed.configureTestingModule({
    providers: [MappingService]
  }).compileComponents();
  
  // Grab the service instance and store it for reuse
  sharedMappingService = TestBed.inject(MappingService);
});

3. Configure TestBed to Use the Shared Instance

In your beforeEach, update the TestBed to provide the pre-created service instead of generating a new one each time:

import { MapBuilderComponent, LayerComponent } from './path-to-components';
// ...

beforeEach(async () => {
  await TestBed.configureTestingModule({
    declarations: [MapBuilderComponent, LayerComponent],
    providers: [
      // Force TestBed to use our shared service instance
      { provide: MappingService, useValue: sharedMappingService }
    ]
  }).compileComponents();
});

Test 1: Verify MapBuilderComponent Initializes the Map #

Now we can write the first test to create the MapBuilderComponent, set its inputs, and confirm both the component and the service's map are defined:

it('should create MapBuilderComponent and initialize the map in MappingService', () => {
  const fixture = TestBed.createComponent(MapBuilderComponent);
  const component = fixture.componentInstance;

  // Set your input parameter
  component.width = 800;
  // Trigger change detection to run ngOnInit (where initMap should be called)
  fixture.detectChanges();

  // Verify the component exists
  expect(component).toBeTruthy();
  // Verify the service now has a valid ol.Map instance
  expect(sharedMappingService.map).toBeInstanceOf(ol.Map);
});

Test 2: Verify LayerComponent Uses the Existing Map #

For the second test, the shared service already has the initialized map from the first test. We just need to create the LayerComponent, set its inputs, and confirm it adds the layer to the map:

it('should create LayerComponent and add the layer to the existing map', () => {
  // First, ensure the map was initialized by the previous test
  expect(sharedMappingService.map).toBeDefined();

  const fixture = TestBed.createComponent(LayerComponent);
  const component = fixture.componentInstance;

  // Set your input parameter
  component.name = 'TestLayer';
  fixture.detectChanges();

  // Verify the component exists
  expect(component).toBeTruthy();
  // Check if the layer was added to the map
  const mapLayers = sharedMappingService.map.getLayers().getArray();
  const testLayer = mapLayers.find(layer => layer.get('name') === 'TestLayer');
  expect(testLayer).toBeTruthy();
});

Bonus: Better Approach with Integration Testing #

Instead of testing components in isolation, consider writing an integration test that mimics how your components are actually used (nested together). This ensures the service sharing works as intended in a real scenario:

First, create a simple test component to wrap your nested components:

@Component({
  template: `
    <map-builder [width]="800">
      <layer [name]="'TestLayer'">
      </layer>
    </map-builder>
  `
})
class MapBuilderIntegrationTestComponent {}

Then write the integration test:

it('should render nested map-builder and layer, with shared service working correctly', async () => {
  // Add the test component to your TestBed declarations first
  await TestBed.configureTestingModule({
    declarations: [MapBuilderComponent, LayerComponent, MapBuilderIntegrationTestComponent],
    providers: [{ provide: MappingService, useValue: sharedMappingService }]
  }).compileComponents();

  const fixture = TestBed.createComponent(MapBuilderIntegrationTestComponent);
  fixture.detectChanges();

  // Verify both components exist
  const mapBuilder = fixture.debugElement.query(By.directive(MapBuilderComponent)).componentInstance;
  const layerComponent = fixture.debugElement.query(By.directive(LayerComponent)).componentInstance;
  expect(mapBuilder).toBeTruthy();
  expect(layerComponent).toBeTruthy();

  // Verify the layer was added to the map
  const testLayer = sharedMappingService.map.getLayers().getArray()
    .find(layer => layer.get('name') === 'TestLayer');
  expect(testLayer).toBeTruthy();
});

Key Notes #

• Handling Async Logic: If initMap or layer addition is asynchronous, use fakeAsync/tick or async/await to wait for operations to complete before making assertions.
• Mocking OpenLayers: To avoid relying on real OL map instances (which can add overhead), mock ol.Map and its methods. For example, with Jest:

  jest.mock('ol/Map', () => {
    return jest.fn().mockImplementation(() => {
      const mockLayers = { getArray: jest.fn().mockReturnValue([]), push: jest.fn() };
      return { getLayers: jest.fn().mockReturnValue(mockLayers) };
    });
  });
  

内容的提问来源于stack exchange，提问作者Thalion