如何为Angular CDK位置策略内的订阅编写单元测试？

要测试positionStrategy.positionChanges的订阅逻辑，核心是通过Mock CDK Overlay相关对象，手动控制positionChanges的数据流来触发订阅回调。以下是具体实现步骤和代码示例：

1. 核心思路 #

• Mock Overlay服务，让其返回自定义的PositionStrategy实例
• 用Subject模拟positionChanges的Observable，这样我们可以手动触发位置变化事件
• 确保链式调用的所有方法（如flexibleConnectedTo、withPositions等）都返回Mock对象本身，维持调用链完整

2. 完整测试代码示例 #

假设你的指令名为TestOverlayDirective，测试文件结构如下：

import { Component, ElementRef } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { Overlay, FlexibleConnectedPositionStrategy, ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
import { TestOverlayDirective } from './test-overlay.directive';
import { Subject } from 'rxjs';

// 用于测试的宿主组件
@Component({
  template: '<div appTestOverlay></div>'
})
class TestHostComponent {}

describe('TestOverlayDirective', () => {
  let fixture: ComponentFixture<TestHostComponent>;
  let directive: TestOverlayDirective;
  let positionChangesSubject: Subject<ConnectedOverlayPositionChange>;
  let mockPositionStrategy: jasmine.SpyObj<FlexibleConnectedPositionStrategy>;

  beforeEach(async () => {
    // 创建Subject用于模拟位置变化事件
    positionChangesSubject = new Subject<ConnectedOverlayPositionChange>();

    // Mock FlexibleConnectedPositionStrategy
    mockPositionStrategy = jasmine.createSpyObj('FlexibleConnectedPositionStrategy', [
      'flexibleConnectedTo',
      'withPositions',
      'withFlexibleDimensions',
      'withTransformOriginOn',
      'withPush'
    ]);
    // 让所有链式方法返回自身，维持调用链
    Object.values(mockPositionStrategy).forEach(method => method.and.returnValue(mockPositionStrategy));
    // 把positionChanges指向我们的Subject
    mockPositionStrategy.positionChanges = positionChangesSubject.asObservable();

    // Mock Overlay服务
    const mockOverlay = jasmine.createSpyObj('Overlay', ['position']);
    mockOverlay.position.and.returnValue({
      flexibleConnectedTo: () => mockPositionStrategy
    });

    await TestBed.configureTestingModule({
      declarations: [TestHostComponent, TestOverlayDirective],
      providers: [
        { provide: Overlay, useValue: mockOverlay },
        { provide: ElementRef, useValue: { nativeElement: document.createElement('div') } }
      ]
    }).compileComponents();

    fixture = TestBed.createComponent(TestHostComponent);
    directive = fixture.debugElement.children[0].injector.get(TestOverlayDirective);
    fixture.detectChanges();
  });

  it('should execute subscription logic when position changes', () => {
    // 模拟一个位置变化对象
    const mockPositionChange: ConnectedOverlayPositionChange = {
      connectionPair: {
        originX: 'center',
        originY: 'bottom',
        overlayX: 'center',
        overlayY: 'top'
      },
      scrollableViewProperties: {},
      viewportRect: {} as DOMRect,
      originRect: {} as DOMRect,
      overlayRect: {} as DOMRect
    };

    // 假设你的订阅逻辑里有某个方法被调用，比如updateSomething，这里用spy监听
    spyOn(directive, 'updateSomething'); // 替换成你实际的逻辑方法

    // 触发位置变化
    positionChangesSubject.next(mockPositionChange);

    // 断言订阅逻辑已执行
    expect(directive.updateSomething).toHaveBeenCalledWith(mockPositionChange);
  });
});

3. 关键细节说明 #

• 链式方法Mock：必须让flexibleConnectedTo、withPositions等所有链式调用方法返回Mock对象本身，否则原代码中的链式调用会中断
• Subject控制数据流：通过Subject.next()可以精准触发位置变化事件，完全控制测试场景
• ElementRef Mock：给指令提供一个模拟的DOM元素，避免依赖真实DOM

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