',
- components: { 'e-time-picker': ETimePicker },
+ it('closes the picker when pressing escape', async () => {
+ // given
+ render(ETimePicker, {
+ props: { value: TIME1_ISO, name: 'test' },
+ })
+ const inputField = await screen.findByDisplayValue(data.time1)
+ user.click(inputField)
+ await waitFor(async () => {
+ expect(await screen.findByText(data.closeButton)).toBeVisible()
+ })
+
+ // when
+ await user.click(document.body)
+
+ // then
+ await waitFor(async () => {
+ expect(await screen.queryByText(data.closeButton)).not.toBeVisible()
+ })
+ })
+
+ it('does not close the picker when selecting a time', async () => {
+ // given
+ render(ETimePicker, {
+ props: { value: TIME1_ISO, name: 'test' },
+ })
+ const inputField = await screen.findByDisplayValue(data.time1)
+ user.click(inputField)
+ await waitFor(async () => {
+ expect(await screen.findByText(data.closeButton)).toBeVisible()
+ })
+
+ // when
+ // Click the 0th hour
+ await user.click(await screen.findByText(data.firstHour))
+ // Click the 45th minute
+ await user.click(await screen.findByText('45'))
+
+ // then
+ // close button should stay visible
+ await expect(
+ waitFor(() => {
+ expect(screen.queryByText(data.closeButton)).not.toBeVisible()
+ })
+ ).rejects.toThrow(/Received element is visible/)
+ })
+
+ it('updates v-model when the input field is changed', async () => {
+ // given
+ const { emitted } = render(ETimePicker, {
+ props: { value: TIME1_ISO, name: 'test' },
+ })
+ const inputField = await screen.findByDisplayValue(data.time1)
+
+ // when
+ await user.clear(inputField)
+ await user.keyboard(data.time2)
+
+ // then
+ await waitFor(async () => {
+ const events = emitted().input
+ // some input events were fired
+ expect(events.length).toBeGreaterThan(0)
+ // the last one included the parsed version of our entered time
+ expect(events[events.length - 1]).toEqual([TIME2_ISO])
+ })
+ // Our entered time should be visible...
+ screen.getByDisplayValue(data.time2)
+ // ...and stay visible
+ await expect(
+ waitFor(() => {
+ expect(screen.getByDisplayValue(data.time2)).not.toBeVisible()
+ })
+ ).rejects.toThrow(/Received element is visible/)
+ })
+
+ it('updates v-model when a new time is selected in the picker', async () => {
+ // given
+ const { emitted } = render(ETimePicker, {
+ props: { value: TIME1_ISO, name: 'test' },
+ })
+ await screen.findByDisplayValue(data.time1)
+
+ // when
+ // click the button to open the picker
+ await user.click(screen.getByLabelText(data.labelText))
+ // Click the 0th hour. We can only click this one, because
+ // testing library is missing the vuetify styles, and all the
+ // number elements overlap
+ await user.click(await screen.findByText(data.firstHour))
+ // click the close button
+ await user.click(screen.getByText(data.closeButton))
+
+ // then
+ await waitFor(() => {
+ expect(screen.queryByText(data.closeButton)).not.toBeVisible()
+ })
+ await waitFor(async () => {
+ const events = emitted().input
+ // some input events were fired
+ expect(events.length).toBeGreaterThan(0)
+ // the last one included the parsed version of our entered time
+ expect(events[events.length - 1]).toEqual([TIME3_ISO])
+ })
+ // Our entered time should be visible...
+ screen.getByDisplayValue(data.time3)
+ // ...and stay visible
+ await expect(
+ waitFor(() => {
+ expect(screen.getByDisplayValue(data.time3)).not.toBeVisible()
+ })
+ ).rejects.toThrow(/Received element is visible/)
+ })
+
+ it('validates the input', async () => {
+ // given
+ render(ETimePicker, {
+ props: { value: TIME1_ISO, name: 'test' },
+ })
+ const inputField = await screen.findByDisplayValue(data.time1)
+
+ // when
+ await user.clear(inputField)
+ await user.keyboard(data.timeInWrongLocale)
+
+ // then
+ await screen.findByText(data.validationMessage)
+ })
+
+ it('works with invalid initialization', async () => {
+ // given
+
+ // when
+ render(ETimePicker, {
+ props: {
+ value: 'abc',
+ name: 'test',
},
- {
- vuetify,
- attachTo: document.body,
- i18n,
- }
- )
- await waitForDebounce()
- // open the time picker
- const openPicker = wrapper.find('button')
- await openPicker.trigger('click')
- // select hour
- const clockHour = wrapper.findComponent({ name: 'v-time-picker-clock' })
- clockHour.vm.update(19)
- clockHour.vm.valueOnMouseUp = 19
- await clockHour.trigger('mouseup')
- // select minute
- const clockMinute = wrapper.findComponent({ name: 'v-time-picker-clock' })
- clockMinute.vm.update(15)
- clockMinute.vm.valueOnMouseUp = 15
- await clockMinute.trigger('mouseup')
- // click the save button
- const closeButton = wrapper.find('[data-testid="action-ok"]')
- await closeButton.trigger('click')
- await waitForDebounce()
- expect(wrapper.find('input[type=text]').element.value).toBe(data.time_3)
- wrapper.destroy()
+ })
+
+ // then
+ const inputField = await screen.findByDisplayValue('Invalid Date')
+
+ // when
+ await user.clear(inputField)
+ await user.keyboard(data.time2)
+
+ // then
+ waitFor(() => {
+ expect(screen.queryByText('Invalid Date')).not.toBeInTheDocument()
+ })
})
})
})
diff --git a/frontend/src/components/form/base/__tests__/__snapshots__/EColorPicker.spec.js.snap b/frontend/src/components/form/base/__tests__/__snapshots__/EColorPicker.spec.js.snap
index 603bb9ca90..c42eb7045a 100644
--- a/frontend/src/components/form/base/__tests__/__snapshots__/EColorPicker.spec.js.snap
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/EColorPicker.spec.js.snap
@@ -1,28 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`An EColorPicker looks like a color picker: pickerclosed 1`] = `
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
@@ -30,20 +34,25 @@ exports[`An EColorPicker looks like a color picker: pickerclosed 1`] = `
`;
exports[`An EColorPicker looks like a color picker: pickeropen 1`] = `
-
+
-
+
-
+
@@ -58,99 +67,94 @@ exports[`An EColorPicker looks like a color picker: pickeropen 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- R
-
-
-
- G
-
-
-
- B
+
+
+
+ R
+
+
+
+ G
+
+
+
+ B
+
+
-
+
-
-
-
diff --git a/frontend/src/components/form/base/__tests__/__snapshots__/EDatePicker.spec.js.snap b/frontend/src/components/form/base/__tests__/__snapshots__/EDatePicker.spec.js.snap
index 5ff0992411..41d1d38d7e 100644
--- a/frontend/src/components/form/base/__tests__/__snapshots__/EDatePicker.spec.js.snap
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/EDatePicker.spec.js.snap
@@ -1,27 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`An EDatePicker in locale de looks like a date picker: pickerclosed 1`] = `
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
@@ -29,19 +34,24 @@ exports[`An EDatePicker in locale de looks like a date picker: pickerclosed 1`]
`;
exports[`An EDatePicker in locale de looks like a date picker: pickeropen 1`] = `
-
+
-
+
-
+
@@ -56,281 +66,343 @@ exports[`An EDatePicker in locale de looks like a date picker: pickeropen 1`] =
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
M
+
D
+
M
+
D
+
F
+
S
+
S
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
M
-
D
-
M
-
D
-
F
-
S
-
S
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
@@ -338,27 +410,32 @@ exports[`An EDatePicker in locale de looks like a date picker: pickeropen 1`] =
`;
exports[`An EDatePicker in locale en looks like a date picker: pickerclosed 1`] = `
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
@@ -366,19 +443,24 @@ exports[`An EDatePicker in locale en looks like a date picker: pickerclosed 1`]
`;
exports[`An EDatePicker in locale en looks like a date picker: pickeropen 1`] = `
-
+
-
+
-
+
@@ -393,281 +475,343 @@ exports[`An EDatePicker in locale en looks like a date picker: pickeropen 1`] =
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
M
+
T
+
W
+
T
+
F
+
S
+
S
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
M
-
T
-
W
-
T
-
F
-
S
-
S
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/frontend/src/components/form/base/__tests__/__snapshots__/ETimePicker.spec.js.snap b/frontend/src/components/form/base/__tests__/__snapshots__/ETimePicker.spec.js.snap
index d88970593a..c25bcf3178 100644
--- a/frontend/src/components/form/base/__tests__/__snapshots__/ETimePicker.spec.js.snap
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/ETimePicker.spec.js.snap
@@ -1,27 +1,32 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`An ETimePicker in locale de looks like a time picker: pickerclosed 1`] = `
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
@@ -29,19 +34,24 @@ exports[`An ETimePicker in locale de looks like a time picker: pickerclosed 1`]
`;
exports[`An ETimePicker in locale de looks like a time picker: pickeropen 1`] = `
-
+
-
+
-
+
@@ -56,139 +66,135 @@ exports[`An ETimePicker in locale de looks like a time picker: pickeropen 1`] =
@@ -196,27 +202,32 @@ exports[`An ETimePicker in locale de looks like a time picker: pickeropen 1`] =
`;
exports[`An ETimePicker in locale en looks like a time picker: pickerclosed 1`] = `
-
+
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
@@ -224,19 +235,24 @@ exports[`An ETimePicker in locale en looks like a time picker: pickerclosed 1`]
`;
exports[`An ETimePicker in locale en looks like a time picker: pickeropen 1`] = `
-
+
-
+
-
+
@@ -251,139 +267,94 @@ exports[`An ETimePicker in locale en looks like a time picker: pickeropen 1`] =