chore(demo): add new e2e test for field error (#6596)

taiga-family · Mar 5, 2024 · 4fe8da9 · 4fe8da9
1 parent 8d7917e
commit 4fe8da9
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 21 deletions.
diff --git a/projects/demo-playwright/tests/kit/field-error/field-error.spec.ts b/projects/demo-playwright/tests/kit/field-error/field-error.spec.ts
@@ -1,23 +1,33 @@
-import {tuiGoto} from '@demo-playwright/utils';
+import {TuiDocumentationPagePO, tuiGoto} from '@demo-playwright/utils';
 import {expect, test} from '@playwright/test';
 
-test.describe('TuiFieldError', () => {
+test.describe('FieldError', () => {
     test('Errors of invalid control are shown correctly', async ({page}) => {
+        const example = new TuiDocumentationPagePO(page).getExample('#base');
+
         await tuiGoto(page, '/pipes/field-error');
 
-        const errorPipeInput = page
-            .locator('tui-field-error-pipe-example-1 input')
-            .first();
+        const input = example.locator('input').first();
 
-        await errorPipeInput.focus();
+        await input.focus();
+        await input.blur();
 
-        await page.waitForTimeout(50);
+        await page.waitForTimeout(500);
 
-        await errorPipeInput.blur();
+        await expect(example).toHaveScreenshot('01-field-error.png', {
+            animations: 'allow',
+        });
+    });
+
+    test('Submit invalid form', async ({page}) => {
+        const example = new TuiDocumentationPagePO(page).getExample('#patterns');
+
+        await tuiGoto(page, '/pipes/field-error');
+        await example.locator('button').click();
 
-        const example = page.getByTestId('tui-doc-example').first();
+        await page.waitForTimeout(500);
 
-        await expect(example).toHaveScreenshot('shows-error-under-field.png', {
+        await expect(example).toHaveScreenshot('02-field-error.png', {
             animations: 'allow',
         });
     });

diff --git a/projects/demo/src/modules/pipes/field-error/examples/3/index.html b/projects/demo/src/modules/pipes/field-error/examples/3/index.html
@@ -1,6 +1,7 @@
 <form
     class="b-form"
     [formGroup]="testForm"
+    (submit)="onSubmit()"
 >
     <label tuiLabel="Secret number">
         <tui-input
@@ -23,7 +24,7 @@
 
     <label
         tuiLabel="Enter company name"
-        class="tui-space_top-4"
+        class="tui-space_top-4 tui-space_bottom-4"
     >
         <tui-input
             formControlName="testValue2"
@@ -47,4 +48,31 @@
             [error]="[] | tuiFieldError | async"
         ></tui-error>
     </label>
+
+    <label>
+        <div class="checkbox">
+            <input
+                formControlName="testValue3"
+                size="s"
+                tuiCheckbox
+                type="checkbox"
+            />
+
+            I agree on the conditions
+        </div>
+
+        <tui-error
+            formControlName="testValue3"
+            [error]="[] | tuiFieldError | async"
+        ></tui-error>
+    </label>
+
+    <button
+        size="m"
+        tuiButton
+        type="submit"
+        class="tui-space_top-4"
+    >
+        Submit
+    </button>
 </form>
diff --git a/projects/demo/src/modules/pipes/field-error/examples/3/index.less b/projects/demo/src/modules/pipes/field-error/examples/3/index.less
@@ -0,0 +1,5 @@
+.checkbox {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
diff --git a/projects/demo/src/modules/pipes/field-error/examples/3/index.ts b/projects/demo/src/modules/pipes/field-error/examples/3/index.ts
@@ -8,24 +8,16 @@ import {
 } from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
-import {TuiValidationError} from '@taiga-ui/cdk';
+import {tuiMarkControlAsTouchedAndValidate, TuiValidationError} from '@taiga-ui/cdk';
 import {type PolymorpheusContent} from '@tinkoff/ng-polymorpheus';
 
 const secretRegexTen = /^\d{10}$/;
 const secretRegexTwelve = /^\d{12}$/;
 
-export function innValidator(field: AbstractControl): unknown {
-    return field.value &&
-        (secretRegexTen.test(field.value) || secretRegexTwelve.test(field.value))
-        ? null
-        : {
-              inn: new TuiValidationError('Secret number contains 10 or 12 digits'),
-          };
-}
-
 @Component({
     selector: 'tui-field-error-pipe-example-3',
     templateUrl: './index.html',
+    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
@@ -41,12 +33,17 @@ export class TuiFieldErrorPipeExample3 implements OnInit {
     protected readonly testForm = new FormGroup({
         testValue1: new FormControl('', [Validators.required, this.getSecretValidator()]),
         testValue2: this.testValue2,
+        testValue3: new FormControl(false, [Validators.requiredTrue]),
     });
 
     public ngOnInit(): void {
         this.testValue2.setValidators([Validators.required, this.companyValidator]);
     }
 
+    protected onSubmit(): void {
+        tuiMarkControlAsTouchedAndValidate(this.testForm);
+    }
+
     private readonly companyValidator = (
         field: AbstractControl,
     ): ValidationErrors | null =>

diff --git a/projects/demo/src/modules/pipes/field-error/field-error.module.ts b/projects/demo/src/modules/pipes/field-error/field-error.module.ts
@@ -13,6 +13,7 @@ import {
     TuiLinkModule,
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
+import {TuiCheckboxModule} from '@taiga-ui/experimental';
 import {
     TuiFieldErrorPipeModule,
     TuiInputModule,
@@ -49,6 +50,7 @@ import {ExampleTuiFieldErrorPipeComponent} from './field-error.component';
         TuiInputNumberModule,
         TuiCurrencyPipeModule,
         PolymorpheusModule,
+        TuiCheckboxModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiFieldErrorPipeComponent)),
     ],
     declarations: [