Question

在Angular应用中，我有一个简单的反应形式，它使用ng-select作为一个必需输入。

我还有一个“保存”按钮，仅当表单有效时才启用。

一切正常。

我想编写一个简单的测试用例，以确保每当ng-select控件没有值时，都不会启用“保存”按钮。

这就是我能够做到的：

it('should not allow to save without a selected item', () => {
  component.form.get('myNgSelectControl').setValue('some-value');
  component.form.updateValueAndValidity();
  fixture.detectChanges();
  expect(page.saveButton.disabled).toBe(false);

  component.form.get('myNgSelectControl').setValue(null);
  component.form.updateValueAndValidity();
  fixture.detectChanges();
  expect(page.saveButton.disabled).toBe(true);
});

无论如何我想以不同的方式构建此测试，我想更多地模拟更高级别的工作流程：我不想像手动将值设置为窗体的控件那样，而是这样做：

“在ng-select中输入类型值xxx”

“从下拉菜单中选择项目xxx”

（执行断言“保存”按钮已启用）

“通过单击ng-select的'X'清除选择”

（执行断言“保存”按钮现在已禁用）

我该怎么做？

如何在反应式表格内测试ng-select？

0 个答案: