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`] = ` + +