diff --git a/src/components/__tests__/UserPanel.spec.js b/src/components/__tests__/UserPanel.spec.js index 542921ec6..8778ffcec 100644 --- a/src/components/__tests__/UserPanel.spec.js +++ b/src/components/__tests__/UserPanel.spec.js @@ -1,17 +1,7 @@ import { describe, expect, it, jest } from '@jest/globals'; -import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest'; -import { mount, flushPromises } from '@vue/test-utils'; -import axios from 'axios'; -import { i18n } from 'src/boot/i18n'; +import { createWrapper, axios, flushPromises } from 'app/test/jest/jestHelpers'; import UserPanel from '../UserPanel.vue'; -import { Notify } from 'quasar'; -// Specify here Quasar config you'll need to test your component -installQuasarPlugin({ - plugins: { - Notify - } -}); const mockPush = jest.fn(); jest.mock('vue-router', () => ({ @@ -20,17 +10,6 @@ jest.mock('vue-router', () => ({ }), })); -function createWrapper(component) { - const wrapper = mount(component, { - global: { - plugins: [i18n] - } - }); - const vm = wrapper.vm; - - return { vm, wrapper }; -} - describe('UserPanel', () => { describe('onMounted', () => { it('should define the user into state', async () => { diff --git a/src/pages/Login/__tests__/Login.spec.js b/src/pages/Login/__tests__/Login.spec.js index 58db6eb15..11e5b5b83 100644 --- a/src/pages/Login/__tests__/Login.spec.js +++ b/src/pages/Login/__tests__/Login.spec.js @@ -1,21 +1,8 @@ -import { jest, describe, expect, it } from '@jest/globals'; -import { mount } from '@vue/test-utils'; -import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest'; -import { i18n } from 'src/boot/i18n'; -import { Notify } from 'quasar'; -import axios from 'axios'; +import { jest, describe, expect, it, beforeAll } from '@jest/globals'; +import { createWrapper, axios } from 'app/test/jest/jestHelpers'; import Login from '../Login.vue'; -// Specify here Quasar config you'll need to test your component -installQuasarPlugin({ - plugins: { - Notify - } -}); - -// https://stackoverflow.com/questions/68763693/vue-routers-injection-fails-during-a-jest-unit-test const mockPush = jest.fn(); -const mockT = jest.fn(); jest.mock('vue-router', () => ({ useRouter: () => ({ @@ -23,21 +10,13 @@ jest.mock('vue-router', () => ({ }), })); -jest.mock('vue-i18n', () => ({ - useI18n: () => ({ - t: mockT - }), -})); - describe('Login', () => { - it('should successfully set the token into session', async () => { - const wrapper = mount(Login, { - global: { - plugins: [i18n] - } - }); - const { vm } = wrapper; + let vm; + beforeAll(() => { + vm = createWrapper(Login).vm; + }); + it('should successfully set the token into session', async () => { jest.spyOn(axios, 'post').mockResolvedValue({ data: { token: 'token' } }); jest.spyOn(vm.quasar, 'notify') @@ -53,13 +32,6 @@ describe('Login', () => { }); it('should not set the token into session if any error occurred', async () => { - const wrapper = mount(Login, { - global: { - plugins: [i18n] - } - }); - const { vm } = wrapper; - jest.spyOn(axios, 'post').mockRejectedValue(new Error('error')); jest.spyOn(vm.quasar, 'notify') diff --git a/test/jest/__tests__/MyButton.spec.js b/test/jest/__tests__/MyButton.spec.js deleted file mode 100644 index 8a9ce030d..000000000 --- a/test/jest/__tests__/MyButton.spec.js +++ /dev/null @@ -1,42 +0,0 @@ -import { describe, expect, it } from '@jest/globals'; -import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest'; -import { mount, shallowMount } from '@vue/test-utils'; -import { QBtn } from 'quasar'; -import MyButton from './demo/MyButton'; - -// Specify here Quasar config you'll need to test your component -installQuasarPlugin(); - -describe('MyButton', () => { - it('has increment method', () => { - const wrapper = mount(MyButton); - const { vm } = wrapper; - - expect(typeof vm.increment).toBe('function'); - }); - - it('can check the inner text content', () => { - const wrapper = mount(MyButton); - const { vm } = wrapper; - - expect(vm.$el.textContent).toContain('rocket muffin'); - expect(wrapper.find('.content').text()).toContain('rocket muffin'); - }); - - it('sets the correct default data', () => { - const wrapper = mount(MyButton); - const { vm } = wrapper; - - expect(typeof vm.counter).toBe('number'); - expect(vm.counter).toBe(0); - }); - - it('correctly updates counter when button is pressed', async () => { - const wrapper = shallowMount(MyButton); - const { vm } = wrapper; - - const button = wrapper.findComponent(QBtn); - await button.trigger('click'); - expect(vm.counter).toBe(1); - }); -}); diff --git a/test/jest/__tests__/MyDialog.spec.js b/test/jest/__tests__/MyDialog.spec.js deleted file mode 100644 index bb914ad47..000000000 --- a/test/jest/__tests__/MyDialog.spec.js +++ /dev/null @@ -1,28 +0,0 @@ -import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest'; -import { beforeEach, describe, expect, it } from '@jest/globals'; -import { DOMWrapper, mount } from '@vue/test-utils'; -import MyDialog from './demo/MyDialog'; - -installQuasarPlugin(); - -describe('MyDialog', () => { - beforeEach(() => { - mount(MyDialog, { - data: () => ({ - isDialogOpen: true, - }), - }); - }); - - it('should mount the document body and expose for testing', () => { - const wrapper = new DOMWrapper(document.body); - - expect(wrapper.find('.q-dialog').exists()).toBeTruthy(); - }); - - it('can check the inner text of the dialog', () => { - const wrapper = new DOMWrapper(document.body); - - expect(wrapper.find('.q-dialog').html()).toContain('Custom dialog which should be tested'); - }); -}); diff --git a/test/jest/__tests__/demo/MyButton.vue b/test/jest/__tests__/demo/MyButton.vue deleted file mode 100644 index b32f7729b..000000000 --- a/test/jest/__tests__/demo/MyButton.vue +++ /dev/null @@ -1,30 +0,0 @@ - - - diff --git a/test/jest/__tests__/demo/MyDialog.vue b/test/jest/__tests__/demo/MyDialog.vue deleted file mode 100644 index 2da35bccc..000000000 --- a/test/jest/__tests__/demo/MyDialog.vue +++ /dev/null @@ -1,20 +0,0 @@ - - - diff --git a/test/jest/jestHelpers.js b/test/jest/jestHelpers.js new file mode 100644 index 000000000..4c7178dc1 --- /dev/null +++ b/test/jest/jestHelpers.js @@ -0,0 +1,28 @@ +import { mount, flushPromises } from '@vue/test-utils'; +import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest'; +import { i18n } from 'src/boot/i18n'; +import { Notify } from 'quasar'; +import axios from 'axios'; + +// Specify here Quasar config you'll need to test your component +installQuasarPlugin({ + plugins: { + Notify + } +}); + +export function createWrapper(component) { + const wrapper = mount(component, { + global: { + plugins: [i18n] + } + }); + const vm = wrapper.vm; + + return { vm, wrapper }; +} + +export { + axios, + flushPromises +}