6

我想使用模板表单和[min]指令[max]，所以我创建了它们并且它们可以工作。但是这个测试让我很困惑：验证不是异步执行的，但是在改变我的值和东西之后，我必须经历这个：

component.makeSomeChangeThatInvalidatesMyInput();
// control.invalid = false, expected

fixture.detectChanges();
// control.invalid is still false, not expected

// but if I go do this
fixture.whenStable().then(() => {
  // control.invalid is STILL false, not expected
  fixture.detectChanges();
  // control.invalid now true
  // expect(... .errors ... ) now passes
})

我不明白为什么我什至需要那个whenStable()，更不用说另一个detectChanges()循环了。我在这里想念什么？为什么执行此验证需要 2 个变更检测周期？

我是否运行测试async都没关系。

这是我的测试：

@Component({
    selector: 'test-cmp',
    template: `<form>
        <input [max]="maxValue" [(ngModel)]="numValue" name="numValue" #val="ngModel">
        <span class="error" *ngIf="val.invalid">Errors there.</span>
    </form>`
})
class TestMaxDirectiveComponent {
    maxValue: number;
    numValue: number;
}
fdescribe('ValidateMaxDirective', () => {
    let fixture: ComponentFixture<TestMaxDirectiveComponent>;
    let component: TestMaxDirectiveComponent;

    beforeEach(async(() => TestBed.configureTestingModule({
        imports: [FormsModule],
        declarations: [TestMaxDirectiveComponent, ValidateMaxDirective],
    }).compileComponents()
        .then(() => {
            fixture = TestBed.createComponent(TestMaxDirectiveComponent);
            component = fixture.componentInstance;
            return fixture.detectChanges();
        })
    ));
    fit('should have errors even when value is greater than maxValue', async(() => {
        component.numValue = 42;
        component.maxValue = 2;
        fixture.detectChanges();
        fixture.whenStable().then(() => {
            fixture.detectChanges();
            expect(fixture.nativeElement.querySelector('.error')).toBeTruthy();
        });
    }));
});

这是指令本身（简化了一点）：

const VALIDATE_MAX_PROVIDER = {
    provide: NG_VALIDATORS, useExisting: forwardRef(() => ValidateMaxDirective), multi: true,
};
@Directive({
    selector: '[max][ngModel]',
    providers: [VALIDATE_MAX_PROVIDER],
})
export class ValidateMaxDirective implements Validator {
    private _max: number | string;
    @Input() get max(): number | string {
        return this._max;
    }
    set max(value: number | string) {
        this._max = value;
    }

    validate(control: AbstractControl): ValidationErrors | null {
        if (isEmptyInputValue(control.value) || isEmptyInputValue(this._max)) {
            return null;  // don't validate empty values to allow optional controls
        }
        const value = parseFloat(control.value);
        return !isNaN(value) && value > this._max ? {'max': {'max': this._max, 'actual': control.value}} : null;
    }
}

我已经在一个全新ng new app的@angular/cli版本 1.6.8 和最新的 angular 5.2 上对此进行了测试。

4

1 回答 1

5

经过我们的交谈，我明白了。你问我上面代码中的异步是什么：

validate()是 ！

我们看到这个方法control: AbstractControl作为一个参数

在它的文档中，您会发现它处理异步验证以及同步行为。

所以我在这里假设该参数的添加变为validate()异步。

这反过来意味着您需要等待最终return评估是否发生了变化。

...这是唯一可能触发更改的功能，我们在.detectChanges();.

并且在javascript值（变量）的任何异步情况下，都可以使用时间维度来想象它们可能已经拥有的任何其他维度。

因此，javascript 社区中的此类开发人员采用了“绳子上的弹珠”或“电话线上的鸟”等比喻来帮助解释它们。

共同的主题是生命线/时间线。这是另一个，我个人的代表：

在此处输入图像描述

您必须.subscribe()或.then()必须在水合/返回时执行您想要执行的操作。

所以当你：

component.makeSomeChangeThatInvalidatesMyInput(); // (1)
fixture.detectChanges();                          // (2)
fixture.whenStable()                              // (3)
.then(() => {                                     // (not a step) :we are now outside the
                        //logic of "order of execution" this code could happen much after.
  fixture.detectChanges();
})

  • 在步骤 (2) 中，您实际上是在我上面的图表中进行了第一次评估，即直接进入时间轴上尚未发生任何事情的评估。

  • 但是在（不是一步）中，每次有变化（可能有很多电话）时，您都在听。您最终在那里获得了预期值，因为用于评估的代码执行“准时”发生以捕捉正确的结果；更好的是，它的发生是因为结果。

  • 是的，只有detectChanges()在运行之前才能检测到更改，因此detectChanges()即使在 中进行评估.then()，也会返回一个过早的值。

结果是您的第一个.detectChanges()没有检测到更改，而您的检测fixture.whenStable().then(() => {fixture.detectChanges()})不是错误并且javascript按预期运行。

（包括茉莉花，茉莉花是纯javascript）

所以你有它！毕竟没有奇怪的行为:)

希望这可以帮助！

于 2018-04-26T13:15:38.697 回答