Skip to content

Picker tests: set data-app attribute in template instead of body in beforeAll hook #960

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
Feb 14, 2021
Merged

Picker tests: set data-app attribute in template instead of body in beforeAll hook #960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3fcc8bd
Set data-app attribute in template
simfeld Feb 9, 2021
ce392a5
E*Picker.spec.js: add attachTo: document.body
BacLuc Feb 10, 2021
5cbcf83
Merge pull request #1 from BacLuc/picker-snapshots-data-app
simfeld Feb 10, 2021
9d512e6
Destroy wrapper when attaching to body
simfeld Feb 10, 2021
8f9c27a
Merge branch 'devel' into picker-snapshots-data-app
simfeld Feb 10, 2021
16a0f96
Fix snapshots
simfeld Feb 10, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 22 additions & 17 deletions frontend/src/components/form/base/__tests__/EColorPicker.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,6 @@ 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()
})
Expand All @@ -68,16 +63,18 @@ describe('An EColorPicker', () => {
test('looks like a color picker', async () => {
const wrapper = mountComponent({
data: () => ({ color: COLOR_1 }),
template: '<div><e-color-picker v-model="color"></e-color-picker></div>',
template: '<div data-app><e-color-picker v-model="color"></e-color-picker></div>',
components: { 'e-color-picker': EColorPicker }
}, {
vuetify,
attachTo: document.body,
i18n
})
await waitForDebounce()
expect(wrapper).toMatchSnapshot('pickerclosed')
await wrapper.find('button').trigger('click')
expect(document.body).toMatchSnapshot('pickeropen')
expect(wrapper).toMatchSnapshot('pickeropen')
wrapper.destroy()
Copy link
Member

@carlobeltrame carlobeltrame Feb 11, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ist wrapper.destroy() in jedem Test nötig der attachTo: document.body verwendet?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would say so. The documentation says (https://vue-test-utils.vuejs.org/api/options.html#attachto):

When attaching to the DOM, you should call wrapper.destroy() at the end of your test to remove the rendered elements from the document and destroy the component instance.

However, it seems that in other tests using attachTo: document.body there are currently no side-effects of not calling destroy. But I think we should do it anyway.

})

test('updates v-model when the value changes', async () => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Weshalb kommt dieser Test ohne data-app aus?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The picker is never opened in this test (and others), thus we don't need a <div data-app> where Vuetify can attach the picker to.

Expand Down Expand Up @@ -114,12 +111,14 @@ describe('An EColorPicker', () => {
})

test('updates its value when a color is picked', async () => {
// prevent "[Vuetify] Unable to locate target [data-app]" warnings
document.body.setAttribute('data-app', 'true')
const wrapper = mount({
propsData: {
value: COLOR_2
}
const wrapper = mountComponent({
data: () => ({ color: COLOR_2 }),
template: '<div data-app><e-color-picker v-model="color"></e-color-picker></div>',
components: { 'e-color-picker': EColorPicker }
}, {
vuetify,
attachTo: document.body,
i18n
})
await waitForDebounce()
// open the color picker
Expand All @@ -135,13 +134,18 @@ describe('An EColorPicker', () => {
await closeButton.trigger('click')
await waitForDebounce()
expect(wrapper.find('input[type=text]').element.value).toBe('#E6CFE6')
wrapper.destroy()
})

test('accepts 3-digit hex color codes', async () => {
const wrapper = mount({
propsData: {
value: '#abc'
}
const wrapper = mountComponent({
data: () => ({ color: '#abc' }),
template: '<div data-app><e-color-picker v-model="color"></e-color-picker></div>',
components: { 'e-color-picker': EColorPicker }
}, {
vuetify,
attachTo: document.body,
i18n
})
await waitForDebounce()
// open the color picker
Expand All @@ -152,5 +156,6 @@ describe('An EColorPicker', () => {
await closeButton.trigger('click')
await waitForDebounce()
expect(wrapper.find('input[type=text]').element.value).toBe('#AABBCC')
wrapper.destroy()
})
})
24 changes: 13 additions & 11 deletions frontend/src/components/form/base/__tests__/EDatePicker.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,11 +45,6 @@ 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) => {
Expand All @@ -72,16 +67,18 @@ describe('An EDatePicker', () => {
test('looks like a date picker', async () => {
const wrapper = mountComponent({
data: () => ({ date: DATE_1 }),
template: '<div><e-date-picker v-model="date"></e-date-picker></div>',
template: '<div data-app><e-date-picker v-model="date"></e-date-picker></div>',
components: { 'e-date-picker': EDatePicker }
}, {
vuetify,
attachTo: document.body,
i18n
})
await waitForDebounce()
expect(wrapper).toMatchSnapshot('pickerclosed')
await wrapper.find('button').trigger('click')
expect(document.body).toMatchSnapshot('pickeropen')
expect(wrapper).toMatchSnapshot('pickeropen')
wrapper.destroy()
})

test('updates v-model when the value changes', async () => {
Expand Down Expand Up @@ -120,10 +117,14 @@ describe('An EDatePicker', () => {
})

test('updates its value when a date is picked', async () => {
const wrapper = mount({
propsData: {
value: DATE_1
}
const wrapper = mountComponent({
data: () => ({ date: DATE_1 }),
template: '<div data-app><e-date-picker v-model="date"></e-date-picker></div>',
components: { 'e-date-picker': EDatePicker }
}, {
vuetify,
attachTo: document.body,
i18n
})
await waitForDebounce()
// open the date picker
Expand All @@ -136,6 +137,7 @@ describe('An EDatePicker', () => {
await closeButton.trigger('click')
await waitForDebounce()
expect(wrapper.find('input[type=text]').element.value).toBe(data.date_3)
wrapper.destroy()
})
})
})
24 changes: 13 additions & 11 deletions frontend/src/components/form/base/__tests__/ETimePicker.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,11 +49,6 @@ describe('An ETimePicker', () => {

const mount = (options) => mountComponent(ETimePicker, { vuetify, i18n, ...options })

beforeAll(() => {
// prevent "[Vuetify] Unable to locate target [data-app]" warnings
document.body.setAttribute('data-app', 'true')
})

describe.each(localeData)('in locale %s', (locale, data) => {
beforeEach(() => {
i18n.locale = locale
Expand All @@ -74,16 +69,18 @@ describe('An ETimePicker', () => {
test('looks like a time picker', async () => {
const wrapper = mountComponent({
data: () => ({ time: TIME_1 }),
template: '<div><e-time-picker v-model="time"></e-time-picker></div>',
template: '<div data-app><e-time-picker v-model="time"></e-time-picker></div>',
components: { 'e-time-picker': ETimePicker }
}, {
vuetify,
attachTo: document.body,
i18n
})
await waitForDebounce()
expect(wrapper).toMatchSnapshot('pickerclosed')
await wrapper.find('button').trigger('click')
expect(document.body).toMatchSnapshot('pickeropen')
expect(wrapper).toMatchSnapshot('pickeropen')
wrapper.destroy()
})

test('allows a different valueFormat', async () => {
Expand Down Expand Up @@ -148,10 +145,14 @@ describe('An ETimePicker', () => {
})

test('updates its value when a time is picked', async () => {
const wrapper = mount({
propsData: {
value: TIME_2
}
const wrapper = mountComponent({
data: () => ({ time: TIME_2 }),
template: '<div data-app><e-time-picker v-model="time"></e-time-picker></div>',
components: { 'e-time-picker': ETimePicker }
}, {
vuetify,
attachTo: document.body,
i18n
})
await waitForDebounce()
// open the time picker
Expand All @@ -172,6 +173,7 @@ describe('An ETimePicker', () => {
await closeButton.trigger('click')
await waitForDebounce()
expect(wrapper.find('input[type=text]').element.value).toBe(data.time_3)
wrapper.destroy()
})
})
})
Loading