Skip to content

Commit 70838b3

Browse files
AleksandyrAleksandyr
committed
merge
1 parent 48967e2 commit 70838b3

File tree

2 files changed

+61
-42
lines changed

2 files changed

+61
-42
lines changed

‎projects/igniteui-angular/src/lib/slider/slider.component.spec.ts‎

Lines changed: 38 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,13 @@ const SLIDER_TICK_LABELS_CLASS = '.igx-slider__ticks-label';
2121
const SLIDER_TICK_LABELS_HIDDEN_CLASS = 'igx-slider__tick-label--hidden';
2222
const TOP_TO_BOTTOM_TICK_LABLES = '.igx-slider__tick-labels--top-bottom';
2323
const BOTTOM_TO_TOP_TICK_LABLES = '.igx-slider__tick-labels--bottom-top';
24+
interface FakeDoc {
25+
body: { dir?: string };
26+
documentElement: { dir?: string };
27+
}
2428

2529
describe('IgxSlider', () => {
30+
let fakeDoc: FakeDoc;
2631
configureTestSuite();
2732
beforeAll(async(() => {
2833
TestBed.configureTestingModule({
@@ -567,15 +572,15 @@ describe('IgxSlider', () => {
567572
fixture.detectChanges();
568573

569574
expect(sliderEl).toBeDefined();
570-
let activeThumb = sliderEl.query(By.css('.igx-slider__thumb-to--active'));
571-
expect(activeThumb).not.toBeNull();
575+
let activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-to--active'));
576+
expect(activeLabel).not.toBeNull();
572577

573578
sliderEl.nativeElement.dispatchEvent( new PointerEvent('pointerup', { pointerId: 1 }));
574579
await wait(slider.thumbLabelVisibilityDuration + 10);
575580
fixture.detectChanges();
576581

577-
activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-to--active'));
578-
expect(activeThumb).toBeNull();
582+
activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-to--active'));
583+
expect(activeLabel).toBeNull();
579584
});
580585

581586
it('should be able to change thumbLabelVisibilityDuration', async() => {
@@ -586,20 +591,20 @@ describe('IgxSlider', () => {
586591
fixture.detectChanges();
587592

588593
expect(sliderEl).toBeDefined();
589-
let activeThumb = sliderEl.query(By.css('.igx-slider__thumb-to--active'));
590-
expect(activeThumb).not.toBeNull();
594+
let activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-to--active'));
595+
expect(activeLabel).not.toBeNull();
591596

592597
sliderEl.nativeElement.dispatchEvent( new PointerEvent('pointerup', { pointerId: 1 }));
593598
await wait(750);
594599
fixture.detectChanges();
595600

596-
activeThumb = sliderEl.query(By.css('.igx-slider__thumb-to--active'));
597-
expect(activeThumb).not.toBeNull();
601+
activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-to--active'));
602+
expect(activeLabel).not.toBeNull();
598603

599604
await wait(300);
600605
fixture.detectChanges();
601-
activeThumb = sliderEl.query(By.css('.igx-slider__thumb-to--active'));
602-
expect(activeThumb).toBeNull();
606+
activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-to--active'));
607+
expect(activeLabel).toBeNull();
603608
});
604609

605610
it('rendering of the slider should corresponds to the set labels', () => {
@@ -838,15 +843,15 @@ describe('IgxSlider', () => {
838843
fixture.detectChanges();
839844

840845
expect(sliderEl).toBeDefined();
841-
let activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-from--active'));
842-
expect(activeThumb).not.toBeNull();
846+
let activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-from--active'));
847+
expect(activeLabel).not.toBeNull();
843848

844849
sliderEl.dispatchEvent( new PointerEvent('pointerup', { pointerId: 1}));
845850
await wait(slider.thumbLabelVisibilityDuration + 10);
846851
fixture.detectChanges();
847852

848-
activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-from--active'));
849-
expect(activeThumb).toBeNull();
853+
activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-from--active'));
854+
expect(activeLabel).toBeNull();
850855
});
851856

852857
it('should be able to change thumbLabelVisibilityDuration', async() => {
@@ -857,20 +862,20 @@ describe('IgxSlider', () => {
857862
fixture.detectChanges();
858863

859864
expect(sliderEl).toBeDefined();
860-
let activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-from--active'));
861-
expect(activeThumb).not.toBeNull();
865+
let activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-from--active'));
866+
expect(activeLabel).not.toBeNull();
862867

863868
sliderEl.dispatchEvent( new PointerEvent('pointerup', { pointerId: 1}));
864869
await wait(750);
865870
fixture.detectChanges();
866871

867-
activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-from--active'));
868-
expect(activeThumb).not.toBeNull();
872+
activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-from--active'));
873+
expect(activeLabel).not.toBeNull();
869874

870875
await wait(300);
871876
fixture.detectChanges();
872-
activeThumb = fixture.debugElement.query(By.css('.igx-slider__thumb-from--active'));
873-
expect(activeThumb).toBeNull();
877+
activeLabel = fixture.debugElement.query(By.css('.igx-slider__label-from--active'));
878+
expect(activeLabel).toBeNull();
874879
});
875880

876881
it('rendering of the slider should corresponds to the set labels', () => {
@@ -884,32 +889,32 @@ describe('IgxSlider', () => {
884889

885890
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', fromThumb.nativeElement, true);
886891
fixture.detectChanges();
887-
expect(fixture.componentInstance.label).toEqual({lower: 1, upper: 6});
892+
expect(fixture.componentInstance.slider.value).toEqual({lower: 1, upper: 6});
888893
expect(slider.lowerLabel).toEqual('Tuesday');
889894

890895
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', fromThumb.nativeElement, true);
891896
fixture.detectChanges();
892-
expect(fixture.componentInstance.label).toEqual({lower: 2, upper: 6});
897+
expect(fixture.componentInstance.slider.value).toEqual({lower: 2, upper: 6});
893898
expect(slider.lowerLabel).toEqual('Wednesday');
894899

895900
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', fromThumb.nativeElement, true);
896901
fixture.detectChanges();
897-
expect(fixture.componentInstance.label).toEqual({lower: 3, upper: 6});
902+
expect(fixture.componentInstance.slider.value).toEqual({lower: 3, upper: 6});
898903
expect(slider.lowerLabel).toEqual('Thursday');
899904

900905
UIInteractions.triggerKeyDownEvtUponElem('ArrowRight', fromThumb.nativeElement, true);
901906
fixture.detectChanges();
902-
expect(fixture.componentInstance.label).toEqual({lower: 4, upper: 6});
907+
expect(fixture.componentInstance.slider.value).toEqual({lower: 4, upper: 6});
903908
expect(slider.lowerLabel).toEqual('Friday');
904909

905910
UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', toThumb.nativeElement, true);
906911
fixture.detectChanges();
907-
expect(fixture.componentInstance.label).toEqual({lower: 4, upper: 5});
912+
expect(fixture.componentInstance.slider.value).toEqual({lower: 4, upper: 5});
908913
expect(slider.upperLabel).toEqual('Saturday');
909914

910915
UIInteractions.triggerKeyDownEvtUponElem('ArrowLeft', toThumb.nativeElement, true);
911916
fixture.detectChanges();
912-
expect(fixture.componentInstance.label).toEqual({lower: 4, upper: 4});
917+
expect(fixture.componentInstance.slider.value).toEqual({lower: 4, upper: 4});
913918
expect(slider.upperLabel).toEqual('Friday');
914919
});
915920

@@ -1686,19 +1691,21 @@ class SliderWithLabelsComponent {
16861691

16871692
@Component({
16881693
template: `
1689-
<igx-slider [(ngModel)]='label' [type]="type"
1690-
[labels]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']">
1694+
<igx-slider
1695+
[labels]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday']"
1696+
[type]="type">
16911697
</igx-slider> `
16921698
})
16931699
class RangeSliderWithLabelsComponent {
1694-
@ViewChild(IgxSliderComponent, { read: IgxSliderComponent, static: true }) public slider: IgxSliderComponent;
1695-
public label;
1700+
@ViewChild(IgxSliderComponent, { read: IgxSliderComponent, static: true })
1701+
public slider: IgxSliderComponent;
1702+
16961703
public type = IgxSliderType.RANGE;
16971704
}
16981705

16991706
@Component({
17001707
template: `
1701-
<igx-slider [(ngModel)]='label' [type]="type"
1708+
<igx-slider [type]="type"
17021709
[labels]="['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday']">
17031710
<ng-template igxSliderThumbFrom let-value let-labels="labels">
17041711
<span class="custom"> Lower {{ labels[value.lower] }}</span>

‎projects/igniteui-angular/src/lib/slider/slider.component.ts‎

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,8 @@ import {
1111
QueryList,
1212
ChangeDetectorRef,
1313
OnChanges,
14-
NgZone
14+
NgZone,
15+
AfterContentInit
1516
} from '@angular/core';
1617
import { ControlValueAccessor, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
1718
import { EditorProvider } from '../core/edit-provider';
@@ -63,6 +64,7 @@ export class IgxSliderComponent implements
6364
EditorProvider,
6465
OnInit,
6566
AfterViewInit,
67+
AfterContentInit,
6668
OnChanges,
6769
OnDestroy {
6870

@@ -81,6 +83,7 @@ export class IgxSliderComponent implements
8183
private _continuous = false;
8284
private _disabled = false;
8385
private _step = 1;
86+
private _value: number | IRangeSliderValue = 0;
8487

8588
// ticks
8689
private _primaryTicks = 0;
@@ -615,18 +618,11 @@ export class IgxSliderComponent implements
615618
*/
616619
@Input()
617620
public set value(value: number | IRangeSliderValue) {
618-
if (!this.isRange) {
619-
this.upperValue = value as number - (value as number % this.step);
620-
} else {
621-
value = this.validateInitialValue(value as IRangeSliderValue);
622-
this.upperValue = (value as IRangeSliderValue).upper;
623-
this.lowerValue = (value as IRangeSliderValue).lower;
624-
}
625-
626-
this._onChangeCallback(this.value);
627-
628621
if (this._hasViewInit) {
622+
this.setValue(value);
629623
this.positionHandlersAndUpdateTrack();
624+
} else {
625+
this._value = value;
630626
}
631627
}
632628

@@ -987,6 +983,10 @@ export class IgxSliderComponent implements
987983
}
988984
}
989985

986+
public ngAfterContentInit() {
987+
this.setValue(this._value);
988+
}
989+
990990
/**
991991
* @hidden
992992
*/
@@ -1405,6 +1405,18 @@ export class IgxSliderComponent implements
14051405
return isSliderWithDifferentValue || isRangeWithOneDifferentValue;
14061406
}
14071407

1408+
public setValue(value: number | IRangeSliderValue) {
1409+
if (!this.isRange) {
1410+
this.upperValue = value as number - (value as number % this.step);
1411+
} else {
1412+
value = this.validateInitialValue(value as IRangeSliderValue);
1413+
this.upperValue = (value as IRangeSliderValue).upper;
1414+
this.lowerValue = (value as IRangeSliderValue).lower;
1415+
}
1416+
1417+
this._onChangeCallback(this.value);
1418+
}
1419+
14081420
private emitValueChanged(oldValue: number | IRangeSliderValue) {
14091421
this.onValueChange.emit({ oldValue, value: this.value });
14101422
}

0 commit comments

Comments
 (0)