chore: add predicate test

projects/angular/src/lib/maskito.directive.ts

@@ -1,5 +1,5 @@
 import {Directive, ElementRef, Inject, Input, OnChanges, OnDestroy} from '@angular/core';
-import {Maskito, MaskitoOptions} from '@maskito/core';
+import {Maskito, MASKITO_DEFAULT_OPTIONS, MaskitoOptions} from '@maskito/core';
 
 export type MaskitoPredicate = (
     element: HTMLElement,
@@ -12,7 +12,7 @@ export class MaskitoDirective implements OnDestroy, OnChanges {
     private maskedElement: Maskito | null = null;
 
     @Input()
-    maskito: MaskitoOptions = {mask: []};
+    maskito: MaskitoOptions = MASKITO_DEFAULT_OPTIONS;
 
     constructor(
         @Inject(ElementRef) private readonly elementRef: ElementRef<HTMLElement>,

projects/demo-integrations/cypress/tests/angular/predicate.cy.ts

@@ -0,0 +1,16 @@
+import {DemoPath} from '@demo/path';
+
+describe('@maskito/angular | Predicate', () => {
+    it('can detect run-time changes', () => {
+        cy.visit(`/${DemoPath.Cypress}`);
+        cy.get('#predicate input').should('be.visible').first().as('card');
+        cy.get('#predicate input').should('be.visible').last().as('name');
+
+        cy.get('@card')
+            .focus()
+            .type('12341234abcd12341234')
+            .should('have.value', '1234 1234 1234 1234');
+
+        cy.get('@name').focus().type('12341234abcd12341234').should('have.value', 'ABCD');
+    });
+});

projects/demo/src/app/app.routes.ts

@@ -185,6 +185,14 @@ export const appRoutes: Routes = [
             title: `Stackblitz Starter`,
         },
     },
+    {
+        path: DemoPath.Cypress,
+        loadChildren: async () =>
+            import(`../pages/cypress/cypress.module`).then(m => m.CypressDocPageModule),
+        data: {
+            title: `Cypress tests 🤫`,
+        },
+    },
     {
         path: '**',
         redirectTo: DemoPath.WhatIsMaskito,

projects/demo/src/app/demo-path.ts

@@ -17,4 +17,5 @@ export const enum DemoPath {
     BrowserSupport = 'browser-support',
     Changelog = 'changelog',
     Stackblitz = 'stackblitz',
+    Cypress = 'cypress',
 }

projects/demo/src/pages/cypress/cypress.component.ts

@@ -0,0 +1,8 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+
+@Component({
+    selector: 'cypress-doc-page',
+    templateUrl: './cypress.template.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class CypressDocPageComponent {}

projects/demo/src/pages/cypress/cypress.module.ts

@@ -0,0 +1,26 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {RouterModule} from '@angular/router';
+import {MaskitoModule} from '@maskito/angular';
+import {TuiAddonDocModule, tuiGenerateRoutes} from '@taiga-ui/addon-doc';
+import {TuiGroupModule} from '@taiga-ui/core';
+import {TuiInputModule} from '@taiga-ui/kit';
+
+import {CypressDocPageComponent} from './cypress.component';
+import {TestDocExample1} from './examples/1-predicate/component';
+
+@NgModule({
+    imports: [
+        CommonModule,
+        FormsModule,
+        MaskitoModule,
+        TuiInputModule,
+        TuiGroupModule,
+        TuiAddonDocModule,
+        RouterModule.forChild(tuiGenerateRoutes(CypressDocPageComponent)),
+    ],
+    declarations: [CypressDocPageComponent, TestDocExample1],
+    exports: [CypressDocPageComponent],
+})
+export class CypressDocPageModule {}

projects/demo/src/pages/cypress/cypress.template.html

@@ -0,0 +1,5 @@
+<tui-doc-page header="Cypress">
+    <ng-template pageTab="Tests">
+        <test-doc-example-1 id="predicate"></test-doc-example-1>
+    </ng-template>
+</tui-doc-page>

projects/demo/src/pages/cypress/examples/1-predicate/component.ts

@@ -0,0 +1,38 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {MaskitoPredicate} from '@maskito/angular';
+import {MaskitoOptions} from '@maskito/core';
+
+@Component({
+    selector: 'test-doc-example-1',
+    templateUrl: './template.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TestDocExample1 {
+    value = {
+        number: '',
+        name: '',
+    };
+
+    readonly cardMask: MaskitoOptions = {
+        mask: [
+            ...Array(4).fill(/\d/),
+            ' ',
+            ...Array(4).fill(/\d/),
+            ' ',
+            ...Array(4).fill(/\d/),
+            ' ',
+            ...Array(4).fill(/\d/),
+        ],
+    };
+
+    readonly nameMask: MaskitoOptions = {
+        mask: /^[a-zA-Z\s]+$/,
+        postprocessor: ({value, selection}) => ({value: value.toUpperCase(), selection}),
+    };
+
+    readonly cardPredicate: MaskitoPredicate = element =>
+        element.querySelectorAll('input')[0]!;
+
+    readonly namePredicate: MaskitoPredicate = element =>
+        element.querySelectorAll('input')[1]!;
+}

projects/demo/src/pages/cypress/examples/1-predicate/template.html

@@ -0,0 +1,13 @@
+<div
+    tuiGroup
+    [maskito]="card.focused ? cardMask : nameMask"
+    [maskitoElement]="card.focused ? cardPredicate : namePredicate"
+>
+    <tui-input
+        #card
+        [(ngModel)]="value.number"
+    >
+        Card number
+    </tui-input>
+    <tui-input [(ngModel)]="value.name">Name</tui-input>
+</div>

projects/demo/src/pages/documentation/angular/angular.template.html

@@ -71,7 +71,7 @@ <h2>Nested input element</h2>
             </tui-notification>
 
             <tui-doc-code
-                filename="custom-input.component.ts"
+                filename="your.component.ts"
                 [code]="customInputExample"
             ></tui-doc-code>
         </section>

projects/demo/src/pages/documentation/angular/examples/custom-input-example.md

@@ -14,11 +14,11 @@ import {MaskitoOptions} from '@maskito/core';
     </custom-input-wrapper>
   `,
 })
-export class CustomInputComponent {
+export class YourComponent {
   readonly maskitoOptions: MaskitoOptions = {
     mask: /^\d+$/,
   };
 
-  readonly predicate: MaskitoPredicate = element => element.querySelector('input')!;
+  readonly predicate: MaskitoPredicate = element => element.querySelector('input[id="my-input"]')!;
 }
 ```