From 0f7adbb41055f2fcf90ba0520647f5a577cad690 Mon Sep 17 00:00:00 2001 From: BacLuc Date: Tue, 10 Nov 2020 22:42:32 +0100 Subject: [PATCH 1/4] frontend: add test for ESelect --- .../form/base/__tests__/ESelect.spec.js | 104 ++++ .../__snapshots__/ESelect.spec.js.snap | 462 ++++++++++++++++++ 2 files changed, 566 insertions(+) create mode 100644 frontend/src/components/form/base/__tests__/ESelect.spec.js create mode 100644 frontend/src/components/form/base/__tests__/__snapshots__/ESelect.spec.js.snap diff --git a/frontend/src/components/form/base/__tests__/ESelect.spec.js b/frontend/src/components/form/base/__tests__/ESelect.spec.js new file mode 100644 index 0000000000..df4bf898ab --- /dev/null +++ b/frontend/src/components/form/base/__tests__/ESelect.spec.js @@ -0,0 +1,104 @@ +import Vue from 'vue' +import Vuetify from 'vuetify' + +import { formBaseComponents } from '@/plugins' + +import { mount as mountComponent } from '@vue/test-utils' +import ESelect from '../ESelect' + +Vue.use(Vuetify) +Vue.use(formBaseComponents) + +describe('An ESelect', () => { + let vuetify + + const FIRST_OPTION = { + value: 1, + text: 'firstOption' + } + const SECOND_OPTION = { + value: '2', + text: 'secondOption' + } + const THIRD_OPTION = { + value: { key: 'value', array: [1, 2, 3], nestedObject: { key: 'value' } }, + text: 'thirdOption' + } + const selectValues = [ + FIRST_OPTION, + SECOND_OPTION, + THIRD_OPTION + ] + + const mount = (options) => { + const app = Vue.component('App', { + components: { ESelect }, + data: function () { + return { + selectValues: selectValues, + data: null + } + }, + template: ` +
+ +
+ ` + }) + return mountComponent(app, { vuetify, attachTo: document.body, ...options }) + } + + beforeEach(() => { + vuetify = new Vuetify() + }) + test('looks like a dropdown', async () => { + const wrapper = mount() + expect(wrapper.element).toMatchSnapshot('no item selected') + + await wrapper.find('.v-input__slot').trigger('click') + expect(wrapper.element).toMatchSnapshot('dropdown open') + + await wrapper.findAll('[role="option"]').at(0).trigger('click') + expect(wrapper.element).toMatchSnapshot('dropdown closed with selected value') + + await wrapper.find('.v-input__slot').trigger('click') + expect(wrapper.element).toMatchSnapshot('dropdown open with selected value') + }) + + test('update viewmodel with selected value', async () => { + const wrapper = mount() + expect(wrapper.vm.data).toBeNull() + + await wrapper.find('.v-input__slot').trigger('click') + await wrapper.findAll('[role="option"]').at(0).trigger('click') + expect(wrapper.vm.data).toBe(FIRST_OPTION.value) + + await wrapper.find('.v-input__slot').trigger('click') + await wrapper.findAll('[role="option"]').at(2).trigger('click') + expect(wrapper.vm.data).toBe(THIRD_OPTION.value) + }) + + test('update selected value with viewmodel', async () => { + const wrapper = mount() + + await wrapper.setData({ data: SECOND_OPTION.value }) + expect(wrapper.html()).toContain(SECOND_OPTION.text) + expect(wrapper.html()).not.toContain(FIRST_OPTION.text) + + await wrapper.setData({ data: FIRST_OPTION.value }) + expect(wrapper.html()).toContain(FIRST_OPTION.text) + expect(wrapper.html()).not.toContain(SECOND_OPTION.text) + }) + + test('update selected value after it was open', async () => { + const wrapper = mount() + + await wrapper.find('.v-input__slot').trigger('click') + await wrapper.findAll('[role="option"]').at(0).trigger('click') + expect(wrapper.vm.data).toBe(FIRST_OPTION.value) + + await wrapper.setData({ data: SECOND_OPTION.value }) + expect(wrapper.findAll('[role="option"]').at(1).element.getAttribute('aria-selected')).toBe('true') + expect(wrapper.findAll('[role="option"]').at(0).element.getAttribute('aria-selected')).not.toBe('true') + }) +}) diff --git a/frontend/src/components/form/base/__tests__/__snapshots__/ESelect.spec.js.snap b/frontend/src/components/form/base/__tests__/__snapshots__/ESelect.spec.js.snap new file mode 100644 index 0000000000..1dcc4dbf2c --- /dev/null +++ b/frontend/src/components/form/base/__tests__/__snapshots__/ESelect.spec.js.snap @@ -0,0 +1,462 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`An ESelect looks like a dropdown: dropdown closed with selected value 1`] = ` +
+
+
+
+