diff --git a/frontend/src/components/form/base/__tests__/EColorPicker.spec.js b/frontend/src/components/form/base/__tests__/EColorPicker.spec.js
index 7ef3f9c15e..9e5c02c8bf 100644
--- a/frontend/src/components/form/base/__tests__/EColorPicker.spec.js
+++ b/frontend/src/components/form/base/__tests__/EColorPicker.spec.js
@@ -46,6 +46,11 @@ describe('An EColorPicker', () => {
const mount = (options) => mountComponent(EColorPicker, { vuetify, i18n, ...options })
+ beforeAll(() => {
+ // prevent "[Vuetify] Unable to locate target [data-app]" warnings
+ document.body.setAttribute('data-app', 'true')
+ })
+
beforeEach(() => {
vuetify = new Vuetify()
})
@@ -60,6 +65,21 @@ describe('An EColorPicker', () => {
expect(wrapper.find('input[type=text]').element.value).toBe(COLOR_1)
})
+ test('looks like a color picker', async () => {
+ const wrapper = mountComponent({
+ data: () => ({ color: COLOR_1 }),
+ template: '
',
+ components: { 'e-color-picker': EColorPicker }
+ }, {
+ vuetify,
+ i18n
+ })
+ await waitForDebounce()
+ expect(wrapper).toMatchSnapshot('pickerclosed')
+ await wrapper.find('button').trigger('click')
+ expect(document.body).toMatchSnapshot('pickeropen')
+ })
+
test('updates v-model when the value changes', async () => {
const wrapper = mountComponent({
data: () => ({ color: COLOR_1 }),
@@ -118,8 +138,6 @@ describe('An EColorPicker', () => {
})
test('accepts 3-digit hex color codes', async () => {
- // prevent "[Vuetify] Unable to locate target [data-app]" warnings
- document.body.setAttribute('data-app', 'true')
const wrapper = mount({
propsData: {
value: '#abc'
diff --git a/frontend/src/components/form/base/__tests__/EDatePicker.spec.js b/frontend/src/components/form/base/__tests__/EDatePicker.spec.js
index a72a01216d..963b60cc63 100644
--- a/frontend/src/components/form/base/__tests__/EDatePicker.spec.js
+++ b/frontend/src/components/form/base/__tests__/EDatePicker.spec.js
@@ -45,6 +45,11 @@ describe('An EDatePicker', () => {
const waitForDebounce = () => new Promise((resolve) => setTimeout(resolve, 110))
+ beforeAll(() => {
+ // prevent "[Vuetify] Unable to locate target [data-app]" warnings
+ document.body.setAttribute('data-app', 'true')
+ })
+
const mount = (options) => mountComponent(EDatePicker, { vuetify, i18n, ...options })
describe.each(localeData)('in locale %s', (locale, data) => {
@@ -63,6 +68,21 @@ describe('An EDatePicker', () => {
expect(wrapper.find('input[type=text]').element.value).toBe(data.date_1)
})
+ test('looks like a date picker', async () => {
+ const wrapper = mountComponent({
+ data: () => ({ date: DATE_1 }),
+ template: '
',
+ components: { 'e-date-picker': EDatePicker }
+ }, {
+ vuetify,
+ i18n
+ })
+ await waitForDebounce()
+ expect(wrapper).toMatchSnapshot('pickerclosed')
+ await wrapper.find('button').trigger('click')
+ expect(document.body).toMatchSnapshot('pickeropen')
+ })
+
test('updates v-model when the value changes', async () => {
const wrapper = mountComponent({
data: () => ({ date: DATE_1 }),
@@ -99,8 +119,6 @@ describe('An EDatePicker', () => {
})
test('updates its value when a date is picked', async () => {
- // prevent "[Vuetify] Unable to locate target [data-app]" warnings
- document.body.setAttribute('data-app', 'true')
const wrapper = mount({
propsData: {
value: DATE_1
diff --git a/frontend/src/components/form/base/__tests__/ETimePicker.spec.js b/frontend/src/components/form/base/__tests__/ETimePicker.spec.js
index a6d1b27abb..c70c2a1532 100644
--- a/frontend/src/components/form/base/__tests__/ETimePicker.spec.js
+++ b/frontend/src/components/form/base/__tests__/ETimePicker.spec.js
@@ -79,10 +79,10 @@ describe('An ETimePicker', () => {
vuetify,
i18n
})
- await flushPromises()
+ await waitForDebounce()
expect(wrapper).toMatchSnapshot('pickerclosed')
await wrapper.find('button').trigger('click')
- expect(document.querySelector('body')).toMatchSnapshot('pickeropen')
+ expect(document.body).toMatchSnapshot('pickeropen')
})
test('allows a different valueFormat', async () => {
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
new file mode 100644
index 0000000000..923df6ddc5
--- /dev/null
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/EColorPicker.spec.js.snap
@@ -0,0 +1,223 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`An EColorPicker looks like a color picker: pickerclosed 1`] = `
+
+`;
+
+exports[`An EColorPicker looks like a color picker: pickeropen 1`] = `
+
+
+
+`;
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
new file mode 100644
index 0000000000..86c0069ce9
--- /dev/null
+++ b/frontend/src/components/form/base/__tests__/__snapshots__/EDatePicker.spec.js.snap
@@ -0,0 +1,2221 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+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`] = `
+
+
+
+`;
+
+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`] = `
+
+
+
+
+
+`;
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 6417b6b073..67f577d00e 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
@@ -5,7 +5,7 @@ exports[`An ETimePicker in locale de looks like a time picker: pickerclosed 1`]