fix: rebuild tests to be as they were

taiga-family · Mar 1, 2024 · b99888d · b99888d
1 parent 6356b2f
commit b99888d
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 43 deletions.
diff --git a/projects/demo-integrations/src/tests/component-testing/predicate/predicate.cy.ts b/projects/demo-integrations/src/tests/component-testing/predicate/predicate.cy.ts
@@ -1,6 +1,7 @@
 import {MaskitoOptions} from '@maskito/core';
 
 import {TestInput} from '../utils';
+import {SynchronousTestInputComponent} from './synchronous-test-input.component';
 
 describe('@maskito/angular | Predicate', () => {
     const cardMask: MaskitoOptions = {
@@ -15,52 +16,31 @@ describe('@maskito/angular | Predicate', () => {
         ],
     };
 
-    const nameMask: MaskitoOptions = {
-        mask: /^[a-zA-Z\s]+$/,
-        postprocessors: [
-            ({value, selection}) => ({value: value.toUpperCase(), selection}),
-        ],
-    };
+    it('can detect run-time changes', () => {
+        cy.mount(SynchronousTestInputComponent);
+        cy.get('input').should('be.visible').first().as('card');
+        cy.get('input').should('be.visible').eq(1).as('name');
 
-    describe('can detect run-time changes', () => {
-        it('12341234abcd12341234 => 1234 1234 1234 1234', () => {
-            cy.mount(TestInput, {
-                componentProperties: {
-                    maskitoOptions: cardMask,
-                    maskitoElementPredicate: element => element as HTMLInputElement,
-                },
-            });
-
-            cy.get('input')
-                .type('12341234abcd12341234')
-                .should('have.value', '1234 1234 1234 1234');
-        });
+        cy.get('@card')
+            .focus()
+            .type('12341234abcd12341234')
+            .should('have.value', '1234 1234 1234 1234');
 
-        it('12341234abcd12341234 => ABCD', () => {
-            cy.mount(TestInput, {
-                componentProperties: {
-                    maskitoOptions: nameMask,
-                    maskitoElementPredicate: element => element as HTMLInputElement,
-                },
-            });
-
-            cy.get('input').type('12341234abcd12341234').should('have.value', 'ABCD');
-        });
+        cy.get('@name').focus().type('12341234abcd12341234').should('have.value', 'ABCD');
     });
-    describe('supports asynchronous predicate', () => {
-        it('12341234abcd12341234 => 1234 1234 1234 1234', () => {
-            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');
+
+    it('supports asynchronous predicate', () => {
+        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');
     });
 });
diff --git a/...mo-integrations/src/tests/component-testing/predicate/synchronous-test-input.component.ts b/...mo-integrations/src/tests/component-testing/predicate/synchronous-test-input.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';
+// or ViewChild
+@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 SynchronousTestInputComponent {
+    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];
+}