From 767344b6bd2c159bfb4fd55e7965a13eb70f531c 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   | 10 +++++++
 .../pipes/field-error/examples/3/index.ts     |  6 +++-
 3 files changed, 35 insertions(+), 11 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 f6ae87ca7930b..84cc4130d2481 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 181c298ba69e6..35e36d8ca77c2 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
@@ -47,4 +48,13 @@
             [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 91ad1db181455..8e372553d8d4a 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,7 +8,7 @@ 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}$/;
@@ -47,6 +47,10 @@ export class TuiFieldErrorPipeExample3 implements OnInit {
         this.testValue2.setValidators([Validators.required, this.companyValidator]);
     }
 
+    onSubmit(): void {
+        tuiMarkControlAsTouchedAndValidate(this.testForm);
+    }
+
     private readonly companyValidator = (
         field: AbstractControl,
     ): ValidationErrors | null =>