当前位置: 动力学知识库 > 问答 > 编程问答 >

angularjs - Karma directive testing: test that submit button on a form is enabled

问题描述:

I'm fairly new to the company I now work for. I'm now working in a full stack role, whereas most of my experience is in backend work, so some of this front-end stuff is new to me. It feels like this ought to be an easy thing to do. Although it also has one of our senior devs stumped.

This is for a directive test written in karma/jasmine against our angular app. There's a form with a submit button, and all of the form elements are required. I have a test that wants to validly fill in every element on the form, and then assert that the submit button is enabled (not disabled).

Heres the test:

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("[email protected]").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");

});

Is this something to do with us not using the $digest properly? This is the second time I've come across this problem. Elsewhere in the app, there was another form I wanted to write the exact same test for and couldn't get that working either.

All other tests in this file pass (where we mainly test we get the correct error messages for invalid data entered into the form), so I don't think this will be a problem in the setup.

Thanks for any help.

Edit: This is the html for the form:

<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>

There is stuff I've omitted from the above, just to make it easier to read. I.e. Most of the above stuff is in its own div. Some attributes there are ng-show, ng-hide, ng-if, ng-model, ng-class. I'm guessing these arent relevant and will make no difference but can add them if needed.

All of the elements are visible when testing manually. And all elements are enabled except for the submit button. Which becomes enabled when all the form elements are filled in.

Edit 2:

Not sure if this will provide any useful info. When I add these three lines of code after completing the form:

console.log(isolatedScope.wupForm.title);

console.log(isolatedScope.wupForm.firstName);

console.log(isolatedScope.wupForm.lastName);

Then this is what it produces below. Not sure why the first one gives undefined, guess this could be the problem? I notice in the second and third, the $$lastCommittedViewValue is what I enter into those fields.

{$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'}

分享给朋友:
您可能感兴趣的文章:
随机阅读: