From 14028dfe262ebb8e6259f4d9b0731b6c3d1adf59 Mon Sep 17 00:00:00 2001 From: andriikamaldinov1 Date: Fri, 29 Nov 2024 11:28:07 +0200 Subject: [PATCH] feat(ref: no-ref): change tests to signals --- .../src/lib/ngx-mask.directive.ts | 5 +- .../ngx-mask-lib/src/lib/ngx-mask.pipe.ts | 17 +- .../ngx-mask-lib/src/test/add-prefix.spec.ts | 75 +- .../ngx-mask-lib/src/test/add-suffix.spec.ts | 21 +- .../src/test/allow-negative-numbers.spec.ts | 51 +- .../ngx-mask-lib/src/test/basic-logic.spec.ts | 203 +++-- .../test/clear-if-not-match-the-mask.spec.ts | 25 +- .../src/test/complete-mask.spec.ts | 13 +- .../ngx-mask-lib/src/test/copy-paste.spec.ts | 9 +- .../ngx-mask-lib/src/test/custom-date.spec.ts | 9 +- .../src/test/custom-patterns.spec.ts | 37 +- .../src/test/custom-symbol-regexp.spec.ts | 9 +- .../src/test/default-config.spec.ts | 21 +- projects/ngx-mask-lib/src/test/delete.spec.ts | 39 +- .../src/test/drop-special-charaters.spec.ts | 51 +- .../ngx-mask-lib/src/test/dynamic.spec.ts | 43 +- .../ngx-mask-lib/src/test/export-as.spec.ts | 3 +- .../src/test/inputTransformFn.spec.ts | 87 +- .../ngx-mask-lib/src/test/mask.pipe.spec.ts | 4 +- .../ngx-mask-lib/src/test/percent.spec.ts | 131 ++- .../src/test/place-holder-character.spec.ts | 57 +- .../ngx-mask-lib/src/test/repeat-mask.spec.ts | 33 +- .../ngx-mask-lib/src/test/secure-mask.spec.ts | 99 ++- .../src/test/separator-non-en-locale.spec.ts | 39 +- .../ngx-mask-lib/src/test/separator.spec.ts | 757 +++++++++--------- .../src/test/show-mask-typed.spec.ts | 139 ++-- .../ngx-mask-lib/src/test/test-sufix.spec.ts | 31 +- .../ngx-mask-lib/src/test/time-mask.spec.ts | 163 ++-- .../src/test/trigger-on-mask-change.spec.ts | 15 +- .../ngx-mask-lib/src/test/type-number.spec.ts | 14 +- .../test/utils/test-component.component.ts | 136 ++-- .../ngx-mask-lib/src/test/validation.spec.ts | 54 +- 32 files changed, 1191 insertions(+), 1199 deletions(-) diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts index 5041b9a5..4aaa1dc4 100644 --- a/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts +++ b/projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts @@ -1,9 +1,6 @@ import { DOCUMENT } from '@angular/common'; import type { OnChanges, SimpleChanges } from '@angular/core'; -import { signal } from '@angular/core'; -import { input } from '@angular/core'; -import { output } from '@angular/core'; -import { Directive, HostListener, inject } from '@angular/core'; +import { signal, input, output, Directive, HostListener, inject } from '@angular/core'; import type { ControlValueAccessor, FormControl, diff --git a/projects/ngx-mask-lib/src/lib/ngx-mask.pipe.ts b/projects/ngx-mask-lib/src/lib/ngx-mask.pipe.ts index 6c0f34d1..98c1a76f 100644 --- a/projects/ngx-mask-lib/src/lib/ngx-mask.pipe.ts +++ b/projects/ngx-mask-lib/src/lib/ngx-mask.pipe.ts @@ -1,6 +1,5 @@ import type { PipeTransform } from '@angular/core'; -import { signal } from '@angular/core'; -import { inject, Pipe } from '@angular/core'; +import { inject, Pipe, signal } from '@angular/core'; import type { NgxMaskConfig } from './ngx-mask.config'; import { NGX_MASK_CONFIG } from './ngx-mask.config'; @@ -14,9 +13,9 @@ import { MaskExpression } from './ngx-mask-expression.enum'; }) export class NgxMaskPipe implements PipeTransform { private _maskExpressionArray = signal([]); - private mask = signal(''); + private _mask = signal(''); - private readonly defaultOptions = inject(NGX_MASK_CONFIG); + private readonly _defaultOptions = inject(NGX_MASK_CONFIG); private readonly _maskService = inject(NgxMaskService); public transform( @@ -28,7 +27,7 @@ export class NgxMaskPipe implements PipeTransform { const currentConfig = { maskExpression: mask, - ...this.defaultOptions, + ...this._defaultOptions, ...config, patterns: { ...this._maskService.patterns(), @@ -47,10 +46,10 @@ export class NgxMaskPipe implements PipeTransform { maskParts.sort((a: string, b: string) => a.length - b.length) ); this._setMask(processedValue as string); - return this._maskService.applyMask(`${processedValue}`, this.mask()); + return this._maskService.applyMask(`${processedValue}`, this._mask()); } else { this._maskExpressionArray.set([]); - return this._maskService.applyMask(`${processedValue}`, this.mask()); + return this._maskService.applyMask(`${processedValue}`, this._mask()); } } @@ -117,13 +116,13 @@ export class NgxMaskPipe implements PipeTransform { this._maskService.removeMask(value)?.length <= this._maskService.removeMask(mask)?.length; if (value && test) { - this.mask.set(mask); + this._mask.set(mask); return test; } else { const expression = this._maskExpressionArray()[this._maskExpressionArray().length - 1] ?? MaskExpression.EMPTY_STRING; - this.mask.set(expression); + this._mask.set(expression); } }); } diff --git a/projects/ngx-mask-lib/src/test/add-prefix.spec.ts b/projects/ngx-mask-lib/src/test/add-prefix.spec.ts index 21b198c2..6a277d6f 100644 --- a/projects/ngx-mask-lib/src/test/add-prefix.spec.ts +++ b/projects/ngx-mask-lib/src/test/add-prefix.spec.ts @@ -3,8 +3,7 @@ import { TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Add prefix)', () => { let fixture: ComponentFixture; @@ -21,13 +20,13 @@ describe('Directive: Mask (Add prefix)', () => { }); it('should have a prefix', () => { - component.mask = '00-000-000-00'; - component.prefix = '+7 '; + component.mask.set('00-000-000-00'); + component.prefix.set('+7 '); equal('6', '+7 6', fixture); - component.mask = '(00) 0000-0000||(00) 0 0000-0000'; - component.prefix = '+55 '; - component.showMaskTyped = true; + component.mask.set('(00) 0000-0000||(00) 0 0000-0000'); + component.prefix.set('+55 '); + component.showMaskTyped.set(true); equal('1', '+55 (1_) ____-____', fixture); equal('12', '+55 (12) ____-____', fixture); equal('123', '+55 (12) 3___-____', fixture); @@ -53,23 +52,23 @@ describe('Directive: Mask (Add prefix)', () => { equal('+55 (12) 3 4567-8901', '+55 (12) 3 4567-8901', fixture); }); it('dropSpecialCharacters false should return value with prefix', () => { - component.mask = '00-000-000-00'; - component.dropSpecialCharacters = false; - component.prefix = '+7 '; + component.mask.set('00-000-000-00'); + component.dropSpecialCharacters.set(false); + component.prefix.set('+7 '); equal('097', '+7 09-7', fixture); expect(component.form.value).toEqual('+7 09-7'); }); it('dropSpecialCharacters false should return value with suffix', () => { - component.mask = '00'; - component.dropSpecialCharacters = false; - component.suffix = '$'; + component.mask.set('00'); + component.dropSpecialCharacters.set(false); + component.suffix.set('$'); equal('97', '97$', fixture); expect(component.form.value).toEqual('97$'); }); it('should delete prefix in pasted content', () => { - component.mask = 'AAA-AAA-AAA'; - component.prefix = 'FOO-'; + component.mask.set('AAA-AAA-AAA'); + component.prefix.set('FOO-'); equal('FOO-D', 'FOO-D', fixture); equal('FOO-DD', 'FOO-DD', fixture); equal('FOO-DDD', 'FOO-DDD', fixture); @@ -83,9 +82,9 @@ describe('Directive: Mask (Add prefix)', () => { }); it('should delete prefix in pasted content', () => { - component.mask = 'AAA-AAA-AAA'; - component.prefix = 'FOO-'; - component.dropSpecialCharacters = false; + component.mask.set('AAA-AAA-AAA'); + component.prefix.set('FOO-'); + component.dropSpecialCharacters.set(false); equal('FOO-S', 'FOO-S', fixture); equal('FOO-SS', 'FOO-SS', fixture); equal('FOO-SSS', 'FOO-SSS', fixture); @@ -99,9 +98,9 @@ describe('Directive: Mask (Add prefix)', () => { }); it('should replace $ with minus', () => { - component.mask = '0000.00'; - component.prefix = '$'; - component.allowNegativeNumbers = true; + component.mask.set('0000.00'); + component.prefix.set('$'); + component.allowNegativeNumbers.set(true); equal('-1', '-$1', fixture); equal('-12', '-$12', fixture); equal('-123', '-$123', fixture); @@ -111,9 +110,9 @@ describe('Directive: Mask (Add prefix)', () => { }); it('should replace euro with minus', () => { - component.mask = '0000.00'; - component.prefix = '€'; - component.allowNegativeNumbers = true; + component.mask.set('0000.00'); + component.prefix.set('€'); + component.allowNegativeNumbers.set(true); equal('-1', '-€1', fixture); equal('-12', '-€12', fixture); equal('-123', '-€123', fixture); @@ -123,20 +122,20 @@ describe('Directive: Mask (Add prefix)', () => { }); it('should remove prefix when setValue triggerOnMaskChange = true', () => { - component.mask = '000 000'; - component.prefix = 'KZ'; - component.dropSpecialCharacters = true; - component.triggerOnMaskChange = true; + component.mask.set('000 000'); + component.prefix.set('KZ'); + component.dropSpecialCharacters.set(true); + component.triggerOnMaskChange.set(true); component.form.setValue('KZ123123'); equal('KZ123123', 'KZ123 123', fixture); expect(component.form.value).toBe('123123'); }); it('should remove prefix when setValue triggerOnMaskChange =true', () => { - component.mask = '000 000'; - component.prefix = 'KZ'; - component.dropSpecialCharacters = false; - component.triggerOnMaskChange = true; + component.mask.set('000 000'); + component.prefix.set('KZ'); + component.dropSpecialCharacters.set(false); + component.triggerOnMaskChange.set(true); component.form.setValue('KZ123123'); equal('KZ123123', 'KZ123 123', fixture); @@ -144,18 +143,18 @@ describe('Directive: Mask (Add prefix)', () => { }); it('should remove prefix when setValue triggerOnMaskChange = false', () => { - component.mask = '000 000'; - component.prefix = 'KZ'; - component.dropSpecialCharacters = true; + component.mask.set('000 000'); + component.prefix.set('KZ'); + component.dropSpecialCharacters.set(true); component.form.setValue('KZ123123'); equal('KZ123123', 'KZ123 123', fixture); expect(component.form.value).toBe('KZ123123'); }); it('should remove prefix when setValue triggerOnMaskChange = false', () => { - component.mask = '000 000'; - component.prefix = 'KZ'; - component.dropSpecialCharacters = false; + component.mask.set('000 000'); + component.prefix.set('KZ'); + component.dropSpecialCharacters.set(false); component.form.setValue('KZ123123'); equal('KZ123123', 'KZ123 123', fixture); expect(component.form.value).toBe('KZ123123'); diff --git a/projects/ngx-mask-lib/src/test/add-suffix.spec.ts b/projects/ngx-mask-lib/src/test/add-suffix.spec.ts index 1a3095b9..26b32891 100644 --- a/projects/ngx-mask-lib/src/test/add-suffix.spec.ts +++ b/projects/ngx-mask-lib/src/test/add-suffix.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Add suffix)', () => { let fixture: ComponentFixture; @@ -22,27 +21,27 @@ describe('Directive: Mask (Add suffix)', () => { }); it('should have a suffix', () => { - component.mask = '00-000-000-00'; - component.suffix = '$'; + component.mask.set('00-000-000-00'); + component.suffix.set('$'); equal('6', '6$', fixture); }); it('should have a suffix if first letter entered is y', () => { - component.mask = 'L{80}'; - component.suffix = '.sh'; + component.mask.set('L{80}'); + component.suffix.set('.sh'); equal('y', 'y.sh', fixture); }); it('should have a suffix if the first character entered same as the last letter of the suffix', () => { - component.mask = 'L{80}'; - component.suffix = '.sh'; + component.mask.set('L{80}'); + component.suffix.set('.sh'); equal('h', 'h.sh', fixture); }); it('should display suffix at the end with showMaskTyped mask 0 000', () => { - component.mask = '0 000'; - component.suffix = '$'; - component.showMaskTyped = true; + component.mask.set('0 000'); + component.suffix.set('$'); + component.showMaskTyped.set(true); equal('1', '1 ___$', fixture); equal('12', '1 2__$', fixture); equal('123', '1 23_$', fixture); diff --git a/projects/ngx-mask-lib/src/test/allow-negative-numbers.spec.ts b/projects/ngx-mask-lib/src/test/allow-negative-numbers.spec.ts index 335845e6..5eb8bf00 100644 --- a/projects/ngx-mask-lib/src/test/allow-negative-numbers.spec.ts +++ b/projects/ngx-mask-lib/src/test/allow-negative-numbers.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Allow negative numbers)', () => { let fixture: ComponentFixture; @@ -22,10 +21,10 @@ describe('Directive: Mask (Allow negative numbers)', () => { }); it('FormControl or NgModel should not allow negative numbers (default functionality)', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; - component.allowNegativeNumbers = false; - component.dropSpecialCharacters = true; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); + component.allowNegativeNumbers.set(false); + component.dropSpecialCharacters.set(true); equal('-10,000.00', '10,000.00', fixture); expect(component.form.value).toBe('10000.00'); @@ -36,10 +35,10 @@ describe('Directive: Mask (Allow negative numbers)', () => { }); it('FormControl and NgModel should be filled with negative values', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; - component.allowNegativeNumbers = true; - component.dropSpecialCharacters = true; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); + component.allowNegativeNumbers.set(true); + component.dropSpecialCharacters.set(true); component.form.setValue(-123456); equal('-123456.00', '-123,456.00', fixture); @@ -47,16 +46,16 @@ describe('Directive: Mask (Allow negative numbers)', () => { }); it('allowNegativeNumber to mask', () => { - component.mask = '000.00'; - component.allowNegativeNumbers = true; + component.mask.set('000.00'); + component.allowNegativeNumbers.set(true); equal('-123.00', '-123.00', fixture); equal('-311.9', '-311.9', fixture); equal('-311', '-311', fixture); equal('123.00', '123.00', fixture); - component.mask = '0000'; - component.allowNegativeNumbers = true; + component.mask.set('0000'); + component.allowNegativeNumbers.set(true); equal('-1230', '-1230', fixture); equal('-3119', '-3119', fixture); @@ -67,16 +66,16 @@ describe('Directive: Mask (Allow negative numbers)', () => { }); it('allowNegativeNumber to percent', () => { - component.mask = 'percent'; - component.allowNegativeNumbers = true; + component.mask.set('percent'); + component.allowNegativeNumbers.set(true); equal('-101', '-10', fixture); equal('-100', '-100', fixture); equal('-999', '-99', fixture); equal('-20', '-20', fixture); - component.mask = 'percent.2'; - component.allowNegativeNumbers = true; + component.mask.set('percent.2'); + component.allowNegativeNumbers.set(true); equal('-100.00', '-100.00', fixture); equal('-100.02', '-100.0', fixture); @@ -85,8 +84,8 @@ describe('Directive: Mask (Allow negative numbers)', () => { equal('-11.11', '-11.11', fixture); equal('-12.30', '-12.30', fixture); - component.mask = 'percent.3'; - component.allowNegativeNumbers = true; + component.mask.set('percent.3'); + component.allowNegativeNumbers.set(true); equal('-100.000', '-100.000', fixture); equal('-99.001', '-99.001', fixture); @@ -97,16 +96,16 @@ describe('Directive: Mask (Allow negative numbers)', () => { }); it('allowNegativeNumber to separator', () => { - component.mask = 'separator'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.allowNegativeNumbers.set(true); equal('-101', '-101', fixture); equal('-100', '-100', fixture); equal('-999', '-999', fixture); equal('-3000', '-3 000', fixture); - component.mask = 'separator.2'; - component.allowNegativeNumbers = true; + component.mask.set('separator.2'); + component.allowNegativeNumbers.set(true); equal('-100.00', '-100.00', fixture); equal('-100.02', '-100.02', fixture); @@ -115,8 +114,8 @@ describe('Directive: Mask (Allow negative numbers)', () => { equal('-91.11', '-91.11', fixture); equal('-1112.30', '-1 112.30', fixture); - component.mask = 'separator.3'; - component.allowNegativeNumbers = true; + component.mask.set('separator.3'); + component.allowNegativeNumbers.set(true); equal('-100.000', '-100.000', fixture); equal('-99.001', '-99.001', fixture); diff --git a/projects/ngx-mask-lib/src/test/basic-logic.spec.ts b/projects/ngx-mask-lib/src/test/basic-logic.spec.ts index 667d8f3c..b916c348 100644 --- a/projects/ngx-mask-lib/src/test/basic-logic.spec.ts +++ b/projects/ngx-mask-lib/src/test/basic-logic.spec.ts @@ -6,8 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal, typeTest } from './utils/test-functions.component'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; +import { provideNgxMask, NgxMaskDirective } from 'ngx-mask'; describe('Directive: Mask', () => { let fixture: ComponentFixture; @@ -24,7 +23,7 @@ describe('Directive: Mask', () => { }); it('Pristine and dirty', () => { - component.mask = '0000.0000'; + component.mask.set('0000.0000'); expect(component.form.dirty).toBeFalsy(); expect(component.form.pristine).toBeTruthy(); equal('1.', '1', fixture); @@ -38,19 +37,19 @@ describe('Directive: Mask', () => { }); it('When I change the mask on-the-fly things should work normally', () => { - component.mask = '0000.0000'; + component.mask.set('0000.0000'); equal('1.', '1', fixture); equal('1éáa2aaaaqwo', '12', fixture); equal('1234567', '1234.567', fixture); - component.mask = '0.000.000'; + component.mask.set('0.000.000'); equal('1.', '1.', fixture); equal('1éáa2aaaaqwo', '1.2', fixture); equal('1234567', '1.234.567', fixture); }); it('More tests', () => { - component.mask = '0.00'; + component.mask.set('0.00'); equal('1', '1', fixture); equal('12', '1.2', fixture); equal('123', '1.23', fixture); @@ -60,7 +59,7 @@ describe('Directive: Mask', () => { equal('1234567', '1.23', fixture); equal('12345678', '1.23', fixture); - component.mask = '0000.0000'; + component.mask.set('0000.0000'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -72,7 +71,7 @@ describe('Directive: Mask', () => { }); it('When I typed a char thats the same as the mask char', () => { - component.mask = '00/00/0000'; + component.mask.set('00/00/0000'); equal('00/', '00/', fixture); equal('00a', '00/', fixture); equal('00a00/00', '00/00/00', fixture); @@ -81,7 +80,7 @@ describe('Directive: Mask', () => { }); it('When I typed exactly the same as the mask', () => { - component.mask = '00/00/0000'; + component.mask.set('00/00/0000'); equal('00', '00', fixture); equal('00/', '00/', fixture); equal('aa/', '', fixture); @@ -92,12 +91,12 @@ describe('Directive: Mask', () => { }); it('Testing masks with a literal on the last char', () => { - component.mask = '(99)'; + component.mask.set('(99)'); equal('99', '(99)', fixture); }); it('Masks with numbers and special characters.', () => { - component.mask = '(000) 000-0000'; + component.mask.set('(000) 000-0000'); equal('1', '(1', fixture); equal('12', '(12', fixture); equal('123', '(123', fixture); @@ -108,7 +107,7 @@ describe('Directive: Mask', () => { }); it('Masks with numbers, strings e special characters', () => { - component.mask = '(099) A99-SSSS'; + component.mask.set('(099) A99-SSSS'); equal('as', '(', fixture); equal('(1', '(1', fixture); equal('(12', '(12', fixture); @@ -127,14 +126,14 @@ describe('Directive: Mask', () => { }); describe('Masks with ip', () => { it('should correct', () => { - component.mask = 'IP'; + component.mask.set('IP'); equal('1.1.1.1', '1.1.1.1', fixture); equal('12.1.12.1', '12.1.12.1', fixture); equal('127.001.1.1', '127.001.1.1', fixture); equal('192.168.1.78', '192.168.1.78', fixture); }); it('form should be invalid', () => { - component.mask = 'IP'; + component.mask.set('IP'); equal('192.168.1.78', '192.168.1.78', fixture); expect(component.form.valid).toBeTrue(); equal('127.001.1.1', '127.001.1.1', fixture); @@ -145,7 +144,7 @@ describe('Directive: Mask', () => { expect(component.form.valid).toBeTrue(); }); it('form should be valid', () => { - component.mask = 'IP'; + component.mask.set('IP'); equal('1.1.1.', '1.1.1.', fixture); expect(component.form.valid).toBeFalse(); equal('12.1.12', '12.1.12', fixture); @@ -168,7 +167,7 @@ describe('Directive: Mask', () => { }); it('Masks with cpf', () => { - component.mask = '000.000.000-00'; + component.mask.set('000.000.000-00'); equal('', '', fixture); equal('1', '1', fixture); equal('12', '12', fixture); @@ -192,7 +191,7 @@ describe('Directive: Mask', () => { }); it('Masks with cnpj', () => { - component.mask = '00.000.000/0000-00'; + component.mask.set('00.000.000/0000-00'); equal('', '', fixture); equal('1', '1', fixture); equal('12', '12', fixture); @@ -223,7 +222,7 @@ describe('Directive: Mask', () => { }); it('Masks with CPF_CNPJ', () => { - component.mask = 'CPF_CNPJ'; + component.mask.set('CPF_CNPJ'); equal('', '', fixture); equal('1', '1', fixture); equal('12', '12', fixture); @@ -253,7 +252,7 @@ describe('Directive: Mask', () => { }); it('Dynamic Masks CPF_CNPJ', () => { - component.mask = '000.000.000-00||00.000.000/0000-00'; + component.mask.set('000.000.000-00||00.000.000/0000-00'); equal('', '', fixture); equal('1', '1', fixture); equal('12', '12', fixture); @@ -283,7 +282,7 @@ describe('Directive: Mask', () => { }); it('Dynamic Masks PHONE_BR', () => { - component.mask = '(00) 0000-0000||(00) 0 0000-0000'; + component.mask.set('(00) 0000-0000||(00) 0 0000-0000'); equal('', '', fixture); equal('1', '(1', fixture); equal('12', '(12', fixture); @@ -313,7 +312,7 @@ describe('Directive: Mask', () => { }); it('Mask with optional numbers and 2 decimals', () => { - component.mask = '9999.00'; + component.mask.set('9999.00'); equal('.', '.', fixture); equal('1.23', '1.23', fixture); equal('.23', '.23', fixture); @@ -326,7 +325,7 @@ describe('Directive: Mask', () => { }); it('Masks with numbers, strings e special characters #2 ', () => { - component.mask = 'AAA 000-S0S'; + component.mask.set('AAA 000-S0S'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -337,21 +336,21 @@ describe('Directive: Mask', () => { }); it('should strip special characters from form control value', () => { - component.mask = '00/00/0000'; + component.mask.set('00/00/0000'); typeTest('30/08/19921', fixture); expect(component.form.value).toBe('30081992'); }); it('model values shouldnt be bigger length than masks', () => { - component.mask = '00-00-00'; - component.dropSpecialCharacters = false; + component.mask.set('00-00-00'); + component.dropSpecialCharacters.set(false); equal('2578989', '25-78-98', fixture); expect(component.form.value).toBe('25-78-98'); }); it('should work with custom special characters', () => { - component.mask = '[000]-[000]*[00]'; - component.specialCharacters = ['[', ']', '-', '*']; + component.mask.set('[000]-[000]*[00]'); + component.specialCharacters.set(['[', ']', '-', '*']); equal('', '', fixture); equal('2578989', '[257]-[898]*[9', fixture); equal('2578989888988', '[257]-[898]*[98]', fixture); @@ -359,56 +358,56 @@ describe('Directive: Mask', () => { }); it('should work with custom patterns', () => { - component.mask = '[000]-[000]*[00]'; - component.specialCharacters = ['[', ']', '-', '*']; - component.patterns = { + component.mask.set('[000]-[000]*[00]'); + component.specialCharacters.set(['[', ']', '-', '*']); + component.patterns.set({ '0': { pattern: new RegExp('[a-zA-Z]'), }, - }; + }); equal('', '', fixture); equal('2578989', '[', fixture); equal('hello world', '[hel]-[low]*[or]', fixture); equal('111.111-11', '[', fixture); - component.mask = '(000-000)'; - component.specialCharacters = ['(', '-', ')']; + component.mask.set('(000-000)'); + component.specialCharacters.set(['(', '-', ')']); equal('323HelloWorld', '(Hel-loW)', fixture); - component.mask = '[00]*[000]'; - component.specialCharacters = ['[', ']', '*']; - component.patterns = { + component.mask.set('[00]*[000]'); + component.specialCharacters.set(['[', ']', '*']); + component.patterns.set({ '0': { pattern: new RegExp('\\d'), }, - }; + }); equal('789-874.98', '[78]*[987]', fixture); }); it('When I change the mask on-the-fly things should work normally', () => { - component.mask = '0000.0000'; + component.mask.set('0000.0000'); equal('1.', '1', fixture); equal('1éáa2aaaaqwo', '12', fixture); equal('1234567', '1234.567', fixture); - component.mask = '0.000.000'; + component.mask.set('0.000.000'); equal('1.', '1.', fixture); equal('1éáa2aaaaqwo', '1.2', fixture); equal('1234567', '1.234.567', fixture); - component.mask = ''; + component.mask.set(''); equal('1.', '1.', fixture); equal('1éáa2aaaaqwo', '1éáa2aaaaqwo', fixture); equal('1234567', '1234567', fixture); - component.mask = '0000.0000'; + component.mask.set('0000.0000'); equal('1.', '1', fixture); equal('1éáa2aaaaqwo', '12', fixture); equal('1234567', '1234.567', fixture); }); it('should work even has no mask', () => { - component.mask = ''; + component.mask.set(''); equal('1234567', '1234567', fixture); @@ -416,22 +415,22 @@ describe('Directive: Mask', () => { }); it('should be a UA phone', () => { - component.mask = '000-00-00-00-000'; + component.mask.set('000-00-00-00-000'); equal('380975577234', '380-97-55-77-234', fixture); }); it('should be a pasport number', () => { - component.mask = 'AA 000000'; + component.mask.set('AA 000000'); equal('GH 234098', 'GH 234098', fixture); }); it('should be bank card number', () => { - component.mask = '0000-0000-0000-0000'; + component.mask.set('0000-0000-0000-0000'); equal('1234567890123456', '1234-5678-9012-3456', fixture); }); it('should apply mask on backspace for non readonly inputs when all text is selected', () => { - component.mask = 'AAAAAA'; + component.mask.set('AAAAAA'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -455,7 +454,7 @@ describe('Directive: Mask', () => { }); it('should not apply mask on backspace for readonly inputs when all text is selected', () => { - component.mask = 'AAAAAA'; + component.mask.set('AAAAAA'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -478,7 +477,7 @@ describe('Directive: Mask', () => { }); it('should right work with {value, disable}', () => { - component.mask = '000'; + component.mask.set('000'); fixture.detectChanges(); component.form.setValue({ value: 123, @@ -492,7 +491,7 @@ describe('Directive: Mask', () => { }); it('should return empty string if input consist only special symbols', () => { - component.mask = '(000) 000-00-00'; + component.mask.set('(000) 000-00-00'); fixture.detectChanges(); equal('0', '(0', fixture); equal('(', '(', fixture); @@ -507,17 +506,17 @@ describe('Directive: Mask', () => { }); it('should remove ghost character on toggling mask', () => { - component.mask = '0000'; - component.triggerOnMaskChange = true; + component.mask.set('0000'); + component.triggerOnMaskChange.set(true); component.form.setValue('1111a'); equal('1111a', '1111', fixture); expect(component.form.value).toBe('1111'); - component.mask = null; + component.mask.set(null); expect(component.form.value).toBe('1111'); }); it('Masks with letters uppercase', () => { - component.mask = 'UUUU'; + component.mask.set('UUUU'); fixture.detectChanges(); equal('A', 'A', fixture); equal('AB', 'AB', fixture); @@ -526,7 +525,7 @@ describe('Directive: Mask', () => { }); it('Masks with letters lowercase', () => { - component.mask = 'LLLL'; + component.mask.set('LLLL'); fixture.detectChanges(); equal('a', 'a', fixture); equal('ab', 'ab', fixture); @@ -534,14 +533,14 @@ describe('Directive: Mask', () => { equal('abcd', 'abcd', fixture); }); it('0.0000004 after writeValue should be 0.0000004', () => { - component.mask = 'separator.7'; + component.mask.set('separator.7'); fixture.detectChanges(); component.form.setValue(0.0000004); equal('0.0000004', '0.0000004', fixture); expect(component.form.value).toBe(0.0000004); }); it('mask 0000 0000 0000 9999 9999', () => { - component.mask = '0000 0000 0000 9999 9999'; + component.mask.set('0000 0000 0000 9999 9999'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -565,7 +564,7 @@ describe('Directive: Mask', () => { equal('1234 5678 9012 3456', '1234 5678 9012 3456', fixture); }); it('mask SS00 AAAA 0000 0000 0000 0000 9999 9999 99', () => { - component.mask = 'SS00 AAAA 0000 0000 0000 0000 9999 9999 99'; + component.mask.set('SS00 AAAA 0000 0000 0000 0000 9999 9999 99'); equal( 'FR12345678901234567890123456789012', 'FR12 3456 7890 1234 5678 9012 3456 7890 12', @@ -579,7 +578,7 @@ describe('Directive: Mask', () => { }); it('Mask with optional parameter', () => { - component.mask = '9999 999 999'; + component.mask.set('9999 999 999'); equal('3', '3', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -593,7 +592,7 @@ describe('Directive: Mask', () => { }); it('Mask 099.09', () => { - component.mask = '099.09'; + component.mask.set('099.09'); equal('1.23', '1.23', fixture); equal('1', '1', fixture); equal('12', '12', fixture); @@ -607,7 +606,7 @@ describe('Directive: Mask', () => { }); it('Mask 09/09/0099', () => { - component.mask = '09/09/0099'; + component.mask.set('09/09/0099'); equal('1123', '11/23', fixture); equal('1/2', '1/2', fixture); equal('12/2/2020', '12/2/2020', fixture); @@ -621,16 +620,16 @@ describe('Directive: Mask', () => { }); it('Mask 099.00099999999999', () => { - component.mask = '099.00099999999999'; + component.mask.set('099.00099999999999'); equal('1.2222222', '1.2222222', fixture); equal('111111111111', '111.111111111', fixture); equal('11.11111111111', '11.11111111111', fixture); }); it('dropSpecialCharacter should return prefix or delete it value', () => { - component.mask = '0000'; - component.prefix = 'foo/'; - component.dropSpecialCharacters = false; + component.mask.set('0000'); + component.prefix.set('foo/'); + component.dropSpecialCharacters.set(false); equal('2574', 'foo/2574', fixture); expect(component.form.value).toBe('foo/2574'); expect(component.form.valid).toBeTruthy(); @@ -652,8 +651,8 @@ describe('Directive: Mask', () => { }); it('Should be not valid if length of input doesnt match mask', () => { - component.mask = '000 000-00-00'; - component.prefix = '+7 '; + component.mask.set('000 000-00-00'); + component.prefix.set('+7 '); equal('2', '+7 2', fixture); expect(component.form.value).toBe('2'); expect(component.form.valid).toBeFalse(); @@ -695,14 +694,14 @@ describe('Directive: Mask', () => { }); it('Mask 0/9', () => { - component.mask = '0/9'; + component.mask.set('0/9'); equal('1', '1', fixture); equal('1/', '1/', fixture); equal('1/2', '1/2', fixture); }); it('Mask 9*/0*', () => { - component.mask = '9*/0*'; + component.mask.set('9*/0*'); equal('1', '1', fixture); equal('1/', '1/', fixture); equal('1/2', '1/2', fixture); @@ -714,26 +713,26 @@ describe('Directive: Mask', () => { }); it('Mask 9000/0000', () => { - component.mask = '0009/0000'; + component.mask.set('0009/0000'); equal('111/1111', '111/1111', fixture); equal('1111/1111', '1111/1111', fixture); }); it('Mask 00009-0000', () => { - component.mask = '00009-0000'; + component.mask.set('00009-0000'); equal('0000-0000', '0000-0000', fixture); equal('12345-6789', '12345-6789', fixture); }); it('Mask 099L', () => { - component.mask = '099L'; + component.mask.set('099L'); equal('1d', '1d', fixture); equal('22r', '22r', fixture); equal('223r', '223r', fixture); }); it('Mask 09999/099L', () => { - component.mask = '09999/099L'; + component.mask.set('09999/099L'); equal('1/2d', '1/2d', fixture); equal('12/2d', '12/2d', fixture); equal('123/2d', '123/2d', fixture); @@ -744,7 +743,7 @@ describe('Directive: Mask', () => { }); it('Mask 099SS', () => { - component.mask = '099SS'; + component.mask.set('099SS'); equal('1d', '1d', fixture); equal('1dD', '1dD', fixture); equal('11d', '11d', fixture); @@ -753,7 +752,7 @@ describe('Directive: Mask', () => { }); it('Mask 999999-0009999999/0000', () => { - component.mask = '999999-0009999999/0000'; + component.mask.set('999999-0009999999/0000'); equal('1-123/1234', '1-123/1234', fixture); equal('12-123/1234', '12-123/1234', fixture); equal('123-123/1234', '123-123/1234', fixture); @@ -770,14 +769,14 @@ describe('Directive: Mask', () => { }); it('setValue undefined should return null', () => { - component.mask = '0000'; + component.mask.set('0000'); equal('1234', '1234', fixture); component.form.setValue(null); expect(component.form.value).toBe(null); }); it('after resetValue should show in model same value', () => { - component.mask = '0'; + component.mask.set('0'); equal('1', '1', fixture); component.form.reset(); equal('1', '1', fixture); @@ -785,7 +784,7 @@ describe('Directive: Mask', () => { }); it('after resetValue should show in model same value', () => { - component.mask = '9'; + component.mask.set('9'); equal('2', '2', fixture); component.form.reset(); equal('2', '2', fixture); @@ -793,7 +792,7 @@ describe('Directive: Mask', () => { }); it('should work with optional mask 09.09', () => { - component.mask = '09.09'; + component.mask.set('09.09'); equal('2', '2', fixture); equal('2.3', '2.3', fixture); equal('2.34', '2.34', fixture); @@ -803,7 +802,7 @@ describe('Directive: Mask', () => { }); it('should work change value after setValue to empty string mask 9', () => { - component.mask = '9'; + component.mask.set('9'); equal('2', '2', fixture); component.form.setValue(''); equal('2', '2', fixture); @@ -811,7 +810,7 @@ describe('Directive: Mask', () => { }); it('should work change value after setValue to empty string mask 0', () => { - component.mask = '0'; + component.mask.set('0'); equal('4', '4', fixture); component.form.setValue(''); equal('4', '4', fixture); @@ -819,7 +818,7 @@ describe('Directive: Mask', () => { }); it('should return empty string if first character not same in mask (000) 000-0000', () => { - component.mask = '(000) 000-0000'; + component.mask.set('(000) 000-0000'); equal('', '', fixture); equal('@', '', fixture); @@ -835,8 +834,8 @@ describe('Directive: Mask', () => { }); it('should return empty string if first character not same in mask (000) 000-0000 with prefix', () => { - component.mask = '(000) 000-0000'; - component.prefix = '+7'; + component.mask.set('(000) 000-0000'); + component.prefix.set('+7'); equal('', '', fixture); equal('@', '', fixture); equal('!', '', fixture); @@ -851,8 +850,8 @@ describe('Directive: Mask', () => { }); it('should return empty string if first character not same in mask (000) 000-0000 with suffix', () => { - component.mask = '(000) 000-0000'; - component.prefix = '+7'; + component.mask.set('(000) 000-0000'); + component.prefix.set('+7'); equal('', '', fixture); equal('@', '', fixture); equal('!', '', fixture); @@ -867,7 +866,7 @@ describe('Directive: Mask', () => { }); it('should return empty string if first character not same in mask (000) 000-0000||+000000000000000', () => { - component.mask = '(000) 000-0000||+000000000000000'; + component.mask.set('(000) 000-0000||+000000000000000'); equal('', '', fixture); equal('@', '', fixture); @@ -883,8 +882,8 @@ describe('Directive: Mask', () => { }); it('should return empty string if first character not same in mask +(000) 000-0000', () => { - component.mask = '(000) 000-0000'; - component.prefix = '+7'; + component.mask.set('(000) 000-0000'); + component.prefix.set('+7'); equal('', '', fixture); equal('@', '', fixture); equal('!', '', fixture); @@ -899,7 +898,7 @@ describe('Directive: Mask', () => { }); it('optional mask should work correct 99-99', () => { - component.mask = '99-99'; + component.mask.set('99-99'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '12-3', fixture); @@ -909,7 +908,7 @@ describe('Directive: Mask', () => { }); it('custom mask with optional symbol should work correct mask=999-999-999', () => { - component.mask = '999-999-999'; + component.mask.set('999-999-999'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -936,9 +935,9 @@ describe('Directive: Mask', () => { spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); fixture.detectChanges(); - component.mask = '00/00/0000'; - component.showMaskTyped = true; - component.keepCharacterPositions = true; + component.mask.set('00/00/0000'); + component.showMaskTyped.set(true); + component.keepCharacterPositions.set(true); equal('11/11/1111', '11/11/1111', fixture); component.form.setValue('22/22/2222'); @@ -948,35 +947,35 @@ describe('Directive: Mask', () => { }); it('mask sepator.0 after setValue should be dont dirty', () => { - component.mask = 'separator.0'; + component.mask.set('separator.0'); component.form.setValue('2'); expect(component.form.dirty).toBe(false); }); it('mask sepator.2 after setValue should be dont dirty', () => { - component.mask = 'separator.0'; + component.mask.set('separator.0'); component.form.setValue('2002'); expect(component.form.dirty).toBe(false); }); it('mask 00/00/0000 after setValue should be dont dirty', () => { - component.mask = 'separator.0'; + component.mask.set('separator.0'); component.form.setValue('12312312'); expect(component.form.dirty).toBe(false); }); it('mask sepator.2 after setValue should be dont dirty', () => { - component.mask = 'separator.0'; + component.mask.set('separator.0'); component.form.setValue('2002'); expect(component.form.dirty).toBe(false); }); it('should return empty string in formControl mask SSS-SSS-SSS', () => { - component.mask = 'SSS-SSS-SSS'; + component.mask.set('SSS-SSS-SSS'); component.form.setValue('978-1-93624-386-0'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; @@ -987,7 +986,7 @@ describe('Directive: Mask', () => { }); it('should return empty string in formControl mask AAA-AAA-AAA', () => { - component.mask = 'AAA-AAA-AAA'; + component.mask.set('AAA-AAA-AAA'); component.form.setValue('978-123-936'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; @@ -998,7 +997,7 @@ describe('Directive: Mask', () => { }); it('should return empty string in formControl mask (000) 000-000', () => { - component.mask = '(000) 000-000'; + component.mask.set('(000) 000-000'); component.form.setValue('978-123-936'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; @@ -1009,8 +1008,8 @@ describe('Directive: Mask', () => { }); it('should return empty string in formControl mask (000) 000-000 with prefix +7', () => { - component.mask = '(000) 000-000'; - component.prefix = '+7 '; + component.mask.set('(000) 000-000'); + component.prefix.set('+7 '); component.form.setValue('978-123-936'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; diff --git a/projects/ngx-mask-lib/src/test/clear-if-not-match-the-mask.spec.ts b/projects/ngx-mask-lib/src/test/clear-if-not-match-the-mask.spec.ts index 88794ac5..9e55714c 100644 --- a/projects/ngx-mask-lib/src/test/clear-if-not-match-the-mask.spec.ts +++ b/projects/ngx-mask-lib/src/test/clear-if-not-match-the-mask.spec.ts @@ -3,8 +3,7 @@ import { TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask', () => { let fixture: ComponentFixture; @@ -21,8 +20,8 @@ describe('Directive: Mask', () => { }); it('should clear if mask is not matched', async () => { - component.mask = '000.000-00'; - component.clearIfNotMatch = true; + component.mask.set('000.000-00'); + component.clearIfNotMatch.set(true); equal('', '', fixture, true); equal('2578989', '', fixture, true); equal('2578989888988', '257.898-98', fixture); @@ -30,18 +29,18 @@ describe('Directive: Mask', () => { }); it('should clear if mask is not matched with prefix', async () => { - component.mask = '000-000-00'; - component.prefix = '+5'; - component.clearIfNotMatch = true; + component.mask.set('000-000-00'); + component.prefix.set('+5'); + component.clearIfNotMatch.set(true); equal('', '', fixture, true); equal('2578989', '', fixture, true); equal('25789898', '+5257-898-98', fixture); }); it('should clear if mask is not matched with another placeholderCharacter *', async () => { - component.mask = '0000'; - component.placeHolderCharacter = '*'; - component.clearIfNotMatch = true; + component.mask.set('0000'); + component.placeHolderCharacter.set('*'); + component.clearIfNotMatch.set(true); equal('', '', fixture, true); equal('333', '', fixture, true); equal('22', '', fixture, true); @@ -49,9 +48,9 @@ describe('Directive: Mask', () => { }); it('should clear if mask is not matched with another placeholderCharacter X', async () => { - component.mask = '00000'; - component.placeHolderCharacter = 'X'; - component.clearIfNotMatch = true; + component.mask.set('00000'); + component.placeHolderCharacter.set('X'); + component.clearIfNotMatch.set(true); equal('', '', fixture, true); equal('333', '', fixture, true); equal('22', '', fixture, true); diff --git a/projects/ngx-mask-lib/src/test/complete-mask.spec.ts b/projects/ngx-mask-lib/src/test/complete-mask.spec.ts index c6de3d70..dbb2abd6 100644 --- a/projects/ngx-mask-lib/src/test/complete-mask.spec.ts +++ b/projects/ngx-mask-lib/src/test/complete-mask.spec.ts @@ -1,9 +1,8 @@ -import { Component } from '@angular/core'; +import { Component, signal } from '@angular/core'; import type { ComponentFixture } from '@angular/core/testing'; import { TestBed } from '@angular/core/testing'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; @Component({ selector: 'jsdaddy-open-source-test', @@ -14,10 +13,10 @@ import { NgxMaskDirective } from '../lib/ngx-mask.directive'; class TestMaskComponent { public form: FormControl = new FormControl(''); - public isMaskFilled = false; + public isMaskFilled = signal(false); public maskFilled(): void { - this.isMaskFilled = true; + this.isMaskFilled.set(true); } } @@ -38,11 +37,11 @@ describe('Directive: Mask (Function maskFilled)', () => { }); it('should call function maskFilled and isMaskFilled should be true', () => { component.form.setValue('9999'); - expect(component.isMaskFilled).toBeTrue(); + expect(component.isMaskFilled()).toBeTrue(); expect(maskFilledSpy).toHaveBeenCalledOnceWith(); }); it('isMaskFilled should be false', () => { component.form.setValue('999'); - expect(component.isMaskFilled).toBeFalse(); + expect(component.isMaskFilled()).toBeFalse(); }); }); diff --git a/projects/ngx-mask-lib/src/test/copy-paste.spec.ts b/projects/ngx-mask-lib/src/test/copy-paste.spec.ts index 59eb800b..0314796e 100644 --- a/projects/ngx-mask-lib/src/test/copy-paste.spec.ts +++ b/projects/ngx-mask-lib/src/test/copy-paste.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { By } from '@angular/platform-browser'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Event: paste', () => { let fixture: ComponentFixture; @@ -22,7 +21,7 @@ describe('Event: paste', () => { }); it('After paste to control cursor should be on the end of input)', () => { - component.mask = '00 - 0000 - 00000'; + component.mask.set('00 - 0000 - 00000'); fixture.detectChanges(); const inputDebuggerElement = fixture.debugElement.query(By.css('#mask')); @@ -43,8 +42,8 @@ describe('Event: paste', () => { expect(inputDebuggerElement.nativeElement.selectionStart).toBe(15); }); it('After paste to control cursor should be on the end of input for mask with separator', () => { - component.mask = 'separator.0'; - component.thousandSeparator = ','; + component.mask.set('separator.0'); + component.thousandSeparator.set(','); fixture.detectChanges(); const inputDebuggerElement = fixture.debugElement.query(By.css('#mask')); diff --git a/projects/ngx-mask-lib/src/test/custom-date.spec.ts b/projects/ngx-mask-lib/src/test/custom-date.spec.ts index c39b2701..9669877c 100644 --- a/projects/ngx-mask-lib/src/test/custom-date.spec.ts +++ b/projects/ngx-mask-lib/src/test/custom-date.spec.ts @@ -3,8 +3,7 @@ import { TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Custom date)', () => { let fixture: ComponentFixture; @@ -21,8 +20,8 @@ describe('Directive: Mask (Custom date)', () => { }); it('repeat mask', () => { - component.mask = 'd0/m0/0000'; - // equal('18052019', '18/05/2019', fixture); + component.mask.set('d0/m0/0000'); + equal('18', '18', fixture); equal('11111111', '11/11/1111', fixture); }); @@ -30,7 +29,7 @@ describe('Directive: Mask (Custom date)', () => { it('should keep the cursor position after deleting a character', () => { // Set the initial input value and trigger an input event const inputElement = fixture.nativeElement.querySelector('input'); - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); inputElement.value = '12:34:56'; inputElement.dispatchEvent(new Event('input')); fixture.detectChanges(); diff --git a/projects/ngx-mask-lib/src/test/custom-patterns.spec.ts b/projects/ngx-mask-lib/src/test/custom-patterns.spec.ts index 666d4729..1770d7c9 100644 --- a/projects/ngx-mask-lib/src/test/custom-patterns.spec.ts +++ b/projects/ngx-mask-lib/src/test/custom-patterns.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; import type { NgxMaskConfig } from 'ngx-mask'; import { initialConfig } from 'ngx-mask'; @@ -24,12 +23,12 @@ describe('Directive: Mask (Custom patterns)', () => { }); it('custom patterns', () => { - component.mask = 'FFF'; - component.patterns = { + component.mask.set('FFF'); + component.patterns.set({ F: { pattern: new RegExp('[0-9]'), }, - }; + }); equal('F', '', fixture); equal('123', '123', fixture); }); @@ -58,7 +57,7 @@ describe('Directive: Mask (Provide custom patterns)', () => { }); it('custom patterns B should be work like optional', () => { - component.mask = 'SSBB-0999'; + component.mask.set('SSBB-0999'); equal('F', 'F', fixture); equal('FF', 'FF', fixture); @@ -101,29 +100,29 @@ describe('Directive: Mask (Provide custom patterns with symbol *)', () => { }); it('custom patterns * should work with mask *-*', () => { - component.mask = '*-*'; + component.mask.set('*-*'); equal('22', '2-2', fixture); }); it('custom patterns * should work with mask **-**', () => { - component.mask = '**-**'; + component.mask.set('**-**'); equal('22', '22', fixture); equal('123', '12-3', fixture); equal('1234', '12-34', fixture); }); it('custom patterns * should work with mask ***-***', () => { - component.mask = '***-***'; + component.mask.set('***-***'); equal('123456', '123-456', fixture); }); it('custom patterns * should work with mask ****-****', () => { - component.mask = '****-****'; + component.mask.set('****-****'); equal('12345678', '1234-5678', fixture); }); it('custom patterns * should work with mask *****-*****', () => { - component.mask = '*****-*****'; + component.mask.set('*****-*****'); equal('1234567890', '12345-67890', fixture); }); }); @@ -155,23 +154,23 @@ describe('Directive: Mask (Provide custom patterns with symbol f and F)', () => }); it('custom patterns f* should work not delete space after setTimeout', () => { - component.mask = 'f*'; + component.mask.set('f*'); equal('test value', 'test value', fixture); equal('test value with', 'test value with', fixture); equal('test value with space', 'test value with space', fixture); setTimeout(() => { - component.mask = 'F*'; + component.mask.set('F*'); expect(component.form.value).toBe('test value with space'); }); }); it('custom patterns F* should work not delete space after setTimeout', () => { - component.mask = 'F*'; + component.mask.set('F*'); equal('test value', 'test value', fixture); equal('test value with', 'test value with', fixture); equal('test value with space', 'test value with space', fixture); setTimeout(() => { - component.mask = 'f*'; + component.mask.set('f*'); expect(component.form.value).toBe('test value with space'); }); }); @@ -201,8 +200,9 @@ describe('Directive: Mask (Provide custom patterns with symbol B optional)', () }); it('custom mask with optional symbol should work correct mask=(000) 000-0000 x BBBBBBBBBB', () => { - component.mask = '(000) 000-0000 x BBBBBBBBBB'; - component.specialCharacters = ['(', ')', ' ', '-', 'x']; + component.mask.set('(000) 000-0000 x BBBBBBBBBB'); + component.specialCharacters.set(['(', ')', ' ', '-', 'x']); + equal('1', '(1', fixture); equal('12', '(12', fixture); equal('123', '(123', fixture); @@ -226,7 +226,8 @@ describe('Directive: Mask (Provide custom patterns with symbol B optional)', () }); it('custom mask with optional symbol should work correct mask=BBB-BBB-BBB', () => { - component.mask = 'BBB-BBB-BBB'; + component.mask.set('BBB-BBB-BBB'); + equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); diff --git a/projects/ngx-mask-lib/src/test/custom-symbol-regexp.spec.ts b/projects/ngx-mask-lib/src/test/custom-symbol-regexp.spec.ts index bbe4e83d..e8265db9 100644 --- a/projects/ngx-mask-lib/src/test/custom-symbol-regexp.spec.ts +++ b/projects/ngx-mask-lib/src/test/custom-symbol-regexp.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask', () => { let fixture: ComponentFixture; @@ -22,7 +21,7 @@ describe('Directive: Mask', () => { }); it('custom patterns', () => { - component.mask = '00*.00'; + component.mask.set('00*.00'); equal('22222.333333', '22222.33', fixture); equal('22212323232', '22212323232', fixture); }); @@ -31,8 +30,8 @@ describe('Directive: Mask', () => { const testPattern = { S: { pattern: new RegExp('[A-Za-z-Áá]') }, }; - component.mask = 'S*'; - component.patterns = testPattern; + component.mask.set('S*'); + component.patterns.set(testPattern); equal('Fernándos', 'Fernándos', fixture); equal('Ánton', 'Ánton', fixture); }); diff --git a/projects/ngx-mask-lib/src/test/default-config.spec.ts b/projects/ngx-mask-lib/src/test/default-config.spec.ts index b94bed1b..123984af 100644 --- a/projects/ngx-mask-lib/src/test/default-config.spec.ts +++ b/projects/ngx-mask-lib/src/test/default-config.spec.ts @@ -2,9 +2,8 @@ import type { ComponentFixture } from '@angular/core/testing'; import { TestBed } from '@angular/core/testing'; import { ReactiveFormsModule, FormControl } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; -import { provideEnvironmentNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; -import type { NgxMaskOptions } from '../lib/ngx-mask.config'; +import { provideEnvironmentNgxMask, NgxMaskDirective } from 'ngx-mask'; +import type { NgxMaskOptions } from 'ngx-mask'; function createComponentWithDefaultConfig( defaultConfig?: NgxMaskOptions @@ -24,7 +23,7 @@ describe('Default config', () => { thousandSeparator: '.', }); const component = fixture.componentInstance; - component.mask = 'separator'; + component.mask.set('separator'); component.form = new FormControl(1234.56); fixture.detectChanges(); fixture.whenRenderingDone().then(() => { @@ -38,7 +37,7 @@ describe('Default config', () => { thousandSeparator: ' ', }); const component = fixture.componentInstance; - component.mask = 'separator'; + component.mask.set('separator'); component.form = new FormControl(1234.56); fixture.detectChanges(); fixture.whenRenderingDone().then(() => { @@ -52,12 +51,12 @@ describe('Default config', () => { thousandSeparator: ' ', }); const component = fixture.componentInstance; - component.mask = 'separator'; + component.mask.set('separator'); // Override default decimalMarker and thousandSeparator - component.decimalMarker = ','; - component.thousandSeparator = '.'; + component.decimalMarker.set(','); + component.thousandSeparator.set('.'); component.form = new FormControl(1234.56); - component.specialCharacters = ['/']; // Explicit set needed to prevent bug in ngx-mask.directive.ts OnChanges event (if specialCharacters is undefined, OnChanges function will return prematurely and won't apply provided thousandSeparator and decimalMarker) + component.specialCharacters.set(['/']); // Explicit set needed to prevent bug in ngx-mask.directive.ts OnChanges event (if specialCharacters is undefined, OnChanges function will return prematurely and won't apply provided thousandSeparator and decimalMarker) fixture.detectChanges(); fixture.whenRenderingDone().then(() => { expect(fixture.nativeElement.querySelector('input').value).toBe('1.234,56'); @@ -72,7 +71,7 @@ describe('Default config', () => { separatorLimit: '100', }); const component = fixture.componentInstance; - component.mask = 'separator.2'; + component.mask.set('separator.2'); component.form = new FormControl(123); fixture.detectChanges(); @@ -89,7 +88,7 @@ describe('Default config', () => { leadZero: true, }); const component = fixture.componentInstance; - component.mask = 'separator.2'; + component.mask.set('separator.2'); component.form = new FormControl(15000.33); fixture.detectChanges(); diff --git a/projects/ngx-mask-lib/src/test/delete.spec.ts b/projects/ngx-mask-lib/src/test/delete.spec.ts index 73c01f11..eaf32869 100644 --- a/projects/ngx-mask-lib/src/test/delete.spec.ts +++ b/projects/ngx-mask-lib/src/test/delete.spec.ts @@ -6,8 +6,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; +import { provideNgxMask, NgxMaskDirective } from 'ngx-mask'; describe('Directive: Mask (Delete)', () => { let fixture: ComponentFixture; @@ -24,7 +23,7 @@ describe('Directive: Mask (Delete)', () => { }); it('delete character in input', () => { - component.mask = '00/00/0000'; + component.mask.set('00/00/0000'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -46,7 +45,7 @@ describe('Directive: Mask (Delete)', () => { }); it('delete special character in input', () => { - component.mask = '00/00/0000'; + component.mask.set('00/00/0000'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -68,8 +67,8 @@ describe('Directive: Mask (Delete)', () => { }); it('delete special character in secure input', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -91,7 +90,7 @@ describe('Directive: Mask (Delete)', () => { }); it('delete special character on 1 position', () => { - component.mask = '[00]'; + component.mask.set('[00]'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -112,8 +111,8 @@ describe('Directive: Mask (Delete)', () => { }); it('delete suffix with backspace and delete', () => { - component.mask = 'A{5}'; - component.suffix = '.com'; + component.mask.set('A{5}'); + component.suffix.set('.com'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -147,8 +146,8 @@ describe('Directive: Mask (Delete)', () => { }); it('prefix shouldn`t be deleted', () => { - component.mask = '00 00'; - component.prefix = '+1'; + component.mask.set('00 00'); + component.prefix.set('+1'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -172,8 +171,8 @@ describe('Directive: Mask (Delete)', () => { }); it('prefix shouldn`t be deleted', () => { - component.mask = '00 00'; - component.prefix = '+1 '; + component.mask.set('00 00'); + component.prefix.set('+1 '); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -197,8 +196,8 @@ describe('Directive: Mask (Delete)', () => { }); it('prefix shouldn`t be deleted', () => { - component.mask = '(00) 00'; - component.prefix = '+1'; + component.mask.set('(00) 00'); + component.prefix.set('+1'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -222,8 +221,8 @@ describe('Directive: Mask (Delete)', () => { }); it('prefix shouldn`t be deleted', () => { - component.mask = '(00) 00'; - component.prefix = '+1 '; + component.mask.set('(00) 00'); + component.prefix.set('+1 '); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -247,7 +246,7 @@ describe('Directive: Mask (Delete)', () => { }); it('date mask should show keep right value d0/M0/0000', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '4/4/4444'; @@ -270,7 +269,7 @@ describe('Directive: Mask (Delete)', () => { }); it('date mask should show keep right value d0:M0:0000', () => { - component.mask = 'd0:M0:0000'; + component.mask.set('d0:M0:0000'); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '4:4:4444'; @@ -293,7 +292,7 @@ describe('Directive: Mask (Delete)', () => { }); it('date mask should show keep right value d0-M0-0000', () => { - component.mask = 'd0-M0-0000'; + component.mask.set('d0-M0-0000'); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '4-4-4444'; diff --git a/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts b/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts index e1335d95..161c6725 100644 --- a/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts +++ b/projects/ngx-mask-lib/src/test/drop-special-charaters.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Drop special characters)', () => { let fixture: ComponentFixture; @@ -22,8 +21,8 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('FormControl should be filled without special characters', () => { - component.mask = '00-00-00'; - component.dropSpecialCharacters = false; + component.mask.set('00-00-00'); + component.dropSpecialCharacters.set(false); equal('257898', '25-78-98', fixture); expect(component.form.value).toBe('25-78-98'); @@ -33,16 +32,16 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('should correct value with mask 00-00/00 with dropSpecialCharacters = /', () => { - component.mask = '00-00/00'; - component.dropSpecialCharacters = ['/']; + component.mask.set('00-00/00'); + component.dropSpecialCharacters.set(['/']); equal('257898', '25-78/98', fixture); expect(component.form.value).toBe('25-7898'); }); it('should correct value with mask 0000.00 with dropSpecialCharacters = true', () => { - component.mask = '0000.00'; - component.dropSpecialCharacters = true; + component.mask.set('0000.00'); + component.dropSpecialCharacters.set(true); component.form.setValue(123456); equal('123456', '1234.56', fixture); @@ -50,9 +49,9 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('FormControl should be filled without special characters', () => { - component.mask = 'separator.4'; - component.thousandSeparator = ','; - component.dropSpecialCharacters = true; + component.mask.set('separator.4'); + component.thousandSeparator.set(','); + component.dropSpecialCharacters.set(true); component.form.setValue(2578.9812); equal('2578.9812', '2,578.9812', fixture); @@ -60,9 +59,9 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('FormControl should normally handle the removal of whitespace', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ' '; - component.dropSpecialCharacters = true; + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.dropSpecialCharacters.set(true); component.form.setValue(1234567.89); // @todo add backspace event check @@ -72,9 +71,9 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('dropSpecialCharacter test for valid', () => { - component.mask = '(000) 000-0000'; - component.dropSpecialCharacters = true; - component.validation = true; + component.mask.set('(000) 000-0000'); + component.dropSpecialCharacters.set(true); + component.validation.set(true); equal('1', '(1', fixture); expect(component.form.valid).toBe(false); equal('12', '(12', fixture); @@ -98,9 +97,9 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('dropSpecialCharacter = false test for valid', () => { - component.mask = '(000) 000-0000'; - component.dropSpecialCharacters = true; - component.validation = true; + component.mask.set('(000) 000-0000'); + component.dropSpecialCharacters.set(true); + component.validation.set(true); equal('1', '(1', fixture); expect(component.form.valid).toBe(false); equal('12', '(12', fixture); @@ -124,18 +123,18 @@ describe('Directive: Mask (Drop special characters)', () => { }); it('dropSpecialCharacter = true test for valid with setValue', () => { - component.mask = '(000) 000-0000'; - component.dropSpecialCharacters = true; - component.validation = true; + component.mask.set('(000) 000-0000'); + component.dropSpecialCharacters.set(true); + component.validation.set(true); component.form.setValue('1234567890'); equal('1234567890', '(123) 456-7890', fixture); expect(component.form.valid).toBe(true); }); it('dropSpecialCharacter = false test for valid with setValue', () => { - component.mask = '(000) 000-0000'; - component.dropSpecialCharacters = false; - component.validation = true; + component.mask.set('(000) 000-0000'); + component.dropSpecialCharacters.set(false); + component.validation.set(true); equal('1', '(1', fixture); expect(component.form.valid).toBeFalsy(); equal('12', '(12', fixture); diff --git a/projects/ngx-mask-lib/src/test/dynamic.spec.ts b/projects/ngx-mask-lib/src/test/dynamic.spec.ts index 6a600039..908c6692 100644 --- a/projects/ngx-mask-lib/src/test/dynamic.spec.ts +++ b/projects/ngx-mask-lib/src/test/dynamic.spec.ts @@ -5,8 +5,7 @@ import { By } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import type { DebugElement } from '@angular/core'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; import { equal } from './utils/test-functions.component'; describe('Directive: Mask (Dynamic)', () => { @@ -24,7 +23,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('The input value when set by the FormControl should be masked accordingly the dynamic mask', async () => { - component.mask = '000-0||0000-0||00000-0'; + component.mask.set('000-0||0000-0||00000-0'); fixture.detectChanges(); component.form.setValue({ @@ -63,13 +62,13 @@ describe('Directive: Mask (Dynamic)', () => { return ''; } - component.mask = ''; + component.mask.set(''); fixture.detectChanges(); component.form.setValue({ value: 9000000000000000000, }); - component.mask = getMask(); + component.mask.set(getMask()); fixture.detectChanges(); const inputEl = fixture.debugElement.query(By.css('input')); @@ -79,7 +78,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('Change mask dynamically from mask several masks to one', async () => { - component.mask = '(000)0000-000||(000)0000-0000||00-00000-00000'; // China phone formats + component.mask.set('(000)0000-000||(000)0000-0000||00-00000-00000'); // China phone formats fixture.detectChanges(); component.form.setValue({ @@ -109,7 +108,7 @@ describe('Directive: Mask (Dynamic)', () => { expect(inputEl.nativeElement.value).toEqual('12-34567-89012'); }); - component.mask = '00-00-00-00'; // For example Denmark phone format + component.mask.set('00-00-00-00'); // For example Denmark phone format fixture.detectChanges(); component.form.setValue({ @@ -124,9 +123,9 @@ describe('Directive: Mask (Dynamic)', () => { it('The input value when set by the FormControl should be masked accordingly the dynamic mask', async () => { let inputEl: DebugElement; - component.mask = 'separator.2'; - component.thousandSeparator = '.'; - component.decimalMarker = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); + component.decimalMarker.set(','); fixture.detectChanges(); @@ -156,7 +155,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('Should update position to the end of input when mask changes while typing', async () => { - component.mask = '(00) 00000000||+00 (00) 00000000'; + component.mask.set('(00) 00000000||+00 (00) 00000000'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -183,7 +182,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with number or letters', () => { - component.mask = '00||SS'; + component.mask.set('00||SS'); equal('0', '0', fixture); equal('11', '11', fixture); equal('D', 'D', fixture); @@ -191,7 +190,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with number or letters', () => { - component.mask = '00||SS||000||000SS||0S0S'; + component.mask.set('00||SS||000||000SS||0S0S'); equal('0', '0', fixture); expect(component.form.valid).toBeFalse(); equal('11', '11', fixture); @@ -215,7 +214,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work for UK Post Codes', () => { - component.mask = 'S0 0SS||SAA 0SS||SS0A 0SS'; + component.mask.set('S0 0SS||SAA 0SS||SS0A 0SS'); equal('A', 'A', fixture); expect(component.form.valid).toBeFalse(); equal('A0', 'A0', fixture); @@ -229,7 +228,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with number or letters', () => { - component.mask = '00||SS||000||000SS'; + component.mask.set('00||SS||000||000SS'); equal('0', '0', fixture); expect(component.form.invalid).toBeTrue(); equal('11', '11', fixture); @@ -247,8 +246,8 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should be valid if mask dont changes 00000||00000-0000', () => { - component.mask = '00000||00000-0000'; - component.showMaskTyped = true; + component.mask.set('00000||00000-0000'); + component.showMaskTyped.set(true); equal('1', '1____', fixture); expect(component.form.invalid).toBeTrue(); equal('11', '11___', fixture); @@ -270,7 +269,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with when justPasted', () => { - component.mask = '00000||S0S 0S0'; + component.mask.set('00000||S0S 0S0'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -285,7 +284,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with only S', () => { - component.mask = 'S.||S.S.||S.S.S.||S.S.S.S.||S.S.S.S.S.'; + component.mask.set('S.||S.S.||S.S.S.||S.S.S.S.||S.S.S.S.S.'); equal('D', 'D.', fixture); equal('D.D', 'D.D.', fixture); equal('DDD', 'D.D.D.', fixture); @@ -294,7 +293,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with only A', () => { - component.mask = 'A.||A.A.||A.A.A.||A.A.A.A.||A.A.A.A.A.'; + component.mask.set('A.||A.A.||A.A.A.||A.A.A.A.||A.A.A.A.A.'); equal('D', 'D.', fixture); equal('D.D', 'D.D.', fixture); equal('DDD', 'D.D.D.', fixture); @@ -303,7 +302,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with only U', () => { - component.mask = 'U.||U.U.||U.U.U.||U.U.U.U.||U.U.U.U.U.'; + component.mask.set('U.||U.U.||U.U.U.||U.U.U.U.||U.U.U.U.U.'); equal('D', 'D.', fixture); equal('D.D', 'D.D.', fixture); equal('DDD', 'D.D.D.', fixture); @@ -312,7 +311,7 @@ describe('Directive: Mask (Dynamic)', () => { }); it('should work with only L', () => { - component.mask = 'L.||L.L.||L.L.L.||L.L.L.L.||L.L.L.L.L.'; + component.mask.set('L.||L.L.||L.L.L.||L.L.L.L.||L.L.L.L.L.'); equal('d', 'd.', fixture); equal('d.d', 'd.d.', fixture); equal('ddd', 'd.d.d.', fixture); diff --git a/projects/ngx-mask-lib/src/test/export-as.spec.ts b/projects/ngx-mask-lib/src/test/export-as.spec.ts index 231087b4..800a526b 100644 --- a/projects/ngx-mask-lib/src/test/export-as.spec.ts +++ b/projects/ngx-mask-lib/src/test/export-as.spec.ts @@ -3,8 +3,7 @@ import { TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/forms'; import { Component, viewChild } from '@angular/core'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; @Component({ selector: 'jsdaddy-open-source-test', diff --git a/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts b/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts index 56ae77b2..1d0fd98c 100644 --- a/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts +++ b/projects/ngx-mask-lib/src/test/inputTransformFn.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; +import { provideNgxMask, NgxMaskDirective } from 'ngx-mask'; describe('Directive: Mask', () => { let fixture: ComponentFixture; @@ -22,8 +21,8 @@ describe('Directive: Mask', () => { }); it('inputTransformFn should return value toUpperCase', () => { - component.mask = 'S*'; - component.inputTransformFn = (value: unknown): string => String(value).toUpperCase(); + component.mask.set('S*'); + component.inputTransformFn.set((value: unknown): string => String(value).toUpperCase()); equal('a', 'A', fixture); equal('an', 'AN', fixture); @@ -34,9 +33,10 @@ describe('Directive: Mask', () => { }); it('inputTransformFn should return value formValue toUpperCase', () => { - component.mask = 'S*'; - component.outputTransformFn = (value: string | number | undefined | null): string => - String(value).toUpperCase(); + component.mask.set('S*'); + component.outputTransformFn.set((value: string | number | undefined | null): string => + String(value).toUpperCase() + ); equal('a', 'a', fixture); equal('an', 'an', fixture); @@ -48,10 +48,11 @@ describe('Directive: Mask', () => { }); it('inputTransformFn should return value formValue toUpperCase but input value to lowerCase', () => { - component.mask = 'S*'; - component.outputTransformFn = (value: string | number | undefined | null): string => - String(value).toUpperCase(); - component.inputTransformFn = (value: unknown): string => String(value).toLowerCase(); + component.mask.set('S*'); + component.outputTransformFn.set((value: string | number | undefined | null): string => + String(value).toUpperCase() + ); + component.inputTransformFn.set((value: unknown): string => String(value).toLowerCase()); equal('A', 'a', fixture); equal('AN', 'an', fixture); @@ -63,14 +64,14 @@ describe('Directive: Mask', () => { }); it('separator.2 should replace dot in model', () => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; - component.outputTransformFn = (value: string | number | undefined | null): string => { + component.mask.set('separator.2'); + component.decimalMarker.set('.'); + component.outputTransformFn.set((value: string | number | undefined | null): string => { if (String(value).includes('.')) { return String(value).replace('.', ','); } return String(value); - }; + }); equal('10.2', '10.2', fixture); expect(component.form.value).toBe('10,2'); @@ -83,16 +84,16 @@ describe('Directive: Mask', () => { }); it('separator.3 should toFixed value in model and return Number', () => { - component.mask = 'separator.3'; - component.decimalMarker = '.'; - component.outputTransformFn = (value: string | number | undefined | null): number => { + component.mask.set('separator.3'); + component.decimalMarker.set('.'); + component.outputTransformFn.set((value: string | number | undefined | null): number => { if (String(value).includes('.')) { const numberValue = parseFloat(String(value)); const formattedValue = Number(numberValue.toFixed(2)); return formattedValue; } return Number(value); - }; + }); equal('237.356', '237.356', fixture); expect(component.form.value).toBe(237.36); @@ -105,14 +106,14 @@ describe('Directive: Mask', () => { }); it('mask 000.00 should replace dot in model', () => { - component.mask = '000.00'; - component.dropSpecialCharacters = false; - component.outputTransformFn = (value: string | number | undefined | null): string => { + component.mask.set('000.00'); + component.dropSpecialCharacters.set(false); + component.outputTransformFn.set((value: string | number | undefined | null): string => { if (String(value).includes('.')) { return String(value).replace('.', ','); } return String(value); - }; + }); equal('100.22', '100.22', fixture); expect(component.form.value).toBe('100,22'); @@ -122,10 +123,11 @@ describe('Directive: Mask', () => { }); it('mask separator.1 should return number', () => { - component.mask = 'separator.1'; - component.decimalMarker = ','; - component.outputTransformFn = (value: string | number | undefined | null): number => - Number(value); + component.mask.set('separator.1'); + component.decimalMarker.set(','); + component.outputTransformFn.set((value: string | number | undefined | null): number => + Number(value) + ); equal('123,2', '123,2', fixture); expect(component.form.value).toBe(123.2); @@ -141,10 +143,11 @@ describe('Directive: Mask', () => { }); it('mask separator.1 should return number decimalMarker dot', () => { - component.mask = 'separator.1'; - component.decimalMarker = '.'; - component.outputTransformFn = (value: string | number | undefined | null): number => - Number(value); + component.mask.set('separator.1'); + component.decimalMarker.set('.'); + component.outputTransformFn.set((value: string | number | undefined | null): number => + Number(value) + ); equal('123.4', '123.4', fixture); expect(component.form.value).toBe(123.4); @@ -160,13 +163,13 @@ describe('Directive: Mask', () => { }); it('mask percent should replace dot in model', () => { - component.mask = 'percent.2'; - component.outputTransformFn = (value: string | number | undefined | null): string => { + component.mask.set('percent.2'); + component.outputTransformFn.set((value: string | number | undefined | null): string => { if (String(value).includes('.')) { return String(value).replace('.', ','); } return String(value); - }; + }); equal('1.2', '1.2', fixture); expect(component.form.value).toBe('1,2'); @@ -178,11 +181,11 @@ describe('Directive: Mask', () => { }); it('mask percent should replace dot in model', () => { - component.mask = 'Hh:m0'; - component.showMaskTyped = true; - component.dropSpecialCharacters = false; - component.leadZeroDateTime = true; - component.outputTransformFn = (value: string | number | undefined | null) => { + component.mask.set('Hh:m0'); + component.showMaskTyped.set(true); + component.dropSpecialCharacters.set(false); + component.leadZeroDateTime.set(true); + component.outputTransformFn.set((value: string | number | undefined | null) => { if (value) { const fetch = new Date(); const values = String(value).split(':'); @@ -196,9 +199,9 @@ describe('Directive: Mask', () => { return fetch.toString(); } return; - }; + }); const date = new Date(); - component.inputTransformFn = (value: unknown): string => { + component.inputTransformFn.set((value: unknown): string => { if (typeof value !== 'object') { return String(value); } @@ -206,7 +209,7 @@ describe('Directive: Mask', () => { 2, '0' )}`; - }; + }); component.form.setValue(new Date().toString()); expect(component.form.value).toBe(date.toString()); }); diff --git a/projects/ngx-mask-lib/src/test/mask.pipe.spec.ts b/projects/ngx-mask-lib/src/test/mask.pipe.spec.ts index 40da4fa1..87efc636 100644 --- a/projects/ngx-mask-lib/src/test/mask.pipe.spec.ts +++ b/projects/ngx-mask-lib/src/test/mask.pipe.spec.ts @@ -1,8 +1,6 @@ import { TestBed } from '@angular/core/testing'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskPipe } from '../lib/ngx-mask.pipe'; import type { NgxMaskConfig } from 'ngx-mask'; -import { NgxMaskDirective } from 'ngx-mask'; +import { NgxMaskDirective, provideNgxMask, NgxMaskPipe } from 'ngx-mask'; xdescribe('Pipe: Mask', () => { let maskPipe: NgxMaskPipe; diff --git a/projects/ngx-mask-lib/src/test/percent.spec.ts b/projects/ngx-mask-lib/src/test/percent.spec.ts index 4075b8b7..1682f4f6 100644 --- a/projects/ngx-mask-lib/src/test/percent.spec.ts +++ b/projects/ngx-mask-lib/src/test/percent.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Percent)', () => { let fixture: ComponentFixture; @@ -22,60 +21,60 @@ describe('Directive: Mask (Percent)', () => { }); it('percent for empty', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('', '', fixture); }); it('percent for 100', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('100', '100', fixture); }); it('percent for 99', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('99', '99', fixture); }); it('percent for 123', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('123', '12', fixture); }); it('percent for 99.99', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('99.99', '99.99', fixture); }); it('percent for 99', () => { - component.mask = 'percent.0'; + component.mask.set('percent.0'); equal('99.99999', '99', fixture); }); it('percent for 99.99', () => { - component.mask = 'percent.2'; + component.mask.set('percent.2'); equal('99.9999', '99.99', fixture); }); it('percent for 1.123', () => { - component.mask = 'percent.3'; + component.mask.set('percent.3'); equal('1.12345', '1.123', fixture); }); it('percent for 123.23', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('123.23', '12.23', fixture); }); it('percent with suffix', () => { - component.mask = 'percent'; - component.suffix = '%'; + component.mask.set('percent'); + component.suffix.set('%'); equal('50', '50%', fixture); equal('123', '12%', fixture); equal('50.50', '50.50%', fixture); }); it('percent for split zero percent.2', () => { - component.mask = 'percent.2'; + component.mask.set('percent.2'); equal('01.23', '1.23', fixture); equal('012.23', '12.23', fixture); equal('099.23', '99.23', fixture); @@ -84,7 +83,7 @@ describe('Directive: Mask (Percent)', () => { }); it('percent for split zero percent', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('01.23', '1.23', fixture); equal('012.23', '12.23', fixture); equal('099.23', '99.23', fixture); @@ -93,7 +92,7 @@ describe('Directive: Mask (Percent)', () => { }); it('percent for split zero percent.3', () => { - component.mask = 'percent.3'; + component.mask.set('percent.3'); equal('01.233', '1.233', fixture); equal('012.232', '12.232', fixture); equal('099.230', '99.230', fixture); @@ -102,8 +101,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent for split zero percent.2 should be valid', () => { - component.mask = 'percent.2'; - component.validation = true; + component.mask.set('percent.2'); + component.validation.set(true); fixture.detectChanges(); equal('1', '1', fixture); @@ -112,8 +111,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent for split zero percent.3 should be valid', () => { - component.mask = 'percent.3'; - component.validation = true; + component.mask.set('percent.3'); + component.validation.set(true); fixture.detectChanges(); equal('1', '1', fixture); @@ -122,8 +121,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent for split zero percent should be valid', () => { - component.mask = 'percent'; - component.validation = true; + component.mask.set('percent'); + component.validation.set(true); fixture.detectChanges(); equal('1', '1', fixture); @@ -132,8 +131,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.2 ', () => { - component.mask = 'percent.2'; - component.decimalMarker = ','; + component.mask.set('percent.2'); + component.decimalMarker.set(','); equal('1', '1', fixture); equal('12', '12', fixture); @@ -143,8 +142,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.3 ', () => { - component.mask = 'percent.3'; - component.decimalMarker = ','; + component.mask.set('percent.3'); + component.decimalMarker.set(','); equal('1', '1', fixture); equal('12', '12', fixture); @@ -155,9 +154,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.2 drop false ', () => { - component.mask = 'percent.2'; - component.dropSpecialCharacters = false; - component.decimalMarker = ','; + component.mask.set('percent.2'); + component.dropSpecialCharacters.set(false); + component.decimalMarker.set(','); equal('1', '1', fixture); equal('12', '12', fixture); @@ -167,9 +166,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.3 drop false ', () => { - component.mask = 'percent.3'; - component.dropSpecialCharacters = false; - component.decimalMarker = ','; + component.mask.set('percent.3'); + component.dropSpecialCharacters.set(false); + component.decimalMarker.set(','); equal('2', '2', fixture); equal('22', '22', fixture); @@ -179,10 +178,10 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.2 drop false with suffix ', () => { - component.mask = 'percent.2'; - component.dropSpecialCharacters = false; - component.decimalMarker = ','; - component.suffix = '%'; + component.mask.set('percent.2'); + component.dropSpecialCharacters.set(false); + component.decimalMarker.set(','); + component.suffix.set('%'); equal('1', '1%', fixture); equal('12', '12%', fixture); @@ -192,10 +191,10 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.3 drop false with suffix ', () => { - component.mask = 'percent.3'; - component.dropSpecialCharacters = false; - component.suffix = '%'; - component.decimalMarker = ','; + component.mask.set('percent.3'); + component.dropSpecialCharacters.set(false); + component.suffix.set('%'); + component.decimalMarker.set(','); equal('2', '2%', fixture); equal('22', '22%', fixture); @@ -205,9 +204,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.2with suffix ', () => { - component.mask = 'percent.2'; - component.suffix = '%'; - component.decimalMarker = ','; + component.mask.set('percent.2'); + component.suffix.set('%'); + component.decimalMarker.set(','); equal('1', '1%', fixture); equal('12', '12%', fixture); @@ -217,9 +216,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with decimalMarker = , percent.3 with suffix ', () => { - component.mask = 'percent.3'; - component.suffix = '%'; - component.decimalMarker = ','; + component.mask.set('percent.3'); + component.suffix.set('%'); + component.decimalMarker.set(','); equal('2', '2%', fixture); equal('22', '22%', fixture); @@ -229,8 +228,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with allowNegative = true', () => { - component.mask = 'percent'; - component.allowNegativeNumbers = true; + component.mask.set('percent'); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -240,8 +239,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with allowNegative = true', () => { - component.mask = 'percent.1'; - component.allowNegativeNumbers = true; + component.mask.set('percent.1'); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -251,9 +250,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with allowNegative = true', () => { - component.mask = 'percent.1'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + component.mask.set('percent.1'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -263,8 +262,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent 2 with allowNegative = true', () => { - component.mask = 'percent.2'; - component.allowNegativeNumbers = true; + component.mask.set('percent.2'); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -279,8 +278,8 @@ describe('Directive: Mask (Percent)', () => { }); it('percent 3 with allowNegative = true', () => { - component.mask = 'percent.3'; - component.allowNegativeNumbers = true; + component.mask.set('percent.3'); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -297,9 +296,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent with allowNegative = true, decimalMarker = ,', () => { - component.mask = 'percent'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + component.mask.set('percent'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -309,9 +308,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent 2 with allowNegative = true, decimalMarker = ,', () => { - component.mask = 'percent.2'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + component.mask.set('percent.2'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); equal('-', '-', fixture); equal('-0', '-0', fixture); @@ -326,9 +325,9 @@ describe('Directive: Mask (Percent)', () => { }); it('percent 3 with allowNegative = true, decimalMarker = ,', () => { - component.mask = 'percent.3'; - component.allowNegativeNumbers = true; - component.decimalMarker = ','; + component.mask.set('percent.3'); + component.allowNegativeNumbers.set(true); + component.decimalMarker.set(','); equal('-', '-', fixture); equal('-0', '-0', fixture); diff --git a/projects/ngx-mask-lib/src/test/place-holder-character.spec.ts b/projects/ngx-mask-lib/src/test/place-holder-character.spec.ts index ef95b8ab..7c983c11 100644 --- a/projects/ngx-mask-lib/src/test/place-holder-character.spec.ts +++ b/projects/ngx-mask-lib/src/test/place-holder-character.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Placeholder character)', () => { let fixture: ComponentFixture; @@ -22,25 +21,25 @@ describe('Directive: Mask (Placeholder character)', () => { }); it('should display the default placeholder when not configured', () => { - component.mask = '(000) 000-0000'; - component.showMaskTyped = true; + component.mask.set('(000) 000-0000'); + component.showMaskTyped.set(true); equal('', '(___) ___-____', fixture); equal('2345678', '(234) 567-8___', fixture); - component.prefix = '+7'; - component.showMaskTyped = true; + component.prefix.set('+7'); + component.showMaskTyped.set(true); equal('', '+7(___) ___-____', fixture); equal('2345678', '+7(234) 567-8___', fixture); - component.mask = 'IP'; - component.prefix = ''; - component.showMaskTyped = true; + component.mask.set('IP'); + component.prefix.set(''); + component.showMaskTyped.set(true); equal('', '_._._._', fixture); equal('1921681', '192.168.1_', fixture); - component.mask = 'CPF_CNPJ'; - component.prefix = ''; - component.showMaskTyped = true; + component.mask.set('CPF_CNPJ'); + component.prefix.set(''); + component.showMaskTyped.set(true); equal('', '___.___.___-__', fixture); equal('1', '1__.___.___-__', fixture); equal('12', '12_.___.___-__', fixture); @@ -57,9 +56,9 @@ describe('Directive: Mask (Placeholder character)', () => { equal('1234567890123', '12.345.678/9012-3_', fixture); equal('12345678901234', '12.345.678/9012-34', fixture); - component.mask = '000.000.000-00||00.000.000/0000-00'; - component.prefix = ''; - component.showMaskTyped = true; + component.mask.set('000.000.000-00||00.000.000/0000-00'); + component.prefix.set(''); + component.showMaskTyped.set(true); equal('1', '1__.___.___-__', fixture); equal('12', '12_.___.___-__', fixture); equal('123', '123.___.___-__', fixture); @@ -75,9 +74,9 @@ describe('Directive: Mask (Placeholder character)', () => { equal('1234567890123', '12.345.678/9012-3_', fixture); equal('12345678901234', '12.345.678/9012-34', fixture); - component.mask = '(00) 0000-0000||(00) 0 0000-0000'; - component.prefix = ''; - component.showMaskTyped = true; + component.mask.set('(00) 0000-0000||(00) 0 0000-0000'); + component.prefix.set(''); + component.showMaskTyped.set(true); equal('1', '(1_) ____-____', fixture); equal('12', '(12) ____-____', fixture); equal('123', '(12) 3___-____', fixture); @@ -104,26 +103,26 @@ describe('Directive: Mask (Placeholder character)', () => { }); it('should display the modified placeholder when configured', () => { - component.mask = '(000) 000-0000'; - component.showMaskTyped = true; - component.placeHolderCharacter = '*'; + component.mask.set('(000) 000-0000'); + component.showMaskTyped.set(true); + component.placeHolderCharacter.set('*'); equal('', '(***) ***-****', fixture); equal('2345678', '(234) 567-8***', fixture); - component.prefix = '+7'; - component.showMaskTyped = true; + component.prefix.set('+7'); + component.showMaskTyped.set(true); equal('', '+7(***) ***-****', fixture); equal('2345678', '+7(234) 567-8***', fixture); - component.mask = 'IP'; - component.prefix = ''; - component.showMaskTyped = true; + component.mask.set('IP'); + component.prefix.set(''); + component.showMaskTyped.set(true); equal('', '*.*.*.*', fixture); equal('1921681', '192.168.1*', fixture); - component.mask = 'CPF_CNPJ'; - component.prefix = ''; - component.showMaskTyped = true; + component.mask.set('CPF_CNPJ'); + component.prefix.set(''); + component.showMaskTyped.set(true); equal('', '***.***.***-**', fixture); equal('1', '1**.***.***-**', fixture); equal('12', '12*.***.***-**', fixture); diff --git a/projects/ngx-mask-lib/src/test/repeat-mask.spec.ts b/projects/ngx-mask-lib/src/test/repeat-mask.spec.ts index 318468a1..dbecd372 100644 --- a/projects/ngx-mask-lib/src/test/repeat-mask.spec.ts +++ b/projects/ngx-mask-lib/src/test/repeat-mask.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Directive: Mask (Repeat)', () => { let fixture: ComponentFixture; @@ -22,40 +21,40 @@ describe('Directive: Mask (Repeat)', () => { }); it('repeat mask', () => { - component.mask = '0{4}'; + component.mask.set('0{4}'); equal('1234', '1234', fixture); }); it('should work when repeat value is more then 9', () => { - component.mask = 'A{12}'; + component.mask.set('A{12}'); equal('123456789ABC', '123456789ABC', fixture); }); it('should correctly handle leading zeros', () => { - component.mask = 'A{02}'; + component.mask.set('A{02}'); equal('1234', '12', fixture); - component.mask = 'A{0000012}'; + component.mask.set('A{0000012}'); equal('123456789ABCDE', '123456789ABC', fixture); }); it('should repeat digits only', () => { - component.mask = '0{6}'; + component.mask.set('0{6}'); equal('AbC12345678Bfc', '123456', fixture); }); it('should repeat digits and letters', () => { - component.mask = 'A{6}'; + component.mask.set('A{6}'); equal('AbC12345678Bfc', 'AbC123', fixture); }); it('should repeat only letters', () => { - component.mask = 'S{6}'; + component.mask.set('S{6}'); equal('AbC12345678Bfc', 'AbCBfc', fixture); }); it('repeat mask date', () => { - component.mask = '0{2}/0{2}/0{4}'; + component.mask.set('0{2}/0{2}/0{4}'); equal('12345678', '12/34/5678', fixture); }); @@ -65,13 +64,13 @@ describe('Directive: Mask (Repeat)', () => { // }); it('specialCharacters quotes', () => { - component.mask = '0-0-0*-0*-0*'; + component.mask.set('0-0-0*-0*-0*'); equal('123', '1-2-3', fixture); equal('123-42-', '1-2-3-42-', fixture); }); it('should repeat digits only and work with dynamicMask', () => { - component.mask = '0{4}||0{6}'; + component.mask.set('0{4}||0{6}'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -81,7 +80,7 @@ describe('Directive: Mask (Repeat)', () => { }); it('should repeat digits only and work with dynamicMask', () => { - component.mask = 'SS0{4}'; + component.mask.set('SS0{4}'); equal('d', 'd', fixture); equal('dd', 'dd', fixture); equal('dd1', 'dd1', fixture); @@ -91,7 +90,7 @@ describe('Directive: Mask (Repeat)', () => { }); it('should repeat digits only and work with dynamicMask', () => { - component.mask = 'A{5}.S{2}'; + component.mask.set('A{5}.S{2}'); equal('d', 'd', fixture); equal('dd', 'dd', fixture); equal('dd1', 'dd1', fixture); @@ -102,7 +101,7 @@ describe('Directive: Mask (Repeat)', () => { }); it('should A{8} be valid if length 8', () => { - component.mask = 'A{8}'; + component.mask.set('A{8}'); equal('1', '1', fixture); expect(component.form.valid).toBe(false); equal('12', '12', fixture); @@ -128,7 +127,7 @@ describe('Directive: Mask (Repeat)', () => { }); it('should A{9} be valid if length 9', () => { - component.mask = 'A{9}'; + component.mask.set('A{9}'); equal('1', '1', fixture); expect(component.form.valid).toBe(false); equal('12', '12', fixture); @@ -157,7 +156,7 @@ describe('Directive: Mask (Repeat)', () => { }); it('should A{10} be valid if length 10', () => { - component.mask = 'A{10}'; + component.mask.set('A{10}'); equal('1', '1', fixture); expect(component.form.valid).toBe(false); equal('12', '12', fixture); diff --git a/projects/ngx-mask-lib/src/test/secure-mask.spec.ts b/projects/ngx-mask-lib/src/test/secure-mask.spec.ts index 295659a5..7916b436 100644 --- a/projects/ngx-mask-lib/src/test/secure-mask.spec.ts +++ b/projects/ngx-mask-lib/src/test/secure-mask.spec.ts @@ -5,8 +5,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal, typeTest } from './utils/test-functions.component'; -import { provideNgxMask } from 'ngx-mask'; -import { NgxMaskDirective } from 'ngx-mask'; +import { provideNgxMask, NgxMaskDirective } from 'ngx-mask'; import type { DebugElement } from '@angular/core'; import { By } from '@angular/platform-browser'; @@ -25,50 +24,50 @@ describe('Directive: Mask (Secure)', () => { }); it('it checks secure input functionality ', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); equal('1234', '***/*', fixture); expect(component.form.value).toBe('1234'); }); it('it checks secure input functionality ', () => { - component.mask = 'XXX/XX/0000'; - component.hiddenInput = true; + component.mask.set('XXX/XX/0000'); + component.hiddenInput.set(true); equal('123456789', '***/**/6789', fixture); expect(component.form.value).toBe('123456789'); }); it('it checks secure input functionality ', () => { - component.mask = 'XXX/XX/XXX0'; - component.hiddenInput = true; + component.mask.set('XXX/XX/XXX0'); + component.hiddenInput.set(true); equal('123456789', '***/**/***9', fixture); expect(component.form.value).toBe('123456789'); }); it('it checks secure input functionality ', () => { - component.mask = 'XXX/XX/XXXX'; - component.hiddenInput = true; + component.mask.set('XXX/XX/XXXX'); + component.hiddenInput.set(true); equal('123456789', '***/**/****', fixture); expect(component.form.value).toBe('123456789'); }); it('it checks secure input functionality ', () => { - component.mask = '0000-00-XXXX'; - component.hiddenInput = true; + component.mask.set('0000-00-XXXX'); + component.hiddenInput.set(true); equal('123456789', '1234-56-***', fixture); expect(component.form.value).toBe('123456789'); }); it('it checks secure input functionality ', () => { - component.mask = '0000-X0-XXXX'; - component.hiddenInput = true; + component.mask.set('0000-X0-XXXX'); + component.hiddenInput.set(true); equal('123456789', '1234-*6-***', fixture); expect(component.form.value).toBe('123456789'); }); it('it checks secure input functionality on reset', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); typeTest('54321', fixture); component.form.reset(); @@ -79,16 +78,16 @@ describe('Directive: Mask (Secure)', () => { }); it('it checks secure input functionality on reset then typed', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); typeTest('54321', fixture); component.form.reset(); equal('98765', '***/*5', fixture); }); it('it checks secure input functionality on setValue(longer string)', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); typeTest('54321', fixture); component.form.reset(); @@ -99,14 +98,14 @@ describe('Directive: Mask (Secure)', () => { }); it('should be same form state (pristine) after mask change triggerOnMaskChange = true', async () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; - component.triggerOnMaskChange = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); + component.triggerOnMaskChange.set(true); component.form.reset('123456789'); fixture.detectChanges(); expect(component.form.dirty).toBeTruthy(); expect(component.form.pristine).toBeFalsy(); - component.mask = '000/00/0000'; + component.mask.set('000/00/0000'); fixture.detectChanges(); expect(component.form.dirty).toBeTruthy(); expect(component.form.pristine).toBeFalsy(); @@ -116,15 +115,15 @@ describe('Directive: Mask (Secure)', () => { }); it('should be same form state (dirty) after mask change', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); component.form.reset('123456789'); component.form.markAsDirty(); component.form.markAsTouched(); fixture.detectChanges(); expect(component.form.dirty).toBeTruthy(); expect(component.form.pristine).toBeFalsy(); - component.mask = '000/00/0000'; + component.mask.set('000/00/0000'); fixture.detectChanges(); expect(component.form.dirty).toBeTruthy(); expect(component.form.pristine).toBeFalsy(); @@ -134,8 +133,8 @@ describe('Directive: Mask (Secure)', () => { }); it('should not keep shadow copy when form reset', () => { - component.hiddenInput = true; - component.mask = 'XXX/X0/0000'; + component.hiddenInput.set(true); + component.mask.set('XXX/X0/0000'); equal('54321', '***/*1', fixture); typeTest('1', fixture); expect(component.form.value).toBe('1'); @@ -146,19 +145,19 @@ describe('Directive: Mask (Secure)', () => { }); it('mask changes should work with null input', () => { - component.hiddenInput = true; - component.mask = '000/00/0000'; + component.hiddenInput.set(true); + component.mask.set('000/00/0000'); equal('987654321', '987/65/4321', fixture); component.form.reset(); - component.mask = 'XXX/X0/0000'; + component.mask.set('XXX/X0/0000'); equal('54321', '***/*1', fixture); expect(component.form.value).toBe('54321'); }); it('it checks secure input functionality on reset then typed', () => { - component.mask = 'XXX/X0/0000'; - component.hiddenInput = true; - component.showMaskTyped = true; + component.mask.set('XXX/X0/0000'); + component.hiddenInput.set(true); + component.showMaskTyped.set(true); equal('98765', '***/*5/____', fixture); equal('1234', '***/*_/____', fixture); equal('', '___/__/____', fixture); @@ -184,9 +183,9 @@ describe('Directive: Mask (Secure)', () => { })); it('hideInput with showMaskTyped mask=XXXX', () => { - component.mask = 'XXXX'; - component.hiddenInput = true; - component.showMaskTyped = true; + component.mask.set('XXXX'); + component.hiddenInput.set(true); + component.showMaskTyped.set(true); equal('1', '*___', fixture); equal('12', '**__', fixture); equal('123', '***_', fixture); @@ -194,9 +193,9 @@ describe('Directive: Mask (Secure)', () => { }); it('hideInput with showMaskTyped mask=XX-XX', () => { - component.mask = 'XX-XX'; - component.hiddenInput = true; - component.showMaskTyped = true; + component.mask.set('XX-XX'); + component.hiddenInput.set(true); + component.showMaskTyped.set(true); equal('1234', '**-**', fixture); }); @@ -206,11 +205,11 @@ describe('Directive: Mask (Secure)', () => { const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); fixture.detectChanges(); - component.mask = 'XXX-XX-XXXX'; - component.hiddenInput = true; + component.mask.set('XXX-XX-XXXX'); + component.hiddenInput.set(true); equal('1234', '***-*', fixture); fixture.detectChanges(); - component.hiddenInput = false; + component.hiddenInput.set(false); equal(inputTarget.value, '123-4', fixture, true); }); @@ -219,11 +218,11 @@ describe('Directive: Mask (Secure)', () => { const inputTarget: HTMLInputElement = debug.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); fixture.detectChanges(); - component.mask = 'XXX-XX-XXXX'; - component.hiddenInput = true; + component.mask.set('XXX-XX-XXXX'); + component.hiddenInput.set(true); equal('123456', '***-**-*', fixture); fixture.detectChanges(); - component.hiddenInput = false; + component.hiddenInput.set(false); equal(inputTarget.value, '123-45-6', fixture, true); }); @@ -232,12 +231,12 @@ describe('Directive: Mask (Secure)', () => { const inputTarget: HTMLInputElement = debug.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); fixture.detectChanges(); - component.mask = 'XXX/XX/XXXX'; - component.hiddenInput = true; + component.mask.set('XXX/XX/XXXX'); + component.hiddenInput.set(true); equal('123456789', '***/**/****', fixture); expect(component.form.value).toBe('123456789'); fixture.detectChanges(); - component.hiddenInput = false; + component.hiddenInput.set(false); equal(inputTarget.value, '123/45/6789', fixture, true); expect(component.form.value).toBe('123456789'); }); diff --git a/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts b/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts index 527fc9bb..f14503af 100644 --- a/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts +++ b/projects/ngx-mask-lib/src/test/separator-non-en-locale.spec.ts @@ -5,8 +5,7 @@ import { LOCALE_ID } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal, typeTest } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; import { By } from '@angular/platform-browser'; // FR locale uses comma as decimal marker @@ -25,38 +24,38 @@ describe('Separator: Mask with FR locale', () => { }); it('Should work right when reset decimalMarker', () => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; + component.mask.set('separator.2'); + component.decimalMarker.set('.'); 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 = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); + component.decimalMarker.set('.'); 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 = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); + component.decimalMarker.set('.'); equal('12345.67', '12,345.67', fixture); }); it('check formControl value to be number when decimalMarker is dot', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ' '; - component.decimalMarker = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.decimalMarker.set('.'); 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 = ['.', ',']; + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.decimalMarker.set(['.', ',']); typeTest('12 345,67', fixture); expect(component.form.value).toBe('12345.67'); @@ -66,10 +65,10 @@ describe('Separator: Mask with FR locale', () => { }); it('should show - at input', fakeAsync(() => { - component.mask = 'separator.2'; - component.thousandSeparator = ' '; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); diff --git a/projects/ngx-mask-lib/src/test/separator.spec.ts b/projects/ngx-mask-lib/src/test/separator.spec.ts index 1f2e8ea0..521abee4 100644 --- a/projects/ngx-mask-lib/src/test/separator.spec.ts +++ b/projects/ngx-mask-lib/src/test/separator.spec.ts @@ -5,9 +5,7 @@ import type { DebugElement } from '@angular/core'; import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal, typeTest } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; -import { initialConfig } from 'ngx-mask'; +import { initialConfig, NgxMaskDirective, provideNgxMask } from 'ngx-mask'; describe('Separator: Mask', () => { let fixture: ComponentFixture; @@ -24,113 +22,113 @@ describe('Separator: Mask', () => { }); it('separator for empty', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('', '', fixture); }); it('separator for 100', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('100', '100', fixture); }); it('separator for -100', () => { - component.mask = 'separator'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.allowNegativeNumbers.set(true); equal('-100', '-100', fixture); }); it('separator for 1000', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('1000', '1 000', fixture); }); it('separator for -1000', () => { - component.mask = 'separator'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.allowNegativeNumbers.set(true); equal('-1000', '-1 000', fixture); }); it('separator for 10000', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('10000', '10 000', fixture); }); it('separator for -10000', () => { - component.mask = 'separator'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.allowNegativeNumbers.set(true); equal('-10000', '-10 000', fixture); }); it('separator for -100000', () => { - component.mask = 'separator'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.allowNegativeNumbers.set(true); equal('-100000', '-100 000', fixture); }); it('separator for 100000', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('100000', '100 000', fixture); }); it('separator for 1000000', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('1000000', '1 000 000', fixture); }); it('separator for -1000000', () => { - component.mask = 'separator'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.allowNegativeNumbers.set(true); equal('-1000000', '-1 000 000', fixture); }); it('should limit separator to 1000', () => { - component.mask = 'separator'; - component.separatorLimit = '1000'; + component.mask.set('separator'); + component.separatorLimit.set('1000'); equal('1000000', '1 000', fixture); }); it('separator precision 2 for 1000000.00', () => { - component.mask = 'separator.2'; + component.mask.set('separator.2'); equal('1000000.00', '1 000 000.00', fixture); }); it('separator precision 2 for -1000000.00', () => { - component.mask = 'separator.2'; - component.allowNegativeNumbers = true; + component.mask.set('separator.2'); + component.allowNegativeNumbers.set(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'; + component.mask.set('separator.2'); + component.separatorLimit.set('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'; + component.mask.set('separator.2'); + component.separatorLimit.set('10 000'); equal('1000000.00', '10 000.00', fixture); }); it('separator precision 0 for 1000000.00', () => { - component.mask = 'separator.0'; + component.mask.set('separator.0'); equal('1000000.00', '1 000 000', fixture); }); it('separator precision 2 with 0 after point for 1000000.00', () => { - component.mask = 'separator.2'; + component.mask.set('separator.2'); equal('1000000.20', '1 000 000.20', fixture); }); it('separator.2 with suffix', () => { - component.mask = 'separator.2'; - component.suffix = '₽'; + component.mask.set('separator.2'); + component.suffix.set('₽'); equal('50', '50₽', fixture); equal('123 4', '1 234₽', fixture); equal('50.50', '50.50₽', fixture); }); it('separator for letters', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('a', '', fixture); equal('1a', '1', fixture); equal('1000a', '1 000', fixture); @@ -138,122 +136,122 @@ describe('Separator: Mask', () => { }); it('separator thousandSeparator . for 1000000', () => { - component.mask = 'separator'; - component.thousandSeparator = '.'; + component.mask.set('separator'); + component.thousandSeparator.set('.'); equal('1000000', '1.000.000', fixture); }); it('should not add any sperator if thousandSeparator set as empty string', () => { - component.mask = 'separator'; - component.thousandSeparator = ''; + component.mask.set('separator'); + component.thousandSeparator.set(''); 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; + component.mask.set('separator'); + component.thousandSeparator.set('.'); + component.allowNegativeNumbers.set(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; + component.mask.set('separator'); + component.thousandSeparator.set('.'); + component.allowNegativeNumbers.set(true); equal('-100-0000', '-1.000.000', fixture); }); it('should limit separator thousandSeparator . to 100000', () => { - component.mask = 'separator'; - component.thousandSeparator = '.'; - component.separatorLimit = '100000'; + component.mask.set('separator'); + component.thousandSeparator.set('.'); + component.separatorLimit.set('100000'); equal('1000000', '100.000', fixture); }); it('should limit separator thousandSeparator . to -100000', () => { - component.mask = 'separator'; - component.thousandSeparator = '.'; - component.separatorLimit = '100000'; - component.allowNegativeNumbers = true; + component.mask.set('separator'); + component.thousandSeparator.set('.'); + component.separatorLimit.set('100000'); + component.allowNegativeNumbers.set(true); equal('-1000000', '-100.000', fixture); }); it('separator thousandSeparator . precision 2 for 1000000.00', () => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); 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; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); + component.allowNegativeNumbers.set(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 = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); equal('1000000,20', '1.000.000,20', fixture); }); it('separator thousandSeparator . precision 0 for 1000000.00', () => { - component.mask = 'separator.0'; - component.thousandSeparator = '.'; + component.mask.set('separator.0'); + component.thousandSeparator.set('.'); equal('1000000,00', '1.000.000', fixture); }); it('separator thousandSeparator , for 1000000', () => { - component.mask = 'separator'; - component.thousandSeparator = ','; + component.mask.set('separator'); + component.thousandSeparator.set(','); equal('1000000', '1,000,000', fixture); }); it('separator thousandSeparator , precision 2 for 1000000.00', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); 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 = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); equal('1000000.20', '1,000,000.20', fixture); }); it('separator thousandSeparator , precision 0 for 1000000.00', () => { - component.mask = 'separator.0'; - component.thousandSeparator = ','; + component.mask.set('separator.0'); + component.thousandSeparator.set(','); equal('1000000.00', '1,000,000', fixture); }); it(`separator thousandSeparator ' for 1000000`, () => { - component.mask = 'separator'; - component.thousandSeparator = `'`; + component.mask.set('separator'); + component.thousandSeparator.set(`'`); equal('1000000', `1'000'000`, fixture); }); it(`separator thousandSeparator ' precision 2 for 1000000.00`, () => { - component.mask = 'separator.2'; - component.thousandSeparator = `'`; + component.mask.set('separator.2'); + component.thousandSeparator.set(`'`); 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 = `'`; + component.mask.set('separator.2'); + component.thousandSeparator.set(`'`); equal('1000000.20', `1'000'000.20`, fixture); }); it(`separator thousandSeparator ' precision 0 for 1000000.00`, () => { - component.mask = 'separator.0'; - component.thousandSeparator = `'`; + component.mask.set('separator.0'); + component.thousandSeparator.set(`'`); equal('1000000.00', `1'000'000`, fixture); }); it('should not shift cursor for input in-between digits', () => { - component.mask = 'separator.0'; - component.thousandSeparator = ','; + component.mask.set('separator.0'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -268,8 +266,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(3); }); it('should not shift cursor for input in-between digits', () => { - component.mask = 'separator.0'; - component.thousandSeparator = '.'; + component.mask.set('separator.0'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -284,8 +282,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(3); }); it('should not shift cursor for input in-between digits', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -300,8 +298,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(3); }); it('should not shift cursor for input in-between digits', () => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -316,8 +314,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(3); }); it('should not shift cursor for input in-between digits', () => { - component.mask = 'separator'; - component.thousandSeparator = ','; + component.mask.set('separator'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -332,8 +330,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(3); }); it('should not shift cursor for input in-between digits', () => { - component.mask = 'separator'; - component.thousandSeparator = '.'; + component.mask.set('separator'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -349,8 +347,8 @@ describe('Separator: Mask', () => { }); it('should not shift cursor for backspace on in-between digits', () => { - component.mask = 'separator.0'; - component.thousandSeparator = ','; + component.mask.set('separator.0'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -371,8 +369,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(4); }); it('should not shift cursor for backspace on in-between digits', () => { - component.mask = 'separator.0'; - component.thousandSeparator = '.'; + component.mask.set('separator.0'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -394,8 +392,8 @@ describe('Separator: Mask', () => { }); it('should not shift cursor for backspace on in-between digits', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -416,8 +414,8 @@ describe('Separator: Mask', () => { expect(inputTarget.selectionStart).toEqual(7); }); it('should not shift cursor for backspace on in-between digits', () => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -439,8 +437,8 @@ describe('Separator: Mask', () => { }); it('should not shift cursor on backspace when result has no separator', () => { - component.mask = 'separator.0'; - component.thousandSeparator = ','; + component.mask.set('separator.0'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -462,8 +460,8 @@ describe('Separator: Mask', () => { }); it('caret should remain in position when deleting the first digit', () => { - component.mask = 'separator'; - component.thousandSeparator = ','; + component.mask.set('separator'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -484,9 +482,9 @@ describe('Separator: Mask', () => { }); 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.mask.set('separator.8'); + component.specialCharacters.set([',', '.']); + component.allowNegativeNumbers.set(true); component.form.setValue(0.723); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; @@ -519,38 +517,38 @@ describe('Separator: Mask', () => { }); it('Should work right when reset decimalMarker', () => { - component.mask = 'separator.2'; - component.decimalMarker = ','; + component.mask.set('separator.2'); + component.decimalMarker.set(','); 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 = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); + component.decimalMarker.set(','); 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 = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); + component.decimalMarker.set(','); 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 = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.decimalMarker.set(','); 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 = ['.', ',']; + component.mask.set('separator.2'); + component.thousandSeparator.set(' '); + component.decimalMarker.set(['.', ',']); typeTest('12 345,67', fixture); expect(component.form.value).toBe('12345.67'); @@ -560,8 +558,8 @@ describe('Separator: Mask', () => { }); it('right handle character after first 0 value', () => { - component.mask = 'separator'; - component.decimalMarker = ','; + component.mask.set('separator'); + component.decimalMarker.set(','); equal('0', '0', fixture); equal('0,', '0,', fixture); equal('0 ', '0', fixture); @@ -570,7 +568,7 @@ describe('Separator: Mask', () => { equal('0@', '0', fixture); // TODO(inepipenko): strange thet return 0. // equal('0.', '0', fixture); - component.decimalMarker = '.'; + component.decimalMarker.set('.'); equal('0', '0', fixture); equal('0.', '0.', fixture); equal('0 ', '0', fixture); @@ -578,7 +576,7 @@ describe('Separator: Mask', () => { equal('0s', '0', fixture); equal('0@', '0', fixture); equal('0,', '0.', fixture); - component.decimalMarker = ['.', ',']; + component.decimalMarker.set(['.', ',']); equal('0', '0', fixture); equal('0.', '0.', fixture); equal('0,', '0.', fixture); @@ -589,8 +587,8 @@ describe('Separator: Mask', () => { }); it('should add trailing zero when separator.1 and leadZero = true', fakeAsync(() => { - component.mask = 'separator.1'; - component.leadZero = true; + component.mask.set('separator.1'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -614,8 +612,8 @@ describe('Separator: Mask', () => { })); it('should not modify value with one decimal when separator.1 and leadZero = true', fakeAsync(() => { - component.mask = 'separator.1'; - component.leadZero = true; + component.mask.set('separator.1'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -639,8 +637,8 @@ describe('Separator: Mask', () => { })); it('should display zeros at the end separator2', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; + component.mask.set('separator.2'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -712,10 +710,10 @@ describe('Separator: Mask', () => { })); it('should display zeros at the end separator2', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; - component.thousandSeparator = ','; - component.decimalMarker = '.'; + component.mask.set('separator.2'); + component.leadZero.set(true); + component.thousandSeparator.set(','); + component.decimalMarker.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -759,8 +757,8 @@ describe('Separator: Mask', () => { })); it('should display zeros at the end separator3', fakeAsync(() => { - component.mask = 'separator.3'; - component.leadZero = true; + component.mask.set('separator.3'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -828,10 +826,10 @@ describe('Separator: Mask', () => { })); it('should display zeros at the end separator3', fakeAsync(() => { - component.mask = 'separator.3'; - component.leadZero = true; - component.thousandSeparator = ','; - component.decimalMarker = '.'; + component.mask.set('separator.3'); + component.leadZero.set(true); + component.thousandSeparator.set(','); + component.decimalMarker.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -875,10 +873,10 @@ describe('Separator: Mask', () => { })); it('should display zeros at the end separator2', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; - component.thousandSeparator = '.'; - component.decimalMarker = ','; + component.mask.set('separator.2'); + component.leadZero.set(true); + component.thousandSeparator.set('.'); + component.decimalMarker.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -922,10 +920,10 @@ describe('Separator: Mask', () => { })); it('should display zeros at the end separator3', fakeAsync(() => { - component.mask = 'separator.3'; - component.leadZero = true; - component.thousandSeparator = '.'; - component.decimalMarker = ','; + component.mask.set('separator.3'); + component.leadZero.set(true); + component.thousandSeparator.set('.'); + component.decimalMarker.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -969,9 +967,9 @@ describe('Separator: Mask', () => { })); it('should display only 9 separator.2', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; - component.decimalMarker = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); + component.decimalMarker.set('.'); equal('999999999999999', '999,999,999,999,999', fixture); expect(component.form.value).toBe('999999999999999'); @@ -984,9 +982,9 @@ describe('Separator: Mask', () => { }); it('should display only 9 separator.3', () => { - component.mask = 'separator.3'; - component.thousandSeparator = ','; - component.decimalMarker = '.'; + component.mask.set('separator.3'); + component.thousandSeparator.set(','); + component.decimalMarker.set('.'); equal('999999999999999', '999,999,999,999,999', fixture); expect(component.form.value).toBe('999999999999999'); @@ -1000,8 +998,9 @@ describe('Separator: Mask', () => { equal('999999999999999.999', '999,999,999,999,999.999', fixture); expect(component.form.value).toBe('999999999999999.999'); }); + it('should keep the cursor position after deleting a character', () => { - component.mask = 'separator.2'; + component.mask.set('separator.2'); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '123 456'; inputElement.dispatchEvent(new Event('input')); @@ -1017,8 +1016,8 @@ describe('Separator: Mask', () => { }); it('should change formValue separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; + component.mask.set('separator.2'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1033,8 +1032,8 @@ describe('Separator: Mask', () => { })); it('should change formValue separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.leadZero = true; + component.mask.set('separator.3'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1049,9 +1048,9 @@ describe('Separator: Mask', () => { })); it('separator.8 should return number value', fakeAsync(() => { - component.mask = 'separator.8'; - component.thousandSeparator = '.'; - component.decimalMarker = ','; + component.mask.set('separator.8'); + component.thousandSeparator.set('.'); + component.decimalMarker.set(','); equal('12,34', '12,34', fixture); tick(); @@ -1061,9 +1060,9 @@ describe('Separator: Mask', () => { })); it('should display value in input with decimalMarker , and leadZero with separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; - component.decimalMarker = ','; + component.mask.set('separator.2'); + component.leadZero.set(true); + component.decimalMarker.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1087,9 +1086,9 @@ describe('Separator: Mask', () => { })); it('should display value in input with decimalMarker , and leadZero with separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.leadZero = true; - component.decimalMarker = ','; + component.mask.set('separator.3'); + component.leadZero.set(true); + component.decimalMarker.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1113,10 +1112,10 @@ describe('Separator: Mask', () => { })); it('should display value in input with decimalMarker , and leadZero with separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.leadZero = true; - component.decimalMarker = ','; - component.thousandSeparator = '.'; + component.mask.set('separator.3'); + component.leadZero.set(true); + component.decimalMarker.set(','); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1140,10 +1139,10 @@ describe('Separator: Mask', () => { })); it('should display value in input with decimalMarker , and leadZero with separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; - component.decimalMarker = ','; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.leadZero.set(true); + component.decimalMarker.set(','); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1166,152 +1165,152 @@ describe('Separator: Mask', () => { expect(inputTarget.value).toBe('3.000,40'); })); - it('should not allow add two zeros to inputValue', fakeAsync(() => { - component.mask = 'separator.2'; - component.leadZero = true; - component.decimalMarker = ','; - component.thousandSeparator = '.'; - component.allowNegativeNumbers = true; + it('should not allow add two zeros to inputValue', () => { + component.mask.set('separator.2'); + component.leadZero.set(true); + component.decimalMarker.set(','); + component.thousandSeparator.set('.'); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-00', '-0,0', fixture); - })); + }); - it('should not allow add two zeros to inputValue', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; - component.thousandSeparator = ','; - component.allowNegativeNumbers = true; + it('should not allow add two zeros to inputValue', () => { + component.mask.set('separator.2'); + component.decimalMarker.set('.'); + component.thousandSeparator.set(','); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-00', '-0.0', fixture); - })); + }); - it('should not allow add two zeros to inputValue', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = ','; - component.thousandSeparator = '.'; - component.allowNegativeNumbers = true; + it('should not allow add two zeros to inputValue', () => { + component.mask.set('separator.2'); + component.decimalMarker.set(','); + component.thousandSeparator.set('.'); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-00', '-0,0', fixture); - })); + }); - it('should not allow add two zeros to inputValue', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = ','; - component.thousandSeparator = ' '; - component.allowNegativeNumbers = true; + it('should not allow add two zeros to inputValue', () => { + component.mask.set('separator.2'); + component.decimalMarker.set(','); + component.thousandSeparator.set(' '); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-00', '-0,0', fixture); - })); + }); - it('should allow minus after change it to true', fakeAsync(() => { - component.mask = 'separator.2'; - component.allowNegativeNumbers = false; + it('should allow minus after change it to true', () => { + component.mask.set('separator.2'); + component.allowNegativeNumbers.set(false); fixture.detectChanges(); equal('-1234', '1 234', fixture); - component.allowNegativeNumbers = true; + component.allowNegativeNumbers.set(true); equal('-1234', '-1 234', fixture); - })); + }); - it('should change value in formControl mask separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.allowNegativeNumbers = true; - component.specialCharacters = [...initialConfig.specialCharacters]; + it('should change value in formControl mask separator.2', () => { + component.mask.set('separator.2'); + component.allowNegativeNumbers.set(true); + component.specialCharacters.set([...initialConfig.specialCharacters]); fixture.detectChanges(); equal('-1234.10', '-1 234.10', fixture); expect(component.form.value).toBe('-1234.10'); - })); + }); - it('should change value in formControl mask separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.allowNegativeNumbers = true; - component.specialCharacters = [...initialConfig.specialCharacters]; + it('should change value in formControl mask separator.3', () => { + component.mask.set('separator.3'); + component.allowNegativeNumbers.set(true); + component.specialCharacters.set([...initialConfig.specialCharacters]); fixture.detectChanges(); equal('-1234.567', '-1 234.567', fixture); expect(component.form.value).toBe('-1234.567'); - })); + }); - it('should change value in formControl mask separator.1', fakeAsync(() => { - component.mask = 'separator.1'; - component.allowNegativeNumbers = true; - component.specialCharacters = [...initialConfig.specialCharacters]; + it('should change value in formControl mask separator.1', () => { + component.mask.set('separator.1'); + component.allowNegativeNumbers.set(true); + component.specialCharacters.set([...initialConfig.specialCharacters]); fixture.detectChanges(); equal('-1234.9', '-1 234.9', fixture); expect(component.form.value).toBe('-1234.9'); - })); + }); - it('should change value in formControl mask separator.0', fakeAsync(() => { - component.mask = 'separator.0'; - component.allowNegativeNumbers = true; - component.specialCharacters = [...initialConfig.specialCharacters]; + it('should change value in formControl mask separator.0', () => { + component.mask.set('separator.0'); + component.allowNegativeNumbers.set(true); + component.specialCharacters.set([...initialConfig.specialCharacters]); fixture.detectChanges(); equal('-1234', '-1 234', fixture); expect(component.form.value).toBe('-1234'); - })); + }); - it('should change value if user star from zero separator.0', fakeAsync(() => { - component.mask = 'separator.0'; + it('should change value if user star from zero separator.0', () => { + component.mask.set('separator.0'); fixture.detectChanges(); equal('03', '3', fixture); equal('034', '34', fixture); - })); + }); - it('should change value if user star from zero separator.1', fakeAsync(() => { - component.mask = 'separator.1'; - component.decimalMarker = '.'; + it('should change value if user star from zero separator.1', () => { + component.mask.set('separator.1'); + component.decimalMarker.set('.'); fixture.detectChanges(); equal('03', '0.3', fixture); equal('034', '0.3', fixture); equal('.3', '0.3', fixture); equal('.34', '0.3', fixture); - })); + }); - it('should change value if user star from zero separator.1', fakeAsync(() => { - component.mask = 'separator.1'; - component.decimalMarker = ','; + it('should change value if user star from zero separator.1', () => { + component.mask.set('separator.1'); + component.decimalMarker.set(','); fixture.detectChanges(); equal('03', '0,3', fixture); equal('034', '0,3', fixture); equal(',3', '0,3', fixture); equal(',34', '0,3', fixture); - })); + }); - it('should change value if user star from zero separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; + it('should change value if user star from zero separator.2', () => { + component.mask.set('separator.2'); + component.decimalMarker.set('.'); fixture.detectChanges(); equal('03', '0.3', fixture); equal('034', '0.34', fixture); equal('.3', '0.3', fixture); equal('.34', '0.34', fixture); - })); + }); - it('should change value if user star from zero separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = ','; + it('should change value if user star from zero separator.2', () => { + component.mask.set('separator.2'); + component.decimalMarker.set(','); fixture.detectChanges(); equal('03', '0,3', fixture); equal('034', '0,34', fixture); equal(',3', '0,3', fixture); equal(',34', '0,34', fixture); - })); + }); - it('should change value if user star from zero separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.decimalMarker = '.'; + it('should change value if user star from zero separator.3', () => { + component.mask.set('separator.3'); + component.decimalMarker.set('.'); fixture.detectChanges(); equal('03', '0.3', fixture); @@ -1319,11 +1318,11 @@ describe('Separator: Mask', () => { equal('.3', '0.3', fixture); equal('.34', '0.34', fixture); equal('.345', '0.345', fixture); - })); + }); - it('should change value if user star from zero separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.decimalMarker = ','; + it('should change value if user star from zero separator.3', () => { + component.mask.set('separator.3'); + component.decimalMarker.set(','); fixture.detectChanges(); equal('03', '0,3', fixture); @@ -1331,69 +1330,69 @@ describe('Separator: Mask', () => { equal(',3', '0,3', fixture); equal(',34', '0,34', fixture); equal(',345', '0,345', fixture); - })); + }); - it('should change value if user star from zero separator.0 with allowNegativeNumber', fakeAsync(() => { - component.mask = 'separator.0'; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.0 with allowNegativeNumber', () => { + component.mask.set('separator.0'); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-3', fixture); equal('-034', '-34', fixture); - })); + }); - it('should change value if user star from zero separator.1 with allowNegativeNumber', fakeAsync(() => { - component.mask = 'separator.1'; - component.decimalMarker = '.'; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.1 with allowNegativeNumber', () => { + component.mask.set('separator.1'); + component.decimalMarker.set('.'); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-0.3', fixture); equal('-034', '-0.3', fixture); equal('-.3', '-0.3', fixture); equal('-.34', '-0.3', fixture); - })); + }); - it('should change value if user star from zero separator.1 with allowNegativeNumber decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.1'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.1 with allowNegativeNumber decimalMarker= ,', () => { + component.mask.set('separator.1'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-0,3', fixture); equal('-034', '-0,3', fixture); equal('-,3', '-0,3', fixture); equal('-,34', '-0,3', fixture); - })); + }); - it('should change value if user star from zero separator.2 with allowNegativeNumber', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.2 with allowNegativeNumber', () => { + component.mask.set('separator.2'); + component.decimalMarker.set('.'); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-0.3', fixture); equal('-034', '-0.34', fixture); equal('-.3', '-0.3', fixture); equal('-.34', '-0.34', fixture); - })); + }); - it('should change value if user star from zero separator.2 with allowNegativeNumber', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.2 with allowNegativeNumber', () => { + component.mask.set('separator.2'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-0,3', fixture); equal('-034', '-0,34', fixture); equal('-,3', '-0,3', fixture); equal('-,34', '-0,34', fixture); - })); + }); - it('should change value if user star from zero separator.3 with allowNegativeNumber', fakeAsync(() => { - component.mask = 'separator.3'; - component.decimalMarker = '.'; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.3 with allowNegativeNumber', () => { + component.mask.set('separator.3'); + component.decimalMarker.set('.'); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-0.3', fixture); @@ -1402,12 +1401,12 @@ describe('Separator: Mask', () => { equal('-.3', '-0.3', fixture); equal('-.34', '-0.34', fixture); equal('-.345', '-0.345', fixture); - })); + }); - it('should change value if user star from zero separator.3 with allowNegativeNumber', fakeAsync(() => { - component.mask = 'separator.3'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; + it('should change value if user star from zero separator.3 with allowNegativeNumber', () => { + component.mask.set('separator.3'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); fixture.detectChanges(); equal('-03', '-0,3', fixture); @@ -1416,65 +1415,65 @@ describe('Separator: Mask', () => { equal('-,3', '-0,3', fixture); equal('-,34', '-0,34', fixture); equal('-,345', '-0,345', fixture); - })); + }); - it('should change value if user star from zero separator.1 with allowNegativeNumber leadZero decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.1'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; - component.leadZero = true; + it('should change value if user star from zero separator.1 with allowNegativeNumber leadZero decimalMarker= ,', () => { + component.mask.set('separator.1'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); + component.leadZero.set(true); fixture.detectChanges(); equal('-03', '-0,3', fixture); equal('-034', '-0,3', fixture); equal('-,3', '-0,3', fixture); equal('-,34', '-0,3', fixture); - })); + }); - it('should change value if user star from zero separator.1 with allowNegativeNumber leadZero decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.1'; - component.decimalMarker = '.'; - component.allowNegativeNumbers = true; - component.leadZero = true; + it('should change value if user star from zero separator.1 with allowNegativeNumber leadZero decimalMarker= ,', () => { + component.mask.set('separator.1'); + component.decimalMarker.set('.'); + component.allowNegativeNumbers.set(true); + component.leadZero.set(true); fixture.detectChanges(); equal('-03', '-0.3', fixture); equal('-034', '-0.3', fixture); equal('-.3', '-0.3', fixture); equal('-.34', '-0.3', fixture); - })); + }); - it('should change value if user star from zero separator.1 with allowNegativeNumber leadZero decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; - component.leadZero = true; + it('should change value if user star from zero separator.1 with allowNegativeNumber leadZero decimalMarker= ,', () => { + component.mask.set('separator.2'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); + component.leadZero.set(true); fixture.detectChanges(); equal('-03', '-0,3', fixture); equal('-034', '-0,34', fixture); equal('-,3', '-0,3', fixture); equal('-,34', '-0,34', fixture); - })); + }); - it('should change value if user star from zero separator.2 with allowNegativeNumber leadZero decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; - component.allowNegativeNumbers = true; - component.leadZero = true; + it('should change value if user star from zero separator.2 with allowNegativeNumber leadZero decimalMarker= ,', () => { + component.mask.set('separator.2'); + component.decimalMarker.set('.'); + component.allowNegativeNumbers.set(true); + component.leadZero.set(true); fixture.detectChanges(); equal('-03', '-0.3', fixture); equal('-034', '-0.34', fixture); equal('-.3', '-0.3', fixture); equal('-.34', '-0.34', fixture); - })); + }); - it('should change value if user star from zero separator.3 with allowNegativeNumber leadZero decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.3'; - component.decimalMarker = ','; - component.allowNegativeNumbers = true; - component.leadZero = true; + it('should change value if user star from zero separator.3 with allowNegativeNumber leadZero decimalMarker= ,', () => { + component.mask.set('separator.3'); + component.decimalMarker.set(','); + component.allowNegativeNumbers.set(true); + component.leadZero.set(true); fixture.detectChanges(); equal('-03', '-0,3', fixture); @@ -1482,13 +1481,13 @@ describe('Separator: Mask', () => { equal('-,3', '-0,3', fixture); equal('-,34', '-0,34', fixture); equal('-,345', '-0,345', fixture); - })); + }); - it('should change value if user star from zero separator.3 with allowNegativeNumber leadZero decimalMarker= ,', fakeAsync(() => { - component.mask = 'separator.3'; - component.decimalMarker = '.'; - component.allowNegativeNumbers = true; - component.leadZero = true; + it('should change value if user star from zero separator.3 with allowNegativeNumber leadZero decimalMarker= ,', () => { + component.mask.set('separator.3'); + component.decimalMarker.set('.'); + component.allowNegativeNumbers.set(true); + component.leadZero.set(true); fixture.detectChanges(); equal('-03', '-0.3', fixture); @@ -1496,11 +1495,11 @@ describe('Separator: Mask', () => { equal('-.3', '-0.3', fixture); equal('-.34', '-0.34', fixture); equal('-.345', '-0.345', fixture); - })); + }); it('separator.2 thousandSeparator = . should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1515,8 +1514,8 @@ describe('Separator: Mask', () => { })); it('separator.3 thousandSeparator = . should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.mask = 'separator.3'; - component.thousandSeparator = '.'; + component.mask.set('separator.3'); + component.thousandSeparator.set('.'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1530,8 +1529,8 @@ describe('Separator: Mask', () => { })); it('separator.1 thousandSeparator = . should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.thousandSeparator = '.'; - component.mask = 'separator.1'; + component.thousandSeparator.set('.'); + component.mask.set('separator.1'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1547,8 +1546,8 @@ describe('Separator: Mask', () => { it('separator.2 thousandSeparator = , should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; - component.mask = 'separator.2'; - component.thousandSeparator = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); fixture.detectChanges(); @@ -1559,8 +1558,8 @@ describe('Separator: Mask', () => { })); it('separator.3 thousandSeparator = , should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.mask = 'separator.3'; - component.thousandSeparator = ','; + component.mask.set('separator.3'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1573,8 +1572,8 @@ describe('Separator: Mask', () => { })); it('separator.1 thousandSeparator = , should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.mask = 'separator.1'; - component.thousandSeparator = ','; + component.mask.set('separator.1'); + component.thousandSeparator.set(','); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1587,9 +1586,9 @@ describe('Separator: Mask', () => { })); it('separator.2 thousandSeparator = . leadZero should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; - component.leadZero = true; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -1603,9 +1602,9 @@ describe('Separator: Mask', () => { })); it('separator.3 thousandSeparator = . leadZero should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.mask = 'separator.3'; - component.thousandSeparator = '.'; - component.leadZero = true; + component.mask.set('separator.3'); + component.thousandSeparator.set('.'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; @@ -1620,9 +1619,9 @@ describe('Separator: Mask', () => { })); it('separator.1 thousandSeparator = . leadZero should display correct value if decimalMarker is array 12345.67', fakeAsync(() => { - component.thousandSeparator = '.'; - component.mask = 'separator.1'; - component.leadZero = true; + component.thousandSeparator.set('.'); + component.mask.set('separator.1'); + component.leadZero.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; @@ -1636,42 +1635,42 @@ describe('Separator: Mask', () => { }); })); - it('should work when decimalMarker have default value separator.2', fakeAsync(() => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; + it('should work when decimalMarker have default value separator.2', () => { + component.mask.set('separator.2'); + component.thousandSeparator.set(','); fixture.detectChanges(); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); equal('1234', '1,234', fixture); - })); + }); - it('should work when decimalMarker have default value separator.3', fakeAsync(() => { - component.mask = 'separator.3'; - component.thousandSeparator = ','; + it('should work when decimalMarker have default value separator.3', () => { + component.mask.set('separator.3'); + component.thousandSeparator.set(','); fixture.detectChanges(); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); equal('1234', '1,234', fixture); - })); + }); - it('should work when decimalMarker have default value separator.1', fakeAsync(() => { - component.mask = 'separator.3'; - component.thousandSeparator = ','; + it('should work when decimalMarker have default value separator.1', () => { + component.mask.set('separator.3'); + component.thousandSeparator.set(','); fixture.detectChanges(); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); equal('1234', '1,234', fixture); - })); + }); it('should not delete decimalMarker ,', () => { - component.mask = 'separator.2'; - component.decimalMarker = ','; + component.mask.set('separator.2'); + component.decimalMarker.set(','); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '1,23'; @@ -1691,8 +1690,8 @@ describe('Separator: Mask', () => { }); it('should not delete decimalMarker .', () => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; + component.mask.set('separator.2'); + component.decimalMarker.set('.'); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '12.23'; @@ -1712,9 +1711,9 @@ describe('Separator: Mask', () => { }); it('should change position when click backspace thousandSeparator = .', () => { - component.mask = 'separator.2'; - component.decimalMarker = ','; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.decimalMarker.set(','); + component.thousandSeparator.set('.'); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '1.234.567,89'; @@ -1740,9 +1739,9 @@ describe('Separator: Mask', () => { }); it('should change position when click backspace thousandSeparator = ,', () => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; - component.thousandSeparator = ','; + component.mask.set('separator.2'); + component.decimalMarker.set('.'); + component.thousandSeparator.set(','); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '1,234,567.89'; @@ -1768,9 +1767,9 @@ describe('Separator: Mask', () => { }); it('should change position when click backspace thousandSeparator = ', () => { - component.mask = 'separator.2'; - component.decimalMarker = '.'; - component.thousandSeparator = ' '; + component.mask.set('separator.2'); + component.decimalMarker.set('.'); + component.thousandSeparator.set(' '); const inputElement = fixture.nativeElement.querySelector('input'); inputElement.value = '1 234 567.89'; @@ -1796,10 +1795,10 @@ describe('Separator: Mask', () => { }); it('should show correct value with separator.9', fakeAsync(() => { - component.mask = 'separator.9'; - component.decimalMarker = '.'; - component.leadZero = true; - component.separatorLimit = '10'; + component.mask.set('separator.9'); + component.decimalMarker.set('.'); + component.leadZero.set(true); + component.separatorLimit.set('10'); fixture.detectChanges(); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); @@ -1816,10 +1815,10 @@ describe('Separator: Mask', () => { })); it('should show correct value with separator.10', fakeAsync(() => { - component.mask = 'separator.10'; - component.decimalMarker = '.'; - component.leadZero = true; - component.separatorLimit = '10'; + component.mask.set('separator.10'); + component.decimalMarker.set('.'); + component.leadZero.set(true); + component.separatorLimit.set('10'); fixture.detectChanges(); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); @@ -1836,7 +1835,7 @@ describe('Separator: Mask', () => { })); it('should support big numbers with separator', () => { - component.mask = 'separator'; + component.mask.set('separator'); equal('12345678910111215', '12 345 678 910 111 215', fixture); expect(component.form.value).toBe('12345678910111215'); @@ -1845,7 +1844,7 @@ describe('Separator: Mask', () => { }); it('should support big numbers with separator 2', () => { - component.mask = 'separator.2'; + component.mask.set('separator.2'); equal('12345678910111215', '12 345 678 910 111 215', fixture); expect(component.form.value).toBe('12345678910111215'); @@ -1854,8 +1853,8 @@ describe('Separator: Mask', () => { }); it('should support big numbers with separator 2 thousand =.', () => { - component.mask = 'separator.2'; - component.thousandSeparator = '.'; + component.mask.set('separator.2'); + component.thousandSeparator.set('.'); equal('12345678910111215', '12.345.678.910.111.215', fixture); expect(component.form.value).toBe('12345678910111215'); @@ -1864,8 +1863,8 @@ describe('Separator: Mask', () => { }); it('should support big numbers with separator 2 thousand =,', () => { - component.mask = 'separator.2'; - component.thousandSeparator = ','; + component.mask.set('separator.2'); + component.thousandSeparator.set(','); equal('12345678910111215', '12,345,678,910,111,215', fixture); expect(component.form.value).toBe('12345678910111215'); diff --git a/projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts b/projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts index 9008dc9d..ac8cce81 100644 --- a/projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts +++ b/projects/ngx-mask-lib/src/test/show-mask-typed.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; import type { DebugElement } from '@angular/core'; import { By } from '@angular/platform-browser'; @@ -24,77 +23,103 @@ describe('Directive: Mask', () => { }); it('should clear if not match the mask!!!!', () => { - component.mask = '(000) 000-0000'; - component.showMaskTyped = true; + component.mask.set('(000) 000-0000'); + component.showMaskTyped.set(true); equal('', '(___) ___-____', fixture); equal('2345678', '(234) 567-8___', fixture); - component.prefix = '+7'; - component.showMaskTyped = true; + component.prefix.set('+7'); + component.showMaskTyped.set(true); equal('', '+7(___) ___-____', fixture); equal('2345678', '+7(234) 567-8___', fixture); }); it('should clear if not match the mask!!!!', () => { - component.mask = 'A{5}-A{2}'; - component.showMaskTyped = true; + component.mask.set('A{5}-A{2}'); + component.showMaskTyped.set(true); equal('', '_____-__', fixture); equal('aaa', 'aaa__-__', fixture); equal('aaaaaaa', 'aaaaa-aa', fixture); }); it('Mask with optional pattern 9999', () => { - component.mask = '(000) 000-0000 ext. 999999'; - component.showMaskTyped = true; - component.specialCharacters = ['e', 'x', 't', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 ext. 999999'); + component.showMaskTyped.set(true); + component.specialCharacters.set(['e', 'x', 't', ' ', '(', ')', '-', '.']); equal('9871234223 ext. 123022', '(987) 123-4223 ext. 123022', fixture); - component.mask = '(000) 000-0000 testing. 999999'; - component.showMaskTyped = true; - component.specialCharacters = ['t', 'e', 's', 't', 'i', 'n', 'g', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 testing. 999999'); + component.showMaskTyped.set(true); + component.specialCharacters.set([ + 't', + 'e', + 's', + 't', + 'i', + 'n', + 'g', + ' ', + '(', + ')', + '-', + '.', + ]); equal('1234567890 testing. 123456', '(123) 456-7890 testing. 123456', fixture); - component.mask = '(000) 000-0000 prefix. 999'; - component.showMaskTyped = true; - component.prefix = '+7'; - component.specialCharacters = ['p', 'r', 'e', 'f', 'i', 'x', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 prefix. 999'); + component.showMaskTyped.set(true); + component.prefix.set('+7'); + component.specialCharacters.set(['p', 'r', 'e', 'f', 'i', 'x', ' ', '(', ')', '-', '.']); equal('1234567890 prefix. 345', '+7(123) 456-7890 prefix. 345', fixture); - component.mask = '(000) 000-0000 cv. 999'; - component.showMaskTyped = true; - component.prefix = 'card. '; - component.specialCharacters = ['c', 'v', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 cv. 999'); + component.showMaskTyped.set(true); + component.prefix.set('card. '); + component.specialCharacters.set(['c', 'v', ' ', '(', ')', '-', '.']); equal('1234567890 cv. 345', 'card. (123) 456-7890 cv. 345', fixture); }); it('Mask with optional pattern 00000', () => { - component.mask = '(000) 000-0000 ext. 000000'; - component.showMaskTyped = true; - component.specialCharacters = ['e', 'x', 't', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 ext. 000000'); + component.showMaskTyped.set(true); + component.specialCharacters.set(['e', 'x', 't', ' ', '(', ')', '-', '.']); equal('9871234223 ext. 123022', '(987) 123-4223 ext. 123022', fixture); - component.mask = '(000) 000-0000 testing. 00000'; - component.showMaskTyped = true; - component.specialCharacters = ['t', 'e', 's', 't', 'i', 'n', 'g', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 testing. 00000'); + component.showMaskTyped.set(true); + component.specialCharacters.set([ + 't', + 'e', + 's', + 't', + 'i', + 'n', + 'g', + ' ', + '(', + ')', + '-', + '.', + ]); equal('1234567890 testing. 12345', '(123) 456-7890 testing. 12345', fixture); - component.mask = '(000) 000-0000 prefix. 000'; - component.showMaskTyped = true; - component.prefix = '+7'; - component.specialCharacters = ['p', 'r', 'e', 'f', 'i', 'x', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 prefix. 000'); + component.showMaskTyped.set(true); + component.prefix.set('+7'); + component.specialCharacters.set(['p', 'r', 'e', 'f', 'i', 'x', ' ', '(', ')', '-', '.']); equal('1234567890 prefix. 345', '+7(123) 456-7890 prefix. 345', fixture); - component.mask = '(000) 000-0000 cv. 000'; - component.showMaskTyped = true; - component.prefix = 'card. '; - component.specialCharacters = ['c', 'v', ' ', '(', ')', '-', '.']; + component.mask.set('(000) 000-0000 cv. 000'); + component.showMaskTyped.set(true); + component.prefix.set('card. '); + component.specialCharacters.set(['c', 'v', ' ', '(', ')', '-', '.']); equal('1234567890 cv. 134', 'card. (123) 456-7890 cv. 134', fixture); }); // TODO(inepipenko) for issue #880 xit('should work right with security input', () => { - component.mask = '000-0X-XXXX'; - component.showMaskTyped = true; + component.mask.set('000-0X-XXXX'); + component.showMaskTyped.set(true); equal('', '___-__-____', fixture); equal('123', '123-__-____', fixture); equal('12345', '123-4*-____', fixture); @@ -106,9 +131,9 @@ describe('Directive: Mask', () => { }); it('showMaskTyped && placeholder XXXXX-YYYY', () => { - component.showMaskTyped = true; - component.placeHolderCharacter = 'XXXXX-YYYY'; - component.mask = '00000-0000'; + component.showMaskTyped.set(true); + component.placeHolderCharacter.set('XXXXX-YYYY'); + component.mask.set('00000-0000'); equal('1', '1XXXX-YYYY', fixture); equal('12', '12XXX-YYYY', fixture); equal('123', '123XX-YYYY', fixture); @@ -121,9 +146,9 @@ describe('Directive: Mask', () => { }); it('showMaskTyped && placeholder 00/00/0000', () => { - component.showMaskTyped = true; - component.placeHolderCharacter = 'dd/mm/yyyy'; - component.mask = '00/00/0000'; + component.showMaskTyped.set(true); + component.placeHolderCharacter.set('dd/mm/yyyy'); + component.mask.set('00/00/0000'); equal('1', '1d/mm/yyyy', fixture); equal('12', '12/mm/yyyy', fixture); equal('123', '12/3m/yyyy', fixture); @@ -135,10 +160,10 @@ describe('Directive: Mask', () => { }); it('should work with showMaskTyped', () => { - component.mask = '000/00000'; - component.prefix = '06'; - component.dropSpecialCharacters = false; - component.showMaskTyped = true; + component.mask.set('000/00000'); + component.prefix.set('06'); + component.dropSpecialCharacters.set(false); + component.showMaskTyped.set(true); equal('', '06___/_____', fixture); equal('1', '061__/_____', fixture); equal('12', '0612_/_____', fixture); @@ -151,8 +176,8 @@ describe('Directive: Mask', () => { }); it('should work with showMaskTyped', () => { - component.mask = '000/00000'; - component.prefix = '06'; + component.mask.set('000/00000'); + component.prefix.set('06'); equal('1', '061', fixture); equal('12', '0612', fixture); equal('123', '06123', fixture); @@ -164,8 +189,8 @@ describe('Directive: Mask', () => { }); it('should work with showMaskTyped 000/00000', async () => { - component.mask = '000/00000'; - component.showMaskTyped = false; + component.mask.set('000/00000'); + component.showMaskTyped.set(false); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -175,7 +200,7 @@ describe('Directive: Mask', () => { equal('12', '12', fixture); equal('123', '123', fixture); expect(inputTarget.selectionStart).toBe(3); - component.showMaskTyped = true; + component.showMaskTyped.set(true); inputTarget.focus(); fixture.detectChanges(); @@ -184,9 +209,9 @@ describe('Directive: Mask', () => { }); it('should work with showMaskTyped 000/00000 with prefix', async () => { - component.mask = '000/00000'; - component.prefix = '+38 '; - component.showMaskTyped = false; + component.mask.set('000/00000'); + component.prefix.set('+38 '); + component.showMaskTyped.set(false); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -196,7 +221,7 @@ describe('Directive: Mask', () => { equal('+38 12', '+38 12', fixture); equal('+38 123', '+38 123', fixture); expect(inputTarget.selectionStart).toBe(7); - component.showMaskTyped = true; + component.showMaskTyped.set(true); inputTarget.focus(); fixture.detectChanges(); diff --git a/projects/ngx-mask-lib/src/test/test-sufix.spec.ts b/projects/ngx-mask-lib/src/test/test-sufix.spec.ts index 89590bde..2d760b4f 100644 --- a/projects/ngx-mask-lib/src/test/test-sufix.spec.ts +++ b/projects/ngx-mask-lib/src/test/test-sufix.spec.ts @@ -5,8 +5,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { By } from '@angular/platform-browser'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { provideNgxMask, NgxMaskDirective } from 'ngx-mask'; describe('Directive: Mask (Suffix)', () => { let fixture: ComponentFixture; @@ -23,24 +22,24 @@ describe('Directive: Mask (Suffix)', () => { }); it('should clear if not match the mask!!!!', () => { - component.mask = '0000'; - component.suffix = ' $'; + component.mask.set('0000'); + component.suffix.set(' $'); equal('', '', fixture); equal('123', '123 $', fixture); equal('1234', '1234 $', fixture); }); it('should clear if not match the mask!!!!', () => { - component.mask = '0*.00'; - component.suffix = ' $'; + component.mask.set('0*.00'); + component.suffix.set(' $'); equal('', '', fixture); equal('12345', '12345 $', fixture); equal('12344.44', '12344.44 $', fixture); }); it('should work correct with suffix .com', () => { - component.mask = '0000'; - component.suffix = '.com'; + component.mask.set('0000'); + component.suffix.set('.com'); equal('', '', fixture); equal('12', '12.com', fixture); equal('12344', '1234.com', fixture); @@ -49,15 +48,15 @@ describe('Directive: Mask (Suffix)', () => { }); it('separator should work correct with suffix', () => { - component.mask = 'separator'; - component.suffix = '$'; + component.mask.set('separator'); + component.suffix.set('$'); equal('', '', fixture); equal('123', '123$', fixture); equal('1234', '1 234$', fixture); }); it('should not delete suffix', () => { - component.mask = '0000'; - component.suffix = '$'; + component.mask.set('0000'); + component.suffix.set('$'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -78,8 +77,8 @@ describe('Directive: Mask (Suffix)', () => { expect(inputTarget.selectionStart).toEqual(4); }); it('should delete all if value and part of suffix are deleted', () => { - component.mask = 'A*'; - component.suffix = ' test'; + component.mask.set('A*'); + component.suffix.set(' test'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -96,8 +95,8 @@ describe('Directive: Mask (Suffix)', () => { expect(inputTarget.value).toBe(''); }); it('should not delete suffix', () => { - component.mask = 'A{5}'; - component.suffix = '.com'; + component.mask.set('A{5}'); + component.suffix.set('.com'); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); diff --git a/projects/ngx-mask-lib/src/test/time-mask.spec.ts b/projects/ngx-mask-lib/src/test/time-mask.spec.ts index cf15da40..0c315452 100644 --- a/projects/ngx-mask-lib/src/test/time-mask.spec.ts +++ b/projects/ngx-mask-lib/src/test/time-mask.spec.ts @@ -4,8 +4,7 @@ import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { provideNgxMask, NgxMaskDirective } from 'ngx-mask'; describe('Directive: Mask (Time)', () => { let fixture: ComponentFixture; @@ -22,142 +21,142 @@ describe('Directive: Mask (Time)', () => { }); it('empty', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('', '', fixture); }); it('Hours', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('20', '20', fixture); }); it('Hours', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('03', '03', fixture); }); it('Hours', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('730', '7:30', fixture); }); it('Hours', () => { - component.showMaskTyped = true; - component.mask = 'Hh:m0'; + component.showMaskTyped.set(true); + component.mask.set('Hh:m0'); equal('3__:__', '3_:__', fixture); equal('33:__', '3:3_', fixture); equal('33__:__', '3:3_', fixture); }); it('Hours (lead zero)', () => { - component.showMaskTyped = true; - component.leadZeroDateTime = true; - component.mask = 'Hh:m0'; + component.showMaskTyped.set(true); + component.leadZeroDateTime.set(true); + component.mask.set('Hh:m0'); equal('3__:__', '03:__', fixture); }); it('Minutes', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('1212', '12:12', fixture); }); it('Minutes', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('1207', '12:07', fixture); }); it('Minutes', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('127', '12:7', fixture); }); it('Minutes (lead zero)', () => { - component.leadZeroDateTime = true; - component.mask = 'Hh:m0:s0'; + component.leadZeroDateTime.set(true); + component.mask.set('Hh:m0:s0'); equal('127', '12:07', fixture); }); it('Hours and minutes', () => { - component.mask = 'Hh:m0:s0'; + component.mask.set('Hh:m0:s0'); equal('7712', '7:7:12', fixture); }); it('Seconds (lead zero)', () => { - component.leadZeroDateTime = true; - component.mask = 'Hh:m0:s0'; + component.leadZeroDateTime.set(true); + component.mask.set('Hh:m0:s0'); equal('777', '07:07:07', fixture); }); it('Date', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('321234', '3/2/1234', fixture); }); it('Date', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('3113123', '31/1/3123', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('413234', '4/1/3234', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('01011234', '01/01/1234', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('10101234', '10/10/1234', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('2322123', '23/2/2123', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('23122123', '23/12/2123', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('0314123', '03/1/4123', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('0314123', '03/1/4123', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('414123', '4/1/4123', fixture); }); it('Date ', () => { - component.mask = 'd0/M0/0000'; + component.mask.set('d0/M0/0000'); equal('4121234', '4/12/1234', fixture); }); it('Date (day lead zero)', () => { - component.leadZeroDateTime = true; - component.mask = 'd0/M0/0000'; + component.leadZeroDateTime.set(true); + component.mask.set('d0/M0/0000'); equal('4121234', '04/12/1234', fixture); }); it('Date (month lead zero)', () => { - component.leadZeroDateTime = true; - component.mask = 'd0/M0/0000'; + component.leadZeroDateTime.set(true); + component.mask.set('d0/M0/0000'); equal('421234', '04/02/1234', fixture); }); it('Date (years, month, day , lead zero', () => { - component.mask = '0000.M0.d0'; - component.leadZeroDateTime = true; + component.mask.set('0000.M0.d0'); + component.leadZeroDateTime.set(true); equal('9999999', '9999.09.09', fixture); equal('8888888', '8888.08.08', fixture); equal('7777777', '7777.07.07', fixture); @@ -167,8 +166,8 @@ describe('Directive: Mask (Time)', () => { }); it('Date (years, month, day , lead zero', () => { - component.mask = '0000/M0/d0'; - component.leadZeroDateTime = true; + component.mask.set('0000/M0/d0'); + component.leadZeroDateTime.set(true); equal('9999999', '9999/09/09', fixture); equal('8888888', '8888/08/08', fixture); equal('7777777', '7777/07/07', fixture); @@ -178,7 +177,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (years, month, day mask 0000.M0.d0', () => { - component.mask = '0000.M0.d0'; + component.mask.set('0000.M0.d0'); equal('999999', '9999.9.9', fixture); equal('888888', '8888.8.8', fixture); equal('777777', '7777.7.7', fixture); @@ -191,7 +190,7 @@ describe('Directive: Mask (Time)', () => { equal('202344', '2023.4.4', fixture); }); it('Date (d0-M0-0000', () => { - component.mask = 'd0-M0-0000'; + component.mask.set('d0-M0-0000'); equal('999999', '9-9-9999', fixture); equal('888888', '8-8-8888', fixture); equal('777777', '7-7-7777', fixture); @@ -205,7 +204,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (d0/M0:0000', () => { - component.mask = 'd0/M0:0000'; + component.mask.set('d0/M0:0000'); equal('999999', '9/9:9999', fixture); equal('888888', '8/8:8888', fixture); equal('777777', '7/7:7777', fixture); @@ -219,7 +218,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (m0/d0/0000', () => { - component.mask = 'm0/d0/0000'; + component.mask.set('m0/d0/0000'); equal('999999', '9/9/9999', fixture); equal('888888', '8/8/8888', fixture); equal('777777', '7/7/7777', fixture); @@ -233,7 +232,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (0000-M0-d0', () => { - component.mask = '0000-M0-d0'; + component.mask.set('0000-M0-d0'); equal('999999', '9999-9-9', fixture); equal('888888', '8888-8-8', fixture); equal('777777', '7777-7-7', fixture); @@ -246,7 +245,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0/d0/0000', () => { - component.mask = 'M0/d0/0000'; + component.mask.set('M0/d0/0000'); equal('999999', '9/9/9999', fixture); equal('888888', '8/8/8888', fixture); equal('777777', '7/7/7777', fixture); @@ -259,7 +258,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0+d0+0000', () => { - component.mask = 'M0+d0+0000'; + component.mask.set('M0+d0+0000'); equal('999999', '9+9+9999', fixture); equal('888888', '8+8+8888', fixture); equal('777777', '7+7+7777', fixture); @@ -272,7 +271,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0@d0@0000', () => { - component.mask = 'M0@d0@0000'; + component.mask.set('M0@d0@0000'); equal('999999', '9@9@9999', fixture); equal('888888', '8@8@8888', fixture); equal('777777', '7@7@7777', fixture); @@ -285,7 +284,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0@d0/0000', () => { - component.mask = 'M0@d0/0000'; + component.mask.set('M0@d0/0000'); equal('999999', '9@9/9999', fixture); equal('888888', '8@8/8888', fixture); equal('777777', '7@7/7777', fixture); @@ -298,7 +297,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0:d0/0000', () => { - component.mask = 'M0:d0/0000'; + component.mask.set('M0:d0/0000'); equal('999999', '9:9/9999', fixture); equal('888888', '8:8/8888', fixture); equal('777777', '7:7/7777', fixture); @@ -311,7 +310,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0-d0-0000', () => { - component.mask = 'M0-d0-0000'; + component.mask.set('M0-d0-0000'); equal('999999', '9-9-9999', fixture); equal('888888', '8-8-8888', fixture); equal('777777', '7-7-7777', fixture); @@ -324,7 +323,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (M0.d0.0000', () => { - component.mask = 'M0.d0.0000'; + component.mask.set('M0.d0.0000'); equal('999999', '9.9.9999', fixture); equal('888888', '8.8.8888', fixture); equal('777777', '7.7.7777', fixture); @@ -337,7 +336,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (d0.M0.0000 Hh:m0:s0', () => { - component.mask = 'd0.M0.0000 Hh:m0:s0'; + component.mask.set('d0.M0.0000 Hh:m0:s0'); equal('992023999', '9.9.2023 9:9:9', fixture); equal('882023292030', '8.8.2023 2:9:20', fixture); equal('11111111 2420', '11.11.1111 2:42:0', fixture); @@ -347,7 +346,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date (d0.M0.0000 Hh:m0 - Hh:m0', () => { - component.mask = 'd0.M0.0000 Hh:m0 - Hh:m0'; + component.mask.set('d0.M0.0000 Hh:m0 - Hh:m0'); equal('11111111 1111 1111', '11.11.1111 11:11 - 11:11', fixture); equal('31122023 2359 1211', '31.12.2023 23:59 - 12:11', fixture); equal('1223333 29 299', '12.2.3333 2:9 - 2:9', fixture); @@ -359,8 +358,8 @@ describe('Directive: Mask (Time)', () => { }); it('Date (Hh:m0 apm=true', () => { - component.mask = 'Hh:m0'; - component.apm = true; + component.mask.set('Hh:m0'); + component.apm.set(true); equal('1', '1', fixture); equal('11', '11', fixture); equal('12', '12', fixture); @@ -382,8 +381,8 @@ describe('Directive: Mask (Time)', () => { }); it('Date (Hh:m0:s0 apm=true', () => { - component.mask = 'Hh:m0:s0'; - component.apm = true; + component.mask.set('Hh:m0:s0'); + component.apm.set(true); equal('1323', '1:32:3', fixture); equal('1223', '12:23', fixture); equal('112322', '11:23:22', fixture); @@ -392,8 +391,8 @@ describe('Directive: Mask (Time)', () => { }); it('Date (d0/M0/0000 Hh:m0:s0 apm=true', () => { - component.mask = 'd0/M0/0000 Hh:m0:s0'; - component.apm = true; + component.mask.set('d0/M0/0000 Hh:m0:s0'); + component.apm.set(true); equal('11122023', '11/12/2023', fixture); equal('11122023133456', '11/12/2023 1:33:45', fixture); equal('11/12/2023 13:32:30 ', '11/12/2023 1:33:23', fixture); @@ -401,9 +400,9 @@ describe('Directive: Mask (Time)', () => { }); it('Date (0000-M0-d0 Hh:m0:s0.000', () => { - component.mask = '0000-M0-d0 Hh:m0:s0.000'; - component.leadZeroDateTime = true; - component.showMaskTyped = true; + component.mask.set('0000-M0-d0 Hh:m0:s0.000'); + component.leadZeroDateTime.set(true); + component.showMaskTyped.set(true); equal('2023', '2023-__-__ __:__:__.___', fixture); equal('202309', '2023-09-__ __:__:__.___', fixture); equal('20230931', '2023-09-31 __:__:__.___', fixture); @@ -414,51 +413,51 @@ describe('Directive: Mask (Time)', () => { }); it('Date (0000-M0-d0 leadZero and showMaskTyped', () => { - component.mask = '0000-M0-d0'; - component.leadZeroDateTime = true; - component.showMaskTyped = true; + component.mask.set('0000-M0-d0'); + component.leadZeroDateTime.set(true); + component.showMaskTyped.set(true); equal('2023', '2023-__-__', fixture); equal('202310', '2023-10-__', fixture); equal('20231029', '2023-10-29', fixture); }); it('Date (0000/M0/d0 leadZero and showMaskTyped', () => { - component.mask = '0000/M0/d0'; - component.leadZeroDateTime = true; - component.showMaskTyped = true; + component.mask.set('0000/M0/d0'); + component.leadZeroDateTime.set(true); + component.showMaskTyped.set(true); equal('2023', '2023/__/__', fixture); equal('202312', '2023/12/__', fixture); equal('20231229', '2023/12/29', fixture); }); it('Date (0000.M0.d0 leadZero and showMaskTyped', () => { - component.mask = '0000.M0.d0'; - component.leadZeroDateTime = true; - component.showMaskTyped = true; + component.mask.set('0000.M0.d0'); + component.leadZeroDateTime.set(true); + component.showMaskTyped.set(true); equal('2023', '2023.__.__', fixture); equal('202310', '2023.10.__', fixture); equal('20231031', '2023.10.31', fixture); }); it('Date (0000.M0.d0 leadZero and showMaskTyped', () => { - component.mask = 'M0/d0/0000'; - component.leadZeroDateTime = true; - component.showMaskTyped = true; - component.dropSpecialCharacters = false; + component.mask.set('M0/d0/0000'); + component.leadZeroDateTime.set(true); + component.showMaskTyped.set(true); + component.dropSpecialCharacters.set(false); equal('01', '01/__/____', fixture); equal('0109', '01/09/____', fixture); equal('01/03/2011', '01/03/2011', fixture); }); it('Date (d0/M0/0000 leadZero)', () => { - component.mask = 'M0/d0/0000'; - component.leadZeroDateTime = true; + component.mask.set('M0/d0/0000'); + component.leadZeroDateTime.set(true); equal('4122000', '04/12/2000', fixture); equal('442000', '04/04/2000', fixture); }); it('Date (0000-M0)', () => { - component.mask = '0000-M0'; + component.mask.set('0000-M0'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -467,7 +466,7 @@ describe('Directive: Mask (Time)', () => { equal('123412', '1234-12', fixture); }); it('Date (0000/M0)', () => { - component.mask = '0000/M0'; + component.mask.set('0000/M0'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -476,7 +475,7 @@ describe('Directive: Mask (Time)', () => { equal('123412', '1234/12', fixture); }); it('Date (0000:M0)', () => { - component.mask = '0000:M0'; + component.mask.set('0000:M0'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '123', fixture); @@ -486,7 +485,7 @@ describe('Directive: Mask (Time)', () => { }); it('Date d0/M0', () => { - component.mask = 'd0/M0'; + component.mask.set('d0/M0'); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '12/3', fixture); @@ -495,8 +494,8 @@ describe('Directive: Mask (Time)', () => { }); it('Date d0/M0 with v', () => { - component.mask = 'd0/M0'; - component.leadZeroDateTime = true; + component.mask.set('d0/M0'); + component.leadZeroDateTime.set(true); equal('1', '1', fixture); equal('12', '12', fixture); equal('123', '12/03', fixture); diff --git a/projects/ngx-mask-lib/src/test/trigger-on-mask-change.spec.ts b/projects/ngx-mask-lib/src/test/trigger-on-mask-change.spec.ts index c473484c..b12997f7 100644 --- a/projects/ngx-mask-lib/src/test/trigger-on-mask-change.spec.ts +++ b/projects/ngx-mask-lib/src/test/trigger-on-mask-change.spec.ts @@ -4,8 +4,7 @@ import { TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { ReactiveFormsModule } from '@angular/forms'; import { TestMaskComponent } from './utils/test-component.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; import type { DebugElement } from '@angular/core'; import { equal } from './utils/test-functions.component'; @@ -28,8 +27,8 @@ describe('Directive: Mask (Trigger on mask change)', () => { }); it('should trigger form value update if mask is changed', async () => { - component.mask = ''; - component.triggerOnMaskChange = true; + component.mask.set(''); + component.triggerOnMaskChange.set(true); fixture.detectChanges(); component.form.setValue('7912345678'); @@ -39,7 +38,7 @@ describe('Directive: Mask (Trigger on mask change)', () => { expect(inputEl.nativeElement.value).toEqual('7912345678'); expect(component.form.value).toEqual('7912345678'); - component.mask = '00 000 00 00'; + component.mask.set('00 000 00 00'); fixture.detectChanges(); await fixture.whenStable(); inputEl = fixture.debugElement.query(By.css('input')); @@ -48,8 +47,8 @@ describe('Directive: Mask (Trigger on mask change)', () => { }); it('should trigger form value update if mask is changed', async () => { - component.mask = '00000||00000-0000'; - component.triggerOnMaskChange = true; + component.mask.set('00000||00000-0000'); + component.triggerOnMaskChange.set(true); const debugElement: DebugElement = fixture.debugElement.query(By.css('input')); const inputTarget: HTMLInputElement = debugElement.nativeElement as HTMLInputElement; spyOnProperty(document, 'activeElement').and.returnValue(inputTarget); @@ -59,7 +58,7 @@ describe('Directive: Mask (Trigger on mask change)', () => { expect(inputTarget.value).toEqual('1234'); expect(component.form.value).toBe('1234'); - component.mask = 'S0S 0S0'; + component.mask.set('S0S 0S0'); equal(inputTarget.value, '', fixture, true); expect(component.form.value).toBe(''); }); diff --git a/projects/ngx-mask-lib/src/test/type-number.spec.ts b/projects/ngx-mask-lib/src/test/type-number.spec.ts index 5d0ebc05..82e3a69e 100644 --- a/projects/ngx-mask-lib/src/test/type-number.spec.ts +++ b/projects/ngx-mask-lib/src/test/type-number.spec.ts @@ -1,4 +1,4 @@ -import { Component } from '@angular/core'; +import { Component, signal } from '@angular/core'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; import type { ComponentFixture } from '@angular/core/testing'; import { TestBed } from '@angular/core/testing'; @@ -9,12 +9,12 @@ import { equal } from './utils/test-functions.component'; selector: 'jsdaddy-open-source-test', standalone: true, imports: [ReactiveFormsModule, NgxMaskDirective], - template: ` `, + template: ` `, }) // eslint-disable-next-line @angular-eslint/component-class-suffix export class TestTypeNumber { public form: FormControl = new FormControl(''); - public mask = ''; + public mask = signal(''); } describe('Directive: Mask (Trigger on mask change)', () => { @@ -36,7 +36,7 @@ describe('Directive: Mask (Trigger on mask change)', () => { }); it('mask 0* should work with mask 0*', () => { - component.mask = '0*'; + component.mask.set('0*'); equal('1', '1', fixture); equal('12', '12', fixture); @@ -46,7 +46,7 @@ describe('Directive: Mask (Trigger on mask change)', () => { }); it('mask 0000 should work with mask 0000', () => { - component.mask = '0000'; + component.mask.set('0000'); equal('1', '1', fixture); equal('12', '12', fixture); @@ -56,14 +56,14 @@ describe('Directive: Mask (Trigger on mask change)', () => { }); it('mask 0000 should work with mask 0000', () => { - component.mask = 'percent'; + component.mask.set('percent'); equal('100', '100', fixture); equal('99', '99', fixture); }); it('should be editable with empty mask', () => { - component.mask = ''; + component.mask.set(''); equal('100', '100', fixture); equal('99', '99', fixture); diff --git a/projects/ngx-mask-lib/src/test/utils/test-component.component.ts b/projects/ngx-mask-lib/src/test/utils/test-component.component.ts index f231a1cb..c5e5b0c2 100644 --- a/projects/ngx-mask-lib/src/test/utils/test-component.component.ts +++ b/projects/ngx-mask-lib/src/test/utils/test-component.component.ts @@ -1,4 +1,4 @@ -import { Component, inject } from '@angular/core'; +import { Component, inject, signal } from '@angular/core'; import { FormControl, ReactiveFormsModule } from '@angular/forms'; import type { NgxMaskConfig } from 'ngx-mask'; import { NGX_MASK_CONFIG } from 'ngx-mask'; @@ -11,81 +11,77 @@ import { NgxMaskDirective } from 'ngx-mask'; template: ` + [showMaskTyped]="showMaskTyped()" + [placeHolderCharacter]="placeHolderCharacter()" + [separatorLimit]="separatorLimit()" + [hiddenInput]="hiddenInput()" + [allowNegativeNumbers]="allowNegativeNumbers()" + [leadZeroDateTime]="leadZeroDateTime()" + [leadZero]="leadZero()" + [keepCharacterPositions]="keepCharacterPositions()" + [apm]="apm()" + [validation]="validation()" + [inputTransformFn]="inputTransformFn()" + [outputTransformFn]="outputTransformFn()" + [triggerOnMaskChange]="triggerOnMaskChange()" /> `, }) export class TestMaskComponent { - public mask!: string | null | undefined; protected _config = inject(NGX_MASK_CONFIG); public form: FormControl = new FormControl(); - public dropSpecialCharacters: NgxMaskConfig['dropSpecialCharacters'] = - this._config.dropSpecialCharacters; - - public clearIfNotMatch: NgxMaskConfig['clearIfNotMatch'] = this._config.clearIfNotMatch; - - public patterns: NgxMaskConfig['patterns'] = this._config.patterns; - - public prefix: NgxMaskConfig['prefix'] = this._config.prefix; - - public thousandSeparator: NgxMaskConfig['thousandSeparator'] = this._config.thousandSeparator; - - public decimalMarker: NgxMaskConfig['decimalMarker'] = this._config.decimalMarker; - - public suffix: NgxMaskConfig['suffix'] = this._config.suffix; - - public specialCharacters: NgxMaskConfig['specialCharacters'] = this._config.specialCharacters; - - public keepCharacterPositions: NgxMaskConfig['keepCharacterPositions'] = - this._config.keepCharacterPositions; - - public showMaskTyped: NgxMaskConfig['showMaskTyped'] = this._config.showMaskTyped; - - public placeHolderCharacter: NgxMaskConfig['placeHolderCharacter'] = - this._config.placeHolderCharacter; - - public hiddenInput: NgxMaskConfig['hiddenInput'] = this._config.hiddenInput; - - public separatorLimit: NgxMaskConfig['separatorLimit'] = this._config.separatorLimit; - - public allowNegativeNumbers: NgxMaskConfig['allowNegativeNumbers'] = - this._config.allowNegativeNumbers; - - public leadZeroDateTime: NgxMaskConfig['leadZeroDateTime'] = this._config.leadZeroDateTime; - - public leadZero: NgxMaskConfig['leadZero'] = this._config.leadZero; - - public triggerOnMaskChange: NgxMaskConfig['triggerOnMaskChange'] = - this._config.triggerOnMaskChange; - - public validation: NgxMaskConfig['validation'] = this._config.validation; - - public apm: NgxMaskConfig['apm'] = this._config.apm; - - public inputTransformFn: NgxMaskConfig['inputTransformFn'] = this._config.inputTransformFn; - - public outputTransformFn: NgxMaskConfig['outputTransformFn'] = this._config.outputTransformFn; + public mask = signal(''); + + public dropSpecialCharacters = signal( + this._config.dropSpecialCharacters + ); + public hiddenInput = signal(this._config.hiddenInput); + public clearIfNotMatch = signal(this._config.clearIfNotMatch); + public specialCharacters = signal( + this._config.specialCharacters + ); + public patterns = signal(this._config.patterns); + public prefix = signal(this._config.prefix); + public suffix = signal(this._config.suffix); + public thousandSeparator = signal( + this._config.thousandSeparator + ); + public decimalMarker = signal(this._config.decimalMarker); + public showMaskTyped = signal(this._config.showMaskTyped); + public placeHolderCharacter = signal( + this._config.placeHolderCharacter + ); + public validation = signal(this._config.validation); + public separatorLimit = signal(this._config.separatorLimit); + public allowNegativeNumbers = signal( + this._config.allowNegativeNumbers + ); + public leadZeroDateTime = signal( + this._config.leadZeroDateTime + ); + public leadZero = signal(this._config.leadZero); + public apm = signal(this._config.apm); + public inputTransformFn = signal( + this._config.inputTransformFn + ); + public outputTransformFn = signal( + this._config.outputTransformFn + ); + public keepCharacterPositions = signal( + this._config.keepCharacterPositions + ); + public triggerOnMaskChange = signal( + this._config.triggerOnMaskChange + ); } diff --git a/projects/ngx-mask-lib/src/test/validation.spec.ts b/projects/ngx-mask-lib/src/test/validation.spec.ts index 6e566403..29f94fb2 100644 --- a/projects/ngx-mask-lib/src/test/validation.spec.ts +++ b/projects/ngx-mask-lib/src/test/validation.spec.ts @@ -3,8 +3,7 @@ import { TestBed } from '@angular/core/testing'; import { ReactiveFormsModule, Validators } from '@angular/forms'; import { equal } from './utils/test-functions.component'; -import { provideNgxMask } from '../lib/ngx-mask.providers'; -import { NgxMaskDirective } from '../lib/ngx-mask.directive'; +import { NgxMaskDirective, provideNgxMask } from 'ngx-mask'; import { TestMaskComponent } from './utils/test-component.component'; describe('Directive: Mask (Validation)', () => { @@ -22,7 +21,7 @@ describe('Directive: Mask (Validation)', () => { }); it('should be marked as not valid if not valid and validation attribute true', () => { - component.mask = '0000'; + component.mask.set('0000'); component.form.addValidators(Validators.required); equal('12', '12', fixture); @@ -31,7 +30,7 @@ describe('Directive: Mask (Validation)', () => { }); it('should be marked as valid if not valid and validation attribute false', () => { - component.validation = false; + component.validation.set(false); component.form.addValidators(Validators.required); equal('12', '12', fixture); @@ -39,7 +38,7 @@ describe('Directive: Mask (Validation)', () => { }); it('should be marked as valid if valid and validation attribute true', () => { - component.mask = '0000'; + component.mask.set('0000'); component.form.addValidators(Validators.required); equal('1234', '1234', fixture); @@ -47,8 +46,8 @@ describe('Directive: Mask (Validation)', () => { }); it('should be marked as valid if not valid and validation attribute false', () => { - component.validation = false; - component.mask = '0000'; + component.validation.set(false); + component.mask.set('0000'); component.form.addValidators(Validators.required); equal('12', '12', fixture); @@ -56,8 +55,8 @@ describe('Directive: Mask (Validation)', () => { }); it('should be not valid email mask A*@A*.SSS', () => { - component.mask = 'A*@A*.SSS'; - component.dropSpecialCharacters = false; + component.mask.set('A*@A*.SSS'); + component.dropSpecialCharacters.set(false); component.form.addValidators(Validators.required); equal('a', 'a', fixture); @@ -87,8 +86,8 @@ describe('Directive: Mask (Validation)', () => { }); it('should valid email mask A*@A*.SSS', () => { - component.mask = 'A*@A*.SSS'; - component.dropSpecialCharacters = false; + component.mask.set('A*@A*.SSS'); + component.dropSpecialCharacters.set(false); component.form.addValidators(Validators.required); equal('testing@gmail.com', 'testing@gmail.com', fixture); @@ -96,8 +95,8 @@ describe('Directive: Mask (Validation)', () => { }); it('should be not valid mask A*@A*.SS', () => { - component.mask = 'A*@A*.SS'; - component.dropSpecialCharacters = false; + component.mask.set('A*@A*.SS'); + component.dropSpecialCharacters.set(false); component.form.addValidators(Validators.required); equal('d', 'd', fixture); @@ -125,8 +124,8 @@ describe('Directive: Mask (Validation)', () => { }); it('should valid email mask', () => { - component.mask = 'A*@A*.SS'; - component.dropSpecialCharacters = false; + component.mask.set('A*@A*.SS'); + component.dropSpecialCharacters.set(false); component.form.addValidators(Validators.required); equal('testing@some.ua', 'testing@some.ua', fixture); @@ -134,7 +133,7 @@ describe('Directive: Mask (Validation)', () => { }); it('should valid from one digit mask 0*', () => { - component.mask = '0*'; + component.mask.set('0*'); component.form.setValidators([Validators.required, Validators.min(1)]); component.form.updateValueAndValidity(); @@ -151,7 +150,7 @@ describe('Directive: Mask (Validation)', () => { }); it('should valid from one digit mask S*', () => { - component.mask = 'S*'; + component.mask.set('S*'); component.form.setValidators([Validators.required, Validators.min(1)]); component.form.updateValueAndValidity(); @@ -162,7 +161,7 @@ describe('Directive: Mask (Validation)', () => { }); it('should valid from one digit mask A*', () => { - component.mask = 'A*'; + component.mask.set('A*'); component.form.setValidators([Validators.required, Validators.min(1)]); component.form.updateValueAndValidity(); @@ -175,10 +174,7 @@ describe('Directive: Mask (Validation)', () => { }); it('mask with number value should work as expected mask 0*', () => { - // public form: FormControl = new FormControl(44, Validators.required); - // public mask = ''; - // public validate = true; - component.mask = '0*'; + component.mask.set('0*'); component.form.setValidators([Validators.required, Validators.min(1)]); component.form.updateValueAndValidity(); @@ -196,7 +192,7 @@ describe('Directive: Mask (Validation)', () => { }); it('mask with number value should work as expected mask 000.00', () => { - component.mask = '000.00'; + component.mask.set('000.00'); component.form.addValidators(Validators.required); component.form.setValue(''); @@ -226,9 +222,9 @@ describe('Directive: Mask (Validation)', () => { }); it('dropSpecialCharacters is different from specialCharacters', () => { - component.mask = '+000'; - component.specialCharacters = ['+', ' ']; - component.dropSpecialCharacters = [' ']; + component.mask.set('+000'); + component.specialCharacters.set(['+', ' ']); + component.dropSpecialCharacters.set([' ']); component.form.addValidators(Validators.required); equal('+37', '+37', fixture); @@ -237,7 +233,7 @@ describe('Directive: Mask (Validation)', () => { equal('+373', '+373', fixture); expect(component.form.valid).toBe(true); - component.mask = '+000 000 00 000'; + component.mask.set('+000 000 00 000'); equal('+3736000000', '+373 600 00 00', fixture); expect(component.form.valid).toBe(false); @@ -247,8 +243,8 @@ describe('Directive: Mask (Validation)', () => { }); it('email Mask should validated correct', () => { - component.mask = 'A*@A*.A*'; - component.dropSpecialCharacters = false; + component.mask.set('A*@A*.A*'); + component.dropSpecialCharacters.set(false); component.form.addValidators(Validators.required); equal('validate', 'validate', fixture);