From ac512256702d4cde2a99c3402b6936e03a520c7b Mon Sep 17 00:00:00 2001 From: jantoun-scottlogic Date: Wed, 19 Jun 2024 09:07:12 +0100 Subject: [PATCH] Update tests --- .../carbon-estimation.component.spec.ts | 49 ++++++++++++------- 1 file changed, 32 insertions(+), 17 deletions(-) diff --git a/src/app/carbon-estimation/carbon-estimation.component.spec.ts b/src/app/carbon-estimation/carbon-estimation.component.spec.ts index 1b52de3e..cab00d70 100644 --- a/src/app/carbon-estimation/carbon-estimation.component.spec.ts +++ b/src/app/carbon-estimation/carbon-estimation.component.spec.ts @@ -65,38 +65,53 @@ describe('CarbonEstimationComponent', () => { expect(component.chartOptions.chart.height).toBe(600 - estimatorBaseHeight - 200 - 100); }); - it('should recalculate chart height on window resize, for laptop screen', () => { - spyOn(component.chart as ChartComponent, 'updateOptions'); - spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200); + [0.5, 1, 2, 5].forEach(browserZoomFactor => { + it(`should recalculate chart height on window resize, for laptop screen (zoom factor: ${browserZoomFactor})`, () => { + spyOn(component.chart as ChartComponent, 'updateOptions'); + spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200); - component.onResize(2000, 1000, 2000, 1); + component.onResize(1500, 1000, 2000, browserZoomFactor); - expect(component.chart?.updateOptions).toHaveBeenCalledOnceWith({ - chart: { height: 1500 }, // Height will be capped at a percentage of the screen height + expect(component.chart?.updateOptions).toHaveBeenCalledOnceWith({ + chart: { height: (1500 - estimatorBaseHeight - 200) * browserZoomFactor }, + }); + }); + }); + + [0.5, 1, 2, 5].forEach(browserZoomFactor => { + it(`should recalculate chart height on window resize, for mobile screen (zoom factor: ${browserZoomFactor})`, () => { + spyOn(component.chart as ChartComponent, 'updateOptions'); + spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200); + + component.onResize(1000, 500, 1000, browserZoomFactor); + + expect(component.chart?.updateOptions).toHaveBeenCalledOnceWith({ + chart: { height: (1000 - estimatorBaseHeight - 200 + estimatorHeights.title) * browserZoomFactor }, + }); }); }); - it('should recalculate chart height on window resize, for mobile screen', () => { + it('should cap chart height as a percentage of screen height for laptop screen', () => { spyOn(component.chart as ChartComponent, 'updateOptions'); spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200); - component.onResize(1000, 500, 1000, 1); + const screenHeight = 2000; + component.onResize(2000, 1000, screenHeight, 1); expect(component.chart?.updateOptions).toHaveBeenCalledOnceWith({ - chart: { height: 1000 - estimatorBaseHeight - 200 + estimatorHeights.title }, + chart: { height: screenHeight * 0.75 }, }); }); - [0.5, 1, 2, 5].forEach(browserZoomFactor => { - it(`should scale chart height appropriately if the browser zoom factor is ${browserZoomFactor}`, () => { - spyOn(component.chart as ChartComponent, 'updateOptions'); - spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200); + it('should cap chart height as a percentage of screen height for mobile screen', () => { + spyOn(component.chart as ChartComponent, 'updateOptions'); + spyOnProperty(component.detailsPanel.nativeElement, 'clientHeight').and.returnValue(200); - component.onResize(1500, 1000, 2000, browserZoomFactor); + const screenHeight = 1000; + component.onResize(1100, 500, screenHeight, 1); - expect(component.chart?.updateOptions).toHaveBeenCalledOnceWith({ - chart: { height: (1500 - estimatorBaseHeight - 200) * browserZoomFactor }, - }); + expect(component.chart?.updateOptions).toHaveBeenCalledOnceWith({ + chart: { height: screenHeight * 0.75 }, }); });