diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 775cc8bb78a..b6e858f7f6a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -1293,7 +1293,7 @@ describe('IgxGrid - Filtering actions', () => { tick(); fix.detectChanges(); - const firstMonth = calendar.queryAll(By.css('.igx-calendar__month'))[0]; + const firstMonth = calendar.queryAll(By.css(`[class*='igx-calendar__month']`))[0]; firstMonth.nativeElement.click(); tick(); fix.detectChanges(); diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts b/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts index b6da2a6bb88..5bbb5ca8616 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts @@ -24,7 +24,7 @@ describe('IgxSlider', () => { })); describe('Base tests', () => { - configureTestSuite(); + configureTestSuite(); let fixture: ComponentFixture; let slider: IgxSliderComponent; @@ -152,7 +152,7 @@ describe('IgxSlider', () => { slider.value = 45; fixture.detectChanges(); - expect(fixture.componentInstance.slider.value).toBe(20); + expect(fixture.componentInstance.slider.value).toBe(40); }); it('should not set upper value to outside bounds slider when slider is RANGE', () => { @@ -178,7 +178,7 @@ describe('IgxSlider', () => { fixture.detectChanges(); expect(slider.value.lower).toBe(20); - expect(slider.value.upper).toBe(30); + expect(slider.value.upper).toBe(40); }); it('should not set value upper when is less than lower value when slider is RANGE', () => { @@ -227,7 +227,7 @@ describe('IgxSlider', () => { upper: 30 }; fixture.detectChanges(); - expect(slider.value.lower).toBe(20); + expect(slider.value.lower).toBe(10); expect(slider.value.upper).toBe(30); }); @@ -321,6 +321,28 @@ describe('IgxSlider', () => { expect(Math.round(slider.value as number)).toBe(60); })); + it('Value should remain to the max one if it exceeds.', () => { + const fix = TestBed.createComponent(SliderMinMaxComponent); + fix.detectChanges(); + + const sliderRef = fix.componentInstance.slider; + let expectedVal = 150; + let expectedMax = 300; + + expect(sliderRef.value).toEqual(expectedVal); + expect(sliderRef.maxValue).toEqual(expectedMax); + + expectedVal = 250; + expectedMax = 200; + sliderRef.maxValue = expectedMax; + sliderRef.value = expectedVal; + fix.detectChanges(); + + expect(sliderRef.value).not.toEqual(expectedVal); + expect(sliderRef.value).toEqual(expectedMax); + expect(sliderRef.maxValue).toEqual(expectedMax); + }); + function panRight(element, elementHeight, elementWidth, duration) { const panOptions = { deltaX: elementWidth * 0.6, @@ -628,6 +650,27 @@ describe('IgxSlider', () => { expect((slider.value as IRangeSliderValue).upper).toBe(7); }); + it('Lower and upper bounds should not exceed min and max values', () => { + const fix = TestBed.createComponent(SliderTestComponent); + fix.detectChanges(); + + const componentInst = fix.componentInstance; + const slider = componentInst.slider; + const expectedMinVal = 0; + const expectedMaxVal = 10; + + expect(slider.minValue).toEqual(expectedMinVal); + expect(slider.maxValue).toEqual(expectedMaxVal); + + const expectedLowerBound = -1; + const expectedUpperBound = 11; + slider.lowerBound = expectedLowerBound; + slider.upperBound = expectedUpperBound; + + expect(slider.lowerBound).toEqual(expectedMinVal); + expect(slider.upperBound).toEqual(expectedMaxVal); + }); + describe('EditorProvider', () => { it('Should return correct edit element (single)', () => { const fixture = TestBed.createComponent(SliderInitializeTestComponent); diff --git a/projects/igniteui-angular/src/lib/slider/slider.component.ts b/projects/igniteui-angular/src/lib/slider/slider.component.ts index 50215fa5e64..3f156ccc067 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.component.ts @@ -158,7 +158,6 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider, @ViewChild('thumbTo') private thumbTo: ElementRef; - private _minValue = 0; // Measures & Coordinates private width = 0; @@ -173,6 +172,7 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider, // From/upperValue in percent values private hasViewInit = false; private timer; + private _minValue = 0; private _maxValue = 100; private _lowerBound?: number; private _upperBound?: number; @@ -306,7 +306,7 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider, return; } - this._lowerBound = value; + this._lowerBound = this.valueInRange(value, this.minValue, this.maxValue); } /** @@ -342,7 +342,7 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider, return; } - this._upperBound = value; + this._upperBound = this.valueInRange(value, this.minValue, this.maxValue); } /** @@ -370,9 +370,7 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider, *``` */ public set lowerValue(value: number) { - if (value < this.lowerBound || this.upperBound < value) { - return; - } + value = this.valueInRange(value, this.lowerBound, this.upperBound); if (this.isRange && value > this.upperValue) { return; @@ -406,9 +404,7 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider, *``` */ public set upperValue(value: number) { - if (value < this.lowerBound || this.upperBound < value) { - return; - } + value = this.valueInRange(value, this.lowerBound, this.upperBound); if (this.isRange && value < this.lowerValue) { return; @@ -725,6 +721,10 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider, ); } + private valueInRange(value, min = 0, max = 100) { + return Math.max(Math.min(value, max), min); + } + private invalidateValue() { if (!this.isRange) { if (this.value >= this._lowerBound && this.value <= this._upperBound) { @@ -885,11 +885,11 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider, } private setPointerPercent() { - this.pPointer = this.limit(this.toFixed(this.xPointer / this.width)); + this.pPointer = this.valueInRange(this.toFixed(this.xPointer / this.width), this.pMin, this.pMax); } private valueToFraction(value: number) { - return this.limit((value - this.minValue) / (this.maxValue - this.minValue)); + return this.valueInRange((value - this.minValue) / (this.maxValue - this.minValue), this.pMin, this.pMax); } private fractionToValue(fraction: number): number { @@ -899,14 +899,6 @@ export class IgxSliderComponent implements ControlValueAccessor, EditorProvider, return (max - min) * fraction + min; } - private fractionToPercent(fraction: number): number { - return this.toFixed(fraction * 100); - } - - private limit(num: number): number { - return Math.max(this.pMin, Math.min(num, this.pMax)); - } - private updateTrack() { const fromPosition = this.valueToFraction(this.lowerValue); const toPosition = this.valueToFraction(this.upperValue);