chore(date-picker): Refactor picker tests (VIV-2338)

libs/components/src/lib/date-picker/date-picker.spec.ts

@@ -9,6 +9,8 @@ import deDE from '../../locales/de-DE';
 import { setLocale } from '../../shared/localization';
 import { TextField } from '../text-field/text-field';
 import { Button } from '../button/button';
+import { pickerFieldSpec } from '../../shared/picker-field/picker-field.spec';
+import { calendarPickerSpec } from '../../shared/picker-field/mixins/calendar-picker.spec';
 import { DatePicker } from './date-picker';
 import '.';
 
@@ -85,6 +87,47 @@ describe('vwc-date-picker', () => {
 		});
 	});
 
+	describe('picker field', () => {
+		pickerFieldSpec(COMPONENT_TAG, (shadowRoot) => {
+			return {
+				firstFocusable: shadowRoot.querySelector(
+					'vwc-button[aria-label="Previous year"]'
+				)!,
+				lastFocusable: shadowRoot.querySelector('vwc-button[label="OK"]')!,
+			};
+		});
+	});
+
+	describe('calendar picker', () => {
+		calendarPickerSpec(
+			COMPONENT_TAG,
+			(element: DatePicker, min: string) => {
+				element.min = min;
+			},
+			(element: DatePicker, max: string) => {
+				element.max = max;
+			}
+		);
+	});
+
+	describe('errorText', () => {
+		it('should forward errorText to the text field', async () => {
+			element.errorText = 'errorText';
+			await elementUpdated(element);
+
+			expect(textField.errorText).toBe('errorText');
+		});
+
+		it('should have a higher priority than an internal validation error', async () => {
+			element.errorText = 'errorText';
+			await elementUpdated(element);
+
+			typeIntoTextField('x');
+
+			expect(textField.errorText).toBe('errorText');
+		});
+	});
+
 	describe('value', () => {
 		it('should display a formatted version of value in the text field', async () => {
 			element.value = '2021-01-21';
@@ -249,11 +292,17 @@ describe('vwc-date-picker', () => {
 		});
 	});
 
-	describe('dialog footer', () => {
+	describe('dialog', () => {
 		beforeEach(async () => {
 			await openPopup();
 		});
 
+		it('should have an accessible name of "Choose date"', () => {
+			expect(
+				element.shadowRoot!.querySelector('.dialog')!.getAttribute('aria-label')
+			).toBe('Choose date');
+		});
+
 		it('should clear the date when clicking the clear button', async () => {
 			element.value = '2023-08-01';
 

libs/components/src/lib/date-range-picker/date-range-picker.spec.ts

@@ -9,8 +9,10 @@ import enUS from '../../locales/en-US';
 import { TextField } from '../text-field/text-field';
 import { Popup } from '../popup/popup';
 import { Button } from '../button/button';
-import { DateRangePicker } from './date-range-picker';
 import '.';
+import { pickerFieldSpec } from '../../shared/picker-field/picker-field.spec';
+import { calendarPickerSpec } from '../../shared/picker-field/mixins/calendar-picker.spec';
+import { DateRangePicker } from './date-range-picker';
 
 const COMPONENT_TAG = 'vwc-date-range-picker';
 
@@ -91,6 +93,47 @@ describe('vwc-date-range-picker', () => {
 		});
 	});
 
+	describe('picker field', () => {
+		pickerFieldSpec(COMPONENT_TAG, (shadowRoot) => {
+			return {
+				firstFocusable: shadowRoot.querySelector(
+					'vwc-button[aria-label="Previous Month"]'
+				)!,
+				lastFocusable: shadowRoot.querySelector('vwc-button[label="OK"]')!,
+			};
+		});
+	});
+
+	describe('calendar picker', () => {
+		calendarPickerSpec(
+			COMPONENT_TAG,
+			(element: DateRangePicker, min: string) => {
+				element.min = min;
+			},
+			(element: DateRangePicker, max: string) => {
+				element.max = max;
+			}
+		);
+	});
+
+	describe('errorText', () => {
+		it('should forward errorText to the text field', async () => {
+			element.errorText = 'errorText';
+			await elementUpdated(element);
+
+			expect(textField.errorText).toBe('errorText');
+		});
+
+		it('should have a higher priority than an internal validation error', async () => {
+			element.errorText = 'errorText';
+			await elementUpdated(element);
+
+			typeIntoTextField('x');
+
+			expect(textField.errorText).toBe('errorText');
+		});
+	});
+
 	describe('start', () => {
 		it('should set the start date', async () => {
 			element.start = '2021-01-10';
@@ -497,11 +540,17 @@ describe('vwc-date-range-picker', () => {
 		});
 	});
 
-	describe('dialog footer', () => {
+	describe('dialog', () => {
 		beforeEach(async () => {
 			await openPopup();
 		});
 
+		it('should have an accessible name of "Choose dates"', () => {
+			expect(
+				element.shadowRoot!.querySelector('.dialog')!.getAttribute('aria-label')
+			).toBe('Choose dates');
+		});
+
 		it('should clear start and end date when clicking the clear button', async () => {
 			element.start = '2023-08-01';
 			element.end = '2023-08-02';