@instructure/ui-date-input 10.16.1-snapshot-0 → 10.16.1
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.
- package/CHANGELOG.md +1 -1
- package/es/DateInput/__new-tests__/DateInput.test.js +167 -129
- package/es/DateInput/index.js +71 -58
- package/es/DateInput2/__new-tests__/DateInput2.test.js +20 -19
- package/es/DateInput2/index.js +37 -35
- package/lib/DateInput/__new-tests__/DateInput.test.js +228 -191
- package/lib/DateInput/index.js +70 -58
- package/lib/DateInput2/__new-tests__/DateInput2.test.js +20 -20
- package/lib/DateInput2/index.js +37 -35
- package/package.json +20 -20
- package/src/DateInput/__new-tests__/DateInput.test.tsx +1 -1
- package/src/DateInput/index.tsx +2 -3
- package/src/DateInput/props.ts +1 -1
- package/src/DateInput2/__new-tests__/DateInput2.test.tsx +1 -1
- package/src/DateInput2/index.tsx +0 -2
- package/tsconfig.build.tsbuildinfo +1 -1
- package/types/DateInput/index.d.ts +15 -17
- package/types/DateInput/index.d.ts.map +1 -1
- package/types/DateInput/props.d.ts +1 -1
- package/types/DateInput/props.d.ts.map +1 -1
- package/types/DateInput2/index.d.ts +1 -2
- package/types/DateInput2/index.d.ts.map +1 -1
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
-
var _react =
|
|
5
|
-
var _react2 = require("@testing-library/react");
|
|
4
|
+
var _react = require("@testing-library/react");
|
|
6
5
|
var _vitest = require("vitest");
|
|
7
6
|
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
|
|
8
7
|
require("@testing-library/jest-dom");
|
|
@@ -11,6 +10,7 @@ var _runAxeCheck = require("@instructure/ui-axe-check/lib/runAxeCheck.js");
|
|
|
11
10
|
var _Calendar = require("@instructure/ui-calendar/lib/Calendar");
|
|
12
11
|
var _DateInput = _interopRequireDefault(require("../__examples__/DateInput.examples"));
|
|
13
12
|
var _index = require("../index");
|
|
13
|
+
var _jsxRuntime = require("@emotion/react/jsx-runtime");
|
|
14
14
|
var _Calendar$Day, _button, _button2, _Calendar$Day2, _Calendar$Day3;
|
|
15
15
|
/*
|
|
16
16
|
* The MIT License (MIT)
|
|
@@ -42,11 +42,11 @@ describe('<DateInput />', () => {
|
|
|
42
42
|
const days = [];
|
|
43
43
|
const date = new Date('2019-07-28');
|
|
44
44
|
while (days.length < count) {
|
|
45
|
-
days.push(
|
|
46
|
-
key: date.toISOString(),
|
|
45
|
+
days.push((0, _jsxRuntime.jsx)(_Calendar.Calendar.Day, {
|
|
47
46
|
date: date.toISOString(),
|
|
48
|
-
label: date.toISOString()
|
|
49
|
-
|
|
47
|
+
label: date.toISOString(),
|
|
48
|
+
children: date.getDate()
|
|
49
|
+
}, date.toISOString()));
|
|
50
50
|
date.setDate(date.getDate() + 1);
|
|
51
51
|
}
|
|
52
52
|
return days;
|
|
@@ -63,11 +63,12 @@ describe('<DateInput />', () => {
|
|
|
63
63
|
consoleErrorMock.mockRestore();
|
|
64
64
|
});
|
|
65
65
|
it('should render an input and a calendar', async () => {
|
|
66
|
-
const _render = (0,
|
|
66
|
+
const _render = (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
67
67
|
renderLabel: "date-input",
|
|
68
68
|
renderWeekdayLabels: weekdayLabels,
|
|
69
|
-
isShowingCalendar: true
|
|
70
|
-
|
|
69
|
+
isShowingCalendar: true,
|
|
70
|
+
children: generateDays()
|
|
71
|
+
})),
|
|
71
72
|
container = _render.container,
|
|
72
73
|
findByRole = _render.findByRole;
|
|
73
74
|
const dateInput = container.querySelector('input');
|
|
@@ -76,7 +77,7 @@ describe('<DateInput />', () => {
|
|
|
76
77
|
await _userEvent.default.click(dateInput);
|
|
77
78
|
const calendarTable = await findByRole('listbox');
|
|
78
79
|
const calendarWrapper = await document.querySelector('[id^="Selectable_"][id$="-list"]');
|
|
79
|
-
await (0,
|
|
80
|
+
await (0, _react.waitFor)(() => {
|
|
80
81
|
expect(calendarWrapper).toBeInTheDocument();
|
|
81
82
|
expect(calendarTable).toBeInTheDocument();
|
|
82
83
|
});
|
|
@@ -84,173 +85,188 @@ describe('<DateInput />', () => {
|
|
|
84
85
|
describe('input', () => {
|
|
85
86
|
it('should render a label', () => {
|
|
86
87
|
const labelText = 'label text';
|
|
87
|
-
(0,
|
|
88
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
88
89
|
renderLabel: labelText,
|
|
89
|
-
renderWeekdayLabels: weekdayLabels
|
|
90
|
-
|
|
91
|
-
|
|
90
|
+
renderWeekdayLabels: weekdayLabels,
|
|
91
|
+
children: generateDays()
|
|
92
|
+
}));
|
|
93
|
+
const dateInput = _react.screen.getByLabelText('label text');
|
|
92
94
|
expect(dateInput).toBeInTheDocument();
|
|
93
95
|
});
|
|
94
96
|
it('should set value', () => {
|
|
95
97
|
const value = 'January 5';
|
|
96
|
-
(0,
|
|
98
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
97
99
|
renderLabel: "Choose date",
|
|
98
100
|
value: value,
|
|
99
101
|
onChange: _vitest.vi.fn(),
|
|
100
|
-
renderWeekdayLabels: weekdayLabels
|
|
101
|
-
|
|
102
|
-
|
|
102
|
+
renderWeekdayLabels: weekdayLabels,
|
|
103
|
+
children: generateDays()
|
|
104
|
+
}));
|
|
105
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
103
106
|
expect(dateInput).toHaveValue(value);
|
|
104
107
|
});
|
|
105
108
|
it('should call onChange with the updated value', async () => {
|
|
106
109
|
const onChange = _vitest.vi.fn();
|
|
107
110
|
const value = 'May 18, 2022';
|
|
108
|
-
(0,
|
|
111
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
109
112
|
renderLabel: "Choose date",
|
|
110
113
|
renderWeekdayLabels: weekdayLabels,
|
|
111
|
-
onChange: onChange
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
114
|
+
onChange: onChange,
|
|
115
|
+
children: generateDays()
|
|
116
|
+
}));
|
|
117
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
118
|
+
_react.fireEvent.change(dateInput, {
|
|
115
119
|
target: {
|
|
116
120
|
value: value
|
|
117
121
|
}
|
|
118
122
|
});
|
|
119
|
-
|
|
123
|
+
_react.fireEvent.keyDown(dateInput, {
|
|
120
124
|
key: 'Enter',
|
|
121
125
|
code: 'Enter'
|
|
122
126
|
});
|
|
123
|
-
|
|
124
|
-
await (0,
|
|
127
|
+
_react.fireEvent.blur(dateInput);
|
|
128
|
+
await (0, _react.waitFor)(() => {
|
|
125
129
|
expect(onChange).toHaveBeenCalledTimes(1);
|
|
126
130
|
expect(onChange.mock.calls[0][1].value).toEqual(expect.stringContaining(value));
|
|
127
131
|
});
|
|
128
132
|
});
|
|
129
133
|
it('should call onBlur', () => {
|
|
130
134
|
const onBlur = _vitest.vi.fn();
|
|
131
|
-
(0,
|
|
135
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
132
136
|
renderLabel: "Choose date",
|
|
133
137
|
renderWeekdayLabels: weekdayLabels,
|
|
134
|
-
onBlur: onBlur
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
+
onBlur: onBlur,
|
|
139
|
+
children: generateDays()
|
|
140
|
+
}));
|
|
141
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
142
|
+
_react.fireEvent.blur(dateInput);
|
|
138
143
|
expect(onBlur).toHaveBeenCalledTimes(1);
|
|
139
144
|
});
|
|
140
145
|
it('should correctly set interaction type', async () => {
|
|
141
|
-
const _render2 = (0,
|
|
146
|
+
const _render2 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
142
147
|
renderLabel: "Choose date",
|
|
143
148
|
renderWeekdayLabels: weekdayLabels,
|
|
144
|
-
interaction: "disabled"
|
|
145
|
-
|
|
149
|
+
interaction: "disabled",
|
|
150
|
+
children: generateDays()
|
|
151
|
+
})),
|
|
146
152
|
rerender = _render2.rerender;
|
|
147
|
-
const dateInput =
|
|
153
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
148
154
|
expect(dateInput).toHaveAttribute('disabled');
|
|
149
|
-
rerender(
|
|
155
|
+
rerender((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
150
156
|
renderLabel: "Choose date",
|
|
151
157
|
renderWeekdayLabels: weekdayLabels,
|
|
152
|
-
interaction: "readonly"
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
158
|
+
interaction: "readonly",
|
|
159
|
+
children: generateDays()
|
|
160
|
+
}));
|
|
161
|
+
const dateInputAfterUpdate = _react.screen.getByLabelText('Choose date');
|
|
162
|
+
await (0, _react.waitFor)(() => {
|
|
156
163
|
expect(dateInputAfterUpdate).toHaveAttribute('readonly');
|
|
157
164
|
});
|
|
158
165
|
});
|
|
159
166
|
it('should correctly set disabled', () => {
|
|
160
|
-
(0,
|
|
167
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
161
168
|
renderLabel: "Choose date",
|
|
162
169
|
renderWeekdayLabels: weekdayLabels,
|
|
163
|
-
disabled: true
|
|
164
|
-
|
|
165
|
-
|
|
170
|
+
disabled: true,
|
|
171
|
+
children: generateDays()
|
|
172
|
+
}));
|
|
173
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
166
174
|
expect(dateInput).toHaveAttribute('disabled');
|
|
167
175
|
});
|
|
168
176
|
it('should correctly set readOnly', () => {
|
|
169
|
-
(0,
|
|
177
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
170
178
|
renderLabel: "Choose date",
|
|
171
179
|
renderWeekdayLabels: weekdayLabels,
|
|
172
|
-
readOnly: true
|
|
173
|
-
|
|
174
|
-
|
|
180
|
+
readOnly: true,
|
|
181
|
+
children: generateDays()
|
|
182
|
+
}));
|
|
183
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
175
184
|
expect(dateInput).toHaveAttribute('readOnly');
|
|
176
185
|
});
|
|
177
186
|
it('should set placeholder', () => {
|
|
178
187
|
const placeholder = 'Start typing to choose a date';
|
|
179
|
-
(0,
|
|
188
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
180
189
|
renderLabel: "Choose date",
|
|
181
190
|
renderWeekdayLabels: weekdayLabels,
|
|
182
|
-
placeholder: placeholder
|
|
183
|
-
|
|
184
|
-
|
|
191
|
+
placeholder: placeholder,
|
|
192
|
+
children: generateDays()
|
|
193
|
+
}));
|
|
194
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
185
195
|
expect(dateInput).toHaveAttribute('placeholder', placeholder);
|
|
186
196
|
});
|
|
187
197
|
it('should be requireable', () => {
|
|
188
|
-
(0,
|
|
198
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
189
199
|
renderLabel: "Choose date",
|
|
190
200
|
renderWeekdayLabels: weekdayLabels,
|
|
191
|
-
isRequired: true
|
|
192
|
-
|
|
193
|
-
|
|
201
|
+
isRequired: true,
|
|
202
|
+
children: generateDays()
|
|
203
|
+
}));
|
|
204
|
+
const dateInput = _react.screen.getByLabelText('Choose date *');
|
|
194
205
|
expect(dateInput).toHaveAttribute('required');
|
|
195
206
|
});
|
|
196
207
|
it('should provide inputRef', () => {
|
|
197
208
|
const inputRef = _vitest.vi.fn();
|
|
198
|
-
(0,
|
|
209
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
199
210
|
renderLabel: "Choose date",
|
|
200
211
|
renderWeekdayLabels: weekdayLabels,
|
|
201
|
-
inputRef: inputRef
|
|
202
|
-
|
|
203
|
-
|
|
212
|
+
inputRef: inputRef,
|
|
213
|
+
children: generateDays()
|
|
214
|
+
}));
|
|
215
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
204
216
|
expect(inputRef).toHaveBeenCalledWith(dateInput);
|
|
205
217
|
});
|
|
206
218
|
it('should render messages', () => {
|
|
207
219
|
const text = 'The selected date is invalid';
|
|
208
|
-
const _render3 = (0,
|
|
220
|
+
const _render3 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
209
221
|
renderLabel: "Choose date",
|
|
210
222
|
renderWeekdayLabels: weekdayLabels,
|
|
211
223
|
messages: [{
|
|
212
224
|
type: 'error',
|
|
213
225
|
text
|
|
214
|
-
}]
|
|
215
|
-
|
|
226
|
+
}],
|
|
227
|
+
children: generateDays()
|
|
228
|
+
})),
|
|
216
229
|
container = _render3.container;
|
|
217
230
|
expect(container).toHaveTextContent(text);
|
|
218
231
|
});
|
|
219
232
|
it('should allow custom props to pass through', () => {
|
|
220
|
-
(0,
|
|
233
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
221
234
|
renderLabel: "Choose date",
|
|
222
235
|
renderWeekdayLabels: weekdayLabels,
|
|
223
236
|
"data-custom-attr": "custom value",
|
|
224
|
-
name: "my name"
|
|
225
|
-
|
|
226
|
-
|
|
237
|
+
name: "my name",
|
|
238
|
+
children: generateDays()
|
|
239
|
+
}));
|
|
240
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
227
241
|
expect(dateInput).toHaveAttribute('data-custom-attr', 'custom value');
|
|
228
242
|
expect(dateInput).toHaveAttribute('name', 'my name');
|
|
229
243
|
});
|
|
230
244
|
});
|
|
231
245
|
describe('Calendar', () => {
|
|
232
246
|
it('should show calendar when `isShowingCalendar` is set', async () => {
|
|
233
|
-
const _render4 = (0,
|
|
247
|
+
const _render4 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
234
248
|
renderLabel: "Choose date",
|
|
235
|
-
renderWeekdayLabels: weekdayLabels
|
|
236
|
-
|
|
249
|
+
renderWeekdayLabels: weekdayLabels,
|
|
250
|
+
children: generateDays()
|
|
251
|
+
})),
|
|
237
252
|
rerender = _render4.rerender,
|
|
238
253
|
queryByRole = _render4.queryByRole;
|
|
239
|
-
const dateInput =
|
|
254
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
240
255
|
const calendarTable = await queryByRole('listbox');
|
|
241
256
|
const calendarWrapper = await document.querySelector('[id^="Selectable_"][id$="-list"]');
|
|
242
257
|
expect(dateInput).toBeInTheDocument();
|
|
243
258
|
expect(calendarTable).not.toBeInTheDocument();
|
|
244
259
|
expect(calendarWrapper).not.toBeInTheDocument();
|
|
245
|
-
rerender(
|
|
260
|
+
rerender((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
246
261
|
renderLabel: "Choose date",
|
|
247
262
|
renderWeekdayLabels: weekdayLabels,
|
|
248
|
-
isShowingCalendar: true
|
|
249
|
-
|
|
250
|
-
|
|
263
|
+
isShowingCalendar: true,
|
|
264
|
+
children: generateDays()
|
|
265
|
+
}));
|
|
266
|
+
const dateInputAfterUpdate = _react.screen.getByLabelText('Choose date');
|
|
251
267
|
const calendarTableAfterUpdate = await queryByRole('listbox');
|
|
252
268
|
const calendarWrapperAfterUpdate = await document.querySelector('[id^="Selectable_"][id$="-list"]');
|
|
253
|
-
await (0,
|
|
269
|
+
await (0, _react.waitFor)(() => {
|
|
254
270
|
expect(dateInputAfterUpdate).toBeInTheDocument();
|
|
255
271
|
expect(calendarTableAfterUpdate).toBeInTheDocument();
|
|
256
272
|
expect(calendarWrapperAfterUpdate).toBeInTheDocument();
|
|
@@ -259,145 +275,155 @@ describe('<DateInput />', () => {
|
|
|
259
275
|
describe('onRequestShowCalendar', () => {
|
|
260
276
|
it('should call onRequestShowCalendar when label is clicked', async () => {
|
|
261
277
|
const onRequestShowCalendar = _vitest.vi.fn();
|
|
262
|
-
const _render5 = (0,
|
|
278
|
+
const _render5 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
263
279
|
renderLabel: "Choose date",
|
|
264
280
|
renderWeekdayLabels: weekdayLabels,
|
|
265
|
-
onRequestShowCalendar: onRequestShowCalendar
|
|
266
|
-
|
|
281
|
+
onRequestShowCalendar: onRequestShowCalendar,
|
|
282
|
+
children: generateDays()
|
|
283
|
+
})),
|
|
267
284
|
container = _render5.container;
|
|
268
285
|
const dateInput = container.querySelector('span[class$="-formFieldLayout__label"]');
|
|
269
286
|
expect(dateInput).toHaveTextContent('Choose date');
|
|
270
287
|
await _userEvent.default.click(dateInput);
|
|
271
|
-
await (0,
|
|
288
|
+
await (0, _react.waitFor)(() => {
|
|
272
289
|
expect(onRequestShowCalendar).toHaveBeenCalled();
|
|
273
290
|
});
|
|
274
291
|
});
|
|
275
292
|
it('should call onRequestShowCalendar when input is clicked', async () => {
|
|
276
293
|
const onRequestShowCalendar = _vitest.vi.fn();
|
|
277
|
-
const _render6 = (0,
|
|
294
|
+
const _render6 = (0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
278
295
|
renderLabel: "Choose date",
|
|
279
296
|
renderWeekdayLabels: weekdayLabels,
|
|
280
|
-
onRequestShowCalendar: onRequestShowCalendar
|
|
281
|
-
|
|
297
|
+
onRequestShowCalendar: onRequestShowCalendar,
|
|
298
|
+
children: generateDays()
|
|
299
|
+
})),
|
|
282
300
|
container = _render6.container;
|
|
283
301
|
const dateInput = container.querySelector('input');
|
|
284
302
|
await _userEvent.default.click(dateInput);
|
|
285
|
-
await (0,
|
|
303
|
+
await (0, _react.waitFor)(() => {
|
|
286
304
|
expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
|
|
287
305
|
});
|
|
288
306
|
});
|
|
289
307
|
it('should call onRequestShowCalendar when input receives space event', async () => {
|
|
290
308
|
const onRequestShowCalendar = _vitest.vi.fn();
|
|
291
|
-
(0,
|
|
309
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
292
310
|
renderLabel: "Choose date",
|
|
293
311
|
renderWeekdayLabels: weekdayLabels,
|
|
294
|
-
onRequestShowCalendar: onRequestShowCalendar
|
|
295
|
-
|
|
296
|
-
|
|
312
|
+
onRequestShowCalendar: onRequestShowCalendar,
|
|
313
|
+
children: generateDays()
|
|
314
|
+
}));
|
|
315
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
297
316
|
await _userEvent.default.type(dateInput, '{space}');
|
|
298
|
-
await (0,
|
|
317
|
+
await (0, _react.waitFor)(() => {
|
|
299
318
|
expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
|
|
300
319
|
});
|
|
301
320
|
});
|
|
302
321
|
it('should not call onRequestShowCalendar when input receives space event if calendar is already showing', async () => {
|
|
303
322
|
const onRequestShowCalendar = _vitest.vi.fn();
|
|
304
|
-
(0,
|
|
323
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
305
324
|
renderLabel: "Choose date",
|
|
306
325
|
renderWeekdayLabels: weekdayLabels,
|
|
307
326
|
onRequestShowCalendar: onRequestShowCalendar,
|
|
308
|
-
isShowingCalendar: true
|
|
309
|
-
|
|
310
|
-
|
|
327
|
+
isShowingCalendar: true,
|
|
328
|
+
children: generateDays()
|
|
329
|
+
}));
|
|
330
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
311
331
|
await _userEvent.default.type(dateInput, '{space}');
|
|
312
|
-
await (0,
|
|
332
|
+
await (0, _react.waitFor)(() => {
|
|
313
333
|
expect(onRequestShowCalendar).not.toHaveBeenCalled();
|
|
314
334
|
});
|
|
315
335
|
});
|
|
316
336
|
it('should call onRequestShowCalendar when input receives down arrow event', async () => {
|
|
317
337
|
const onRequestShowCalendar = _vitest.vi.fn();
|
|
318
|
-
(0,
|
|
338
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
319
339
|
renderLabel: "Choose date",
|
|
320
340
|
renderWeekdayLabels: weekdayLabels,
|
|
321
|
-
onRequestShowCalendar: onRequestShowCalendar
|
|
322
|
-
|
|
323
|
-
|
|
341
|
+
onRequestShowCalendar: onRequestShowCalendar,
|
|
342
|
+
children: generateDays()
|
|
343
|
+
}));
|
|
344
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
324
345
|
await _userEvent.default.type(dateInput, '{arrowdown}');
|
|
325
|
-
await (0,
|
|
346
|
+
await (0, _react.waitFor)(() => {
|
|
326
347
|
expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
|
|
327
348
|
});
|
|
328
349
|
});
|
|
329
350
|
it('should not call onRequestShowCalendar when input receives down arrow event if calendar is already showing', async () => {
|
|
330
351
|
const onRequestShowCalendar = _vitest.vi.fn();
|
|
331
|
-
(0,
|
|
352
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
332
353
|
renderLabel: "Choose date",
|
|
333
354
|
renderWeekdayLabels: weekdayLabels,
|
|
334
355
|
onRequestShowCalendar: onRequestShowCalendar,
|
|
335
|
-
isShowingCalendar: true
|
|
336
|
-
|
|
337
|
-
|
|
356
|
+
isShowingCalendar: true,
|
|
357
|
+
children: generateDays()
|
|
358
|
+
}));
|
|
359
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
338
360
|
await _userEvent.default.type(dateInput, '{arrowdown}');
|
|
339
|
-
await (0,
|
|
361
|
+
await (0, _react.waitFor)(() => {
|
|
340
362
|
expect(onRequestShowCalendar).not.toHaveBeenCalled();
|
|
341
363
|
});
|
|
342
364
|
});
|
|
343
365
|
it('should call onRequestShowCalendar when input receives up arrow event', async () => {
|
|
344
366
|
const onRequestShowCalendar = _vitest.vi.fn();
|
|
345
|
-
(0,
|
|
367
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
346
368
|
renderLabel: "Choose date",
|
|
347
369
|
renderWeekdayLabels: weekdayLabels,
|
|
348
|
-
onRequestShowCalendar: onRequestShowCalendar
|
|
349
|
-
|
|
350
|
-
|
|
370
|
+
onRequestShowCalendar: onRequestShowCalendar,
|
|
371
|
+
children: generateDays()
|
|
372
|
+
}));
|
|
373
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
351
374
|
await _userEvent.default.type(dateInput, '{arrowup}');
|
|
352
|
-
await (0,
|
|
375
|
+
await (0, _react.waitFor)(() => {
|
|
353
376
|
expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
|
|
354
377
|
});
|
|
355
378
|
});
|
|
356
379
|
it('should not call onRequestShowCalendar when input receives up arrow event if calendar is already showing', async () => {
|
|
357
380
|
const onRequestShowCalendar = _vitest.vi.fn();
|
|
358
|
-
(0,
|
|
381
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
359
382
|
renderLabel: "Choose date",
|
|
360
383
|
renderWeekdayLabels: weekdayLabels,
|
|
361
384
|
onRequestShowCalendar: onRequestShowCalendar,
|
|
362
|
-
isShowingCalendar: true
|
|
363
|
-
|
|
364
|
-
|
|
385
|
+
isShowingCalendar: true,
|
|
386
|
+
children: generateDays()
|
|
387
|
+
}));
|
|
388
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
365
389
|
await _userEvent.default.type(dateInput, '{arrowup}');
|
|
366
|
-
await (0,
|
|
390
|
+
await (0, _react.waitFor)(() => {
|
|
367
391
|
expect(onRequestShowCalendar).not.toHaveBeenCalled();
|
|
368
392
|
});
|
|
369
393
|
});
|
|
370
394
|
it('should call onRequestShowCalendar when input receives onChange event', async () => {
|
|
371
395
|
const onRequestShowCalendar = _vitest.vi.fn();
|
|
372
|
-
(0,
|
|
396
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
373
397
|
renderLabel: "Choose date",
|
|
374
398
|
renderWeekdayLabels: weekdayLabels,
|
|
375
|
-
onRequestShowCalendar: onRequestShowCalendar
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
399
|
+
onRequestShowCalendar: onRequestShowCalendar,
|
|
400
|
+
children: generateDays()
|
|
401
|
+
}));
|
|
402
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
403
|
+
_react.fireEvent.change(dateInput, {
|
|
379
404
|
target: {
|
|
380
405
|
value: 'January 5'
|
|
381
406
|
}
|
|
382
407
|
});
|
|
383
|
-
await (0,
|
|
408
|
+
await (0, _react.waitFor)(() => {
|
|
384
409
|
expect(onRequestShowCalendar).toHaveBeenCalledTimes(1);
|
|
385
410
|
});
|
|
386
411
|
});
|
|
387
412
|
it('should not call onRequestShowCalendar when disabled', async () => {
|
|
388
413
|
const onRequestShowCalendar = _vitest.vi.fn();
|
|
389
|
-
(0,
|
|
414
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
390
415
|
renderLabel: "Choose date",
|
|
391
416
|
renderWeekdayLabels: weekdayLabels,
|
|
392
417
|
onRequestShowCalendar: onRequestShowCalendar,
|
|
393
|
-
interaction: "disabled"
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
418
|
+
interaction: "disabled",
|
|
419
|
+
children: generateDays()
|
|
420
|
+
}));
|
|
421
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
422
|
+
_react.fireEvent.click(dateInput);
|
|
397
423
|
await _userEvent.default.type(dateInput, '{arrowup}{arrowdown}{space}January 5', {
|
|
398
424
|
skipClick: true
|
|
399
425
|
});
|
|
400
|
-
await (0,
|
|
426
|
+
await (0, _react.waitFor)(() => {
|
|
401
427
|
expect(onRequestShowCalendar).not.toHaveBeenCalled();
|
|
402
428
|
});
|
|
403
429
|
});
|
|
@@ -406,16 +432,17 @@ describe('<DateInput />', () => {
|
|
|
406
432
|
it('should call onRequestHideCalendar and onRequestValidateDate input receives onBlur event', async () => {
|
|
407
433
|
const onRequestHideCalendar = _vitest.vi.fn();
|
|
408
434
|
const onRequestValidateDate = _vitest.vi.fn();
|
|
409
|
-
(0,
|
|
435
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
410
436
|
renderLabel: "Choose date",
|
|
411
437
|
renderWeekdayLabels: weekdayLabels,
|
|
412
438
|
onRequestHideCalendar: onRequestHideCalendar,
|
|
413
439
|
onRequestValidateDate: onRequestValidateDate,
|
|
414
|
-
isShowingCalendar: true
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
440
|
+
isShowingCalendar: true,
|
|
441
|
+
children: generateDays()
|
|
442
|
+
}));
|
|
443
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
444
|
+
_react.fireEvent.blur(dateInput);
|
|
445
|
+
await (0, _react.waitFor)(() => {
|
|
419
446
|
expect(onRequestHideCalendar).toHaveBeenCalledTimes(1);
|
|
420
447
|
expect(onRequestValidateDate).toHaveBeenCalledTimes(1);
|
|
421
448
|
});
|
|
@@ -423,16 +450,17 @@ describe('<DateInput />', () => {
|
|
|
423
450
|
it('should call onRequestHideCalendar and onRequestValidateDate when input receives esc event', async () => {
|
|
424
451
|
const onRequestHideCalendar = _vitest.vi.fn();
|
|
425
452
|
const onRequestValidateDate = _vitest.vi.fn();
|
|
426
|
-
(0,
|
|
453
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
427
454
|
renderLabel: "Choose date",
|
|
428
455
|
renderWeekdayLabels: weekdayLabels,
|
|
429
456
|
onRequestHideCalendar: onRequestHideCalendar,
|
|
430
457
|
onRequestValidateDate: onRequestValidateDate,
|
|
431
|
-
isShowingCalendar: true
|
|
432
|
-
|
|
433
|
-
|
|
458
|
+
isShowingCalendar: true,
|
|
459
|
+
children: generateDays()
|
|
460
|
+
}));
|
|
461
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
434
462
|
await _userEvent.default.type(dateInput, '{esc}');
|
|
435
|
-
await (0,
|
|
463
|
+
await (0, _react.waitFor)(() => {
|
|
436
464
|
expect(onRequestHideCalendar).toHaveBeenCalledTimes(1);
|
|
437
465
|
expect(onRequestValidateDate).toHaveBeenCalledTimes(1);
|
|
438
466
|
});
|
|
@@ -441,22 +469,23 @@ describe('<DateInput />', () => {
|
|
|
441
469
|
const onRequestHideCalendar = _vitest.vi.fn();
|
|
442
470
|
const onRequestValidateDate = _vitest.vi.fn();
|
|
443
471
|
const days = generateDays();
|
|
444
|
-
days[4] = _Calendar$Day || (_Calendar$Day =
|
|
445
|
-
key: "4",
|
|
472
|
+
days[4] = _Calendar$Day || (_Calendar$Day = (0, _jsxRuntime.jsx)(_Calendar.Calendar.Day, {
|
|
446
473
|
label: "4",
|
|
447
474
|
date: "2019-09-28",
|
|
448
|
-
isSelected: true
|
|
449
|
-
|
|
450
|
-
|
|
475
|
+
isSelected: true,
|
|
476
|
+
children: 4
|
|
477
|
+
}, "4"));
|
|
478
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
451
479
|
renderLabel: "Choose date",
|
|
452
480
|
renderWeekdayLabels: weekdayLabels,
|
|
453
481
|
onRequestHideCalendar: onRequestHideCalendar,
|
|
454
482
|
onRequestValidateDate: onRequestValidateDate,
|
|
455
|
-
isShowingCalendar: true
|
|
456
|
-
|
|
457
|
-
|
|
483
|
+
isShowingCalendar: true,
|
|
484
|
+
children: days
|
|
485
|
+
}));
|
|
486
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
458
487
|
await _userEvent.default.type(dateInput, '{enter}');
|
|
459
|
-
await (0,
|
|
488
|
+
await (0, _react.waitFor)(() => {
|
|
460
489
|
expect(onRequestHideCalendar).toHaveBeenCalledTimes(1);
|
|
461
490
|
expect(onRequestValidateDate).toHaveBeenCalledTimes(1);
|
|
462
491
|
});
|
|
@@ -464,25 +493,28 @@ describe('<DateInput />', () => {
|
|
|
464
493
|
});
|
|
465
494
|
it('should render calendar navigation label', () => {
|
|
466
495
|
const label = 'January 2019';
|
|
467
|
-
(0,
|
|
496
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
468
497
|
renderLabel: "Choose date",
|
|
469
498
|
renderWeekdayLabels: weekdayLabels,
|
|
470
|
-
renderNavigationLabel:
|
|
471
|
-
"data-testId": "label-id"
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
499
|
+
renderNavigationLabel: (0, _jsxRuntime.jsx)("div", {
|
|
500
|
+
"data-testId": "label-id",
|
|
501
|
+
children: label
|
|
502
|
+
}),
|
|
503
|
+
isShowingCalendar: true,
|
|
504
|
+
children: generateDays()
|
|
505
|
+
}));
|
|
506
|
+
const navigationLabel = _react.screen.getByTestId('label-id');
|
|
476
507
|
expect(navigationLabel).toBeInTheDocument();
|
|
477
508
|
expect(navigationLabel).toHaveTextContent(label);
|
|
478
509
|
});
|
|
479
510
|
it('should render calendar weekday labels', async () => {
|
|
480
|
-
(0,
|
|
511
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
481
512
|
renderLabel: "Choose date",
|
|
482
513
|
renderWeekdayLabels: weekdayLabels,
|
|
483
|
-
isShowingCalendar: true
|
|
484
|
-
|
|
485
|
-
|
|
514
|
+
isShowingCalendar: true,
|
|
515
|
+
children: generateDays()
|
|
516
|
+
}));
|
|
517
|
+
const calendar = await _react.screen.findByRole('listbox');
|
|
486
518
|
const headers = calendar.querySelectorAll('th');
|
|
487
519
|
expect(headers.length).toEqual(7);
|
|
488
520
|
weekdayLabels.forEach(label => {
|
|
@@ -490,21 +522,24 @@ describe('<DateInput />', () => {
|
|
|
490
522
|
});
|
|
491
523
|
});
|
|
492
524
|
it('should render all focusable elements in calendar with tabIndex="-1"', async () => {
|
|
493
|
-
(0,
|
|
525
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
494
526
|
renderLabel: "Choose date",
|
|
495
527
|
renderWeekdayLabels: weekdayLabels,
|
|
496
|
-
renderNextMonthButton: _button || (_button =
|
|
497
|
-
"data-testId": "button-next"
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
528
|
+
renderNextMonthButton: _button || (_button = (0, _jsxRuntime.jsx)("button", {
|
|
529
|
+
"data-testId": "button-next",
|
|
530
|
+
children: "next"
|
|
531
|
+
})),
|
|
532
|
+
renderPrevMonthButton: _button2 || (_button2 = (0, _jsxRuntime.jsx)("button", {
|
|
533
|
+
"data-testId": "button-prev",
|
|
534
|
+
children: "prev"
|
|
535
|
+
})),
|
|
536
|
+
isShowingCalendar: true,
|
|
537
|
+
children: generateDays()
|
|
538
|
+
}));
|
|
539
|
+
const calendar = await _react.screen.findByRole('listbox');
|
|
505
540
|
const calendarDays = calendar.querySelectorAll('button');
|
|
506
|
-
const nextMonthButton =
|
|
507
|
-
const prevMonthButton =
|
|
541
|
+
const nextMonthButton = _react.screen.getByTestId('button-next');
|
|
542
|
+
const prevMonthButton = _react.screen.getByTestId('button-prev');
|
|
508
543
|
expect(nextMonthButton).toHaveAttribute('tabIndex', '-1');
|
|
509
544
|
expect(prevMonthButton).toHaveAttribute('tabIndex', '-1');
|
|
510
545
|
expect(calendarDays).toHaveLength(42);
|
|
@@ -514,19 +549,20 @@ describe('<DateInput />', () => {
|
|
|
514
549
|
});
|
|
515
550
|
it('should render days with the correct role', async () => {
|
|
516
551
|
const days = generateDays();
|
|
517
|
-
days[5] = _Calendar$Day2 || (_Calendar$Day2 =
|
|
518
|
-
key: "5",
|
|
552
|
+
days[5] = _Calendar$Day2 || (_Calendar$Day2 = (0, _jsxRuntime.jsx)(_Calendar.Calendar.Day, {
|
|
519
553
|
label: "5",
|
|
520
554
|
date: "2019-09-28",
|
|
521
555
|
id: "5",
|
|
522
|
-
isOutsideMonth: true
|
|
523
|
-
|
|
524
|
-
|
|
556
|
+
isOutsideMonth: true,
|
|
557
|
+
children: "outside"
|
|
558
|
+
}, "5"));
|
|
559
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
525
560
|
renderLabel: "Choose date",
|
|
526
561
|
renderWeekdayLabels: weekdayLabels,
|
|
527
|
-
isShowingCalendar: true
|
|
528
|
-
|
|
529
|
-
|
|
562
|
+
isShowingCalendar: true,
|
|
563
|
+
children: days
|
|
564
|
+
}));
|
|
565
|
+
const calendar = await _react.screen.findByRole('listbox');
|
|
530
566
|
const calendarDays = calendar.querySelectorAll('button');
|
|
531
567
|
calendarDays.forEach(day => {
|
|
532
568
|
if (day.textContent.includes('outside')) {
|
|
@@ -538,19 +574,20 @@ describe('<DateInput />', () => {
|
|
|
538
574
|
});
|
|
539
575
|
it('should assign aria-selected to the selected date and link it to the input', async () => {
|
|
540
576
|
const days = generateDays();
|
|
541
|
-
days[7] = _Calendar$Day3 || (_Calendar$Day3 =
|
|
542
|
-
key: "7",
|
|
577
|
+
days[7] = _Calendar$Day3 || (_Calendar$Day3 = (0, _jsxRuntime.jsx)(_Calendar.Calendar.Day, {
|
|
543
578
|
label: "7",
|
|
544
579
|
date: "2019-09-28",
|
|
545
580
|
id: "selected-day-id",
|
|
546
|
-
isSelected: true
|
|
547
|
-
|
|
548
|
-
|
|
581
|
+
isSelected: true,
|
|
582
|
+
children: "selected"
|
|
583
|
+
}, "7"));
|
|
584
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
549
585
|
renderLabel: "Choose date",
|
|
550
586
|
renderWeekdayLabels: weekdayLabels,
|
|
551
|
-
isShowingCalendar: true
|
|
552
|
-
|
|
553
|
-
|
|
587
|
+
isShowingCalendar: true,
|
|
588
|
+
children: days
|
|
589
|
+
}));
|
|
590
|
+
const calendar = await _react.screen.findByRole('listbox');
|
|
554
591
|
const calendarDays = calendar.querySelectorAll('button');
|
|
555
592
|
let selectedDayID = '';
|
|
556
593
|
calendarDays.forEach(day => {
|
|
@@ -561,7 +598,7 @@ describe('<DateInput />', () => {
|
|
|
561
598
|
expect(day).toHaveAttribute('aria-selected', 'false');
|
|
562
599
|
}
|
|
563
600
|
});
|
|
564
|
-
const dateInput =
|
|
601
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
565
602
|
expect(dateInput).toHaveAttribute('aria-activedescendant', selectedDayID);
|
|
566
603
|
});
|
|
567
604
|
});
|
|
@@ -570,7 +607,7 @@ describe('<DateInput />', () => {
|
|
|
570
607
|
it.each(generatedComponents)('should be accessible with example: $description', async ({
|
|
571
608
|
content
|
|
572
609
|
}) => {
|
|
573
|
-
const _render7 = (0,
|
|
610
|
+
const _render7 = (0, _react.render)(content),
|
|
574
611
|
container = _render7.container;
|
|
575
612
|
const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);
|
|
576
613
|
expect(axeCheck).toBe(true);
|
|
@@ -579,7 +616,7 @@ describe('<DateInput />', () => {
|
|
|
579
616
|
describe('with minimal config', () => {
|
|
580
617
|
it('should render 44 buttons (a calendar) when clicked', async () => {
|
|
581
618
|
const onChange = _vitest.vi.fn();
|
|
582
|
-
(0,
|
|
619
|
+
(0, _react.render)((0, _jsxRuntime.jsx)(_index.DateInput, {
|
|
583
620
|
renderLabel: "Choose date",
|
|
584
621
|
assistiveText: "Type a date or use arrow keys to navigate date picker.",
|
|
585
622
|
width: "20rem",
|
|
@@ -591,13 +628,13 @@ describe('<DateInput />', () => {
|
|
|
591
628
|
disabledDateErrorMessage: "disabled date",
|
|
592
629
|
invalidDateErrorMessage: "invalid date"
|
|
593
630
|
}));
|
|
594
|
-
const dateInput =
|
|
595
|
-
|
|
631
|
+
const dateInput = _react.screen.getByLabelText('Choose date');
|
|
632
|
+
_react.fireEvent.click(dateInput);
|
|
596
633
|
const calendarTable = document.querySelector('table');
|
|
597
634
|
const calendarDays = calendarTable.querySelectorAll('button');
|
|
598
635
|
const calendarWrapper = document.querySelector('[id^="Selectable_"][id$="-list"]');
|
|
599
636
|
const calendarButtons = calendarWrapper.querySelectorAll('button');
|
|
600
|
-
await (0,
|
|
637
|
+
await (0, _react.waitFor)(() => {
|
|
601
638
|
expect(calendarButtons).toHaveLength(44);
|
|
602
639
|
expect(calendarDays).toHaveLength(42);
|
|
603
640
|
});
|