From 990992b327f7b425ae27fed6f1db144f5e05f336 Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Mon, 29 Jan 2024 15:18:33 +0300
Subject: [PATCH] chore(demo): add new e2e test for field error

---
 .../tests/kit/field-error/field-error.spec.ts | 30 ++++++++++++-------
 .../pipes/field-error/examples/3/index.html   | 21 ++++++++++++-
 .../pipes/field-error/examples/3/index.ts     | 16 ++++------
 .../pipes/field-error/field-error.module.ts   |  2 ++
 4 files changed, 48 insertions(+), 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
index f6ae87ca7930..84cc4130d248 100644
--- 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
index 181c298ba69e..b5c80ad6242b 100644
--- 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,22 @@
             [error]="[] | tuiFieldError | async"
         ></tui-error>
     </label>
+
+    <label>
+        <tui-checkbox-labeled formControlName="testValue3">I agree on the conditions</tui-checkbox-labeled>
+
+        <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.ts b/projects/demo/src/modules/pipes/field-error/examples/3/index.ts
index 91ad1db18145..39e04d8c77c5 100644
--- 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,21 +8,12 @@ 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 {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',
@@ -41,12 +32,17 @@ export class TuiFieldErrorPipeExample3 implements OnInit {
     readonly testForm = new FormGroup({
         testValue1: new FormControl('', [Validators.required, this.getSecretValidator()]),
         testValue2: this.testValue2,
+        testValue3: new FormControl(false, [Validators.requiredTrue]),
     });
 
     ngOnInit(): void {
         this.testValue2.setValidators([Validators.required, this.companyValidator]);
     }
 
+    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
index 5bffc0c3675c..c023eafdbedb 100644
--- a/projects/demo/src/modules/pipes/field-error/field-error.module.ts
+++ b/projects/demo/src/modules/pipes/field-error/field-error.module.ts
@@ -14,6 +14,7 @@ import {
     TuiTextfieldControllerModule,
 } from '@taiga-ui/core';
 import {
+    TuiCheckboxLabeledModule,
     TuiFieldErrorPipeModule,
     TuiInputModule,
     TuiInputNumberModule,
@@ -50,6 +51,7 @@ import {ExampleTuiFieldErrorPipeComponent} from './field-error.component';
         TuiCurrencyPipeModule,
         PolymorpheusModule,
         RouterModule.forChild(tuiGenerateRoutes(ExampleTuiFieldErrorPipeComponent)),
+        TuiCheckboxLabeledModule,
     ],
     declarations: [
         ExampleTuiFieldErrorPipeComponent,