test(directive): add delete e2e tests

projects/ngx-mask-lib/src/test/delete.cy-spec.ts

@@ -0,0 +1,91 @@
+import { mount } from '@jscutlery/cypress-angular/mount';
+import { CypressTestMaskComponent, CypressTestMaskModule } from './utils/cypress-test-component.component';
+
+describe('Directive: Mask (Delete)', () => {
+  it('should delete character in input', () => {
+    mount(CypressTestMaskComponent, {
+      inputs: {
+        mask: '00/00/0000',
+      },
+      imports: [CypressTestMaskModule],
+    });
+
+    const inputTarget = cy.get('input');
+    inputTarget.type('12/34/5678');
+    inputTarget.focus();
+    inputTarget.setSelectionRange(1, 1);
+    inputTarget.type('{backspace}');
+
+    inputTarget.should('have.value', '23/45/678');
+  });
+
+  it('should not delete special mask character', () => {
+    mount(CypressTestMaskComponent, {
+      inputs: {
+        mask: '00/00/0000',
+      },
+      imports: [CypressTestMaskModule],
+    });
+
+    const inputTarget = cy.get('input');
+    inputTarget.type('12/34/5678');
+    inputTarget.setSelectionRange(3, 3);
+    inputTarget.type('{backspace}');
+
+    inputTarget.should('have.value', '12/34/5678');
+    inputTarget.should('have.prop', 'selectionStart', 2);
+  });
+
+  it('should delete secure character', () => {
+    mount(CypressTestMaskComponent, {
+      inputs: {
+        mask: 'XXX/X0/0000',
+        hiddenInput: true,
+      },
+      imports: [CypressTestMaskModule],
+    });
+
+    const inputTarget = cy.get('input');
+    inputTarget.type('123/45/6789');
+    inputTarget.setSelectionRange(3, 3);
+    inputTarget.type('{backspace}');
+
+    inputTarget.should('have.value', '***/*6/789');
+    inputTarget.should('have.prop', 'selectionStart', 2);
+  });
+
+  it('should not delete prefix', () => {
+    mount(CypressTestMaskComponent, {
+      inputs: {
+        mask: '(00) 00',
+        prefix: '+1 ',
+      },
+      imports: [CypressTestMaskModule],
+    });
+
+    const inputTarget = cy.get('input');
+    inputTarget.type('1234');
+    inputTarget.setSelectionRange(3, 3);
+    inputTarget.type('{backspace}');
+
+    inputTarget.should('have.value', '+1 (12) 34');
+    inputTarget.should('have.prop', 'selectionStart', 3);
+  });
+
+  it('should delete selection', () => {
+    mount(CypressTestMaskComponent, {
+      inputs: {
+        mask: '000 000 000',
+      },
+      imports: [CypressTestMaskModule],
+    });
+
+    const inputTarget = cy.get('input');
+    inputTarget.type('123456789');
+    inputTarget.setSelectionRange(4, 7);
+    inputTarget.type('{backspace}');
+
+    inputTarget.should('have.value', '123 789');
+    inputTarget.should('have.prop', 'selectionStart', 3);
+  });
+});

projects/ngx-mask-lib/src/test/utils/cypress-test-component.component.ts

@@ -0,0 +1,23 @@
+import { Component, Input, NgModule } from '@angular/core';
+import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+import { CommonModule } from '@angular/common';
+import { NgxMaskModule } from 'ngx-mask';
+
+@Component({
+  selector: 'mask-cypress-test-mask',
+  template: ` <input id="maska" [formControl]="form" [mask]="mask" [hiddenInput]="hiddenInput" [prefix]="prefix" /> `,
+})
+export class CypressTestMaskComponent {
+  @Input() public mask!: string | null;
+  @Input() public hiddenInput: boolean = false;
+  @Input() public prefix: string = '';
+  public form: FormControl = new FormControl('');
+}
+
+@NgModule({
+  imports: [CommonModule, ReactiveFormsModule, FormsModule, NgxMaskModule.forRoot()],
+  declarations: [CypressTestMaskComponent],
+  exports: [CypressTestMaskComponent],
+})
+export class CypressTestMaskModule {}