Skip to content

Commit

Permalink
feat(ref: no-ref): change tests to signals
Browse files Browse the repository at this point in the history
  • Loading branch information
@andriikamaldinov1
andriikamaldinov1 committed Nov 29, 2024
1 parent e63dbd5 commit 14028df
Show file tree
Hide file tree
Showing 32 changed files with 1,191 additions and 1,199 deletions.
5 changes: 1 addition & 4 deletions projects/ngx-mask-lib/src/lib/ngx-mask.directive.ts
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand Down
17 changes: 8 additions & 9 deletions projects/ngx-mask-lib/src/lib/ngx-mask.pipe.ts
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -14,9 +13,9 @@ import { MaskExpression } from './ngx-mask-expression.enum';
})
export class NgxMaskPipe implements PipeTransform {
private _maskExpressionArray = signal<string[]>([]);
private mask = signal<string>('');
private _mask = signal<string>('');

private readonly defaultOptions = inject<NgxMaskConfig>(NGX_MASK_CONFIG);
private readonly _defaultOptions = inject<NgxMaskConfig>(NGX_MASK_CONFIG);
private readonly _maskService = inject(NgxMaskService);

public transform(
Expand All @@ -28,7 +27,7 @@ export class NgxMaskPipe implements PipeTransform {

const currentConfig = {
maskExpression: mask,
...this.defaultOptions,
...this._defaultOptions,
...config,
patterns: {
...this._maskService.patterns(),
Expand All @@ -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());
}
}

Expand Down Expand Up @@ -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);
}
});
}
Expand Down
75 changes: 37 additions & 38 deletions projects/ngx-mask-lib/src/test/add-prefix.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<TestMaskComponent>;
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -123,39 +122,39 @@ 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);
expect(component.form.value).toBe('KZ123 123');
});

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');
Expand Down
21 changes: 10 additions & 11 deletions projects/ngx-mask-lib/src/test/add-suffix.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<TestMaskComponent>;
Expand All @@ -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);
Expand Down
51 changes: 25 additions & 26 deletions projects/ngx-mask-lib/src/test/allow-negative-numbers.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<TestMaskComponent>;
Expand All @@ -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');
Expand All @@ -36,27 +35,27 @@ 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);
expect(component.form.value).toBe(-123456);
});

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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand All @@ -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);
Expand Down
Loading

0 comments on commit 14028df

Please sign in to comment.