角4反应形式量角器

我想用量角器测试输入表单的验证代码在我的应用程序。角4反应形式量角器

我的组件看起来或多或少是这样的：

@Component({ 
    selector: 'app-my-component', 
    templateUrl: './my-component.component.html', 
    styleUrls: ['./my-component.component.css'] 
}) 
export class MyComponent implements OnInit { 
    private myForm: FormGroup; 
    private category: AbstractControl; 

    constructor(fb: FormBuilder) { 
    this.myForm = fb.group({ 
     'category': ['', Validators.required] 
    }); 
    this.category = this.myForm.controls['category']; 
    } 
... 
}

在这种简化版类是我的形式只有输入字段。

反过来我-component.component.html：

<form [formGroup]="myForm" class="new-item-form"> 
     <input type="text" name="category" title="Hochladen" 
      placeholder="Enter a category" 
      [formControl]="category"> 
     category.isValid = <pre>{{category.valid | json}}</pre> 
     <br> 
     category.value<pre class="test">{{category.value | json}}</pre> 
     <br> 
     <div *ngIf="!category.valid && (!category.pristine)" 
      class="ui error message">Document category not valid</div> 
</form>

...换句话说，文本显示，如果表单字段已经打了文档类别无效只显示，但仍然保持空白。到目前为止，这一切都很完美，直到这里。前标签只是一个帮助，所以有一个视觉提醒正在发生的事情。

真正的问题出现在我尝试使用量角器测试此行为时。在这种情况下，由于app.e2e-spec.ts：

describe('Form validation',() => { 
    it('should show missing category validation error if category is missing after field edited',() => { 
    page.navigateTo(); 
    let categoryInput = element(by.css('form.new-upload-form input[name="category"]')); 
    categoryInput.sendKeys('abc'); 
    expect(categoryInput.getAttribute('value')).toBe('abc'); 
    categoryInput.clear(); 

    expect(categoryInput.getAttribute('value')).toBe(''); 

    let errorMessages = element.all(by.css('.ui.error.message')) 
    expect(errorMessages.count()).toBe(1); 
    }); 
});

所有期望的呼叫与最后一个，即外成功。 expect(errorMessages.count()).toBe(1);。这意味着错误消息从不显示。

这只会发生，只要量角器操作。只要这是真的，category.isValid总是如此。并在初始categoryInput.sendKeys('abc');,category.value停留总是在'abc'。

我试过做了一堆categoryInput.click();或bodyElement.click()无济于事。我也试过用categoryInput.sendKeys('\ue003');（backspace）代替/加入categoryInput.clear()。也只是输入'\ue003'（而不是'abc'）将不会有category.pristine任何效果（也不应该）。

为了寻求知识，我将继续阅读ReactiveFormsModule的源代码，试图了解categoryInput.sendKeys(...)或categoryInput.clear如何被忽略。

我忘记之前，我用量角器= 5.1.0，@角/ CLI = 1.0.0，@角/普通= 4.0.0 ... @角/形式= 4.0.0

感谢您一直到此为止，如果您认为您可以提供帮助，则更是如此。

来源

2017-05-30 teratzul

你尝试''后categoryInput.clear（）调用'categoryInput.sendKeys（ “”）;'？我认为另一个想法可能是提交表单，这是否有可能？ – Batajus

组件上是否有可触发的事件？例如在使组件变空之后在组件上做一个“模糊”。据我的理解，你的描述不是现在发生的事情。 – wswebcreation

谢谢@Batajus，'categoryInput.sendKeys（“”）''categoryInput.clear（）'没有帮助。我现在试图绕过整个“原始”代码，以便它正确工作。 – teratzul

也许这可以帮助你。有了这段代码，您正在注入一段JavaScript来重置输入并引发模糊。

function tiggerJsBlur(element) { 
 
    var blurField = new Event('blur'); 
 
    element.value = ''; 
 
    element.dispatchEvent(blurField); 
 
} 
 

 
browser.executeScript(tiggerJsBlur, categoryInput.getWebElement());

来源

2017-05-31 09:30:08 wswebcreation

'triggerJsBlur'没有触发'categoryInput'元素上的模糊。尽管如此。调用'triggerJsBlur'中的'element.blur（）'而不是'element.dispatchEvent（）'成功地模糊了该字段，但它不能成功显示错误消息。无论如何感谢。 – teratzul

我有同样的问题，你有没有找到解决办法？ –

角4反应形式量角器

回答

相关问题