From 06eeca3ce45cf471d1b31b87370bcd40512491f8 Mon Sep 17 00:00:00 2001 From: web-padawan Date: Fri, 20 Sep 2024 11:07:35 +0300 Subject: [PATCH] test: disable error-message transition in visual tests --- packages/checkbox-group/test/visual/common.js | 11 +++++++++++ .../test/visual/lumo/checkbox-group.test.js | 1 + .../test/visual/material/checkbox-group.test.js | 1 + packages/checkbox/test/visual/common.js | 11 +++++++++++ packages/checkbox/test/visual/lumo/checkbox.test.js | 1 + .../checkbox/test/visual/material/checkbox.test.js | 1 + packages/combo-box/test/visual/common.js | 7 ++++++- packages/custom-field/test/visual/common.js | 11 +++++++++++ .../test/visual/lumo/custom-field.test.js | 1 + .../test/visual/material/custom-field.test.js | 1 + packages/date-picker/test/visual/common.js | 7 ++++++- packages/date-time-picker/test/visual/common.js | 7 ++++++- packages/multi-select-combo-box/test/visual/common.js | 7 ++++++- packages/number-field/test/visual/common.js | 7 ++++++- packages/radio-group/test/visual/common.js | 11 +++++++++++ .../radio-group/test/visual/lumo/radio-group.test.js | 1 + .../test/visual/material/radio-group.test.js | 1 + packages/select/test/visual/common.js | 11 +++++++++++ packages/select/test/visual/lumo/select.test.js | 1 + packages/select/test/visual/material/select.test.js | 1 + packages/text-area/test/visual/common.js | 7 ++++++- packages/text-field/test/visual/common.js | 7 ++++++- packages/time-picker/test/visual/common.js | 7 ++++++- 23 files changed, 113 insertions(+), 8 deletions(-) create mode 100644 packages/checkbox-group/test/visual/common.js create mode 100644 packages/checkbox/test/visual/common.js create mode 100644 packages/custom-field/test/visual/common.js create mode 100644 packages/radio-group/test/visual/common.js create mode 100644 packages/select/test/visual/common.js diff --git a/packages/checkbox-group/test/visual/common.js b/packages/checkbox-group/test/visual/common.js new file mode 100644 index 0000000000..14a48a0b3f --- /dev/null +++ b/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; + } + `, +); diff --git a/packages/checkbox-group/test/visual/lumo/checkbox-group.test.js b/packages/checkbox-group/test/visual/lumo/checkbox-group.test.js index 53a0c40de6..8c3b09e273 100644 --- a/packages/checkbox-group/test/visual/lumo/checkbox-group.test.js +++ b/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', () => { diff --git a/packages/checkbox-group/test/visual/material/checkbox-group.test.js b/packages/checkbox-group/test/visual/material/checkbox-group.test.js index 295a3dde90..5e15c2d6d2 100644 --- a/packages/checkbox-group/test/visual/material/checkbox-group.test.js +++ b/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', () => { diff --git a/packages/checkbox/test/visual/common.js b/packages/checkbox/test/visual/common.js new file mode 100644 index 0000000000..3d1a5d6259 --- /dev/null +++ b/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; + } + `, +); diff --git a/packages/checkbox/test/visual/lumo/checkbox.test.js b/packages/checkbox/test/visual/lumo/checkbox.test.js index a84b068bdf..60722a02e9 100644 --- a/packages/checkbox/test/visual/lumo/checkbox.test.js +++ b/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', () => { diff --git a/packages/checkbox/test/visual/material/checkbox.test.js b/packages/checkbox/test/visual/material/checkbox.test.js index bf1e7e95e5..d181d390aa 100644 --- a/packages/checkbox/test/visual/material/checkbox.test.js +++ b/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', () => { diff --git a/packages/combo-box/test/visual/common.js b/packages/combo-box/test/visual/common.js index 2e55a7d2f2..cad14b89ae 100644 --- a/packages/combo-box/test/visual/common.js +++ b/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; + } `, ); diff --git a/packages/custom-field/test/visual/common.js b/packages/custom-field/test/visual/common.js new file mode 100644 index 0000000000..c6cc4dc824 --- /dev/null +++ b/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; + } + `, +); diff --git a/packages/custom-field/test/visual/lumo/custom-field.test.js b/packages/custom-field/test/visual/lumo/custom-field.test.js index 20f1abfaeb..5efdd76d0d 100644 --- a/packages/custom-field/test/visual/lumo/custom-field.test.js +++ b/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'; diff --git a/packages/custom-field/test/visual/material/custom-field.test.js b/packages/custom-field/test/visual/material/custom-field.test.js index ae3f05a8af..2a2a8b1cab 100644 --- a/packages/custom-field/test/visual/material/custom-field.test.js +++ b/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'; diff --git a/packages/date-picker/test/visual/common.js b/packages/date-picker/test/visual/common.js index afa69f3a5e..5f0a05ff66 100644 --- a/packages/date-picker/test/visual/common.js +++ b/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; + } `, ); diff --git a/packages/date-time-picker/test/visual/common.js b/packages/date-time-picker/test/visual/common.js index 9c97328b94..8afc02da72 100644 --- a/packages/date-time-picker/test/visual/common.js +++ b/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; + } `, ); diff --git a/packages/multi-select-combo-box/test/visual/common.js b/packages/multi-select-combo-box/test/visual/common.js index 85b9527deb..4b7b87b9a3 100644 --- a/packages/multi-select-combo-box/test/visual/common.js +++ b/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; + } `, ); diff --git a/packages/number-field/test/visual/common.js b/packages/number-field/test/visual/common.js index abf9dcaff3..301991eff1 100644 --- a/packages/number-field/test/visual/common.js +++ b/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; + } `, ); diff --git a/packages/radio-group/test/visual/common.js b/packages/radio-group/test/visual/common.js new file mode 100644 index 0000000000..73ace62f1c --- /dev/null +++ b/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; + } + `, +); diff --git a/packages/radio-group/test/visual/lumo/radio-group.test.js b/packages/radio-group/test/visual/lumo/radio-group.test.js index 0cf25adcf2..9c93d6f2dd 100644 --- a/packages/radio-group/test/visual/lumo/radio-group.test.js +++ b/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', () => { diff --git a/packages/radio-group/test/visual/material/radio-group.test.js b/packages/radio-group/test/visual/material/radio-group.test.js index 5362621eb8..8a34c14e9f 100644 --- a/packages/radio-group/test/visual/material/radio-group.test.js +++ b/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', () => { diff --git a/packages/select/test/visual/common.js b/packages/select/test/visual/common.js new file mode 100644 index 0000000000..3e18593bb0 --- /dev/null +++ b/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; + } + `, +); diff --git a/packages/select/test/visual/lumo/select.test.js b/packages/select/test/visual/lumo/select.test.js index a9f76728cf..45d13f5b69 100644 --- a/packages/select/test/visual/lumo/select.test.js +++ b/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', () => { diff --git a/packages/select/test/visual/material/select.test.js b/packages/select/test/visual/material/select.test.js index 13ce5ec097..77ae772edb 100644 --- a/packages/select/test/visual/material/select.test.js +++ b/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', () => { diff --git a/packages/text-area/test/visual/common.js b/packages/text-area/test/visual/common.js index 259233ea01..0d1446d6df 100644 --- a/packages/text-area/test/visual/common.js +++ b/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; + } `, ); diff --git a/packages/text-field/test/visual/common.js b/packages/text-field/test/visual/common.js index 4565dd4386..a9d12a4803 100644 --- a/packages/text-field/test/visual/common.js +++ b/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; + } `, ); diff --git a/packages/time-picker/test/visual/common.js b/packages/time-picker/test/visual/common.js index b2523b4ea0..4ecdaed249 100644 --- a/packages/time-picker/test/visual/common.js +++ b/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; + } `, );