import 'reflect-metadata'; import { ElementRef, } from '@angular/core'; import { AdjustValueBarComponent, } from './adjust-value-bar.component'; const initAdjustValueBarComponent = () => { return new AdjustValueBarComponent(); }; describe('ngOnChanges', () => { // tslint:disable-next-line test('Sets value to the expected value', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.minValue = 10; adjustValueBarComponent.maxValue = 20; adjustValueBarComponent.value = 15; adjustValueBarComponent.ngOnChanges(); expect(adjustValueBarComponent.percentOfTotal) .toBe(0.5); }); }); describe('getTogglePercent', () => { // tslint:disable-next-line test('Returns the expected toggle percent', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.percentOfTotal = 0.5; const togglePercent = adjustValueBarComponent.getTogglePercent(); expect( togglePercent, ).toBe('50%'); }); }); describe('emitNewValue', () => { // tslint:disable-next-line test('Emits the correct value to onChange when the minimum value is 0', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.onChange.emit = jest.fn(); adjustValueBarComponent.minValue = 0; adjustValueBarComponent.maxValue = 200; adjustValueBarComponent.percentOfTotal = 0.4; adjustValueBarComponent.emitNewValue(); expect( adjustValueBarComponent.onChange.emit, ).toHaveBeenCalledWith(80); }); // tslint:disable-next-line test('Emits the correct value to onChange when the minimum value is greater than 0', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.onChange.emit = jest.fn(); adjustValueBarComponent.minValue = 100; adjustValueBarComponent.maxValue = 200; adjustValueBarComponent.percentOfTotal = 0.4; adjustValueBarComponent.emitNewValue(); expect( adjustValueBarComponent.onChange.emit, ).toHaveBeenCalledWith(140); }); }); describe('updateTogglePosition', () => { const initAdjustValueBarElement = ({ left, width, }: { left: number, width: number, }) => { const adjustValueBarElement = { nativeElement: {}, } as ElementRef; adjustValueBarElement.nativeElement .getBoundingClientRect = jest.fn() .mockReturnValue({ left, width, }); return adjustValueBarElement; }; // tslint:disable-next-line test('Sets percentOfTotal to the percent along the adjustValueBarElement the click appears', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.adjustValueBarElement = { nativeElement: {}, }; adjustValueBarComponent.adjustValueBarElement = initAdjustValueBarElement({ left: 0, width: 100, }); const event = { pageX: 40, } as MouseEvent; adjustValueBarComponent.percentOfTotal = 0; adjustValueBarComponent.emitNewValue = jest.fn(); adjustValueBarComponent.updateTogglePosition(event); expect( adjustValueBarComponent.percentOfTotal, ).toBe(0.4); }); // tslint:disable-next-line test('Sets percentOfTotal to 1 if the click is to the right of the adjustValueBarElement', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.adjustValueBarElement = { nativeElement: {}, }; adjustValueBarComponent.adjustValueBarElement = initAdjustValueBarElement({ left: 50, width: 100, }); const event = { pageX: 200, } as MouseEvent; adjustValueBarComponent.percentOfTotal = 0; adjustValueBarComponent.emitNewValue = jest.fn(); adjustValueBarComponent.updateTogglePosition(event); expect( adjustValueBarComponent.percentOfTotal, ).toBe(1); }); // tslint:disable-next-line test('Sets percentOfTotal to 0 if the click is to the left of the adjustValueBarElement', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.adjustValueBarElement = { nativeElement: {}, }; adjustValueBarComponent.adjustValueBarElement = initAdjustValueBarElement({ left: 50, width: 100, }); const event = { pageX: 10, } as MouseEvent; adjustValueBarComponent.percentOfTotal = 0; adjustValueBarComponent.emitNewValue = jest.fn(); adjustValueBarComponent.updateTogglePosition(event); expect( adjustValueBarComponent.percentOfTotal, ).toBe(0); }); // tslint:disable-next-line test('Calls emitNewValue', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.adjustValueBarElement = { nativeElement: {}, }; adjustValueBarComponent.adjustValueBarElement = initAdjustValueBarElement({ left: 50, width: 100, }); const event = { pageX: 10, } as MouseEvent; adjustValueBarComponent.emitNewValue = jest.fn(); adjustValueBarComponent.updateTogglePosition(event); expect( adjustValueBarComponent.emitNewValue, ).toHaveBeenCalled(); }); }); describe('dragStart', () => { // tslint:disable-next-line test('Sets isDragging to true', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.isDragging = false; adjustValueBarComponent.dragStart(); expect( adjustValueBarComponent.isDragging, ).toBe(true); }); }); describe('dragMove', () => { // tslint:disable-next-line test('If isDragging is true it calls updateTogglePosition with the event passed as an argument', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.isDragging = true; adjustValueBarComponent.updateTogglePosition = jest.fn(); const event = {} as MouseEvent; adjustValueBarComponent.dragMove(event); expect( adjustValueBarComponent.updateTogglePosition, ).toHaveBeenCalledWith(event); }); // tslint:disable-next-line test('If isDragging is false it does not call updateTogglePosition', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.isDragging = false; adjustValueBarComponent.updateTogglePosition = jest.fn(); adjustValueBarComponent.dragMove( {} as MouseEvent, ); expect( adjustValueBarComponent.updateTogglePosition, ).not.toHaveBeenCalled(); }); }); describe('dragEnd', () => { // tslint:disable-next-line test('Calls dragMove with the event passed as an argument', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.isDragging = false; adjustValueBarComponent.dragMove = jest.fn(); const event = {} as MouseEvent; adjustValueBarComponent.dragEnd(event); expect( adjustValueBarComponent.dragMove, ).toHaveBeenCalledWith(event); }); // tslint:disable-next-line test('Sets isDragging to false', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.isDragging = true; adjustValueBarComponent.dragMove = jest.fn(); adjustValueBarComponent.dragEnd( {} as MouseEvent, ); expect( adjustValueBarComponent.isDragging, ).toBe(false); }); }); describe('handleLeftButtonClick', () => { // tslint:disable-next-line test('If onLeftButtonClick has some observers, call onLeftButtonClick.emit', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.onLeftButtonClick.subscribe(); adjustValueBarComponent.onLeftButtonClick.emit = jest.fn(); adjustValueBarComponent.handleLeftButtonClick(); expect( adjustValueBarComponent.onLeftButtonClick.emit, ).toHaveBeenCalled(); }); test('If onLeftButtonClick has no observers, call adjustBarDown', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.adjustBarDown = jest.fn(); adjustValueBarComponent.handleLeftButtonClick(); expect( adjustValueBarComponent.adjustBarDown, ).toHaveBeenCalled(); }); }); describe('handleRightButtonClick', () => { // tslint:disable-next-line test('If onRightButtonClick has some observers, call onRightButtonClick.emit', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.onRightButtonClick.subscribe(); adjustValueBarComponent.onRightButtonClick.emit = jest.fn(); adjustValueBarComponent.handleRightButtonClick(); expect( adjustValueBarComponent.onRightButtonClick.emit, ).toHaveBeenCalled(); }); test('If onRightButtonClick has no observers, call adjustBarUp', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.adjustBarUp = jest.fn(); adjustValueBarComponent.handleRightButtonClick(); expect( adjustValueBarComponent.adjustBarUp, ).toHaveBeenCalled(); }); }); describe('adjustBarDown', () => { // tslint:disable-next-line test('Sets percentOfTotal to the correct value', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.emitNewValue = jest.fn(); adjustValueBarComponent.maxValue = 50; adjustValueBarComponent.buttonSteps = 2; adjustValueBarComponent.percentOfTotal = 0.50; adjustValueBarComponent.adjustBarDown(); expect(adjustValueBarComponent.percentOfTotal) .toBe(0.46); }); // tslint:disable-next-line test('Calls emitNewValue', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.emitNewValue = jest.fn(); adjustValueBarComponent.maxValue = 50; adjustValueBarComponent.buttonSteps = 2; adjustValueBarComponent.percentOfTotal = 0.50; adjustValueBarComponent.adjustBarDown(); expect(adjustValueBarComponent.emitNewValue) .toHaveBeenCalled(); }); test('Sets percentOfTotal to 0 if its less than 0', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.emitNewValue = jest.fn(); adjustValueBarComponent.percentOfTotal = -1.5; adjustValueBarComponent.adjustBarDown(); expect(adjustValueBarComponent.percentOfTotal) .toBe(0); }); }); describe('adjustBarUp', () => { // tslint:disable-next-line test('Sets percentOfTotal to the correct value', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.emitNewValue = jest.fn(); adjustValueBarComponent.maxValue = 200; adjustValueBarComponent.buttonSteps = 50; adjustValueBarComponent.percentOfTotal = 0.25; adjustValueBarComponent.adjustBarUp(); expect(adjustValueBarComponent.percentOfTotal) .toBe(0.5); }); // tslint:disable-next-line test('Calls emitNewValue', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.emitNewValue = jest.fn(); adjustValueBarComponent.adjustBarUp(); expect(adjustValueBarComponent.emitNewValue) .toHaveBeenCalled(); }); test('Sets percentOfTotal to 1 if its higher than 1', () => { const adjustValueBarComponent = initAdjustValueBarComponent(); adjustValueBarComponent.emitNewValue = jest.fn(); adjustValueBarComponent.percentOfTotal = 1.5; adjustValueBarComponent.adjustBarUp(); expect(adjustValueBarComponent.percentOfTotal) .toBe(1); }); });