From 8305b2128c660827e92d58e95998dff87a8f81f9 Mon Sep 17 00:00:00 2001 From: Giacomo Ferlaino Date: Fri, 13 Mar 2020 00:52:56 +0100 Subject: [PATCH] feat: Added setFontSize method unit tests --- src/lib/directives/ng2-fittext.directive.ts | 21 +++-- .../specs/ng2-fittext.directive.spec.ts | 90 +++++++++++++++++++ 2 files changed, 104 insertions(+), 7 deletions(-) create mode 100644 src/lib/directives/specs/ng2-fittext.directive.spec.ts diff --git a/src/lib/directives/ng2-fittext.directive.ts b/src/lib/directives/ng2-fittext.directive.ts index 3d7b7e6..3b7813a 100644 --- a/src/lib/directives/ng2-fittext.directive.ts +++ b/src/lib/directives/ng2-fittext.directive.ts @@ -29,7 +29,7 @@ export class Ng2FittextDirective @Input('modelToWatch') modelToWatch: any; - @Output() fontSizeChanged = new EventEmitter(); + @Output() fontSizeChanged: EventEmitter = new EventEmitter(); private fontSize = 1000; private speed = 1.05; @@ -37,24 +37,27 @@ export class Ng2FittextDirective constructor(public el: ElementRef, public renderer: Renderer2) {} - setFontSize(fontSize: number) { - if (this.isVisible() && !this.done) { + setFontSize(fontSize: number): void { + if (this.isVisible() && !this.isDone()) { if (fontSize < this.minFontSize) { fontSize = this.minFontSize; } if (fontSize > this.maxFontSize) { fontSize = this.maxFontSize; } - this.fontSize = fontSize; this.fontSizeChanged.emit(fontSize); - return this.el.nativeElement.style.setProperty( + this.el.nativeElement.style.setProperty( 'font-size', fontSize.toString() + 'px' ); } } + getFontSize(): number { + return this.fontSize; + } + calculateFontSize(fontSize: number, speed: number) { return Math.floor(fontSize / speed); } @@ -95,7 +98,7 @@ export class Ng2FittextDirective } ngAfterViewInit() { - if (this.isVisible() && !this.done) { + if (this.isVisible() && !this.isDone()) { if (this.fittext) { const overflow = this.container ? this.checkOverflow(this.container, this.el.nativeElement) @@ -146,7 +149,11 @@ export class Ng2FittextDirective : this.el.nativeElement.parentElement.clientWidth; } - private isVisible(): boolean { + isDone(): boolean { + return this.done; + } + + isVisible(): boolean { return this.getStartFontSizeFromHeight() > 0; } } diff --git a/src/lib/directives/specs/ng2-fittext.directive.spec.ts b/src/lib/directives/specs/ng2-fittext.directive.spec.ts new file mode 100644 index 0000000..467e56c --- /dev/null +++ b/src/lib/directives/specs/ng2-fittext.directive.spec.ts @@ -0,0 +1,90 @@ +import { Ng2FittextDirective } from '../ng2-fittext.directive'; +import { Renderer2, ElementRef } from '@angular/core'; + +describe('Class: Ng2FittextDirective', () => { + let ng2FittextDirective: Ng2FittextDirective; + let elMock: ElementRef; + let rendererMock: Renderer2; + + beforeEach(() => { + elMock = {} as ElementRef; + rendererMock = {} as Renderer2; + ng2FittextDirective = new Ng2FittextDirective(elMock, rendererMock); + }); + + describe('Method: setFontSize', () => { + let newFontSize: number; + let isVisibleSpy: jasmine.Spy; + let isDoneSpy: jasmine.Spy; + + beforeEach(() => { + newFontSize = 100; + isVisibleSpy = spyOn(ng2FittextDirective, 'isVisible').and.returnValue( + true + ); + isDoneSpy = spyOn(ng2FittextDirective, 'isDone').and.returnValue(false); + elMock.nativeElement = { + style: { + setProperty: () => {}, + }, + }; + }); + + it('Should not change the font size if the element is not visible', () => { + isVisibleSpy.and.returnValue(false); + const previousFontSize: number = ng2FittextDirective.getFontSize(); + ng2FittextDirective.setFontSize(newFontSize); + expect(ng2FittextDirective.getFontSize()).toEqual(previousFontSize); + }); + + it('Should not change the font size if the fitting operation is done', () => { + isDoneSpy.and.returnValue(true); + const previousFontSize: number = ng2FittextDirective.getFontSize(); + ng2FittextDirective.setFontSize(newFontSize); + expect(ng2FittextDirective.getFontSize()).toEqual(previousFontSize); + }); + + it('Should use the minFontSize property value if the specified font size is smaller', () => { + const minFontSize: number = ng2FittextDirective.minFontSize; + newFontSize = 5; + ng2FittextDirective.setFontSize(newFontSize); + const currentFontSize: number = ng2FittextDirective.getFontSize(); + expect(currentFontSize).toEqual(minFontSize); + }); + + it('Should use the maxFontSize property value if the specified font size is bigger', () => { + const maxFontSize: number = ng2FittextDirective.maxFontSize; + newFontSize = 1001; + ng2FittextDirective.setFontSize(newFontSize); + const currentFontSize: number = ng2FittextDirective.getFontSize(); + expect(currentFontSize).toEqual(maxFontSize); + }); + + it('Should set a new fontSize value', () => { + newFontSize = 500; + ng2FittextDirective.setFontSize(newFontSize); + const currentFontSize: number = ng2FittextDirective.getFontSize(); + expect(currentFontSize).toEqual(newFontSize); + }); + + it('Should emit the font size change', () => { + newFontSize = 500; + spyOn(ng2FittextDirective.fontSizeChanged, 'emit'); + ng2FittextDirective.setFontSize(newFontSize); + const currentFontSize: number = ng2FittextDirective.getFontSize(); + expect(ng2FittextDirective.fontSizeChanged.emit).toHaveBeenCalledWith( + newFontSize + ); + }); + + it('Should update the nativeElement with the new font size', () => { + newFontSize = 500; + spyOn(ng2FittextDirective.el.nativeElement.style, 'setProperty'); + ng2FittextDirective.setFontSize(newFontSize); + const currentFontSize: number = ng2FittextDirective.getFontSize(); + expect( + ng2FittextDirective.el.nativeElement.style.setProperty + ).toHaveBeenCalledWith('font-size', `${newFontSize}px`); + }); + }); +});