Skip to content

Commit

Permalink
feat(rating): remove replace usage
Browse files Browse the repository at this point in the history 
- Remove `replace: true` usage

BREAKING CHANGE: Due to the removal of `replace: true`, this results in a slight change to the HTML structure - see the documentation examples to see it in action.

Closes angular-ui#5998
  • Loading branch information
@wesleycho
wesleycho committed Jun 14, 2016
1 parent 7518821 commit d6fe9c7
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 38 deletions.
6 changes: 3 additions & 3 deletions src/rating/docs/demo.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<div ng-controller="RatingDemoCtrl">
<h4>Default</h4>
<uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></uib-rating>
<span uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></span>
<span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>

<pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>
Expand All @@ -10,6 +10,6 @@ <h4>Default</h4>
<hr />

<h4>Custom icons</h4>
<div ng-init="x = 5"><uib-rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1"></uib-rating> <b>(<i>Rate:</i> {{x}})</b></div>
<div ng-init="y = 2"><uib-rating ng-model="y" rating-states="ratingStates" aria-labelledby="custom-icons-2"></uib-rating> <b>(<i>Rate:</i> {{y}})</b></div>
<div ng-init="x = 5"><span uib-rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1"></span> <b>(<i>Rate:</i> {{x}})</b></div>
<div ng-init="y = 2"><span uib-rating ng-model="y" rating-states="ratingStates" aria-labelledby="custom-icons-2"></span> <b>(<i>Rate:</i> {{y}})</b></div>
</div>
4 changes: 2 additions & 2 deletions src/rating/rating.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ angular.module('ui.bootstrap.rating', [])
stateOn: null,
stateOff: null,
enableReset: true,
titles : ['one', 'two', 'three', 'four', 'five']
titles: ['one', 'two', 'three', 'four', 'five']
})

