如何选择Angular组件变量初始化位置以实现清晰单元测试？

在Angular项目中，我遇到这样的场景：组件里直接在属性声明时初始化permissions$ Observable，通过构造函数注入的MyPermissionService调用fetchPermissions获取数据，这个Observable初始化后不会再重新赋值。但这种写法在单元测试里很难动态修改权限配置，直接覆写Observable没法测试权限计算逻辑。后来改成在ngOnInit里初始化，虽然能更方便地模拟权限数据，但组件代码需要用NonNullAssertion（!），而且我觉得构造函数初始化更优雅。想知道最优实现方式是什么，有没有其他解决方案？

场景代码示例 #

@Component({})
export class MyComponent {
    permissions$ = this.loadPermissions();

    constructor(private permissionService: MyPermissionService) {}

    private loadPermissions(): Observable<Permissions> {
        return this.permissionService.fetchPermissions('<KEY>');
        // 有时会在这里通过pipe做一些组件专属的处理
    }
}

原测试方式 #

// unit-test.spec.ts
it('should ....', () => {
    component.permissions$ = of(<MOCKED_PERMISSIONS>)
});

当前实现方式 #

@Component({})
export class MyComponent implements OnInit {
    permissions$!: Observable<Permissions>;

    constructor(private permissionService: MyPermissionService) {}

    ngOnInit(): void {
        this.permissions$ = this.loadPermissions();
    }
}

当前测试方式 #

// unit-test.spec.ts
it('should ....', () => {
    const spy = spyOn(permissionService, 'fetchPermissions').and.returnValue(of(...));
    component.ngOnInit(); // 触发加载，使用模拟数据
});

最优解决方案推荐 #

方案1：保留构造函数初始化，Mock服务而非覆写Observable #

不用修改组件代码，测试时直接Mock整个MyPermissionService或SpyOn它的fetchPermissions方法，既能控制返回的Observable，又能完整测试loadPermissions里的pipe逻辑。

测试代码示例：

// unit-test.spec.ts
beforeEach(() => {
    const mockPermissionService = jasmine.createSpyObj('MyPermissionService', ['fetchPermissions']);
    mockPermissionService.fetchPermissions.and.returnValue(of(MOCKED_PERMISSIONS));
    
    TestBed.configureTestingModule({
        providers: [
            { provide: MyPermissionService, useValue: mockPermissionService }
        ]
    });
});

it('should process permissions correctly', () => {
    fixture.detectChanges(); // 组件初始化时自动调用loadPermissions，此时服务已被Mock
    // 断言权限处理后的结果
});

这种方式完全保留构造函数初始化的优雅写法，无需修改组件代码，也不用NonNullAssertion。

方案2：用BehaviorSubject封装（支持动态更新场景） #

如果后续可能需要动态刷新权限，可将permissions$基于BehaviorSubject封装，构造函数内初始化并订阅服务数据，测试时直接推送模拟数据：

组件代码：

@Component({})
export class MyComponent {
    private permissionsSubject = new BehaviorSubject<Permissions>(null);
    permissions$ = this.permissionsSubject.asObservable().pipe(
        filter(perm => perm !== null) // 过滤初始空值
    );

    constructor(private permissionService: MyPermissionService) {
        this.loadPermissions();
    }

    private loadPermissions(): void {
        this.permissionService.fetchPermissions('<KEY>').pipe(
            // 保留原有的pipe处理逻辑
        ).subscribe(permissions => {
            this.permissionsSubject.next(permissions);
        });
    }
}

测试代码：

// unit-test.spec.ts
it('should handle mocked permissions', () => {
    // 直接推送模拟数据，跳过服务调用
    (component as any).permissionsSubject.next(MOCKED_PERMISSIONS);
    // 断言组件行为
});

这种写法既保持构造函数初始化的风格，又给测试提供灵活的模拟方式，还支持后续动态更新权限的需求。

方案3：优化ngOnInit写法，去掉NonNullAssertion #

如果偏好ngOnInit初始化，可给permissions$设置初始空Observable来避免!：

组件代码：

@Component({})
export class MyComponent implements OnInit {
    permissions$: Observable<Permissions> = of(null); // 设置初始空Observable

    constructor(private permissionService: MyPermissionService) {}

    ngOnInit(): void {
        this.permissions$ = this.loadPermissions();
    }
}

测试时仍通过Spy服务方法，调用ngOnInit触发初始化，既不用NonNullAssertion，也能保证测试灵活性。

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