diff --git a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts index 4ed62c57eee3b2cacea3caf9e04b0b3858e39bdf..a2d407a171baab9b58be7d8c583ae9f8ebd73a0c 100644 --- a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts +++ b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.spec.ts @@ -273,24 +273,25 @@ describe('TooltipDirective', () => { }); describe('setWidth', () => { - it('should set max width', () => { + function setWidthOnComponentRef(width: number): void { directive.componentRef = Object.assign(mockComponentRef, { location: { - nativeElement: { children: [{ getBoundingClientRect: jest.fn().mockReturnValue({ width: MAX_WIDTH * REM + 100 }) }] }, + nativeElement: { children: [{ getBoundingClientRect: jest.fn().mockReturnValue({ width }) }] }, }, }); + } + const maxTooltipWidth: number = MAX_WIDTH * REM; + + it('should set width to max width', () => { + setWidthOnComponentRef(maxTooltipWidth + 100); directive.setWidth(); expect(directive.componentRef.instance.width).toBe(MAX_WIDTH); }); - it('should unset width', () => { - directive.componentRef = Object.assign(mockComponentRef, { - location: { - nativeElement: { children: [{ getBoundingClientRect: jest.fn().mockReturnValue({ width: MAX_WIDTH * REM - 100 }) }] }, - }, - }); + it('should set width to null', () => { + setWidthOnComponentRef(maxTooltipWidth - 100); directive.setWidth(); @@ -327,7 +328,7 @@ describe('TooltipDirective', () => { }); }); - describe('setLeftOffset', () => { + describe('calculateLeftOffset', () => { beforeEach(() => { directive.leftOffset = 0; }); @@ -335,40 +336,40 @@ describe('TooltipDirective', () => { it('should set 0 offset, if parent wider than tooltip', () => { const rectForStandard: DOMRect = { ...parentRect, left: 50, right: 500, width: 100 }; - directive.setLeftOffset(36, rectForStandard, 1000); + const result: number = directive.calculateLeftOffset(36, rectForStandard, 1000); - expect(directive.leftOffset).toBe(0); + expect(result).toBe(0); }); it('should set positive left offset', () => { const rectForLeft: DOMRect = { ...parentRect, left: 10 }; - directive.setLeftOffset(50, rectForLeft, 1000); + const result: number = directive.calculateLeftOffset(50, rectForLeft, 1000); - expect(directive.leftOffset).toBe(15); + expect(result).toBe(15); }); it('should set negative left offset', () => { const rectForRight: DOMRect = { ...parentRect, left: 50, right: 990 }; - directive.setLeftOffset(50, rectForRight, 1000); + const result: number = directive.calculateLeftOffset(50, rectForRight, 1000); - expect(directive.leftOffset).toBe(-15); + expect(result).toBe(-15); }); it('should set 0 offset', () => { const rectForStandard: DOMRect = { ...parentRect, left: 50, right: 500 }; - directive.setLeftOffset(36, rectForStandard, 1000); + const result: number = directive.calculateLeftOffset(36, rectForStandard, 1000); - expect(directive.leftOffset).toBe(0); + expect(result).toBe(0); }); }); describe('setTooltipOffsetAndPosition', () => { beforeEach(() => { directive.setAutoPosition = jest.fn(); - directive.setLeftOffset = jest.fn(); + directive.calculateLeftOffset = jest.fn(); directive.componentRef = Object.assign(mockComponentRef, { location: { nativeElement: { children: [{ getBoundingClientRect: jest.fn().mockReturnValue({ height: 100, width: 200 }) }] }, @@ -385,10 +386,10 @@ describe('TooltipDirective', () => { expect(directive.setAutoPosition).toHaveBeenCalledWith(100, {}, 404); }); - it('should set tooltip left offset', () => { + it('should calculate^ tooltip left offset', () => { directive.setTooltipOffsetAndPosition(); - expect(directive.setLeftOffset).toHaveBeenCalledWith(200, {}, 503); + expect(directive.calculateLeftOffset).toHaveBeenCalledWith(200, {}, 503); }); }); diff --git a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts index e4650402b1f090849c9f5827c9482c7de107b3cd..f3ebffb59c5e537bb7db06a6e263327369aa642e 100644 --- a/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts +++ b/alfa-client/libs/design-system/src/lib/tooltip/tooltip.directive.ts @@ -167,32 +167,29 @@ export class TooltipDirective implements OnDestroy { this.position = this.tooltipPosition; } - setLeftOffset(tooltipWidth: number, parentRect: DOMRect, windowWidth: number): void { + calculateLeftOffset(tooltipWidth: number, parentRect: DOMRect, windowWidth: number): number { const { left, right, width } = parentRect; const halfTooltipWidth: number = tooltipWidth / 2; if (tooltipWidth < width) { - this.leftOffset = 0; - return; + return 0; } if (halfTooltipWidth > left) { - this.leftOffset = halfTooltipWidth - left; - return; + return halfTooltipWidth - left; } if (halfTooltipWidth > windowWidth - right) { - this.leftOffset = windowWidth - right - halfTooltipWidth; - return; + return windowWidth - right - halfTooltipWidth; } - this.leftOffset = 0; + return 0; } setTooltipOffsetAndPosition(): void { const { width, height } = this.componentRef.location.nativeElement.children[0].getBoundingClientRect(); const parentRect: DOMRect = this.elementRef.nativeElement.getBoundingClientRect(); - this.setLeftOffset(width, parentRect, window.innerWidth); + this.leftOffset = this.calculateLeftOffset(width, parentRect, window.innerWidth); this.setAutoPosition(height, parentRect, window.innerHeight); }