.controller('UibRatingController', ['$scope', '$attrs', 'uibRatingConfig', function($scope, $attrs, ratingConfig) {
Expand Down Expand Up @@ -90,14 +90,14 @@ angular.module('ui.bootstrap.rating', [])
.directive('uibRating', function() {
return {
require: ['uibRating', 'ngModel'],
restrict: 'A',
scope: {
readonly: '=?readOnly',
onHover: '&',
onLeave: '&'
},
controller: 'UibRatingController',
templateUrl: 'uib/template/rating/rating.html',
replace: true,
link: function(scope, element, attrs, ctrls) {
var ratingCtrl = ctrls[0], ngModelCtrl = ctrls[1];
ratingCtrl.init(ngModelCtrl);
Expand Down
79 changes: 46 additions & 33 deletions src/rating/test/rating.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
describe('rating directive', function() {
var $rootScope, $compile, element;
var $rootScope, $compile, element, innerElem;
beforeEach(module('ui.bootstrap.rating'));
beforeEach(module('uib/template/rating/rating.html'));
beforeEach(inject(function(_$compile_, _$rootScope_) {
$compile = _$compile_;
$rootScope = _$rootScope_;
$rootScope.rate = 3;
element = $compile('<uib-rating ng-model="rate"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate"></span>')($rootScope);
$rootScope.$digest();
innerElem = element.children().eq(0);
}));

function getStars() {
return element.find('i');
return innerElem.find('i');
}

function getStar(number) {
Expand All @@ -38,37 +39,37 @@ describe('rating directive', function() {
function triggerKeyDown(keyCode) {
var e = $.Event('keydown');
e.which = keyCode;
element.trigger(e);
innerElem.trigger(e);
}

it('contains the default number of icons', function() {
expect(getStars().length).toBe(5);
expect(element.attr('aria-valuemax')).toBe('5');
expect(innerElem.attr('aria-valuemax')).toBe('5');
});

it('initializes the default star icons as selected', function() {
expect(getState()).toEqual([true, true, true, false, false]);
expect(element.attr('aria-valuenow')).toBe('3');
expect(innerElem.attr('aria-valuenow')).toBe('3');
});

it('handles correctly the click event', function() {
getStar(2).click();
$rootScope.$digest();
expect(getState()).toEqual([true, true, false, false, false]);
expect($rootScope.rate).toBe(2);
expect(element.attr('aria-valuenow')).toBe('2');
expect(innerElem.attr('aria-valuenow')).toBe('2');

getStar(5).click();
$rootScope.$digest();
expect(getState()).toEqual([true, true, true, true, true]);
expect($rootScope.rate).toBe(5);
expect(element.attr('aria-valuenow')).toBe('5');
expect(innerElem.attr('aria-valuenow')).toBe('5');

getStar(5).click();
$rootScope.$digest();
expect(getState()).toEqual([false, false, false, false, false]);
expect($rootScope.rate).toBe(0);
expect(element.attr('aria-valuenow')).toBe('0');
expect(innerElem.attr('aria-valuenow')).toBe('0');
});

it('handles correctly the hover event', function() {
Expand All @@ -82,7 +83,7 @@ describe('rating directive', function() {
expect(getState()).toEqual([true, true, true, true, true]);
expect($rootScope.rate).toBe(3);

element.trigger('mouseout');
innerElem.trigger('mouseout');
expect(getState()).toEqual([true, true, true, false, false]);
expect($rootScope.rate).toBe(3);
});
Expand All @@ -92,44 +93,47 @@ describe('rating directive', function() {
$rootScope.$digest();

expect(getState()).toEqual([true, true, false, false, false]);
expect(element.attr('aria-valuenow')).toBe('2');
expect(innerElem.attr('aria-valuenow')).toBe('2');

$rootScope.rate = 2.5;
$rootScope.$digest();

expect(getState()).toEqual([true, true, true, false, false]);
expect(element.attr('aria-valuenow')).toBe('3');
expect(innerElem.attr('aria-valuenow')).toBe('3');
});

it('changes the number of selected icons when value changes', function() {
$rootScope.rate = 2;
$rootScope.$digest();

expect(getState()).toEqual([true, true, false, false, false]);
expect(element.attr('aria-valuenow')).toBe('2');
expect(element.attr('aria-valuetext')).toBe('two');
expect(innerElem.attr('aria-valuenow')).toBe('2');
expect(innerElem.attr('aria-valuetext')).toBe('two');
});

it('shows different number of icons when `max` attribute is set', function() {
element = $compile('<uib-rating ng-model="rate" max="7"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate" max="7"></span>')($rootScope);
$rootScope.$digest();
innerElem = element.children().eq(0);

expect(getStars().length).toBe(7);
expect(element.attr('aria-valuemax')).toBe('7');
expect(innerElem.attr('aria-valuemax')).toBe('7');
});

it('shows different number of icons when `max` attribute is from scope variable', function() {
$rootScope.max = 15;
element = $compile('<uib-rating ng-model="rate" max="max"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate" max="max"></span>')($rootScope);
$rootScope.$digest();
innerElem = element.children().eq(0);
expect(getStars().length).toBe(15);
expect(element.attr('aria-valuemax')).toBe('15');
expect(innerElem.attr('aria-valuemax')).toBe('15');
});

it('handles read-only attribute', function() {
$rootScope.isReadonly = true;
element = $compile('<uib-rating ng-model="rate" read-only="isReadonly"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate" read-only="isReadonly"></span>')($rootScope);
$rootScope.$digest();
innerElem = element.children().eq(0);

expect(getState()).toEqual([true, true, true, false, false]);

Expand All @@ -148,8 +152,9 @@ describe('rating directive', function() {

it('handles enable-reset attribute', function() {
$rootScope.canReset = false;
element = $compile('<uib-rating ng-model="rate" enable-reset="canReset"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate" enable-reset="canReset"></span>')($rootScope);
$rootScope.$digest();
innerElem = element.children().eq(0);

var star = {
states: [true, true, true, true, true],
Expand All @@ -162,19 +167,20 @@ describe('rating directive', function() {
$rootScope.$digest();
expect(getState()).toEqual(star.states);
expect($rootScope.rate).toBe(5);
expect(element.attr('aria-valuenow')).toBe('5');
expect(innerElem.attr('aria-valuenow')).toBe('5');

selectStar.click();
$rootScope.$digest();
expect(getState()).toEqual(star.states);
expect($rootScope.rate).toBe(5);
expect(element.attr('aria-valuenow')).toBe('5');
expect(innerElem.attr('aria-valuenow')).toBe('5');
});

it('should fire onHover', function() {
$rootScope.hoveringOver = jasmine.createSpy('hoveringOver');
element = $compile('<uib-rating ng-model="rate" on-hover="hoveringOver(value)"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate" on-hover="hoveringOver(value)"></span>')($rootScope);
$rootScope.$digest();
innerElem = element.children().eq(0);

getStar(3).trigger('mouseover');
$rootScope.$digest();
Expand All @@ -183,10 +189,11 @@ describe('rating directive', function() {

it('should fire onLeave', function() {
$rootScope.leaving = jasmine.createSpy('leaving');
element = $compile('<uib-rating ng-model="rate" on-leave="leaving()"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate" on-leave="leaving()"></span>')($rootScope);
$rootScope.$digest();
innerElem = element.children().eq(0);

element.trigger('mouseleave');
innerElem.trigger('mouseleave');
$rootScope.$digest();
expect($rootScope.leaving).toHaveBeenCalled();
});
Expand Down Expand Up @@ -243,8 +250,9 @@ describe('rating directive', function() {
beforeEach(inject(function() {
$rootScope.classOn = 'icon-ok-sign';
$rootScope.classOff = 'icon-ok-circle';
element = $compile('<uib-rating ng-model="rate" state-on="classOn" state-off="classOff"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate" state-on="classOn" state-off="classOff"></span>')($rootScope);
$rootScope.$digest();
innerElem = element.children().eq(0);
}));

it('changes the default icons', function() {
Expand All @@ -260,13 +268,14 @@ describe('rating directive', function() {
{stateOn: 'heart'},
{stateOff: 'off'}
];
element = $compile('<uib-rating ng-model="rate" rating-states="states"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate" rating-states="states"></span>')($rootScope);
$rootScope.$digest();
innerElem = element.children().eq(0);
}));

it('should define number of icon elements', function() {
expect(getStars().length).toBe(4);
expect(element.attr('aria-valuemax')).toBe('4');
expect(innerElem.attr('aria-valuemax')).toBe('4');
});

it('handles each icon', function() {
Expand All @@ -291,8 +300,9 @@ describe('rating directive', function() {
uibRatingConfig.max = 10;
uibRatingConfig.stateOn = 'on';
uibRatingConfig.stateOff = 'off';
element = $compile('<uib-rating ng-model="rate"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate"></span>')($rootScope);
$rootScope.$digest();
innerElem = element.children().eq(0);
}));
afterEach(inject(function(uibRatingConfig) {
// return it to the original state
Expand Down Expand Up @@ -320,8 +330,9 @@ describe('rating directive', function() {
$rootScope.rate = 5;
angular.extend(originalConfig, uibRatingConfig);
uibRatingConfig.max = 10;
element = $compile('<uib-rating ng-model="rate"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate"></span>')($rootScope);
$rootScope.$digest();
innerElem = element.children().eq(0);
}));
afterEach(inject(function(uibRatingConfig) {
// return it to the original state
Expand All @@ -336,18 +347,20 @@ describe('rating directive', function() {
describe('shows custom titles ', function() {
it('should return the custom title for each star', function() {
$rootScope.titles = [44,45,46];
element = $compile('<uib-rating ng-model="rate" titles="titles"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate" titles="titles"></span>')($rootScope);
$rootScope.$digest();
innerElem = element.children().eq(0);
expect(getTitles()).toEqual(['44', '45', '46', '4', '5']);
});
it('should return the default title if the custom title is empty', function() {
$rootScope.titles = [];
element = $compile('<uib-rating ng-model="rate" titles="titles"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate" titles="titles"></span>')($rootScope);
$rootScope.$digest();
innerElem = element.children().eq(0);
expect(getTitles()).toEqual(['one', 'two', 'three', 'four', 'five']);
});
it('should return the default title if the custom title is not an array', function() {
element = $compile('<uib-rating ng-model="rate" titles="test"></uib-rating>')($rootScope);
element = $compile('<span uib-rating ng-model="rate" titles="test"></span>')($rootScope);
$rootScope.$digest();
expect(getTitles()).toEqual(['one', 'two', 'three', 'four', 'five']);
});
Expand Down

0 comments on commit d6fe9c7

Please sign in to comment.