Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

feat(rating): remove replace usage #5998

Closed
wants to merge 1 commit into from
Closed

feat(rating): remove replace usage #5998

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/rating/docs/demo.html
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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