Question

我对我现在工作的公司相当陌生。我现在正在全栈工作，而我的大多数经验都是在后端工作，所以这些前端的东西对我来说是新的。感觉这应该是一件容易的事情。虽然它也让我们的一位资深开发人员感到难过。

这是针对我们的角度应用程序在karma / jasmine中编写的指令测试。有一个带有提交按钮的表单，并且所有表单元素都是必需的。我有一个测试想要有效地填写表单上的每个元素，然后声明提交按钮已启用（未禁用）。

接下来的测试：

it('submit button should be active', function () {
    elem.find("[name='title']").find("[value='Mr']").prop('selected', true);
    elem.find('[name="firstName"]').val("firstname").trigger('input');
    elem.find('[name="lastName"]').val("lastname").trigger('input');
    elem.find('[name="email"]').val("a@b.com").trigger('input');
    elem.find("[name='type']").find("option[value=0]").prop('selected', true);
    elem.find("[name='dealerIds']").find("option[value=0]").prop('selected', true);
    elem.blur();
    isolatedScope.$digest();

    var result  = elem.find("[analytics-event='wup submit button']");
    expect(result.attr('disabled')).not.toBe("disabled");
});

这与我们没有正确使用$ digest有关吗？这是我第二次遇到这个问题。在应用程序的其他地方，还有另一种形式，我想编写完全相同的测试，并且无法使其工作。

此文件中的所有其他测试都通过（我们主要测试的是我们在表单中输入了无效数据的正确错误消息），所以我不认为这会在设置中出现问题。

感谢您的帮助。

编辑：这是表单的html：

<form name="wupForm" class="..............">
    <select name="title" class="............" required>
        <option value="Mr">Mr</option>
        <option value="Mr">Mrs</option>
        <option value="Mr">Miss</option>
    </select>
    <input type="text" name="firstName" ng-pattern="............" required></input>
    <input type="text" name="lastName" ng-pattern="............" required></input>
    <input type="email" name="email" ng-pattern="............" required></input>
    <select name="type" class="............" required>
        <option value="Contract">Contract</option>
    </select>
    <select name="dealerIds" class="............" required>
        <option value="123">123</option>
    </select>
</form>

我从上面省略了一些东西，只是为了让它更容易阅读。即上面的大多数东西都在它自己的div中。有些属性有ng-show，ng-hide，ng-if，ng-model，ng-class。我猜这些不相关，没有区别，但可以根据需要添加它们。

手动测试时，所有元素都可见。除了提交按钮外，所有元素都已启用。填写完所有表单元素后将启用。

编辑2：

不确定这是否会提供任何有用的信息。当我在完成表单后添加这三行代码时：

console.log(isolatedScope.wupForm.title);
console.log(isolatedScope.wupForm.firstName);
console.log(isolatedScope.wupForm.lastName);

然后这是它在下面产生的。不知道为什么第一个给出undefined，猜猜这可能是问题？我注意到在第二和第三，$$lastCommittedViewValue是我进入这些领域的。

{$viewValue: undefined, $modelValue: undefined, $validators: Object{required: function (value) { ... }}, $asyncValidators: Object{}, $parsers: [], $formatters: [], $viewChangeListeners: [], $untouched: true, $touched: false, $pristine: true, $dirty: false, $valid: false, $invalid: true, $error: Object{required: true}, $$success: Object{}, $pending: undefined, $name: 'title', $$setOptions: function (options) { ... }, $render: function () { ... }, $isEmpty: function (value) { ... }, $setValidity: function setValidity(validationErrorKey, state, options) { ... }, $setPristine: function () { ... }, $setUntouched: function () { ... }, $setTouched: function () { ... }, $rollbackViewValue: function () { ... }, $validate: function () { ... }, $$runValidators: function (parseValid, modelValue, viewValue, doneCallback) { ... }, $commitViewValue: function () { ... }, $$parseAndValidate: function () { ... }, $$writeModelToScope: function () { ... }, $setViewValue: function (value, trigger) { ... }, $$debounceViewValueCommit: function (trigger) { ... }, $options: undefined, $$lastCommittedViewValue: undefined}


{$viewValue: 'firstname', $modelValue: 'firstname', $validators: Object{required: function (value) { ... }, pattern: function (value) { ... }, minlength: function (modelValue, viewValue) { ... }, maxlength: function (modelValue, viewValue) { ... }}, $asyncValidators: Object{}, $parsers: [], $formatters: [function (value) { ... }], $viewChangeListeners: [], $untouched: true, $touched: false, $pristine: false, $dirty: true, $valid: true, $invalid: false, $error: Object{}, $$success: Object{pattern: true, minlength: true, maxlength: true, parse: true, required: true}, $pending: undefined, $name: 'firstName', $$setOptions: function (options) { ... }, $render: function () { ... }, $isEmpty: function (value) { ... }, $setValidity: function setValidity(validationErrorKey, state, options) { ... }, $setPristine: function () { ... }, $setUntouched: function () { ... }, $setTouched: function () { ... }, $rollbackViewValue: function () { ... }, $validate: function () { ... }, $$runValidators: function (parseValid, modelValue, viewValue, doneCallback) { ... }, $commitViewValue: function () { ... }, $$parseAndValidate: function () { ... }, $$writeModelToScope: function () { ... }, $setViewValue: function (value, trigger) { ... }, $$debounceViewValueCommit: function (trigger) { ... }, $options: undefined, $$lastCommittedViewValue: 'firstname'}


{$viewValue: 'lastname', $modelValue: 'lastname', $validators: Object{required: function (value) { ... }, pattern: function (value) { ... }, minlength: function (modelValue, viewValue) { ... }, maxlength: function (modelValue, viewValue) { ... }}, $asyncValidators: Object{}, $parsers: [], $formatters: [function (value) { ... }], $viewChangeListeners: [], $untouched: true, $touched: false, $pristine: false, $dirty: true, $valid: true, $invalid: false, $error: Object{}, $$success: Object{pattern: true, minlength: true, maxlength: true, parse: true, required: true}, $pending: undefined, $name: 'lastName', $$setOptions: function (options) { ... }, $render: function () { ... }, $isEmpty: function (value) { ... }, $setValidity: function setValidity(validationErrorKey, state, options) { ... }, $setPristine: function () { ... }, $setUntouched: function () { ... }, $setTouched: function () { ... }, $rollbackViewValue: function () { ... }, $validate: function () { ... }, $$runValidators: function (parseValid, modelValue, viewValue, doneCallback) { ... }, $commitViewValue: function () { ... }, $$parseAndValidate: function () { ... }, $$writeModelToScope: function () { ... }, $setViewValue: function (value, trigger) { ... }, $$debounceViewValueCommit: function (trigger) { ... }, $options: undefined, $$lastCommittedViewValue: 'lastname'}

Karma指令测试：测试表单上的提交按钮是否已启用

0 个答案: