vijay06
Version:
awesome ngx mask
583 lines (497 loc) • 20 kB
text/typescript
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { By } from '@angular/platform-browser';
import { DebugElement } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { NgxMaskModule } from '../lib/ngx-mask.module';
import { TestMaskComponent } from './utils/test-component.component';
import { equal, typeTest } from './utils/test-functions.component';
describe('Separator: Mask', () => {
let fixture: ComponentFixture<TestMaskComponent>;
let component: TestMaskComponent;
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [TestMaskComponent],
imports: [ReactiveFormsModule, NgxMaskModule.forRoot()],
});
fixture = TestBed.createComponent(TestMaskComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('separator for empty', () => {
component.mask = 'separator';
equal('', '', fixture);
});
it('separator for 100', () => {
component.mask = 'separator';
equal('100', '100', fixture);
});
it('separator for -100', () => {
component.mask = 'separator';
component.allowNegativeNumbers = true;
equal('-100', '-100', fixture);
});
it('separator for 1000', () => {
component.mask = 'separator';
equal('1000', '1 000', fixture);
});
it('separator for -1000', () => {
component.mask = 'separator';
component.allowNegativeNumbers = true;
equal('-1000', '-1 000', fixture);
});
it('separator for 10000', () => {
component.mask = 'separator';
equal('10000', '10 000', fixture);
});
it('separator for -10000', () => {
component.mask = 'separator';
component.allowNegativeNumbers = true;
equal('-10000', '-10 000', fixture);
});
it('separator for -100000', () => {
component.mask = 'separator';
component.allowNegativeNumbers = true;
equal('-100000', '-100 000', fixture);
});
it('separator for 100000', () => {
component.mask = 'separator';
equal('100000', '100 000', fixture);
});
it('separator for 1000000', () => {
component.mask = 'separator';
equal('1000000', '1 000 000', fixture);
});
it('separator for -1000000', () => {
component.mask = 'separator';
component.allowNegativeNumbers = true;
equal('-1000000', '-1 000 000', fixture);
});
it('should limit separator to 1000', () => {
component.mask = 'separator';
component.separatorLimit = '1000';
equal('1000000', '1 000', fixture);
});
it('separator precision 2 for 1000000.00', () => {
component.mask = 'separator.2';
equal('1000000.00', '1 000 000.00', fixture);
});
it('separator precision 2 for -1000000.00', () => {
component.mask = 'separator.2';
component.allowNegativeNumbers = true;
equal('-1000000.00', '-1 000 000.00', fixture);
});
it('should limit separator with precision 2 to 10000', () => {
component.mask = 'separator.2';
component.separatorLimit = '10000';
equal('1000000.00', '10 000.00', fixture);
});
it('should limit separator with precision 2 to 10 000', () => {
component.mask = 'separator.2';
component.separatorLimit = '10 000';
equal('1000000.00', '10 000.00', fixture);
});
it('separator precision 0 for 1000000.00', () => {
component.mask = 'separator.0';
equal('1000000.00', '1 000 000', fixture);
});
it('separator precision 2 with 0 after point for 1000000.00', () => {
component.mask = 'separator.2';
equal('1000000.20', '1 000 000.20', fixture);
});
it('separator.2 with suffix', () => {
component.mask = 'separator.2';
component.suffix = '₽';
equal('50', '50₽', fixture);
equal('123 4', '1 234₽', fixture);
equal('50.50', '50.50₽', fixture);
});
it('separator for letters', () => {
component.mask = 'separator';
equal('a', '', fixture);
equal('1a', '1', fixture);
equal('1000a', '1 000', fixture);
equal('1000/', '1 000', fixture);
});
it('separator thousandSeparator . for 1000000', () => {
component.mask = 'separator';
component.thousandSeparator = '.';
equal('1000000', '1.000.000', fixture);
});
it('should not add any sperator if thousandSeparator set as empty string', () => {
component.mask = 'separator';
component.thousandSeparator = '';
equal('1000000', '1000000', fixture);
});
it('should not accept more than one minus signal at the beginning of input for separator thousandSeparator . for --1000', () => {
component.mask = 'separator';
component.thousandSeparator = '.';
component.allowNegativeNumbers = true;
equal('--1000', '-1.000', fixture);
});
it('should not accept more than one minus signal for separator thousandSeparator . for -100-0000', () => {
component.mask = 'separator';
component.thousandSeparator = '.';
component.allowNegativeNumbers = true;
equal('-100-0000', '-1.000.000', fixture);
});
it('should limit separator thousandSeparator . to 100000', () => {
component.mask = 'separator';
component.thousandSeparator = '.';
component.separatorLimit = '100000';
equal('1000000', '100.000', fixture);
});
it('should limit separator thousandSeparator . to -100000', () => {
component.mask = 'separator';
component.thousandSeparator = '.';
component.separatorLimit = '100000';
component.allowNegativeNumbers = true;
equal('-1000000', '-100.000', fixture);
});
it('separator thousandSeparator . precision 2 for 1000000.00', () => {
component.mask = 'separator.2';
component.thousandSeparator = '.';
equal('1000000,00', '1.000.000,00', fixture);
});
it('separator thousandSeparator . precision 2 for -1000000.00', () => {
component.mask = 'separator.2';
component.thousandSeparator = '.';
component.allowNegativeNumbers = true;
equal('-1000000,00', '-1.000.000,00', fixture);
});
it('separator thousandSeparator . precision 2 with 0 after point for 1000000.00', () => {
component.mask = 'separator.2';
component.thousandSeparator = '.';
equal('1000000,20', '1.000.000,20', fixture);
});
it('separator thousandSeparator . precision 0 for 1000000.00', () => {
component.mask = 'separator.0';
component.thousandSeparator = '.';
equal('1000000,00', '1.000.000', fixture);
});
it('separator thousandSeparator , for 1000000', () => {
component.mask = 'separator';
component.thousandSeparator = ',';
equal('1000000', '1,000,000', fixture);
});
it('separator thousandSeparator , precision 2 for 1000000.00', () => {
component.mask = 'separator.2';
component.thousandSeparator = ',';
equal('1000000.00', '1,000,000.00', fixture);
});
it('separator thousandSeparator , precision 2 with 0 after point for 1000000.00', () => {
component.mask = 'separator.2';
component.thousandSeparator = ',';
equal('1000000.20', '1,000,000.20', fixture);
});
it('separator thousandSeparator , precision 0 for 1000000.00', () => {
component.mask = 'separator.0';
component.thousandSeparator = ',';
equal('1000000.00', '1,000,000', fixture);
});
it(`separator thousandSeparator ' for 1000000`, () => {
component.mask = 'separator';
component.thousandSeparator = `'`;
equal('1000000', `1'000'000`, fixture);
});
it(`separator thousandSeparator ' precision 2 for 1000000.00`, () => {
component.mask = 'separator.2';
component.thousandSeparator = `'`;
equal('1000000.00', `1'000'000.00`, fixture);
});
it(`separator thousandSeparator ' precision 2 with 0 after point for 1000000.00`, () => {
component.mask = 'separator.2';
component.thousandSeparator = `'`;
equal('1000000.20', `1'000'000.20`, fixture);
});
it(`separator thousandSeparator ' precision 0 for 1000000.00`, () => {
component.mask = 'separator.0';
component.thousandSeparator = `'`;
equal('1000000.00', `1'000'000`, fixture);
});
it('should not shift cursor for input in-between digits', () => {
component.mask = 'separator.0';
component.thousandSeparator = ',';
const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
fixture.detectChanges();
inputTarget.value = '1,5000,000';
inputTarget.selectionStart = 3;
inputTarget.selectionEnd = 3;
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('15,000,000');
expect(inputTarget.selectionStart).toEqual(3);
});
it('should not shift cursor for input in-between digits', () => {
component.mask = 'separator.0';
component.thousandSeparator = '.';
const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
fixture.detectChanges();
inputTarget.value = '1.5000.000';
inputTarget.selectionStart = 3;
inputTarget.selectionEnd = 3;
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('15.000.000');
expect(inputTarget.selectionStart).toEqual(3);
});
it('should not shift cursor for input in-between digits', () => {
component.mask = 'separator.2';
component.thousandSeparator = ',';
const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
fixture.detectChanges();
inputTarget.value = '1,5000,000.00';
inputTarget.selectionStart = 3;
inputTarget.selectionEnd = 3;
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('15,000,000.00');
expect(inputTarget.selectionStart).toEqual(3);
});
it('should not shift cursor for input in-between digits', () => {
component.mask = 'separator.2';
component.thousandSeparator = '.';
const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
fixture.detectChanges();
inputTarget.value = '1.5000.000,00';
inputTarget.selectionStart = 3;
inputTarget.selectionEnd = 3;
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('15.000.000,00');
expect(inputTarget.selectionStart).toEqual(3);
});
it('should not shift cursor for input in-between digits', () => {
component.mask = 'separator';
component.thousandSeparator = ',';
const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
fixture.detectChanges();
inputTarget.value = '1,5000,000.000';
inputTarget.selectionStart = 3;
inputTarget.selectionEnd = 3;
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('15,000,000.000');
expect(inputTarget.selectionStart).toEqual(3);
});
it('should not shift cursor for input in-between digits', () => {
component.mask = 'separator';
component.thousandSeparator = '.';
const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
fixture.detectChanges();
inputTarget.value = '1.5000.000,000';
inputTarget.selectionStart = 3;
inputTarget.selectionEnd = 3;
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('15.000.000,000');
expect(inputTarget.selectionStart).toEqual(3);
});
it('should not shift cursor for backspace on in-between digits', () => {
component.mask = 'separator.0';
component.thousandSeparator = ',';
const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
fixture.detectChanges();
inputTarget.value = '1,234,67';
inputTarget.selectionStart = 6;
inputTarget.selectionEnd = 6;
debugElement.triggerEventHandler('keydown', {
code: 'Backspace',
keyCode: 8,
target: inputTarget,
});
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('123,467');
expect(inputTarget.selectionStart).toEqual(4);
});
it('should not shift cursor for backspace on in-between digits', () => {
component.mask = 'separator.0';
component.thousandSeparator = '.';
const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
fixture.detectChanges();
inputTarget.value = '1.234.67';
inputTarget.selectionStart = 6;
inputTarget.selectionEnd = 6;
debugElement.triggerEventHandler('keydown', {
code: 'Backspace',
keyCode: 8,
target: inputTarget,
});
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('123.467');
expect(inputTarget.selectionStart).toEqual(4);
});
it('should not shift cursor for backspace on in-between digits', () => {
component.mask = 'separator.2';
component.thousandSeparator = ',';
const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
fixture.detectChanges();
inputTarget.value = '1,234,67.00';
inputTarget.selectionStart = 8;
inputTarget.selectionEnd = 8;
debugElement.triggerEventHandler('keydown', {
code: 'Backspace',
keyCode: 8,
target: inputTarget,
});
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('123,467.00');
expect(inputTarget.selectionStart).toEqual(7);
});
it('should not shift cursor for backspace on in-between digits', () => {
component.mask = 'separator.2';
component.thousandSeparator = '.';
const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
fixture.detectChanges();
inputTarget.value = '1.234.67,00';
inputTarget.selectionStart = 8;
inputTarget.selectionEnd = 8;
debugElement.triggerEventHandler('keydown', {
code: 'Backspace',
keyCode: 8,
target: inputTarget,
});
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('123.467,00');
expect(inputTarget.selectionStart).toEqual(7);
});
it('should not shift cursor on backspace when result has no separator', () => {
component.mask = 'separator.0';
component.thousandSeparator = ',';
const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
fixture.detectChanges();
inputTarget.value = '1,34';
inputTarget.selectionStart = 2;
inputTarget.selectionEnd = 2;
debugElement.triggerEventHandler('keydown', {
code: 'Backspace',
keyCode: 8,
target: inputTarget,
});
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('134');
expect(inputTarget.selectionStart).toEqual(0);
});
it('caret should remain in position when deleting the first digit', () => {
component.mask = 'separator';
component.thousandSeparator = ',';
const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
fixture.detectChanges();
inputTarget.value = '1,000';
inputTarget.selectionStart = 0;
inputTarget.selectionEnd = 0;
debugElement.triggerEventHandler('input', { target: inputTarget });
debugElement.triggerEventHandler('keydown', {
code: 'Delete',
keyCode: 46,
target: inputTarget,
});
expect(inputTarget.selectionStart).toEqual(0);
});
it('cursor should move forward if the input starts with -, or 0, or 0.0, or 0.00, or 0.0000000', () => {
component.mask = 'separator.8';
component.specialCharacters = [',', '.'];
component.allowNegativeNumbers = true;
component.form.setValue(0.723);
const debugElement: DebugElement = fixture.debugElement.query(By.css('input'));
const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement;
spyOnProperty(document, 'activeElement').and.returnValue(inputTarget);
fixture.detectChanges();
inputTarget.value = '0';
inputTarget.selectionStart = 1;
inputTarget.selectionEnd = 1;
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('0');
expect(inputTarget.selectionStart).toEqual(1);
inputTarget.value = '-';
inputTarget.selectionStart = 1;
inputTarget.selectionEnd = 1;
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('-');
expect(inputTarget.selectionStart).toEqual(1);
inputTarget.value = '0.0';
inputTarget.selectionStart = 3;
inputTarget.selectionEnd = 3;
debugElement.triggerEventHandler('input', { target: inputTarget });
expect(inputTarget.value).toBe('0.0');
expect(inputTarget.selectionStart).toEqual(3);
});
it('Should work right when reset decimalMarker', () => {
component.mask = 'separator.2';
component.decimalMarker = ',';
equal('1000000,00', '1 000 000,00', fixture);
});
it('separator precision 2 with thousandSeparator (.) decimalMarker (,) for 12345.67', () => {
component.mask = 'separator.2';
component.thousandSeparator = '.';
component.decimalMarker = ',';
equal('12.345,67', '12.345,67', fixture);
});
it('separator precision 2 with thousandSeparator (.) decimalMarker (,) for 12345.67', () => {
component.mask = 'separator.2';
component.thousandSeparator = '.';
component.decimalMarker = ',';
equal('12345,67', '12.345,67', fixture);
});
it('check formControl value to be number when decimalMarker is comma', () => {
component.mask = 'separator.2';
component.thousandSeparator = ' ';
component.decimalMarker = ',';
typeTest('12 345,67', fixture);
expect(component.form.value).toBe('12345.67');
});
it('check formControl value to be number when decimalMarker is array', () => {
component.mask = 'separator.2';
component.thousandSeparator = ' ';
component.decimalMarker = ['.', ','];
typeTest('12 345,67', fixture);
expect(component.form.value).toBe('12345.67');
typeTest('123 456.78', fixture);
expect(component.form.value).toBe('123456.78');
});
it('right handle character after first 0 value', () => {
component.mask = 'separator';
component.decimalMarker = ',';
equal('0', '0', fixture);
equal('0,', '0,', fixture);
equal('0 ', '0', fixture);
equal('01', '0', fixture);
equal('0s', '0', fixture);
equal('0@', '0', fixture);
// TODO(inepipenko): strange thet return 0.
// equal('0.', '0', fixture);
component.decimalMarker = '.';
equal('0', '0', fixture);
equal('0.', '0.', fixture);
equal('0 ', '0', fixture);
equal('01', '0', fixture);
equal('0s', '0', fixture);
equal('0@', '0', fixture);
equal('0,', '0', fixture);
component.decimalMarker = ['.', ','];
equal('0', '0', fixture);
equal('0.', '0.', fixture);
equal('0,', '0,', fixture);
equal('0 ', '0', fixture);
equal('01', '0', fixture);
equal('0s', '0', fixture);
equal('0@', '0', fixture);
});
});