From 2bac68cfaa7b7210f942752286efbb4309e3e269 Mon Sep 17 00:00:00 2001 From: Ivan Kitanov Date: Thu, 27 Feb 2025 18:08:29 +0200 Subject: [PATCH 1/5] fix(splitter): Sizing panes corectly with minSize and the browser is shrinked --- .../lib/splitter/splitter.component.spec.ts | 72 ++++++++++++++++++- .../src/lib/splitter/splitter.component.ts | 10 ++- 2 files changed, 80 insertions(+), 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts index 07e6dabb7b5..f62cdf35cbd 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts +++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts @@ -21,7 +21,7 @@ describe('IgxSplitter', () => { }).compileComponents())); let fixture: ComponentFixture; let splitter: IgxSplitterComponent; - + beforeEach(waitForAsync(() => { fixture = TestBed.createComponent(SplitterTestComponent); fixture.detectChanges(); @@ -462,6 +462,76 @@ describe('IgxSplitter pane collapse', () => { }); }); +describe('IgxSplitter resizing with minSize and browser window is shrinked', () => { + configureTestSuite(); + beforeAll(waitForAsync(() => TestBed.configureTestingModule({ + imports: [ + SplitterMinSiezComponent + ] + }).compileComponents())); + + let fixture; let splitter; + beforeEach(waitForAsync(() => { + fixture = TestBed.createComponent(SplitterMinSiezComponent); + fixture.detectChanges(); + splitter = fixture.componentInstance.splitter; + })); + + it('should set the correct sizes when the user drags one pane to the end of another', () => { + const pane1 = splitter.panes.toArray()[0]; + const pane2 = splitter.panes.toArray()[1]; + const splitterBarComponent = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).context; + const minSize = parseInt(pane1.minSize); + spyOn(splitter, 'onMoveEnd').and.callThrough(); + + pane1.size = (splitter.getTotalSize() - parseInt(pane2.size)) + 'px'; + fixture.detectChanges(); + + splitterBarComponent.moveStart.emit(pane1); + fixture.detectChanges(); + splitterBarComponent.movingEnd.emit(splitter.getTotalSize() -minSize); + fixture.detectChanges(); + + spyOnProperty(window, 'innerWidth', 'get').and.returnValue(500); + window.dispatchEvent(new Event('resize')); + splitter.elementRef.nativeElement.style.width = '500px'; + pane2.size = (splitter.getTotalSize() - minSize) + 'px'; + fixture.detectChanges(); + + splitterBarComponent.moveStart.emit(pane1); + fixture.detectChanges(); + splitterBarComponent.movingEnd.emit(-400); + fixture.detectChanges(); + + const isFullSize = pane1.size === '100%' || pane1.size === (splitter.getTotalSize() + 'px'); + + expect(splitter.onMoveEnd).toHaveBeenCalled(); + expect(isFullSize).toBeTruthy(); + }); +}); + +@Component({ + template: ` + + +
+ Pane 1 +
+ + +
+ Pane 2 +
+ + + `, + imports: [IgxSplitterComponent, IgxSplitterPaneComponent] +}) +export class SplitterMinSiezComponent { + @ViewChild(IgxSplitterComponent, { static: true }) + public splitter: IgxSplitterComponent; +} + @Component({ template: ` diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts index ca1f7f15878..cf4dc267c46 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter.component.ts +++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.ts @@ -239,7 +239,15 @@ export class IgxSplitterComponent implements AfterContentInit { } public onMoveEnd(delta: number) { - const [ paneSize, siblingSize ] = this.calcNewSizes(delta); + let [ paneSize, siblingSize ] = this.calcNewSizes(delta); + + if (paneSize + siblingSize > this.getTotalSize() && delta < 0) { + paneSize = this.getTotalSize(); + siblingSize = 0; + } else if(paneSize + siblingSize > this.getTotalSize() && delta > 0) { + paneSize = 0; + siblingSize = this.getTotalSize(); + } if (this.pane.isPercentageSize) { // handle % resizes From a6d9b7759145ee32c4483cbb1316e11b36de071d Mon Sep 17 00:00:00 2001 From: IvanKitanov17 Date: Fri, 28 Feb 2025 11:22:51 +0200 Subject: [PATCH 2/5] chore(splitter): Removing unnecessary code from test --- .../src/lib/splitter/splitter.component.spec.ts | 2 -- 1 file changed, 2 deletions(-) diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts index f62cdf35cbd..5bfb346d615 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts +++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts @@ -492,8 +492,6 @@ describe('IgxSplitter resizing with minSize and browser window is shrinked', () splitterBarComponent.movingEnd.emit(splitter.getTotalSize() -minSize); fixture.detectChanges(); - spyOnProperty(window, 'innerWidth', 'get').and.returnValue(500); - window.dispatchEvent(new Event('resize')); splitter.elementRef.nativeElement.style.width = '500px'; pane2.size = (splitter.getTotalSize() - minSize) + 'px'; fixture.detectChanges(); From 2a8816090c4226a01e573bc4660d6e1255d2e169 Mon Sep 17 00:00:00 2001 From: Ivan Kitanov Date: Mon, 14 Apr 2025 16:17:08 +0300 Subject: [PATCH 3/5] chore(splitter): Excluding the test to see if checks pass --- .../src/lib/splitter/splitter.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts index 5bfb346d615..402127f8f45 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts +++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts @@ -477,7 +477,7 @@ describe('IgxSplitter resizing with minSize and browser window is shrinked', () splitter = fixture.componentInstance.splitter; })); - it('should set the correct sizes when the user drags one pane to the end of another', () => { + xit('should set the correct sizes when the user drags one pane to the end of another', () => { const pane1 = splitter.panes.toArray()[0]; const pane2 = splitter.panes.toArray()[1]; const splitterBarComponent = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).context; From 5d9cd9154e2b5b7d36a83811e8f341eb3284b67f Mon Sep 17 00:00:00 2001 From: Ivan Kitanov Date: Mon, 14 Apr 2025 17:20:15 +0300 Subject: [PATCH 4/5] chore(splitter): Reverting unnecessary changes --- .../src/lib/splitter/splitter.component.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts index 402127f8f45..5bfb346d615 100644 --- a/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts +++ b/projects/igniteui-angular/src/lib/splitter/splitter.component.spec.ts @@ -477,7 +477,7 @@ describe('IgxSplitter resizing with minSize and browser window is shrinked', () splitter = fixture.componentInstance.splitter; })); - xit('should set the correct sizes when the user drags one pane to the end of another', () => { + it('should set the correct sizes when the user drags one pane to the end of another', () => { const pane1 = splitter.panes.toArray()[0]; const pane2 = splitter.panes.toArray()[1]; const splitterBarComponent = fixture.debugElement.query(By.css(SPLITTERBAR_CLASS)).context; From d360208fd9fa0ef4f8ecf0946f0a3e8b81e9fab7 Mon Sep 17 00:00:00 2001 From: Stamen Stoychev Date: Tue, 15 Apr 2025 18:35:25 +0300 Subject: [PATCH 5/5] fix(tests): providing bg locale for date-util test spec --- .../src/lib/date-common/util/date-time.util.spec.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/projects/igniteui-angular/src/lib/date-common/util/date-time.util.spec.ts b/projects/igniteui-angular/src/lib/date-common/util/date-time.util.spec.ts index a3d653a49cc..ce2e34b41a1 100644 --- a/projects/igniteui-angular/src/lib/date-common/util/date-time.util.spec.ts +++ b/projects/igniteui-angular/src/lib/date-common/util/date-time.util.spec.ts @@ -1,6 +1,9 @@ import { DateTimeUtil } from './date-time.util'; import { DatePart, DatePartInfo } from '../../directives/date-time-editor/date-time-editor.common'; import { DataType } from '../../data-operations/data-util'; +import localeBg from "@angular/common/locales/bg"; +import { registerLocaleData } from '@angular/common'; + const reduceToDictionary = (parts: DatePartInfo[]) => parts.reduce((obj, x) => { obj[x.type] = x; @@ -8,6 +11,9 @@ const reduceToDictionary = (parts: DatePartInfo[]) => parts.reduce((obj, x) => { }, {}); describe(`DateTimeUtil Unit tests`, () => { + + registerLocaleData(localeBg); + describe('Date Time Parsing', () => { it('should correctly parse all date time parts (base)', () => { let result = DateTimeUtil.parseDateTimeFormat('dd/MM/yyyy HH:mm:ss:SS a');