Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 73a4082

Browse files
crisbetoThomasBurleson
authored andcommitted
fix(datepicker): add asterisk when required, more unit tests
* Fixes the datepicker not getting the asterisk, when it's required and inside of a md-input-container. * Adds missing unit tests for the md-input-container integration. Fixes #8950. Closes #9043
1 parent 0851736 commit 73a4082

File tree

2 files changed

+71
-12
lines changed

2 files changed

+71
-12
lines changed

src/components/datepicker/js/datepickerDirective.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
* </hljs>
5555
*
5656
*/
57+
5758
function datePickerDirective($$mdSvgRegistry, $mdUtil, $mdAria) {
5859
return {
5960
template: function(tElement, tAttrs) {
@@ -121,6 +122,7 @@
121122
var mdDatePickerCtrl = controllers[1];
122123
var mdInputContainer = controllers[2];
123124
var parentForm = controllers[3];
125+
var mdNoAsterisk = $mdUtil.parseAttributeBoolean(attr.mdNoAsterisk);
124126

125127
mdDatePickerCtrl.configureNgModel(ngModelCtrl, mdInputContainer);
126128

@@ -146,6 +148,10 @@
146148

147149
if (!mdInputContainer.label) {
148150
$mdAria.expect(element, 'aria-label', attr.mdPlaceholder);
151+
} else if(!mdNoAsterisk) {
152+
attr.$observe('required', function(value) {
153+
mdInputContainer.label.toggleClass('md-required', !!value);
154+
});
149155
}
150156

151157
scope.$watch(mdInputContainer.isErrorGetter || function() {

src/components/datepicker/js/datepickerDirective.spec.js

Lines changed: 65 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ describe('md-datepicker', function() {
2121
'ng-disabled="isDisabled">' +
2222
'</md-datepicker>';
2323

24-
beforeEach(module('material.components.datepicker', 'ngAnimateMock'));
24+
beforeEach(module('material.components.datepicker', 'material.components.input', 'ngAnimateMock'));
2525

2626
beforeEach(inject(function($rootScope, $injector) {
2727
$compile = $injector.get('$compile');
@@ -115,17 +115,6 @@ describe('md-datepicker', function() {
115115
}).not.toThrow();
116116
});
117117

118-
it('should work inside of md-input-container', function() {
119-
var template =
120-
'<md-input-container>' +
121-
'<md-datepicker ng-model="myDate"></md-datepicker>' +
122-
'</md-input-container>';
123-
124-
expect(function() {
125-
$compile(template)(pageScope);
126-
}).not.toThrow();
127-
});
128-
129118
describe('ngMessages support', function() {
130119
it('should set the `required` $error flag', function() {
131120
pageScope.isRequired = true;
@@ -623,4 +612,68 @@ describe('md-datepicker', function() {
623612
expect(element.querySelector(triangleSelector)).toBeNull();
624613
});
625614
});
615+
616+
describe('md-input-container integration', function() {
617+
var element;
618+
619+
it('should register the element with the mdInputContainer controller', function() {
620+
compileElement();
621+
622+
var inputContainer = element.controller('mdInputContainer');
623+
624+
expect(inputContainer.input[0]).toBe(element[0].querySelector('md-datepicker'));
625+
expect(inputContainer.element).toHaveClass('_md-datepicker-floating-label');
626+
});
627+
628+
it('should notify the input container that the element has a placeholder', function() {
629+
compileElement('md-placeholder="Enter a date"');
630+
expect(element).toHaveClass('md-input-has-placeholder');
631+
});
632+
633+
it('should add the asterisk if the element is required', function() {
634+
compileElement('ng-required="isRequired"');
635+
var label = element.find('label');
636+
637+
expect(label).not.toHaveClass('md-required');
638+
pageScope.$apply('isRequired = true');
639+
expect(label).toHaveClass('md-required');
640+
});
641+
642+
it('should not add the asterisk if the element has md-no-asterisk', function() {
643+
compileElement('required md-no-asterisk');
644+
expect(element.find('label')).not.toHaveClass('md-required');
645+
});
646+
647+
it('should pass the error state to the input container', inject(function($material) {
648+
compileElement('required');
649+
650+
var ngModelCtrl = element.find('md-datepicker').controller('ngModel');
651+
var invalidClass = 'md-input-invalid';
652+
653+
expect(ngModelCtrl.$valid).toBe(true);
654+
expect(element).not.toHaveClass(invalidClass);
655+
656+
ngModelCtrl.$setViewValue(null);
657+
ngModelCtrl.$setTouched(true);
658+
$material.flushOutstandingAnimations();
659+
660+
expect(ngModelCtrl.$valid).toBe(false);
661+
expect(element).toHaveClass(invalidClass);
662+
}));
663+
664+
afterEach(function() {
665+
element.remove();
666+
});
667+
668+
function compileElement(attrs) {
669+
var template =
670+
'<md-input-container>' +
671+
'<label>Enter a date</label>' +
672+
'<md-datepicker ng-model="myDate" ' + attrs + '></md-datepicker>' +
673+
'</md-input-container>';
674+
675+
element = $compile(template)(pageScope);
676+
pageScope.$digest();
677+
}
678+
});
626679
});

0 commit comments

Comments
 (0)