@instructure/ui-date-input 10.19.2-snapshot-2 → 10.19.2-snapshot-4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,642 +0,0 @@
1
- var _Calendar$Day, _button, _button2, _Calendar$Day2, _Calendar$Day3;
2
- /*
3
- * The MIT License (MIT)
4
- *
5
- * Copyright (c) 2015 - present Instructure, Inc.
6
- *
7
- * Permission is hereby granted, free of charge, to any person obtaining a copy
8
- * of this software and associated documentation files (the "Software"), to deal
9
- * in the Software without restriction, including without limitation the rights
10
- * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
11
- * copies of the Software, and to permit persons to whom the Software is
12
- * furnished to do so, subject to the following conditions:
13
- *
14
- * The above copyright notice and this permission notice shall be included in all
15
- * copies or substantial portions of the Software.
16
- *
17
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
18
- * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
19
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
20
- * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
21
- * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
22
- * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
23
- * SOFTWARE.
24
- */
25
-
26
- import { fireEvent, render, screen, waitFor } from '@testing-library/react';
27
- import { vi } from 'vitest';
28
- import userEvent from '@testing-library/user-event';
29
- import '@testing-library/jest-dom';
30
-
31
- // eslint-disable-next-line no-restricted-imports
32
- import { generateA11yTests } from '@instructure/ui-scripts/lib/test/generateA11yTests';
33
- import { runAxeCheck } from '@instructure/ui-axe-check';
34
- import { Calendar } from '@instructure/ui-calendar';
35
- import Examples from '../__examples__/DateInput.examples';
36
- import { DateInput } from '../index';
37
- import { jsx as _jsx } from "@emotion/react/jsx-runtime";
38
- describe('<DateInput />', () => {
39
- const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
40
- const generateDays = (count = Calendar.DAY_COUNT) => {
41
- const days = [];
42
- const date = new Date('2019-07-28');
43
- while (days.length < count) {
44
- days.push(_jsx(Calendar.Day, {
45
- date: date.toISOString(),
46
- label: date.toISOString(),
47
- children: date.getDate()
48
- }, date.toISOString()));
49
- date.setDate(date.getDate() + 1);
50
- }
51
- return days;
52
- };
53
- let consoleWarningMock;
54
- let consoleErrorMock;
55
- beforeEach(() => {
56
- // Mocking console to prevent test output pollution
57
- consoleWarningMock = vi.spyOn(console, 'warn').mockImplementation(() => {});
58
- consoleErrorMock = vi.spyOn(console, 'error').mockImplementation(() => {});
59
- });
60
- afterEach(() => {
61
- consoleWarningMock.mockRestore();
62
- consoleErrorMock.mockRestore();
63
- });
64
- it('should render an input and a calendar', async () => {
65
- const _render = render(_jsx(DateInput, {
66
- renderLabel: "date-input",
67
- renderWeekdayLabels: weekdayLabels,
68
- isShowingCalendar: true,
69
- children: generateDays()
70
- })),
71
- container = _render.container,
72
- findByRole = _render.findByRole;
73
- const dateInput = container.querySelector('input');
74
- expect(dateInput).toBeInTheDocument();
75
- expect(dateInput).toHaveAttribute('type', 'text');
76
- await userEvent.click(dateInput);
77
- const calendarTable = await findByRole('listbox');
78
- const calendarWrapper = await document.querySelector('[id^="Selectable_"][id$="-list"]');
79
- await waitFor(() => {
80
- expect(calendarWrapper).toBeInTheDocument();
81
- expect(calendarTable).toBeInTheDocument();
82
- });
83
- });
84
- describe('input', () => {
85
- it('should render a label', () => {
86
- const labelText = 'label text';
87
- render(_jsx(DateInput, {
88
- renderLabel: labelText,
89
- renderWeekdayLabels: weekdayLabels,
90
- children: generateDays()
91
- }));
92
- const dateInput = screen.getByLabelText('label text');
93
- expect(dateInput).toBeInTheDocument();
94
- });
95
- it('should set value', () => {
96
- const value = 'January 5';
97
- render(_jsx(DateInput, {
98
- renderLabel: "Choose date",
99
- value: value,
100
- onChange: vi.fn(),
101
- renderWeekdayLabels: weekdayLabels,
102
- children: generateDays()
103
- }));
104
- const dateInput = screen.getByLabelText('Choose date');
105
- expect(dateInput).toHaveValue(value);
106
- });
107
- it('should call onChange with the updated value', async () => {
108
- const onChange = vi.fn();
109
- const value = 'May 18, 2022';
110
- render(_jsx(DateInput, {
111
- renderLabel: "Choose date",
112
- renderWeekdayLabels: weekdayLabels,
113
- onChange: onChange,
114
- children: generateDays()
115
- }));
116
- const dateInput = screen.getByLabelText('Choose date');
117
- fireEvent.change(dateInput, {
118
- target: {
119
- value: value
120
- }
121
- });
122
- fireEvent.keyDown(dateInput, {
123
- key: 'Enter',
124
- code: 'Enter'
125
- });
126
- fireEvent.blur(dateInput);
127
- await waitFor(() => {
128
- expect(onChange).toHaveBeenCalledTimes(1);
129
- expect(onChange.mock.calls[0][1].value).toEqual(expect.stringContaining(value));
130
- });
131
- });
132
- it('should call onBlur', () => {
133
- const onBlur = vi.fn();
134
- render(_jsx(DateInput, {
135
- renderLabel: "Choose date",
136
- renderWeekdayLabels: weekdayLabels,
137
- onBlur: onBlur,
138
- children: generateDays()
139
- }));
140
- const dateInput = screen.getByLabelText('Choose date');
141
- fireEvent.blur(dateInput);
142
- expect(onBlur).toHaveBeenCalledTimes(1);
143
- });
144
- it('should correctly set interaction type', async () => {
145
- const _render2 = render(_jsx(DateInput, {
146
- renderLabel: "Choose date",
147
- renderWeekdayLabels: weekdayLabels,
148
- interaction: "disabled",
149
- children: generateDays()
150
- })),
151
- rerender = _render2.rerender;
152
- const dateInput = screen.getByLabelText('Choose date');
153
- expect(dateInput).toHaveAttribute('disabled');
154
- rerender(_jsx(DateInput, {
155
- renderLabel: "Choose date",
156
- renderWeekdayLabels: weekdayLabels,
157
- interaction: "readonly",
158
- children: generateDays()
159
- }));
160
- const dateInputAfterUpdate = screen.getByLabelText('Choose date');
161
- await waitFor(() => {
162
- expect(dateInputAfterUpdate).toHaveAttribute('readonly');
163
- });
164
- });
165
- it('should correctly set disabled', () => {
166
- render(_jsx(DateInput, {
167
- renderLabel: "Choose date",
168
- renderWeekdayLabels: weekdayLabels,
169
- disabled: true,
170
- children: generateDays()
171
- }));
172
- const dateInput = screen.getByLabelText('Choose date');
173
- expect(dateInput).toHaveAttribute('disabled');
174
- });
175
- it('should correctly set readOnly', () => {
176
- render(_jsx(DateInput, {
177
- renderLabel: "Choose date",
178
- renderWeekdayLabels: weekdayLabels,
179
- readOnly: true,
180
- children: generateDays()
181
- }));
182
- const dateInput = screen.getByLabelText('Choose date');
183
- expect(dateInput).toHaveAttribute('readOnly');
184
- });
185
- it('should set placeholder', () => {
186
- const placeholder = 'Start typing to choose a date';
187
- render(_jsx(DateInput, {
188
- renderLabel: "Choose date",
189
- renderWeekdayLabels: weekdayLabels,
190
- placeholder: placeholder,
191
- children: generateDays()
192
- }));
193
- const dateInput = screen.getByLabelText('Choose date');
194
- expect(dateInput).toHaveAttribute('placeholder', placeholder);
195
- });
196
- it('should be requireable', () => {
197
- render(_jsx(DateInput, {
198
- renderLabel: "Choose date",
199
- renderWeekdayLabels: weekdayLabels,
200
- isRequired: true,
201
- children: generateDays()
202
- }));
203
- const dateInput = screen.getByLabelText('Choose date *');
204
- expect(dateInput).toHaveAttribute('required');
205
- });
206
- it('should provide inputRef', () => {
207
- const inputRef = vi.fn();
208
- render(_jsx(DateInput, {
209
- renderLabel: "Choose date",
210
- renderWeekdayLabels: weekdayLabels,
211
- inputRef: inputRef,
212
- children: generateDays()
213
- }));
214
- const dateInput = screen.getByLabelText('Choose date');
215
- expect(inputRef).toHaveBeenCalledWith(dateInput);
216
- });
217
- it('should render messages', () => {
218
- const text = 'The selected date is invalid';
219
- const _render3 = render(_jsx(DateInput, {
220
- renderLabel: "Choose date",
221
- renderWeekdayLabels: weekdayLabels,
222
- messages: [{
223
- type: 'error',
224
- text
225
- }],
226
- children: generateDays()
227
- })),
228
- container = _render3.container;
229
- expect(container).toHaveTextContent(text);
230
- });
231
- it('should allow custom props to pass through', () => {
232
- render(_jsx(DateInput, {
233
- renderLabel: "Choose date",
234
- renderWeekdayLabels: weekdayLabels,
235
- "data-custom-attr": "custom value",
236
- name: "my name",
237
- children: generateDays()
238
- }));
239
- const dateInput = screen.getByLabelText('Choose date');
240
- expect(dateInput).toHaveAttribute('data-custom-attr', 'custom value');
241
- expect(dateInput).toHaveAttribute('name', 'my name');
242
- });
243
- });
244
- describe('Calendar', () => {
245
- it('should show calendar when `isShowingCalendar` is set', async () => {
246
- const _render4 = render(_jsx(DateInput, {
247
- renderLabel: "Choose date",
248
- renderWeekdayLabels: weekdayLabels,
249
- children: generateDays()
250
- })),
251
- rerender = _render4.rerender,
252
- queryByRole = _render4.queryByRole;
253
- const dateInput = screen.getByLabelText('Choose date');
254
- const calendarTable = await queryByRole('listbox');
255
- const calendarWrapper = await document.querySelector('[id^="Selectable_"][id$="-list"]');
256
- expect(dateInput).toBeInTheDocument();
257
- expect(calendarTable).not.toBeInTheDocument();
258
- expect(calendarWrapper).not.toBeInTheDocument();
259
- rerender(_jsx(DateInput, {
260
- renderLabel: "Choose date",
261
- renderWeekdayLabels: weekdayLabels,
262
- isShowingCalendar: true,
263
- children: generateDays()
264
- }));
265
- const dateInputAfterUpdate = screen.getByLabelText('Choose date');
266
- const calendarTableAfterUpdate = await queryByRole('listbox');
267
- const calendarWrapperAfterUpdate = await document.querySelector('[id^="Selectable_"][id$="-list"]');
268
- await waitFor(() => {
269
- expect(dateInputAfterUpdate).toBeInTheDocument();
270
- expect(calendarTableAfterUpdate).toBeInTheDocument();
271
- expect(calendarWrapperAfterUpdate).toBeInTheDocument();
272
- });
273
- });
274
- describe('onRequestShowCalendar', () => {
275
- it('should call onRequestShowCalendar when label is clicked', async () => {
276
- const onRequestShowCalendar = vi.fn();
277
- const _render5 = render(_jsx(DateInput, {
278
- renderLabel: "Choose date",
279
- renderWeekdayLabels: weekdayLabels,
280
- onRequestShowCalendar: onRequestShowCalendar,
281
- children: generateDays()
282
- })),
283
- container = _render5.container;
284
- const dateInput = container.querySelector('span[class$="-formFieldLayout__label"]');
285
- expect(dateInput).toHaveTextContent('Choose date');
286
- await userEvent.click(dateInput);
287
- await waitFor(() => {
288
- expect(onRequestShowCalendar).toHaveBeenCalled();
289
- });
290
- });
291
- it('should call onRequestShowCalendar when input is clicked', async () => {
292
- const onRequestShowCalendar = vi.fn();
293
- const _render6 = render(_jsx(DateInput, {
294
- renderLabel: "Choose date",
295
- renderWeekdayLabels: weekdayLabels,
296
- onRequestShowCalendar: onRequestShowCalendar,
297
- children: generateDays()
298
- })),
299
- container = _render6.container;
300
- const dateInput = container.querySelector('input');
301
- await userEvent.click(dateInput);
302
- await waitFor(() => {
303
- expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
304
- });
305
- });
306
- it('should call onRequestShowCalendar when input receives space event', async () => {
307
- const onRequestShowCalendar = vi.fn();
308
- render(_jsx(DateInput, {
309
- renderLabel: "Choose date",
310
- renderWeekdayLabels: weekdayLabels,
311
- onRequestShowCalendar: onRequestShowCalendar,
312
- children: generateDays()
313
- }));
314
- const dateInput = screen.getByLabelText('Choose date');
315
- await userEvent.type(dateInput, '{space}');
316
- await waitFor(() => {
317
- expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
318
- });
319
- });
320
- it('should not call onRequestShowCalendar when input receives space event if calendar is already showing', async () => {
321
- const onRequestShowCalendar = vi.fn();
322
- render(_jsx(DateInput, {
323
- renderLabel: "Choose date",
324
- renderWeekdayLabels: weekdayLabels,
325
- onRequestShowCalendar: onRequestShowCalendar,
326
- isShowingCalendar: true,
327
- children: generateDays()
328
- }));
329
- const dateInput = screen.getByLabelText('Choose date');
330
- await userEvent.type(dateInput, '{space}');
331
- await waitFor(() => {
332
- expect(onRequestShowCalendar).not.toHaveBeenCalled();
333
- });
334
- });
335
- it('should call onRequestShowCalendar when input receives down arrow event', async () => {
336
- const onRequestShowCalendar = vi.fn();
337
- render(_jsx(DateInput, {
338
- renderLabel: "Choose date",
339
- renderWeekdayLabels: weekdayLabels,
340
- onRequestShowCalendar: onRequestShowCalendar,
341
- children: generateDays()
342
- }));
343
- const dateInput = screen.getByLabelText('Choose date');
344
- await userEvent.type(dateInput, '{arrowdown}');
345
- await waitFor(() => {
346
- expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
347
- });
348
- });
349
- it('should not call onRequestShowCalendar when input receives down arrow event if calendar is already showing', async () => {
350
- const onRequestShowCalendar = vi.fn();
351
- render(_jsx(DateInput, {
352
- renderLabel: "Choose date",
353
- renderWeekdayLabels: weekdayLabels,
354
- onRequestShowCalendar: onRequestShowCalendar,
355
- isShowingCalendar: true,
356
- children: generateDays()
357
- }));
358
- const dateInput = screen.getByLabelText('Choose date');
359
- await userEvent.type(dateInput, '{arrowdown}');
360
- await waitFor(() => {
361
- expect(onRequestShowCalendar).not.toHaveBeenCalled();
362
- });
363
- });
364
- it('should call onRequestShowCalendar when input receives up arrow event', async () => {
365
- const onRequestShowCalendar = vi.fn();
366
- render(_jsx(DateInput, {
367
- renderLabel: "Choose date",
368
- renderWeekdayLabels: weekdayLabels,
369
- onRequestShowCalendar: onRequestShowCalendar,
370
- children: generateDays()
371
- }));
372
- const dateInput = screen.getByLabelText('Choose date');
373
- await userEvent.type(dateInput, '{arrowup}');
374
- await waitFor(() => {
375
- expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
376
- });
377
- });
378
- it('should not call onRequestShowCalendar when input receives up arrow event if calendar is already showing', async () => {
379
- const onRequestShowCalendar = vi.fn();
380
- render(_jsx(DateInput, {
381
- renderLabel: "Choose date",
382
- renderWeekdayLabels: weekdayLabels,
383
- onRequestShowCalendar: onRequestShowCalendar,
384
- isShowingCalendar: true,
385
- children: generateDays()
386
- }));
387
- const dateInput = screen.getByLabelText('Choose date');
388
- await userEvent.type(dateInput, '{arrowup}');
389
- await waitFor(() => {
390
- expect(onRequestShowCalendar).not.toHaveBeenCalled();
391
- });
392
- });
393
- it('should call onRequestShowCalendar when input receives onChange event', async () => {
394
- const onRequestShowCalendar = vi.fn();
395
- render(_jsx(DateInput, {
396
- renderLabel: "Choose date",
397
- renderWeekdayLabels: weekdayLabels,
398
- onRequestShowCalendar: onRequestShowCalendar,
399
- children: generateDays()
400
- }));
401
- const dateInput = screen.getByLabelText('Choose date');
402
- fireEvent.change(dateInput, {
403
- target: {
404
- value: 'January 5'
405
- }
406
- });
407
- await waitFor(() => {
408
- expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
409
- });
410
- });
411
- it('should not call onRequestShowCalendar when disabled', async () => {
412
- const onRequestShowCalendar = vi.fn();
413
- render(_jsx(DateInput, {
414
- renderLabel: "Choose date",
415
- renderWeekdayLabels: weekdayLabels,
416
- onRequestShowCalendar: onRequestShowCalendar,
417
- interaction: "disabled",
418
- children: generateDays()
419
- }));
420
- const dateInput = screen.getByLabelText('Choose date');
421
- fireEvent.click(dateInput);
422
- await userEvent.type(dateInput, '{arrowup}{arrowdown}{space}January 5', {
423
- skipClick: true
424
- });
425
- await waitFor(() => {
426
- expect(onRequestShowCalendar).not.toHaveBeenCalled();
427
- });
428
- });
429
- });
430
- describe('onRequestHideCalendar and onRequestValidateDate', () => {
431
- it('should call onRequestHideCalendar and onRequestValidateDate input receives onBlur event', async () => {
432
- const onRequestHideCalendar = vi.fn();
433
- const onRequestValidateDate = vi.fn();
434
- render(_jsx(DateInput, {
435
- renderLabel: "Choose date",
436
- renderWeekdayLabels: weekdayLabels,
437
- onRequestHideCalendar: onRequestHideCalendar,
438
- onRequestValidateDate: onRequestValidateDate,
439
- isShowingCalendar: true,
440
- children: generateDays()
441
- }));
442
- const dateInput = screen.getByLabelText('Choose date');
443
- fireEvent.blur(dateInput);
444
- await waitFor(() => {
445
- expect(onRequestHideCalendar).toHaveBeenCalledTimes(1);
446
- expect(onRequestValidateDate).toHaveBeenCalledTimes(1);
447
- });
448
- });
449
- it('should call onRequestHideCalendar and onRequestValidateDate when input receives esc event', async () => {
450
- const onRequestHideCalendar = vi.fn();
451
- const onRequestValidateDate = vi.fn();
452
- render(_jsx(DateInput, {
453
- renderLabel: "Choose date",
454
- renderWeekdayLabels: weekdayLabels,
455
- onRequestHideCalendar: onRequestHideCalendar,
456
- onRequestValidateDate: onRequestValidateDate,
457
- isShowingCalendar: true,
458
- children: generateDays()
459
- }));
460
- const dateInput = screen.getByLabelText('Choose date');
461
- await userEvent.type(dateInput, '{esc}');
462
- await waitFor(() => {
463
- expect(onRequestHideCalendar).toHaveBeenCalledTimes(1);
464
- expect(onRequestValidateDate).toHaveBeenCalledTimes(1);
465
- });
466
- });
467
- it('should call onRequestHideCalendar and onRequestValidateDate when input receives enter event', async () => {
468
- const onRequestHideCalendar = vi.fn();
469
- const onRequestValidateDate = vi.fn();
470
- const days = generateDays();
471
- days[4] = _Calendar$Day || (_Calendar$Day = _jsx(Calendar.Day, {
472
- label: "4",
473
- date: "2019-09-28",
474
- isSelected: true,
475
- children: 4
476
- }, "4"));
477
- render(_jsx(DateInput, {
478
- renderLabel: "Choose date",
479
- renderWeekdayLabels: weekdayLabels,
480
- onRequestHideCalendar: onRequestHideCalendar,
481
- onRequestValidateDate: onRequestValidateDate,
482
- isShowingCalendar: true,
483
- children: days
484
- }));
485
- const dateInput = screen.getByLabelText('Choose date');
486
- await userEvent.type(dateInput, '{enter}');
487
- await waitFor(() => {
488
- expect(onRequestHideCalendar).toHaveBeenCalledTimes(1);
489
- expect(onRequestValidateDate).toHaveBeenCalledTimes(1);
490
- });
491
- });
492
- });
493
- it('should render calendar navigation label', () => {
494
- const label = 'January 2019';
495
- render(_jsx(DateInput, {
496
- renderLabel: "Choose date",
497
- renderWeekdayLabels: weekdayLabels,
498
- renderNavigationLabel: _jsx("div", {
499
- "data-testId": "label-id",
500
- children: label
501
- }),
502
- isShowingCalendar: true,
503
- children: generateDays()
504
- }));
505
- const navigationLabel = screen.getByTestId('label-id');
506
- expect(navigationLabel).toBeInTheDocument();
507
- expect(navigationLabel).toHaveTextContent(label);
508
- });
509
- it('should render calendar weekday labels', async () => {
510
- render(_jsx(DateInput, {
511
- renderLabel: "Choose date",
512
- renderWeekdayLabels: weekdayLabels,
513
- isShowingCalendar: true,
514
- children: generateDays()
515
- }));
516
- const calendar = await screen.findByRole('listbox');
517
- const headers = calendar.querySelectorAll('th');
518
- expect(headers.length).toEqual(7);
519
- weekdayLabels.forEach(label => {
520
- expect(calendar).toHaveTextContent(label);
521
- });
522
- });
523
- it('should render all focusable elements in calendar with tabIndex="-1"', async () => {
524
- render(_jsx(DateInput, {
525
- renderLabel: "Choose date",
526
- renderWeekdayLabels: weekdayLabels,
527
- renderNextMonthButton: _button || (_button = _jsx("button", {
528
- "data-testId": "button-next",
529
- children: "next"
530
- })),
531
- renderPrevMonthButton: _button2 || (_button2 = _jsx("button", {
532
- "data-testId": "button-prev",
533
- children: "prev"
534
- })),
535
- isShowingCalendar: true,
536
- children: generateDays()
537
- }));
538
- const calendar = await screen.findByRole('listbox');
539
- const calendarDays = calendar.querySelectorAll('button');
540
- const nextMonthButton = screen.getByTestId('button-next');
541
- const prevMonthButton = screen.getByTestId('button-prev');
542
- expect(nextMonthButton).toHaveAttribute('tabIndex', '-1');
543
- expect(prevMonthButton).toHaveAttribute('tabIndex', '-1');
544
- expect(calendarDays).toHaveLength(42);
545
- calendarDays.forEach(day => {
546
- expect(day).toHaveAttribute('tabIndex', '-1');
547
- });
548
- });
549
- it('should render days with the correct role', async () => {
550
- const days = generateDays();
551
- days[5] = _Calendar$Day2 || (_Calendar$Day2 = _jsx(Calendar.Day, {
552
- label: "5",
553
- date: "2019-09-28",
554
- id: "5",
555
- isOutsideMonth: true,
556
- children: "outside"
557
- }, "5"));
558
- render(_jsx(DateInput, {
559
- renderLabel: "Choose date",
560
- renderWeekdayLabels: weekdayLabels,
561
- isShowingCalendar: true,
562
- children: days
563
- }));
564
- const calendar = await screen.findByRole('listbox');
565
- const calendarDays = calendar.querySelectorAll('button');
566
- calendarDays.forEach(day => {
567
- if (day.textContent.includes('outside')) {
568
- expect(day).toHaveAttribute('role', 'presentation');
569
- } else {
570
- expect(day).toHaveAttribute('role', 'option');
571
- }
572
- });
573
- });
574
- it('should assign aria-selected to the selected date and link it to the input', async () => {
575
- const days = generateDays();
576
- days[7] = _Calendar$Day3 || (_Calendar$Day3 = _jsx(Calendar.Day, {
577
- label: "7",
578
- date: "2019-09-28",
579
- id: "selected-day-id",
580
- isSelected: true,
581
- children: "selected"
582
- }, "7"));
583
- render(_jsx(DateInput, {
584
- renderLabel: "Choose date",
585
- renderWeekdayLabels: weekdayLabels,
586
- isShowingCalendar: true,
587
- children: days
588
- }));
589
- const calendar = await screen.findByRole('listbox');
590
- const calendarDays = calendar.querySelectorAll('button');
591
- let selectedDayID = '';
592
- calendarDays.forEach(day => {
593
- if (day.textContent.includes('selected')) {
594
- selectedDayID = day.id;
595
- expect(day).toHaveAttribute('aria-selected', 'true');
596
- } else {
597
- expect(day).toHaveAttribute('aria-selected', 'false');
598
- }
599
- });
600
- const dateInput = screen.getByLabelText('Choose date');
601
- expect(dateInput).toHaveAttribute('aria-activedescendant', selectedDayID);
602
- });
603
- });
604
- describe('with generated examples', () => {
605
- const generatedComponents = generateA11yTests(DateInput, Examples);
606
- it.each(generatedComponents)('should be accessible with example: $description', async ({
607
- content
608
- }) => {
609
- const _render7 = render(content),
610
- container = _render7.container;
611
- const axeCheck = await runAxeCheck(container);
612
- expect(axeCheck).toBe(true);
613
- });
614
- });
615
- describe('with minimal config', () => {
616
- it('should render 44 buttons (a calendar) when clicked', async () => {
617
- const onChange = vi.fn();
618
- render(_jsx(DateInput, {
619
- renderLabel: "Choose date",
620
- assistiveText: "Type a date or use arrow keys to navigate date picker.",
621
- width: "20rem",
622
- isInline: true,
623
- value: '2023-11-23',
624
- onChange: onChange,
625
- currentDate: "2023-12-23",
626
- disabledDates: ['2023-12-22', '2023-12-12', '2023-12-11'],
627
- disabledDateErrorMessage: "disabled date",
628
- invalidDateErrorMessage: "invalid date"
629
- }));
630
- const dateInput = screen.getByLabelText('Choose date');
631
- fireEvent.click(dateInput);
632
- const calendarTable = document.querySelector('table');
633
- const calendarDays = calendarTable.querySelectorAll('button');
634
- const calendarWrapper = document.querySelector('[id^="Selectable_"][id$="-list"]');
635
- const calendarButtons = calendarWrapper.querySelectorAll('button');
636
- await waitFor(() => {
637
- expect(calendarButtons).toHaveLength(44);
638
- expect(calendarDays).toHaveLength(42);
639
- });
640
- });
641
- });
642
- });