Add e2e tests (JsDaddy#901)

* build: fix new rxjs requirements

* build: limit node to v14

* feat(test): add cypress component testing

* test(directive): add delete e2e tests

* build: update package-lock.json

Co-authored-by: Manuel Meister <[email protected]>
Co-authored-by: Manuel Meister <[email protected]>

.gitignore

@@ -42,3 +42,6 @@ dist.tgz
 yarn.lock
 
 test-reports/
+
+/projects/ngx-mask-lib/cypress/videos
+/projects/ngx-mask-lib/cypress/screenshots

package.json

@@ -50,6 +50,7 @@
     "test:all": "npm run test:app && npm run test:lib",
     "test:app": "ng test showcase",
     "test:lib": "ng test ngx-mask-lib",
+    "test:lib:cypress": "ngcc && cypress run-ct --project projects/ngx-mask-lib",
     "version:major": "npm --no-git-tag-version version major && cd projects/ngx-mask-lib && npm --no-git-tag-version version major",
     "version:minor": "npm --no-git-tag-version version minor && cd projects/ngx-mask-lib && npm --no-git-tag-version version minor",
     "version:patch": "npm --no-git-tag-version version patch && cd projects/ngx-mask-lib && npm --no-git-tag-version version patch"
@@ -68,6 +69,9 @@
     "@angular/platform-browser": "12.0.1",
     "@angular/platform-browser-dynamic": "12.0.1",
     "@angular/router": "12.0.1",
+    "@jscutlery/cypress-angular": "^0.5.0",
+    "@jscutlery/cypress-mount": "^0.10.0",
+    "@jscutlery/cypress-angular-dev-server": "^1.1.0",
     "bootstrap": "5.0.1",
     "intl": "1.2.5",
     "npm-check-updates": "11.5.13",
@@ -91,6 +95,8 @@
     "codelyzer": "^6.0.2",
     "concurrently": "6.2.0",
     "copyfiles": "2.4.1",
+    "cypress": "^7.0.0",
+    "html-webpack-plugin": "^5.3.1",
     "husky": "~6.0.0",
     "husky-run": "*",
     "jasmine-core": "3.7.1",
@@ -110,6 +116,7 @@
     "sass": "^1.34.0",
     "ts-node": "10.0.0",
     "tslint": "6.1.3",
-    "typescript": "4.2.4"
+    "typescript": "4.2.4",
+    "webpack": "^5.37.0"
   }
 }

projects/ngx-mask-lib/cypress.json

@@ -0,0 +1,9 @@
+{
+  "fixturesFolder": "./src/test/utils",
+  "pluginsFile": "./cypress/plugins/index.ts",
+  "supportFile": "./cypress/support/index.ts",
+  "component": {
+    "testFiles": "**/*.cy-spec.{js,ts,jsx,tsx}",
+    "componentFolder": "./src"
+  }
+}

projects/ngx-mask-lib/cypress/plugins/index.ts

@@ -0,0 +1,10 @@
+import { ResolvedDevServerConfig } from '@cypress/webpack-dev-server';
+import { startAngularDevServer } from '@jscutlery/cypress-angular-dev-server';
+
+module.exports = (
+  on: (arg0: string, arg1: (options: any) => Promise<ResolvedDevServerConfig>) => void,
+  config: any
+) => {
+  on('dev-server:start', (options) => startAngularDevServer({ options, tsConfig: 'tsconfig.cypress.json' }));
+  return config;
+};

projects/ngx-mask-lib/cypress/support/commands.ts

@@ -0,0 +1,11 @@
+declare namespace Cypress {
+  interface Chainable {
+    setSelectionRange(start: number, end: number): Chainable<JQuery<HTMLInputElement>>;
+  }
+}
+
+Cypress.Commands.add('setSelectionRange', { prevSubject: 'element' }, (subject, start, end) => {
+  return cy.wrap(subject).then(($el: JQuery<HTMLInputElement>) => {
+    $el[0].setSelectionRange(start, end);
+  });
+});

projects/ngx-mask-lib/cypress/support/index.ts

@@ -0,0 +1,2 @@
+import '@jscutlery/cypress-angular/support';
+import './commands';

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 {}

projects/ngx-mask-lib/tsconfig.cypress.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "allowJs": true,
+    "types": ["cypress", "node"]
+  },
+  "include": ["src/test/test/*.cy-spec.ts", "cypress/support/**/*.ts", "**/*.cy-spec.ts"]
+}