From bcdd6de107ce27891dce5bb2af97849534008c29 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Mon, 5 Nov 2018 15:55:35 +0200 Subject: [PATCH 1/5] fix(slider): prevent snapping of maxValue to minValue Closes #2610 --- .../src/lib/slider/slider.component.ts | 30 +++++++------------ 1 file changed, 11 insertions(+), 19 deletions(-) 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); From 86cdfbfa15e32dc56236dd34ed548e3df7e368b0 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Wed, 12 Dec 2018 14:33:18 +0200 Subject: [PATCH 2/5] test(slider): add some tests about the exceeding bounds Closes #2610 --- .../src/lib/slider/slider.component.spec.ts | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) 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..207dd88c4a2 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts @@ -321,6 +321,28 @@ describe('IgxSlider', () => { expect(Math.round(slider.value as number)).toBe(60); })); + fit('Value should remain to the max one if it exceeds.', () => { + const fix = TestBed.createComponent(SliderMinMaxComponent); + fix.detectChanges(); + + const slider = fix.componentInstance.slider; + let expectedVal = 150; + let expectedMax = 300; + + expect(slider.value).toEqual(expectedVal); + expect(slider.maxValue).toEqual(expectedMax); + + expectedVal = 250; + expectedMax = 200; + slider.maxValue = expectedMax; + slider.value = expectedVal; + fix.detectChanges(); + + expect(slider.value).not.toEqual(expectedVal); + expect(slider.value).toEqual(expectedMax); + expect(slider.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); }); + fit('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); From cefcf70dbcde583bfb4ae77891756b93d3f5db27 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Wed, 12 Dec 2018 15:08:17 +0200 Subject: [PATCH 3/5] test(slider): run all and modify some tests Closes #2610 --- .../src/lib/slider/slider.component.spec.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) 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 207dd88c4a2..36f53b1f2a7 100644 --- a/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts +++ b/projects/igniteui-angular/src/lib/slider/slider.component.spec.ts @@ -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,7 +321,7 @@ describe('IgxSlider', () => { expect(Math.round(slider.value as number)).toBe(60); })); - fit('Value should remain to the max one if it exceeds.', () => { + it('Value should remain to the max one if it exceeds.', () => { const fix = TestBed.createComponent(SliderMinMaxComponent); fix.detectChanges(); @@ -650,7 +650,7 @@ describe('IgxSlider', () => { expect((slider.value as IRangeSliderValue).upper).toBe(7); }); - fit('Lower and upper bounds should not exceed min and max values', () => { + it('Lower and upper bounds should not exceed min and max values', () => { const fix = TestBed.createComponent(SliderTestComponent); fix.detectChanges(); From 5e424a15a594817dcdeefa03a3e67120f4acc1c9 Mon Sep 17 00:00:00 2001 From: Aleksandar Kamenov Date: Wed, 12 Dec 2018 15:42:33 +0200 Subject: [PATCH 4/5] fix(slider.spec): fix some lint errors Closes #2610 --- .../src/lib/slider/slider.component.spec.ts | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) 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 36f53b1f2a7..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; @@ -325,22 +325,22 @@ describe('IgxSlider', () => { const fix = TestBed.createComponent(SliderMinMaxComponent); fix.detectChanges(); - const slider = fix.componentInstance.slider; + const sliderRef = fix.componentInstance.slider; let expectedVal = 150; let expectedMax = 300; - expect(slider.value).toEqual(expectedVal); - expect(slider.maxValue).toEqual(expectedMax); + expect(sliderRef.value).toEqual(expectedVal); + expect(sliderRef.maxValue).toEqual(expectedMax); expectedVal = 250; expectedMax = 200; - slider.maxValue = expectedMax; - slider.value = expectedVal; + sliderRef.maxValue = expectedMax; + sliderRef.value = expectedVal; fix.detectChanges(); - expect(slider.value).not.toEqual(expectedVal); - expect(slider.value).toEqual(expectedMax); - expect(slider.maxValue).toEqual(expectedMax); + expect(sliderRef.value).not.toEqual(expectedVal); + expect(sliderRef.value).toEqual(expectedMax); + expect(sliderRef.maxValue).toEqual(expectedMax); }); function panRight(element, elementHeight, elementWidth, duration) { @@ -669,7 +669,7 @@ describe('IgxSlider', () => { expect(slider.lowerBound).toEqual(expectedMinVal); expect(slider.upperBound).toEqual(expectedMaxVal); - }) + }); describe('EditorProvider', () => { it('Should return correct edit element (single)', () => { From cac7de02c7e6079363757d7e62eec2ae7ed20495 Mon Sep 17 00:00:00 2001 From: zdrawku Date: Wed, 2 Jan 2019 14:27:18 +0200 Subject: [PATCH 5/5] test(update): Modify firstMonth selector #3508 --- .../src/lib/grids/grid/grid-filtering-ui.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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();