Skip to content
This repository was archived by the owner on Mar 4, 2025. It is now read-only.

Commit 9adc9d6

Browse files
author
vikasrohit
committed
Merge pull request #660 from appirio-tech/feature/sup-2975-missing-placeholder-new-pwd-edit-profile
Feature/sup 2975 missing placeholder new pwd edit profile
2 parents bc29f02 + 647d0c1 commit 9adc9d6

File tree

5 files changed

+146
-8
lines changed

5 files changed

+146
-8
lines changed

‎app/directives/account/toggle-password-with-tips/toggle-password-with-tips.directive.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
link: function(scope, element, attrs, formController) {
1212
var vm = scope.vm;
1313
vm.passwordField = formController.password;
14-
vm.defaultPlaceholder = attrs.placeholder || 'Pick a new password';
14+
vm.defaultPlaceholder = attrs.placeholder || 'Create new password';
1515
vm.placeholder = vm.defaultPlaceholder;
1616
vm.password = '';
1717

@@ -41,6 +41,7 @@
4141
if (relatedTarget.attr('type') === 'checkbox' && relatedTarget.attr('id') === 'passwordCheckbox') {
4242
vm.passwordFocus = true;
4343
vm.placeholder = '';
44+
passwordInput.focus();
4445
} else {
4546
// If you are blurring from the password input and clicking anywhere but the checkbox
4647
vm.passwordFocus = false;

‎app/directives/account/toggle-password-with-tips/toggle-password-with-tips.jade

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
input#password-input(
22
ng-model="vm.password",
33
ng-model-options="{allowInvalid: true}",
4-
5-
focus-on="focusOnInput",
4+
65
ng-focus="vm.onFocus($event)",
76
ng-blur="vm.onBlur($event)",
87

@@ -17,4 +16,4 @@ input#password-input(
1716
has-symbol-or-number,
1817
required)
1918

20-
label(ng-show="vm.passwordFocus || vm.passwordField.$dirty") #[input(type="checkbox", id="passwordCheckbox", ng-model="focusOnInput", ng-change="vm.toggleInputType()")] Show
19+
label #[input(type="checkbox", id="passwordCheckbox", ng-model="focusOnInput", ng-change="vm.toggleInputType()")] Show

‎app/directives/account/toggle-password-with-tips/toggle-password-with-tips.spec.js

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,145 @@ describe('Toggle Password With Tips Directive', function() {
99
bard.appModule('topcoder');
1010
bard.inject(this, '$compile', '$rootScope');
1111
scope = $rootScope.$new();
12+
scope.vm = {};
1213
});
1314

1415
bard.verifyNoOutstandingHttpRequests();
16+
17+
describe('Toggle Password Directive', function() {
18+
var togglePassword, controller, formController, passwordFormFieldSpy;
19+
20+
beforeEach(function() {
21+
var form = angular.element('<form><toggle-password-with-tips /></form>)');
22+
element = form.find('toggle-password-with-tips');
23+
var formElement = $compile(form)(scope);
24+
scope.$digest();
25+
26+
// controller = element.controller('togglePassword');
27+
formController = form.controller('form');
28+
passwordFormFieldSpy = sinon.spy(formController.password, '$setPristine');
29+
});
30+
31+
afterEach(function() {
32+
// do nohting
33+
});
34+
35+
it('should have password default placeholder', function() {
36+
expect(scope.vm.defaultPlaceholder).to.exist.to.equal('Create new password');
37+
expect(scope.vm.placeholder).to.exist.to.equal('Create new password');
38+
});
39+
40+
it('should not have focus class', function() {
41+
expect(element.hasClass('focus')).to.be.false;
42+
});
43+
44+
it('should trigger click handler ', function() {
45+
var mockFocus = sinon.spy(element.find('input')[0], 'focus');
46+
element.trigger('click');
47+
expect(mockFocus).to.be.calledOnce;
48+
});
49+
50+
it('should trigger focus handler ', function() {
51+
var pwsIntputElement = angular.element(element.find('input')[0]);
52+
pwsIntputElement.triggerHandler('focus');
53+
expect(element.hasClass('focus')).to.be.true;
54+
});
55+
56+
it('should trigger blur handler with form field pristine ', function() {
57+
var pwsIntputElement = angular.element(element.find('input')[0]);
58+
// focus it first
59+
pwsIntputElement.triggerHandler('focus');
60+
// verifies if focus class is added
61+
expect(element.hasClass('focus')).to.be.true;
62+
// now blurs from it
63+
pwsIntputElement.triggerHandler('blur');
64+
// focus class should not be there
65+
expect(element.hasClass('focus')).to.be.false;
66+
// password field's setPristine method should be called once because currentPassword is empty
67+
expect(passwordFormFieldSpy).to.be.calledOnce;
68+
});
69+
70+
it('should trigger blur handler without form field pristine ', function() {
71+
scope.vm.password = 'some-password';
72+
scope.$digest();
73+
var pwsIntputElement = angular.element(element.find('input')[0]);
74+
// focus it first
75+
pwsIntputElement.triggerHandler('focus');
76+
// verifies if focus class is added
77+
expect(element.hasClass('focus')).to.be.true;
78+
// now blurs from it
79+
pwsIntputElement.triggerHandler('blur');
80+
// focus class should not be there
81+
expect(element.hasClass('focus')).to.be.false;
82+
// password field's setPristine method should not be called because currentPassword is non-empty
83+
expect(passwordFormFieldSpy).not.to.be.called;
84+
});
85+
86+
it('should keep focus on password field on blurring to checkbox ', function() {
87+
88+
var pwsIntputElement = angular.element(element.find('input')[0]);
89+
// focus it first
90+
pwsIntputElement.triggerHandler('focus');
91+
// verifies if focus class is added
92+
expect(element.hasClass('focus')).to.be.true;
93+
// now blurs from it
94+
95+
var e = jQuery.Event("blur");
96+
e.relatedTarget = {
97+
getAttribute: function(name) {
98+
if (name === 'type') return 'checkbox';
99+
if (name === 'id') return 'passwordCheckbox';
100+
}
101+
};
102+
//mock focus event
103+
var mockFocus = sinon.spy(element.find('input')[0], 'focus');
104+
// trigger event
105+
pwsIntputElement.trigger(e);
106+
107+
// focus should be called once
108+
expect(mockFocus).to.be.calledOnce;
109+
// password field placeholde should be empty
110+
expect(scope.vm.placeholder).to.exist.to.equal('');
111+
});
112+
113+
it('should change type of input field to be text ', function() {
114+
var pwsIntputElement = angular.element(element.find('input')[0]);
115+
var checkbox = angular.element(element.find('input')[1]);
116+
// before clicking on checkbox, it should have password type
117+
expect(pwsIntputElement.attr('type')).to.equal('password');
118+
checkbox.trigger('click');
119+
// after clicking on checkbox, it should have text type
120+
expect(pwsIntputElement.attr('type')).to.equal('text');
121+
});
122+
123+
it('should change type of input field to be password ', function() {
124+
var pwsIntputElement = angular.element(element.find('input')[0]);
125+
var checkbox = angular.element(element.find('input')[1]);
126+
// before clicking on checkbox, it should have password type
127+
expect(pwsIntputElement.attr('type')).to.equal('password');
128+
checkbox.trigger('click');
129+
// after clicking on checkbox, it should have text type
130+
expect(pwsIntputElement.attr('type')).to.equal('text');
131+
// click again to uncheck the checkbox
132+
checkbox.trigger('click');
133+
// after unchecking the checkbox, it should have password type
134+
expect(pwsIntputElement.attr('type')).to.equal('password');
135+
});
136+
137+
it('should trigger keyup handler with enter/return key ', function() {
138+
var mockBlur = sinon.spy(element.find('input')[0], 'blur');
139+
var e = jQuery.Event("keyup");
140+
e.keyCode = 13;
141+
element.trigger(e);
142+
expect(mockBlur).to.be.calledOnce;
143+
});
144+
145+
it('should NOT trigger keyup handler with non enter/return key ', function() {
146+
var mockBlur = sinon.spy(element.find('input')[0], 'blur');
147+
var e = jQuery.Event("keyup");
148+
e.keyCode = 14;
149+
element.trigger(e);
150+
expect(mockBlur).not.to.be.called;
151+
});
152+
});
15153
});

‎app/directives/account/toggle-password/toggle-password.spec.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/* jshint -W117, -W030 */
2-
xdescribe('Toggle Password Directive', function() {
2+
describe('Toggle Password Directive', function() {
33
var scope;
44
var element;
55

‎app/settings/account-info/account-info.jade

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,14 +26,14 @@
2626
.form-label New Password
2727

2828
.validation-bar
29-
toggle-password-with-tips.topcoder-input.password(placeholder="Pick a new password")
29+
toggle-password-with-tips.topcoder-input.password(placeholder="Create new password")
3030

3131
.tips.password-tips(ng-show="vm.passwordFocus")
3232
.arrow
3333

34-
h3 Password Tips:
34+
//- h3 Password Tips:
3535
36-
p Your password must have:
36+
H3 Your password must have:
3737

3838
p(ng-class="{ 'has-length-between-range': (vm.newPasswordForm.password.$dirty && !vm.newPasswordForm.password.$error.minlength && !vm.newPasswordForm.password.$error.maxlength && !vm.newPasswordForm.password.$error.required) }") At least 8 characters
3939

0 commit comments

Comments
 (0)