test: disable error-message transition in visual tests (#7830)

packages/checkbox-group/test/visual/common.js

@@ -0,0 +1,11 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-checkbox-group',
+  css`
+    /* Show error message immediately */
+    [part='error-message'] {
+      transition: none !important;
+    }
+  `,
+);

packages/checkbox-group/test/visual/lumo/checkbox-group.test.js

@@ -1,6 +1,7 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '../common.js';
 import '../../../theme/lumo/vaadin-checkbox-group.js';
 
 describe('checkbox-group', () => {

packages/checkbox-group/test/visual/material/checkbox-group.test.js

@@ -1,6 +1,7 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '../common.js';
 import '../../../theme/material/vaadin-checkbox-group.js';
 
 describe('checkbox-group', () => {

packages/checkbox/test/visual/common.js

@@ -0,0 +1,11 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-checkbox',
+  css`
+    /* Show error message immediately */
+    [part='error-message'] {
+      transition: none !important;
+    }
+  `,
+);

packages/checkbox/test/visual/lumo/checkbox.test.js

@@ -2,6 +2,7 @@ import { fixtureSync } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/vaadin-lumo-styles/test/autoload.js';
+import '../common.js';
 import '../../../theme/lumo/vaadin-checkbox.js';
 
 describe('checkbox', () => {

packages/checkbox/test/visual/material/checkbox.test.js

@@ -1,6 +1,7 @@
 import { fixtureSync } from '@vaadin/testing-helpers';
 import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '../common.js';
 import '../../../theme/material/vaadin-checkbox.js';
 
 describe('checkbox', () => {

packages/combo-box/test/visual/common.js

@@ -1,13 +1,18 @@
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-/* Hide caret */
 registerStyles(
   'vaadin-combo-box',
   css`
+    /* Hide caret */
     :host([focus-ring]) ::slotted(input),
     :host([opened]) ::slotted(input) {
       caret-color: transparent;
     }
+
+    /* Show error message immediately */
+    [part='error-message'] {
+      transition: none !important;
+    }
   `,
 );
 

packages/custom-field/test/visual/common.js

@@ -0,0 +1,11 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-custom-field vaadin-date-picker vaadin-number-field vaadin-text-field',
+  css`
+    /* Show error message immediately */
+    [part='error-message'] {
+      transition: none !important;
+    }
+  `,
+);

packages/custom-field/test/visual/lumo/custom-field.test.js

@@ -1,5 +1,6 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '../common.js';
 import '@vaadin/combo-box/theme/lumo/vaadin-combo-box.js';
 import '@vaadin/date-picker/theme/lumo/vaadin-date-picker.js';
 import '@vaadin/email-field/theme/lumo/vaadin-email-field.js';

packages/custom-field/test/visual/material/custom-field.test.js

@@ -1,5 +1,6 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '../common.js';
 import '@vaadin/combo-box/theme/material/vaadin-combo-box.js';
 import '@vaadin/date-picker/theme/material/vaadin-date-picker.js';
 import '@vaadin/form-layout/theme/material/vaadin-form-item.js';

packages/date-picker/test/visual/common.js

@@ -1,13 +1,18 @@
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-/* Hide caret */
 registerStyles(
   'vaadin-date-picker',
   css`
+    /* Hide caret */
     :host([focus-ring]) ::slotted(input),
     :host([opened]) ::slotted(input) {
       caret-color: transparent;
     }
+
+    /* Show error message immediately */
+    [part='error-message'] {
+      transition: none !important;
+    }
   `,
 );
 

packages/date-time-picker/test/visual/common.js

@@ -1,11 +1,16 @@
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-/* Hide caret */
 registerStyles(
   'vaadin-date-picker',
   css`
+    /* Hide caret */
     :host([focused]) ::slotted(input) {
       caret-color: transparent;
     }
+
+    /* Show error message immediately */
+    [part='error-message'] {
+      transition: none !important;
+    }
   `,
 );

packages/multi-select-combo-box/test/visual/common.js

@@ -1,13 +1,18 @@
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-/* Hide caret */
 registerStyles(
   'vaadin-multi-select-combo-box',
   css`
+    /* Hide caret */
     :host([focused][focus-ring]) ::slotted(input),
     :host([focused][has-value]) ::slotted(input),
     :host([focused][opened]) ::slotted(input) {
       caret-color: transparent !important;
     }
+
+    /* Show error message immediately */
+    [part='error-message'] {
+      transition: none !important;
+    }
   `,
 );

packages/number-field/test/visual/common.js

@@ -1,11 +1,16 @@
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-/* Hide caret */
 registerStyles(
   'vaadin-number-field',
   css`
+    /* Hide caret */
     :host([focus-ring]) ::slotted(input) {
       caret-color: transparent;
     }
+
+    /* Show error message immediately */
+    [part='error-message'] {
+      transition: none !important;
+    }
   `,
 );

packages/radio-group/test/visual/common.js

@@ -0,0 +1,11 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-radio-group',
+  css`
+    /* Show error message immediately */
+    [part='error-message'] {
+      transition: none !important;
+    }
+  `,
+);

packages/radio-group/test/visual/lumo/radio-group.test.js

@@ -1,6 +1,7 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '../common.js';
 import '../../../theme/lumo/vaadin-radio-group.js';
 
 describe('radio-group', () => {

packages/radio-group/test/visual/material/radio-group.test.js

@@ -1,6 +1,7 @@
 import { fixtureSync } from '@vaadin/testing-helpers/dist/fixture.js';
 import { sendKeys } from '@web/test-runner-commands';
 import { visualDiff } from '@web/test-runner-visual-regression';
+import '../common.js';
 import '../../../theme/material/vaadin-radio-group.js';
 
 describe('radio-group', () => {

packages/select/test/visual/common.js

@@ -0,0 +1,11 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-select',
+  css`
+    /* Show error message immediately */
+    [part='error-message'] {
+      transition: none !important;
+    }
+  `,
+);

packages/select/test/visual/lumo/select.test.js

@@ -4,6 +4,7 @@ import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/item/theme/lumo/vaadin-item.js';
 import '@vaadin/list-box/theme/lumo/vaadin-list-box.js';
 import '../../not-animated-styles.js';
+import '../common.js';
 import '../../../theme/lumo/vaadin-select.js';
 
 describe('select', () => {

packages/select/test/visual/material/select.test.js

@@ -4,6 +4,7 @@ import { visualDiff } from '@web/test-runner-visual-regression';
 import '@vaadin/item/theme/material/vaadin-item.js';
 import '@vaadin/list-box/theme/material/vaadin-list-box.js';
 import '../../not-animated-styles.js';
+import '../common.js';
 import '../../../theme/material/vaadin-select.js';
 
 describe('select', () => {

packages/text-area/test/visual/common.js

@@ -1,11 +1,16 @@
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-/* Hide caret */
 registerStyles(
   'vaadin-text-area',
   css`
+    /* Hide caret */
     ::slotted(textarea) {
       caret-color: transparent;
     }
+
+    /* Show error message immediately */
+    [part='error-message'] {
+      transition: none !important;
+    }
   `,
 );

packages/text-field/test/visual/common.js

@@ -1,11 +1,16 @@
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-/* Hide caret */
 registerStyles(
   'vaadin-text-field',
   css`
+    /* Hide caret */
     :host([focus-ring]) ::slotted(input) {
       caret-color: transparent;
     }
+
+    /* Show error message immediately */
+    [part='error-message'] {
+      transition: none !important;
+    }
   `,
 );

packages/time-picker/test/visual/common.js

@@ -1,12 +1,17 @@
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
-/* Hide caret */
 registerStyles(
   'vaadin-time-picker',
   css`
+    /* Hide caret */
     :host([focus-ring]) ::slotted(input),
     :host([opened]) ::slotted(input) {
       caret-color: transparent;
     }
+
+    /* Show error message immediately */
+    [part='error-message'] {
+      transition: none !important;
+    }
   `,
 );