diff --git a/demo/src/app/components/+rating/demos/custom/custom.html b/demo/src/app/components/+rating/demos/custom/custom.html index 35fc184541..c071783ef1 100644 --- a/demo/src/app/components/+rating/demos/custom/custom.html +++ b/demo/src/app/components/+rating/demos/custom/custom.html @@ -1,9 +1,15 @@
- + (Rate: {{x}}) + {{index < value ? '☑' : '☐'}}
+
- + (Rate: {{y}}) + + +
diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts index 096fb8d8ec..eff196927b 100644 --- a/demo/src/ng-api-doc.ts +++ b/demo/src/ng-api-doc.ts @@ -3,7 +3,7 @@ export const ngdoc: any = { "AccordionPanelComponent": { "fileName": "src/accordion/accordion-group.component.ts", "className": "AccordionPanelComponent", - "description": "", + "description": "

Accordion heading

\n

Instead of using heading attribute on the accordion-group, you can use\nan accordion-heading attribute on any element inside of a group that\nwill be used as group's header template.

\n", "selector": "accordion-group, accordion-panel", "inputs": [ { @@ -24,7 +24,7 @@ export const ngdoc: any = { { "name": "panelClass", "type": "string", - "description": "

Provides an ability to use Bootstrap's contextual panel classes (panel-primary, panel-success, panel-info, etc...). List of all available classes available here

\n" + "description": "

Provides an ability to use Bootstrap's contextual panel classes\n(panel-primary, panel-success, panel-info, etc...).\nList of all available classes [available here]\n(http://getbootstrap.com/components/#panels-alternatives)

\n" } ], "outputs": [], @@ -65,7 +65,7 @@ export const ngdoc: any = { "fileName": "src/alert/alert.component.ts", "className": "AlertComponent", "description": "", - "selector": "alert,ngx-alert", + "selector": "alert,bs-alert", "inputs": [ { "name": "dismissible", @@ -82,13 +82,13 @@ export const ngdoc: any = { "name": "type", "defaultValue": "warning", "type": "string", - "description": "

Alert type. Provides one of four bootstrap supported contextual classes: success, info, warning and danger

\n" + "description": "

Alert type.\nProvides one of four bootstrap supported contextual classes:\nsuccess, info, warning and danger

\n" } ], "outputs": [ { "name": "onClose", - "description": "

This event fires immediately after close instance method is called, $event is an instance of Alert component.

\n" + "description": "

This event fires immediately after close instance method is called,\n$event is an instance of Alert component.

\n" }, { "name": "onClosed", @@ -215,7 +215,7 @@ export const ngdoc: any = { { "name": "interval", "type": "number", - "description": "

Delay of item cycling in milliseconds. If false, carousel won't cycle automatically.

\n" + "description": "

Delay of item cycling in milliseconds. If false, carousel won't cycle\nautomatically.

\n" }, { "name": "noPause", @@ -244,7 +244,7 @@ export const ngdoc: any = { "methods": [ { "name": "addSlide", - "description": "

Adds new slide. If this slide is first in collection - set it as active and starts auto changing

\n", + "description": "

Adds new slide. If this slide is first in collection - set it as active\nand starts auto changing

\n", "args": [ { "name": "slide", @@ -255,7 +255,7 @@ export const ngdoc: any = { }, { "name": "removeSlide", - "description": "

Removes specified slide. If this slide is active - will roll to another slide

\n", + "description": "

Removes specified slide. If this slide is active - will roll to another\nslide

\n", "args": [ { "name": "slide", @@ -587,7 +587,7 @@ export const ngdoc: any = { }, { "name": "toggle", - "description": "

Toggles an element’s datepicker. This is considered a “manual” triggering of\nthe datepicker.

\n", + "description": "

Toggles an element’s datepicker. This is considered a “manual” triggering\nof the datepicker.

\n", "args": [], "returnType": "void" } @@ -660,7 +660,7 @@ export const ngdoc: any = { "name": "container", "defaultValue": "body", "type": "string", - "description": "

A selector specifying the element the daterangepicker should be appended to.\nCurrently only supports "body".

\n" + "description": "

A selector specifying the element the daterangepicker should be appended\nto. Currently only supports "body".

\n" }, { "name": "isDisabled", @@ -731,7 +731,7 @@ export const ngdoc: any = { }, { "name": "toggle", - "description": "

Toggles an element’s datepicker. This is considered a “manual” triggering of\nthe datepicker.

\n", + "description": "

Toggles an element’s datepicker. This is considered a “manual” triggering\nof the datepicker.

\n", "args": [], "returnType": "void" } @@ -1462,289 +1462,6 @@ export const ngdoc: any = { "properties": [], "methods": [] }, - "BsDatePickerViewComponent": { - "fileName": "src/datepicker2/bs-date-picker-view.component.ts", - "className": "BsDatePickerViewComponent", - "description": "", - "selector": "bs-date-picker-view", - "exportAs": "bs-date-picker-view", - "inputs": [ - { - "name": "bsRole", - "type": "string", - "description": "" - } - ], - "outputs": [], - "properties": [], - "methods": [] - }, - "BsDatePickerComponent": { - "fileName": "src/datepicker2/bs-date-picker.component.ts", - "className": "BsDatePickerComponent", - "description": "", - "selector": "bs-datepicker", - "exportAs": "bs-datepicker", - "inputs": [], - "outputs": [], - "properties": [], - "methods": [] - }, - "BsCalendarOptions": { - "fileName": "src/datepicker2/common/bs-calendar-options.provider.ts", - "className": "BsCalendarOptions", - "description": "", - "methods": [], - "properties": [] - }, - "BsCalendarOptionsClass": { - "fileName": "src/datepicker2/common/bs-calendar-options.provider.ts", - "className": "BsCalendarOptionsClass", - "description": "", - "methods": [], - "properties": [] - }, - "DatePickerCustomDates": { - "fileName": "src/datepicker2/common/bs-date-picker-options.provider.ts", - "className": "DatePickerCustomDates", - "description": "", - "methods": [], - "properties": [ - { - "name": "css", - "type": "string | Object | string[]", - "description": "

css classes which will be applied to date,\nread more about available options in NgClass description

\n" - }, - { - "name": "date", - "type": "any", - "description": "

Any parse-able date format (new Date(), moment(), string, number)

\n" - }, - { - "name": "isDisabled", - "type": "boolean", - "description": "

should this date be disabled

\n" - } - ] - }, - "DatePickerDateOptions": { - "fileName": "src/datepicker2/common/bs-date-picker-options.provider.ts", - "className": "DatePickerDateOptions", - "description": "", - "methods": [], - "properties": [ - { - "name": "initial", - "type": "any", - "description": "

initially viewed, not selected, date if value is not set

\n" - }, - { - "name": "max", - "type": "any", - "description": "

maximum available date

\n" - }, - { - "name": "min", - "type": "any", - "description": "

minimum available date

\n" - }, - { - "name": "selected", - "type": "any", - "description": "

initially selected date, if value is not set, in date picker mode

\n" - }, - { - "name": "selectedEnd", - "type": "any", - "description": "

initially selected end date in date range picker mode

\n" - } - ] - }, - "BsDatePickerOptions": { - "fileName": "src/datepicker2/common/bs-date-picker-options.provider.ts", - "className": "BsDatePickerOptions", - "description": "", - "methods": [], - "properties": [ - { - "name": "mode", - "defaultValue": "date", - "type": "\"date\" | \"daterange\"", - "description": "

current date picker mode

\n" - }, - { - "name": "ranges", - "type": "{ [key: string]: Date[] | string[] | Moment[]; }", - "description": "

predefined set of ranges {'today': [moment(), moment()]}

\n" - }, - { - "name": "viewMode", - "defaultValue": "days", - "type": "BsDatePickerViewMode", - "description": "

current date picker view mode (if supported)

\n" - } - ] - }, - "BsDatePickerState": { - "fileName": "src/datepicker2/common/bs-date-picker-state.provider.ts", - "className": "BsDatePickerState", - "description": "", - "methods": [], - "properties": [] - }, - "BsCurrentDateComponent": { - "fileName": "src/datepicker2/current-date/bs-current-date.component.ts", - "className": "BsCurrentDateComponent", - "description": "", - "selector": "bs-current-date", - "exportAs": "bs-current-date", - "inputs": [], - "outputs": [], - "properties": [], - "methods": [] - }, - "BsCustomRangePickerComponent": { - "fileName": "src/datepicker2/custom-range/bs-custom-range-picker.component.ts", - "className": "BsCustomRangePickerComponent", - "description": "", - "selector": "bs-custom-range-picker", - "exportAs": "bs-custom-range-picker", - "inputs": [], - "outputs": [], - "properties": [], - "methods": [] - }, - "BsDayPickerComponent": { - "fileName": "src/datepicker2/day/bs-day-picker.component.ts", - "className": "BsDayPickerComponent", - "description": "", - "selector": "bs-day-picker", - "exportAs": "bs-day-picker", - "inputs": [], - "outputs": [], - "properties": [], - "methods": [] - }, - "BsMonthPickerComponent": { - "fileName": "src/datepicker2/month/bs-month-picker.component.ts", - "className": "BsMonthPickerComponent", - "description": "", - "selector": "bs-month-picker", - "exportAs": "bs-month-picker", - "inputs": [], - "outputs": [], - "properties": [], - "methods": [] - }, - "BsDatePickerContainer": { - "fileName": "src/datepicker2/popup/bs-date-picker-container.component.ts", - "className": "BsDatePickerContainer", - "description": "", - "selector": "bs-date-picker-container", - "inputs": [], - "outputs": [], - "properties": [], - "methods": [] - }, - "BsDatePickerPopupDirective": { - "fileName": "src/datepicker2/popup/bs-date-picker-popup.directive.ts", - "className": "BsDatePickerPopupDirective", - "description": "

A lightweight, extensible directive for fancy popover creation.

\n", - "selector": "[bsDatePickerPopup]", - "exportAs": "bs-date-picker-popup", - "inputs": [ - { - "name": "bsValue", - "type": "any", - "description": "" - }, - { - "name": "config", - "type": "BsDatePickerOptions", - "description": "" - }, - { - "name": "container", - "defaultValue": "body", - "type": "string", - "description": "

A selector specifying the element the popover should be appended to.\nCurrently only supports "body".

\n" - }, - { - "name": "isOpen", - "type": "boolean", - "description": "

Returns whether or not the popover is currently being shown

\n" - }, - { - "name": "placement", - "defaultValue": "bottom", - "type": "\"top\" | \"bottom\" | \"left\" | \"right\"", - "description": "

Placement of a popover. Accepts: "top", "bottom", "left", "right"

\n" - }, - { - "name": "triggers", - "defaultValue": "click", - "type": "string", - "description": "

Specifies events that should trigger. Supports a space separated list of\nevent names.

\n" - } - ], - "outputs": [ - { - "name": "bsValueChange", - "description": "" - }, - { - "name": "onHidden", - "description": "

Emits an event when the popover is hidden

\n" - }, - { - "name": "onShown", - "description": "

Emits an event when the popover is shown

\n" - } - ], - "properties": [], - "methods": [ - { - "name": "show", - "description": "

Opens an element’s popover. This is considered a “manual” triggering of\nthe popover.

\n", - "args": [], - "returnType": "void" - }, - { - "name": "hide", - "description": "

Closes an element’s popover. This is considered a “manual” triggering of\nthe popover.

\n", - "args": [], - "returnType": "void" - }, - { - "name": "toggle", - "description": "

Toggles an element’s popover. This is considered a “manual” triggering of\nthe popover.

\n", - "args": [], - "returnType": "void" - } - ] - }, - "BsDateTimePickerComponent": { - "fileName": "src/datepicker2/time/bs-date-time-picker.component.ts", - "className": "BsDateTimePickerComponent", - "description": "", - "selector": "bs-datetimepicker", - "exportAs": "bs-datetimepicker", - "inputs": [], - "outputs": [], - "properties": [], - "methods": [] - }, - "BsYearPickerComponent": { - "fileName": "src/datepicker2/year/bs-year-picker.component.ts", - "className": "BsYearPickerComponent", - "description": "", - "selector": "bs-year-picker", - "exportAs": "bs-year-picker", - "inputs": [], - "outputs": [], - "properties": [], - "methods": [] - }, "BsDropdownContainerComponent": { "fileName": "src/dropdown/bs-dropdown-container.component.ts", "className": "BsDropdownContainerComponent", @@ -2029,11 +1746,11 @@ export const ngdoc: any = { "outputs": [ { "name": "onHidden", - "description": "

This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

\n" + "description": "

This event is fired when the modal has finished being\nhidden from the user (will wait for CSS transitions to complete).

\n" }, { "name": "onHide", - "description": "

This event is fired immediately when the hide instance method has been called.

\n" + "description": "

This event is fired immediately when\nthe hide instance method has been called.

\n" }, { "name": "onShow", @@ -2041,7 +1758,7 @@ export const ngdoc: any = { }, { "name": "onShown", - "description": "

This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete)

\n" + "description": "

This event is fired when the modal has been made visible to the user\n(will wait for CSS transitions to complete)

\n" } ], "properties": [ @@ -2053,7 +1770,7 @@ export const ngdoc: any = { { "name": "dismissReason", "type": "string", - "description": "

This field contains last dismiss reason. Possible values: backdrop-click, esc and null (if modal was closed by direct call of .hide()).

\n" + "description": "

This field contains last dismiss reason.\nPossible values: backdrop-click, esc and null\n(if modal was closed by direct call of .hide()).

\n" } ], "methods": [ @@ -2271,7 +1988,7 @@ export const ngdoc: any = { }, { "name": "pageChanged", - "description": "

fired when page was changed, $event:{page, itemsPerPage} equals to object with current page index and number of items per page

\n" + "description": "

fired when page was changed, $event:{page, itemsPerPage} equals to object\nwith current page index and number of items per page

\n" } ], "properties": [], @@ -2532,7 +2249,7 @@ export const ngdoc: any = { { "name": "value", "type": "number | any[]", - "description": "

current value of progress bar. Could be a number or array of objects like {"value":15,"type":"info","label":"15 %"}

\n" + "description": "

current value of progress bar. Could be a number or array of objects\nlike {"value":15,"type":"info","label":"15 %"}

\n" } ], "outputs": [], @@ -2565,32 +2282,22 @@ export const ngdoc: any = { "description": "", "selector": "rating", "inputs": [ + { + "name": "customTemplate", + "type": "TemplateRef", + "description": "

custom template for icons

\n" + }, { "name": "max", "defaultValue": "5", "type": "number", "description": "

number of icons

\n" }, - { - "name": "ratingStates", - "type": "{ stateOn: string; stateOff: string; }[]", - "description": "

array of custom icons classes

\n" - }, { "name": "readonly", "type": "boolean", "description": "

if true will not react on any user events

\n" }, - { - "name": "stateOff", - "type": "string", - "description": "

unselected icon class

\n" - }, - { - "name": "stateOn", - "type": "string", - "description": "

selected icon class

\n" - }, { "name": "titles", "type": "string[]", @@ -3225,43 +2932,43 @@ export const ngdoc: any = { { "name": "optionsListTemplate", "type": "TemplateRef", - "description": "

used to specify a custom options list template. Template variables: matches, itemTemplate, query

\n" + "description": "

used to specify a custom options list template.\nTemplate variables: matches, itemTemplate, query

\n" }, { "name": "typeahead", "type": "any", - "description": "

options source, can be Array of strings, objects or an Observable for external matching process

\n" + "description": "

options source, can be Array of strings, objects or\nan Observable for external matching process

\n" }, { "name": "typeaheadAsync", "type": "boolean", - "description": "

should be used only in case of typeahead attribute is array. If true - loading of options will be async, otherwise - sync. true make sense if options array is large.

\n" + "description": "

should be used only in case of typeahead attribute is array.\nIf true - loading of options will be async, otherwise - sync.\ntrue make sense if options array is large.

\n" }, { "name": "typeaheadGroupField", "type": "string", - "description": "

when options source is an array of objects, the name of field that contains the group value, matches are grouped by this field when set.

\n" + "description": "

when options source is an array of objects, the name of field that\ncontains the group value, matches are grouped by this field when set.

\n" }, { "name": "typeaheadItemTemplate", "type": "TemplateRef", - "description": "

used to specify a custom item template. Template variables exposed are called item and index;

\n" + "description": "

used to specify a custom item template.\nTemplate variables exposed are called item and index;

\n" }, { "name": "typeaheadLatinize", "defaultValue": "true", "type": "boolean", - "description": "

match latin symbols. If true the word súper would match super and vice versa.

\n" + "description": "

match latin symbols.\nIf true the word súper would match super and vice versa.

\n" }, { "name": "typeaheadMinLength", "type": "number", - "description": "

minimal no of characters that needs to be entered before typeahead kicks-in. When set to 0, typeahead shows on focus with full list of options (limited as normal by typeaheadOptionsLimit)

\n" + "description": "

minimal no of characters that needs to be entered before\ntypeahead kicks-in. When set to 0, typeahead shows on focus with full\nlist of options (limited as normal by typeaheadOptionsLimit)

\n" }, { "name": "typeaheadOptionField", "type": "string", - "description": "

when options source is an array of objects, the name of field that contains the options value, we use array item as option in case of this field is missing. Supports nested properties and methods.

\n" + "description": "

when options source is an array of objects, the name of field\nthat contains the options value, we use array item as option in case\nof this field is missing. Supports nested properties and methods.

\n" }, { "name": "typeaheadOptionsLimit", @@ -3272,13 +2979,13 @@ export const ngdoc: any = { "name": "typeaheadPhraseDelimiters", "defaultValue": "'\"", "type": "string", - "description": "

should be used only in case typeaheadSingleWords attribute is true. Sets the word delimiter to match exact phrase. Defaults to simple and double quotes.

\n" + "description": "

should be used only in case typeaheadSingleWords attribute is true.\nSets the word delimiter to match exact phrase.\nDefaults to simple and double quotes.

\n" }, { "name": "typeaheadSingleWords", "defaultValue": "true", "type": "boolean", - "description": "

break words with spaces. If true the text "exact phrase" here match would match with match exact phrase here but not with phrase here exact match (kind of "google style").

\n" + "description": "

break words with spaces. If true the text "exact phrase"\nhere match would match with match exact phrase here\nbut not with phrase here exact match (kind of "google style").

\n" }, { "name": "typeaheadWaitMs", @@ -3289,17 +2996,17 @@ export const ngdoc: any = { "name": "typeaheadWordDelimiters", "defaultValue": " ", "type": "string", - "description": "

should be used only in case typeaheadSingleWords attribute is true. Sets the word delimiter to break words. Defaults to space.

\n" + "description": "

should be used only in case typeaheadSingleWords attribute is true.\nSets the word delimiter to break words. Defaults to space.

\n" } ], "outputs": [ { "name": "typeaheadLoading", - "description": "

fired when 'busy' state of this component was changed, fired on async mode only, returns boolean

\n" + "description": "

fired when 'busy' state of this component was changed,\nfired on async mode only, returns boolean

\n" }, { "name": "typeaheadNoResults", - "description": "

fired on every key event and returns true in case of matches are not detected

\n" + "description": "

fired on every key event and returns true\nin case of matches are not detected

\n" }, { "name": "typeaheadOnBlur", diff --git a/src/rating/rating.component.html b/src/rating/rating.component.html index 923665b9cf..db708c4465 100644 --- a/src/rating/rating.component.html +++ b/src/rating/rating.component.html @@ -1,10 +1,18 @@ + {{index < value ? '★' : '☆'}} ({{ index < value ? '*' : ' ' }}) - + + + + diff --git a/src/rating/rating.component.ts b/src/rating/rating.component.ts index 2205af9bc9..c48349173d 100644 --- a/src/rating/rating.component.ts +++ b/src/rating/rating.component.ts @@ -5,7 +5,7 @@ import { Input, OnInit, Output, - forwardRef + forwardRef, TemplateRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; @@ -24,16 +24,12 @@ export const RATING_CONTROL_VALUE_ACCESSOR: any = { export class RatingComponent implements ControlValueAccessor, OnInit { /** number of icons */ @Input() max = 5; - /** selected icon class */ - @Input() stateOn: string; - /** unselected icon class */ - @Input() stateOff: string; /** if true will not react on any user events */ @Input() readonly: boolean; /** array of icons titles, default: (["one", "two", "three", "four", "five"]) */ @Input() titles: string[]; - /** array of custom icons classes */ - @Input() ratingStates: { stateOn: string; stateOff: string }[]; + /** custom template for icons */ + @Input() customTemplate: TemplateRef; /** fired when icon selected, $event:number equals to selected rating */ @Output() onHover: EventEmitter = new EventEmitter(); /** fired when icon selected, $event:number equals to previous rating value */ @@ -60,18 +56,11 @@ export class RatingComponent implements ControlValueAccessor, OnInit { ngOnInit(): void { this.max = typeof this.max !== 'undefined' ? this.max : 5; - this.readonly = this.readonly; - this.stateOn = - typeof this.stateOn !== 'undefined' ? this.stateOn : 'glyphicon-star'; - this.stateOff = - typeof this.stateOff !== 'undefined' - ? this.stateOff - : 'glyphicon-star-empty'; this.titles = typeof this.titles !== 'undefined' && this.titles.length > 0 ? this.titles : ['one', 'two', 'three', 'four', 'five']; - this.range = this.buildTemplateObjects(this.ratingStates, this.max); + this.range = this.buildTemplateObjects(this.max); } // model -> view @@ -114,22 +103,13 @@ export class RatingComponent implements ControlValueAccessor, OnInit { } } - protected buildTemplateObjects(_ratingStates: any[], max: number): any[] { - const ratingStates = _ratingStates || []; - const count = ratingStates.length || max; + protected buildTemplateObjects(max: number): any[] { const result: any[] = []; - for (let i = 0; i < count; i++) { - result.push( - Object.assign( - { - index: i, - stateOn: this.stateOn, - stateOff: this.stateOff, - title: this.titles[i] || i + 1 - }, - ratingStates[i] || {} - ) - ); + for (let i = 0; i < max; i++) { + result.push({ + index: i, + title: this.titles[i] || i + 1 + }); } return result; diff --git a/src/spec/rating.component.spec.ts b/src/spec/rating.component.spec.ts index 62acfe6ffe..ff75658a52 100644 --- a/src/spec/rating.component.spec.ts +++ b/src/spec/rating.component.spec.ts @@ -40,17 +40,16 @@ describe('Component: Rating. Init:', () => { expect(items[4].innerHTML).toEqual('( )'); expect(items[5]).toBeUndefined(); - const icons = element.querySelectorAll('i'); + const icons = element.querySelectorAll('span.bs-rating-star'); - expect(icons[0].classList).toContain('glyphicon-star-empty'); - expect(icons[4].classList).toContain('glyphicon-star-empty'); + expect(icons[0].classList).not.toContain('active'); + expect(icons[4].classList).not.toContain('active'); expect(icons[4].getAttribute('title')).toEqual('five'); }); it('checking of working with changed values', () => { context.max = 3; context.titles = ['one', 'two', 'new title']; - context.stateOff = 'glyphicon-ok-circle'; context.ngOnInit(); fixture.detectChanges(); @@ -62,35 +61,47 @@ describe('Component: Rating. Init:', () => { expect(items[2].innerHTML).toEqual('( )'); expect(items[3]).toBeUndefined(); - const icons = element.querySelectorAll('i'); + const icons = element.querySelectorAll('span.bs-rating-star'); - expect(icons[0].classList).toContain('glyphicon-ok-circle'); + expect(icons[0].classList).not.toContain('active'); expect(icons[2].getAttribute('title')).toEqual('new title'); }); +}); - it('checking of working with custom icons', () => { - context.ratingStates = [ - {stateOff: 'glyphicon-ok-circle'}, - {stateOff: 'glyphicon-star-empty'}, - {stateOff: 'glyphicon-ban-circle'}, - {stateOff: 'glyphicon-heart'}, - {stateOff: 'glyphicon-off'} - ]; +describe('Component: Rating. Custom template:', () => { + let fixture: ComponentFixture; + let context: any; + let element: any; - context.ngOnInit(); - fixture.detectChanges(); + beforeEach( + fakeAsync(() => { + TestBed.configureTestingModule({ + declarations: [TestRatingComponent], + imports: [RatingModule.forRoot(), FormsModule] + }); + TestBed.overrideComponent(TestRatingComponent, { + set: { template: ` + + + {{i < v ? '★' : '☆'}} + ` } + }); + fixture = TestBed.createComponent(TestRatingComponent); + context = fixture.debugElement.componentInstance; + element = fixture.nativeElement; + fixture.detectChanges(); + }) + ); - const icons = element.querySelectorAll('i'); - expect(icons[0].classList).toContain('glyphicon-ok-circle'); - expect(icons[1].classList).toContain('glyphicon-star-empty'); - expect(icons[2].classList).toContain('glyphicon-ban-circle'); - expect(icons[3].classList).toContain('glyphicon-heart'); - expect(icons[4].classList).toContain('glyphicon-off'); + it('checking of working with custom icons', () => { + const icons = element.querySelectorAll('span.bs-rating-star'); + expect(icons[0].querySelector('span').classList).toContain('label-default'); }); }); + describe('Component: Rating. Clicks:', () => { const tpl = ` - `; @@ -118,19 +129,17 @@ describe('Component: Rating. Clicks:', () => { 'check simple click', fakeAsync(() => { const items = element.querySelectorAll('.sr-only'); - const icons = element.querySelectorAll('i'); + const icons = element.querySelectorAll('span.bs-rating-star'); expect(items[0].innerHTML).toEqual('( )'); - expect(icons[0].classList).toContain('glyphicon-star-empty'); - expect(icons[0].classList).not.toContain('glyphicon-star'); + expect(icons[0].classList).not.toContain('active'); icons[1].click(); tick(200); fixture.detectChanges(); expect(items[0].innerHTML).toEqual('(*)'); - expect(icons[0].classList).not.toContain('glyphicon-star-empty'); - expect(icons[0].classList).toContain('glyphicon-star'); + expect(icons[0].classList).toContain('active'); }) ); @@ -138,11 +147,10 @@ describe('Component: Rating. Clicks:', () => { 'check disabling', fakeAsync(() => { const items = element.querySelectorAll('.sr-only'); - const icons = element.querySelectorAll('i'); + const icons = element.querySelectorAll('span.bs-rating-star'); expect(items[0].innerHTML).toEqual('( )'); - expect(icons[0].classList).toContain('glyphicon-star-empty'); - expect(icons[0].classList).not.toContain('glyphicon-star'); + expect(icons[0].classList).not.toContain('active'); context.isReadonly = true; fixture.detectChanges(); @@ -152,8 +160,7 @@ describe('Component: Rating. Clicks:', () => { fixture.detectChanges(); expect(items[0].innerHTML).toEqual('( )'); - expect(icons[0].classList).toContain('glyphicon-star-empty'); - expect(icons[0].classList).not.toContain('glyphicon-star'); + expect(icons[0].classList).not.toContain('active'); context.isReadonly = false; fixture.detectChanges(); @@ -163,8 +170,7 @@ describe('Component: Rating. Clicks:', () => { fixture.detectChanges(); expect(items[0].innerHTML).toEqual('(*)'); - expect(icons[0].classList).not.toContain('glyphicon-star-empty'); - expect(icons[0].classList).toContain('glyphicon-star'); + expect(icons[0].classList).toContain('active'); }) ); });