refactor(demo-integrations): rewriting e2e tests to CT (tests for `pr…

…edicate` Maskito attribute) (#1100)

projects/demo-integrations/src/tests/component-testing/predicate/multi-test.component.ts

@@ -0,0 +1,54 @@
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormsModule} from '@angular/forms';
+import {MaskitoDirective} from '@maskito/angular';
+import {MaskitoElementPredicate, MaskitoOptions} from '@maskito/core';
+
+@Component({
+    standalone: true,
+    selector: 'synchronous-test-input',
+    imports: [MaskitoDirective, FormsModule],
+    template: `
+        <div
+            [maskito]="card.matches(':focus') ? cardMask : nameMask"
+            [maskitoElement]="card.matches(':focus') ? cardPredicate : namePredicate"
+        >
+            <input
+                #card
+                [(ngModel)]="value.number"
+            />
+            <input [(ngModel)]="value.name" />
+        </div>
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MultiTestInputComponent {
+    value = {
+        number: '',
+        name: '',
+    };
+
+    readonly cardMask: MaskitoOptions = {
+        mask: [
+            ...new Array(4).fill(/\d/),
+            ' ',
+            ...new Array(4).fill(/\d/),
+            ' ',
+            ...new Array(4).fill(/\d/),
+            ' ',
+            ...new Array(4).fill(/\d/),
+        ],
+    };
+
+    readonly nameMask: MaskitoOptions = {
+        mask: /^[a-zA-Z\s]+$/,
+        postprocessors: [
+            ({value, selection}) => ({value: value.toUpperCase(), selection}),
+        ],
+    };
+
+    readonly cardPredicate: MaskitoElementPredicate = element =>
+        element.querySelectorAll('input')[0];
+
+    readonly namePredicate: MaskitoElementPredicate = element =>
+        element.querySelectorAll('input')[1];
+}

projects/demo-integrations/src/tests/component-testing/predicate/predicate.cy.ts

@@ -0,0 +1,46 @@
+import {MaskitoOptions} from '@maskito/core';
+
+import {TestInput} from '../utils';
+import {MultiTestInputComponent} from './multi-test.component';
+
+describe('@maskito/angular | Predicate', () => {
+    it('can detect run-time changes', () => {
+        cy.mount(MultiTestInputComponent);
+        cy.get('input').should('be.visible').first().as('card');
+        cy.get('input').should('be.visible').eq(1).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');
+    });
+
+    it('supports asynchronous predicate', () => {
+        const cardMask: MaskitoOptions = {
+            mask: [
+                ...new Array(4).fill(/\d/),
+                ' ',
+                ...new Array(4).fill(/\d/),
+                ' ',
+                ...new Array(4).fill(/\d/),
+                ' ',
+                ...new Array(4).fill(/\d/),
+            ],
+        };
+
+        cy.mount(TestInput, {
+            componentProperties: {
+                maskitoOptions: cardMask,
+                maskitoElementPredicate: async element =>
+                    Promise.resolve(element as HTMLInputElement),
+            },
+        });
+        cy.get('input').as('card');
+        cy.get('@card')
+            .focus()
+            .type('12341234abcd12341234')
+            .should('have.value', '1234 1234 1234 1234');
+    });
+});

projects/demo-integrations/src/tests/component-testing/utils.ts

@@ -1,6 +1,10 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {MaskitoDirective} from '@maskito/angular';
-import {MaskitoOptions} from '@maskito/core';
+import {
+    MASKITO_DEFAULT_ELEMENT_PREDICATE,
+    MaskitoElementPredicate,
+    MaskitoOptions,
+} from '@maskito/core';
 
 @Component({
     standalone: true,
@@ -10,6 +14,7 @@ import {MaskitoOptions} from '@maskito/core';
             [attr.maxlength]="maxLength"
             [attr.value]="initialValue"
             [maskito]="maskitoOptions"
+            [maskitoElement]="maskitoElementPredicate"
             (input)="input.emit($event)"
         />
     `,
@@ -21,6 +26,9 @@ export class TestInput {
     @Input()
     public maskitoOptions: MaskitoOptions | null = null;
 
+    @Input()
+    maskitoElementPredicate: MaskitoElementPredicate = MASKITO_DEFAULT_ELEMENT_PREDICATE;
+
     @Output()
     public input = new EventEmitter();