feat: Added setFontSize method unit tests
This commit is contained in:
parent
889b0364a9
commit
e54f881e55
2 changed files with 104 additions and 7 deletions
|
|
@ -29,7 +29,7 @@ export class Ng2FittextDirective
|
||||||
|
|
||||||
@Input('modelToWatch') modelToWatch: any;
|
@Input('modelToWatch') modelToWatch: any;
|
||||||
|
|
||||||
@Output() fontSizeChanged = new EventEmitter();
|
@Output() fontSizeChanged: EventEmitter<any> = new EventEmitter();
|
||||||
|
|
||||||
private fontSize = 1000;
|
private fontSize = 1000;
|
||||||
private speed = 1.05;
|
private speed = 1.05;
|
||||||
|
|
@ -37,24 +37,27 @@ export class Ng2FittextDirective
|
||||||
|
|
||||||
constructor(public el: ElementRef, public renderer: Renderer2) {}
|
constructor(public el: ElementRef, public renderer: Renderer2) {}
|
||||||
|
|
||||||
setFontSize(fontSize: number) {
|
setFontSize(fontSize: number): void {
|
||||||
if (this.isVisible() && !this.done) {
|
if (this.isVisible() && !this.isDone()) {
|
||||||
if (fontSize < this.minFontSize) {
|
if (fontSize < this.minFontSize) {
|
||||||
fontSize = this.minFontSize;
|
fontSize = this.minFontSize;
|
||||||
}
|
}
|
||||||
if (fontSize > this.maxFontSize) {
|
if (fontSize > this.maxFontSize) {
|
||||||
fontSize = this.maxFontSize;
|
fontSize = this.maxFontSize;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.fontSize = fontSize;
|
this.fontSize = fontSize;
|
||||||
this.fontSizeChanged.emit(fontSize);
|
this.fontSizeChanged.emit(fontSize);
|
||||||
return this.el.nativeElement.style.setProperty(
|
this.el.nativeElement.style.setProperty(
|
||||||
'font-size',
|
'font-size',
|
||||||
fontSize.toString() + 'px'
|
fontSize.toString() + 'px'
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getFontSize(): number {
|
||||||
|
return this.fontSize;
|
||||||
|
}
|
||||||
|
|
||||||
calculateFontSize(fontSize: number, speed: number) {
|
calculateFontSize(fontSize: number, speed: number) {
|
||||||
return Math.floor(fontSize / speed);
|
return Math.floor(fontSize / speed);
|
||||||
}
|
}
|
||||||
|
|
@ -95,7 +98,7 @@ export class Ng2FittextDirective
|
||||||
}
|
}
|
||||||
|
|
||||||
ngAfterViewInit() {
|
ngAfterViewInit() {
|
||||||
if (this.isVisible() && !this.done) {
|
if (this.isVisible() && !this.isDone()) {
|
||||||
if (this.fittext) {
|
if (this.fittext) {
|
||||||
const overflow = this.container
|
const overflow = this.container
|
||||||
? this.checkOverflow(this.container, this.el.nativeElement)
|
? this.checkOverflow(this.container, this.el.nativeElement)
|
||||||
|
|
@ -146,7 +149,11 @@ export class Ng2FittextDirective
|
||||||
: this.el.nativeElement.parentElement.clientWidth;
|
: this.el.nativeElement.parentElement.clientWidth;
|
||||||
}
|
}
|
||||||
|
|
||||||
private isVisible(): boolean {
|
isDone(): boolean {
|
||||||
|
return this.done;
|
||||||
|
}
|
||||||
|
|
||||||
|
isVisible(): boolean {
|
||||||
return this.getStartFontSizeFromHeight() > 0;
|
return this.getStartFontSizeFromHeight() > 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
90
src/lib/directives/specs/ng2-fittext.directive.spec.ts
Normal file
90
src/lib/directives/specs/ng2-fittext.directive.spec.ts
Normal file
|
|
@ -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`);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
Loading…
Add table
Add a link
Reference in a new issue