verdnatura/salix-front
verdnatura
/
salix-front
1
2
Fork 1
Code Issues Pull Requests 59 Releases Wiki Activity

jestHelpers implementation

This commit is contained in:
Carlos Jimenez Ruiz 2022-03-25 15:14:49 +01:00
parent 8343271b1a
commit 34f4b001be
7 changed files with 36 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/__tests__/UserPanel.spec.js
View File

@ -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 () => {

42
src/pages/Login/__tests__/Login.spec.js
View File

@ -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')

42
test/jest/__tests__/MyButton.spec.js
View File

@ -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);
});
});

28
test/jest/__tests__/MyDialog.spec.js
View File

@ -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');
});
});

30
test/jest/__tests__/demo/MyButton.vue
View File

@ -1,30 +0,0 @@
<script>
import { defineComponent, ref } from 'vue';
export default defineComponent({
name: 'MyButton',
props: {
incrementStep: {
type: Number,
default: 1,
},
},
setup(props) {
const counter = ref(0);
const input = ref('rocket muffin');
function increment() {
counter.value += props.incrementStep;
}
return { counter, input, increment };
},
});
</script>
<template>
<div>
<p class="content">{{ input }}</p>
<span>{{ counter }}</span>
<q-btn class="button" @click="increment()"></q-btn>
</div>
</template>

20
test/jest/__tests__/demo/MyDialog.vue
View File

@ -1,20 +0,0 @@
<template>
<q-dialog v-model="isDialogOpen">
<q-card>
<q-card-section>Custom dialog which should be tested</q-card-section>
</q-card>
</q-dialog>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
name: 'MyDialog',
data() {
return {
isDialogOpen: false,
};
},
});
</script>

28
test/jest/jestHelpers.js Normal file
View File

@ -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
}