8

角组件

public setupObservables() {
  this.formFieldChanged$ = this.formField
    .valueChanges
    .pipe(
        debounceTime(100),
        distinctUntilChanged((a, b) => a === b),
    )
}

茉莉花测试

import { of } from 'rxjs';
import { marbles } from 'rxjs-marbles/jasmine';  
...

it('should update value on debounced formField change', marbles(m => {
  const values = { a: "1", b: "2", c: "3" };

  const fakeInputs = m.cold('a 200ms b 50ms c', values);
  const expected = m.cold('100ms a 250ms c', values);

  // works on stackblitz but otherwise gives TS2540 compiler error
  // cannot assign to a read-only property
  component.formField.valueChanges = fakeInputs; 
  component.setupObservables();

  m.expect(component.formFieldChanged$).toBeObservable(expected);
}));

stackblitz.com 示例

目的是使用大理石测试来测试Observable具有 Angular 反应形式的上下文中的代码。

  • 这种方法有意义吗？
  • 如何最好地模拟valueChanges一个FormField对象？
  • 有没有更好的方法来构建这类测试？
4

2 回答 2

6

问题是 - 你想测试什么。它是单元测试还是 e2e 测试？如果它是一个单元测试 - 模拟反应形式，只涵盖你的逻辑，那么你没有问题valueChanges，因为它被模拟并且你控制它。

如果它是一个 e2e 测试 - 你不应该重新分配valueChanges. 什么都不应该被嘲笑/替换，因为它是一个 e2e 测试。

不过，如果您想更改valueChanges- 使用https://github.com/krzkaczor/ts-essentials#writable

(Writable<typeof component.formField>component.formField).valueChanges = fakeInputs;

它将使属性类型可写。

如果它是一个单元测试，我个人会投票模拟反应形式，因为在单元测试中我们只需要测试我们的单元，它的依赖关系应该被模拟/存根。

注入我们想要模拟的部分

作为一个选项，您可以将表单作为组件的依赖项移动到组件声明中的提供程序。

@Component({
    selector: 'app-component',
    templateUrl: './app-component.html',
    styleUrls: ['./app-component.scss'],
    providers: [
        {
            provide: 'form',
            useFactory: () => new FormControl(),
        },
    ],
})
export class AppComponent {
    public formFieldChanged$: Observable<unknown>;

    constructor(@Inject('form') public readonly formField: FormControl) {
    }

    public setupObservables(): void {
        this.formFieldChanged$ = this.formField
            .valueChanges
            .pipe(
                debounceTime(100),
                distinctUntilChanged((a, b) => a === b),
            );
    }
}

然后你可以简单地在测试中注入一个模拟而不是它。

it('should update value on debounced formField change', marbles(m => {
    const values = { a: "1", b: "2", c: "3" };

    const fakeInputs = m.cold('a 200ms b 50ms c', values);
    const expected = m.cold('100ms a 250ms c', values);

    const formInput = {
        valueChanges: fakeInputs,
    };

    const component = new AppComponent(formInput as any as FormControl);

    component.setupObservables();
    m.expect(component.formFieldChanged$).toBeObservable(expected);
}));
于 2020-04-25T16:29:28.617 回答
0

使用属性而不是字段是一种更简洁的解决方案。

get formFieldChanged$() { return this._formFieldChanged$; }
private _formFieldChanged$: Observable<string>;

...
   
public setupObservables() {
  this._formFieldChanged$ = this.formField
    .valueChanges
    .pipe(
        debounceTime(100),
        distinctUntilChanged((a, b) => a === b),
    )
}

spyOnProperty在这里施展魔法，setupObservables()不再需要：

it('should update value on debounced formField change', marbles(m => {
  const values = { a: "1", b: "2", c: "3" };

  const fakeInputs = m.cold('a 200ms b 50ms c', values);
  const expected = m.cold('100ms a 250ms c', values);

  spyOnProperty(component, 'formFieldChanged$').and.returnValue(fakeInputs);

  m.expect(component.formFieldChanged$).toBeObservable(expected);
}));
于 2021-06-24T09:06:35.590 回答