Skip to content

Commit 0ff7bba

Browse files
NarretzNarretz
committed
test(select): clean up and improve the option directive tests
- add tests to ensure options with interpolated text are added / updated - refactor tests for interpolated option values to use the standard compile helper defined in the spec file. - rephrase some test descriptions for clarity Closes angular#12580
1 parent 82b0929 commit 0ff7bba

1 file changed

Lines changed: 87 additions & 46 deletions

File tree

‎test/ng/directive/selectSpec.js‎

Lines changed: 87 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -964,80 +964,121 @@ describe('select', function() {
964964

965965
describe('option', function() {
966966

967-
it('should populate value attribute on OPTION', function() {
967+
it('should populate a missing value attribute with the option text', function() {
968968
compile('<select ng-model="x"><option selected>abc</option></select>');
969969
expect(element).toEqualSelect([unknownValue(undefined)], 'abc');
970970
});
971971

972-
it('should ignore value if already exists', function() {
972+
973+
it('should ignore the option text if the value attribute exists', function() {
973974
compile('<select ng-model="x"><option value="abc">xyz</option></select>');
974975
expect(element).toEqualSelect([unknownValue(undefined)], 'abc');
975976
});
976977

978+
977979
it('should set value even if self closing HTML', function() {
978980
scope.x = 'hello';
979981
compile('<select ng-model="x"><option>hello</select>');
980982
expect(element).toEqualSelect(['hello']);
981983
});
982984

983985

984-
it('should add options with interpolated value attributes',
985-
inject(function($rootScope, $compile) {
986-
var scope = $rootScope;
986+
it('should add options with interpolated value attributes', function() {
987+
scope.option1 = 'option1';
988+
scope.option2 = 'option2';
987989

988-
scope.option1 = 'option1';
989-
scope.option2 = 'option2';
990+
compile('<select ng-model="selected">' +
991+
'<option value="{{option1}}">Option 1</option>' +
992+
'<option value="{{option2}}">Option 2</option>' +
993+
'</select>');
990994

991-
var element = $compile(
992-
'<select ng-model="selected">' +
993-
'<option value="{{option1}}">Option 1</option>' +
994-
'<option value="{{option2}}">Option 2</option>' +
995-
'</div>')(scope);
995+
scope.$digest();
996+
expect(scope.selected).toBeUndefined();
996997

997-
scope.$digest();
998-
expect(scope.selected).toBeUndefined();
998+
browserTrigger(element.find('option').eq(0));
999+
expect(scope.selected).toBe('option1');
9991000

1000-
browserTrigger(element.find('option').eq(0));
1001-
expect(scope.selected).toBe('option1');
1001+
scope.selected = 'option2';
1002+
scope.$digest();
1003+
expect(element.find('option').eq(1).prop('selected')).toBe(true);
1004+
expect(element.find('option').eq(1).text()).toBe('Option 2');
1005+
});
10021006

1003-
scope.selected = 'option2';
1004-
scope.$digest();
1005-
expect(element.find('option').eq(1).prop('selected')).toBe(true);
1006-
expect(element.find('option').eq(1).text()).toBe('Option 2');
1007-
})
1008-
);
10091007

1008+
it('should update the option when the interpolated value attribute changes', function() {
1009+
scope.option1 = 'option1';
1010+
scope.option2 = '';
10101011

1011-
it('should update the option when the interpolated value attribute changes',
1012-
inject(function($rootScope, $compile) {
1013-
var scope = $rootScope;
1012+
compile('<select ng-model="selected">' +
1013+
'<option value="{{option1}}">Option 1</option>' +
1014+
'<option value="{{option2}}">Option 2</option>' +
1015+
'</select>');
10141016

1015-
scope.option1 = 'option1';
1016-
scope.option2 = '';
1017+
var selectCtrl = element.controller('select');
1018+
spyOn(selectCtrl, 'removeOption').andCallThrough();
10171019

1018-
var element = $compile(
1019-
'<select ng-model="selected">' +
1020-
'<option value="{{option1}}">Option 1</option>' +
1021-
'<option value="{{option2}}">Option 2</option>' +
1022-
'</div>')(scope);
1020+
scope.$digest();
1021+
expect(scope.selected).toBeUndefined();
1022+
expect(selectCtrl.removeOption).not.toHaveBeenCalled();
10231023

1024-
var selectCtrl = element.controller('select');
1025-
spyOn(selectCtrl, 'removeOption').andCallThrough();
1024+
//Change value of option2
1025+
scope.option2 = 'option2Changed';
1026+
scope.selected = 'option2Changed';
1027+
scope.$digest();
10261028

1027-
scope.$digest();
1028-
expect(scope.selected).toBeUndefined();
1029-
expect(selectCtrl.removeOption).not.toHaveBeenCalled();
1029+
expect(selectCtrl.removeOption).toHaveBeenCalledWith('');
1030+
expect(element.find('option').eq(1).prop('selected')).toBe(true);
1031+
expect(element.find('option').eq(1).text()).toBe('Option 2');
1032+
});
10301033

1031-
//Change value of option2
1032-
scope.option2 = 'option2Changed';
1033-
scope.selected = 'option2Changed';
1034-
scope.$digest();
10351034

1036-
expect(selectCtrl.removeOption).toHaveBeenCalledWith('');
1037-
expect(element.find('option').eq(1).prop('selected')).toBe(true);
1038-
expect(element.find('option').eq(1).text()).toBe('Option 2');
1039-
})
1040-
);
1035+
it('should add options with interpolated text', function() {
1036+
scope.option1 = 'Option 1';
1037+
scope.option2 = 'Option 2';
1038+
1039+
compile('<select ng-model="selected">' +
1040+
'<option>{{option1}}</option>' +
1041+
'<option>{{option2}}</option>' +
1042+
'</select>');
1043+
1044+
scope.$digest();
1045+
expect(scope.selected).toBeUndefined();
1046+
1047+
browserTrigger(element.find('option').eq(0));
1048+
expect(scope.selected).toBe('Option 1');
1049+
1050+
scope.selected = 'Option 2';
1051+
scope.$digest();
1052+
expect(element.find('option').eq(1).prop('selected')).toBe(true);
1053+
expect(element.find('option').eq(1).text()).toBe('Option 2');
1054+
});
1055+
1056+
1057+
it('should update options when their interpolated text changes', function() {
1058+
scope.option1 = 'Option 1';
1059+
scope.option2 = '';
1060+
1061+
compile('<select ng-model="selected">' +
1062+
'<option>{{option1}}</option>' +
1063+
'<option>{{option2}}</option>' +
1064+
'</select>');
1065+
1066+
var selectCtrl = element.controller('select');
1067+
spyOn(selectCtrl, 'removeOption').andCallThrough();
1068+
1069+
scope.$digest();
1070+
expect(scope.selected).toBeUndefined();
1071+
expect(selectCtrl.removeOption).not.toHaveBeenCalled();
1072+
1073+
//Change value of option2
1074+
scope.option2 = 'Option 2 Changed';
1075+
scope.selected = 'Option 2 Changed';
1076+
scope.$digest();
1077+
1078+
expect(selectCtrl.removeOption).toHaveBeenCalledWith('');
1079+
expect(element.find('option').eq(1).prop('selected')).toBe(true);
1080+
expect(element.find('option').eq(1).text()).toBe('Option 2 Changed');
1081+
});
10411082

10421083

10431084
it('should not blow up when option directive is found inside of a datalist',

0 commit comments

Comments
 (0)