diff --git a/packages/date-picker/test/visual/base/date-picker.test.js b/packages/date-picker/test/visual/base/date-picker.test.js new file mode 100644 index 00000000000..3e9c90d5634 --- /dev/null +++ b/packages/date-picker/test/visual/base/date-picker.test.js @@ -0,0 +1,144 @@ +import { resetMouse, sendKeys, sendMouseToElement } from '@vaadin/test-runner-commands'; +import { fixtureSync, mousedown } from '@vaadin/testing-helpers'; +import { visualDiff } from '@web/test-runner-visual-regression'; +import '../common.js'; +import '../../../src/vaadin-lit-date-picker.js'; + +describe('date-picker', () => { + let div, element; + + beforeEach(() => { + div = document.createElement('div'); + div.style.display = 'inline-block'; + div.style.padding = '10px'; + element = fixtureSync('', div); + }); + + describe('states', () => { + it('basic', async () => { + await visualDiff(div, 'state-basic'); + }); + + it('disabled', async () => { + element.disabled = true; + await visualDiff(div, 'state-disabled'); + }); + + it('readonly', async () => { + element.readonly = true; + await visualDiff(div, 'state-readonly'); + }); + + describe('focus', () => { + afterEach(async () => { + await resetMouse(); + // After tests which use sendKeys() the focus-utils.js -> isKeyboardActive is set to true. + // Click once here on body to reset it so other tests are not affected by it. + // An unwanted focus-ring would be shown in other tests otherwise. + mousedown(document.body); + }); + + it('keyboard focus', async () => { + await sendKeys({ press: 'Tab' }); + await visualDiff(div, 'state-focus-keyboard'); + }); + + it('pointer focus', async () => { + element.autoOpenDisabled = true; + await sendMouseToElement({ type: 'click', element }); + await visualDiff(div, 'state-focus-pointer'); + }); + }); + }); + + describe('features', () => { + ['ltr', 'rtl'].forEach((dir) => { + describe(dir, () => { + before(() => { + document.documentElement.setAttribute('dir', dir); + }); + + after(() => { + document.documentElement.removeAttribute('dir'); + }); + + it('label', async () => { + element.label = 'Label'; + await visualDiff(div, `${dir}-label`); + }); + + it('placeholder', async () => { + element.placeholder = 'Placeholder'; + await visualDiff(div, `${dir}-placeholder`); + }); + + it('value', async () => { + element.value = '1991-12-20'; + await visualDiff(div, `${dir}-value`); + }); + + it('clear button', async () => { + element.value = '1991-12-20'; + element.clearButtonVisible = true; + await visualDiff(div, `${dir}-clear-button`); + }); + + it('required', async () => { + element.label = 'Label'; + element.required = true; + await visualDiff(div, `${dir}-required`); + }); + + it('error message', async () => { + element.label = 'Label'; + element.errorMessage = 'This field is required'; + element.required = true; + element.validate(); + await visualDiff(div, `${dir}-error-message`); + }); + + it('helper text', async () => { + element.helperText = 'Helper text'; + await visualDiff(div, `${dir}-helper-text`); + }); + + it('helper above field', async () => { + element.label = 'Label'; + element.helperText = 'Helper text'; + element.setAttribute('theme', 'helper-above-field'); + await visualDiff(div, `${dir}-helper-above-field`); + }); + + it('prefix slot', async () => { + const span = document.createElement('span'); + span.setAttribute('slot', 'prefix'); + span.textContent = '$'; + element.appendChild(span); + await visualDiff(div, `${dir}-prefix`); + }); + + describe('dropdown', () => { + function openOverlay() { + element.opened = true; + div.style.height = `${element.offsetHeight + element.$.overlay.$.overlay.offsetHeight}px`; + div.style.width = `${element.$.overlay.$.overlay.offsetWidth}px`; + } + + it('default', async () => { + element.value = '2000-01-01'; + openOverlay(); + await visualDiff(div, `${dir}-dropdown`); + }); + + it('week numbers', async () => { + element.value = '2000-01-01'; + element.showWeekNumbers = true; + element.i18n = { firstDayOfWeek: 1 }; + openOverlay(); + await visualDiff(div, `${dir}-week-numbers`); + }); + }); + }); + }); + }); +}); diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-clear-button.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-clear-button.png new file mode 100644 index 00000000000..305755ea961 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-clear-button.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-dropdown.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-dropdown.png new file mode 100644 index 00000000000..37603aa20ce Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-dropdown.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-error-message.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-error-message.png new file mode 100644 index 00000000000..47f4bb486c4 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-error-message.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-helper-above-field.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-helper-above-field.png new file mode 100644 index 00000000000..59495f0c824 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-helper-above-field.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-helper-text.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-helper-text.png new file mode 100644 index 00000000000..c7ceb0ead88 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-helper-text.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-label.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-label.png new file mode 100644 index 00000000000..beae8d7ce1e Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-label.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-placeholder.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-placeholder.png new file mode 100644 index 00000000000..0b233f201eb Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-placeholder.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-prefix.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-prefix.png new file mode 100644 index 00000000000..9769ca827ef Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-prefix.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-required.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-required.png new file mode 100644 index 00000000000..68b5eeb1925 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-required.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-value.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-value.png new file mode 100644 index 00000000000..be83605a6b0 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-value.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-week-numbers.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-week-numbers.png new file mode 100644 index 00000000000..4d7785535f2 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/ltr-week-numbers.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-clear-button.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-clear-button.png new file mode 100644 index 00000000000..285e103d0ae Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-clear-button.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-dropdown.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-dropdown.png new file mode 100644 index 00000000000..cdb5d840c08 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-dropdown.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-error-message.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-error-message.png new file mode 100644 index 00000000000..3ada7538e32 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-error-message.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-helper-above-field.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-helper-above-field.png new file mode 100644 index 00000000000..e42599f9cd2 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-helper-above-field.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-helper-text.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-helper-text.png new file mode 100644 index 00000000000..3100d049ecc Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-helper-text.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-label.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-label.png new file mode 100644 index 00000000000..7e98e89d02e Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-label.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-placeholder.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-placeholder.png new file mode 100644 index 00000000000..0b233f201eb Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-placeholder.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-prefix.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-prefix.png new file mode 100644 index 00000000000..2a88c8416f6 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-prefix.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-required.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-required.png new file mode 100644 index 00000000000..c63aa8d14cd Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-required.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-value.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-value.png new file mode 100644 index 00000000000..77f1542352e Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-value.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-week-numbers.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-week-numbers.png new file mode 100644 index 00000000000..e1bbba3ecb7 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/rtl-week-numbers.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-basic.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-basic.png new file mode 100644 index 00000000000..9f05cf64430 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-basic.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-disabled.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-disabled.png new file mode 100644 index 00000000000..3d21262ceb0 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-disabled.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-focus-keyboard.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-focus-keyboard.png new file mode 100644 index 00000000000..2cbb70cb3fd Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-focus-keyboard.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-focus-pointer.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-focus-pointer.png new file mode 100644 index 00000000000..2cbb70cb3fd Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-focus-pointer.png differ diff --git a/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-readonly.png b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-readonly.png new file mode 100644 index 00000000000..1874e6c0745 Binary files /dev/null and b/packages/date-picker/test/visual/base/screenshots/date-picker/baseline/state-readonly.png differ