wbuezas
/
salix-front-mindshore-fork2
forked from verdnatura/salix-front
0
0
Fork 0
Code Pull Requests Activity

testing made possible :(

This commit is contained in:
Carlos Jimenez Ruiz 2022-03-24 11:44:23 +01:00
parent 9e79ad907b
commit b847cf3450
5 changed files with 123 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
jest.config.js
View File

@ -41,8 +41,8 @@ module.exports = {
testMatch: [
// Matches tests in any subfolder of 'src' or into 'test/jest/__tests__'
// Matches all files with extension 'js', 'jsx', 'ts' and 'tsx'
'<rootDir>/test/jest/__tests__/**/*.(spec|test).+(ts|js)?(x)',
//'<rootDir>/src/**/*.jest.(spec|test).+(ts|js)?(x)',
// '<rootDir>/test/jest/__tests__/**/*.(spec|test).+(ts|js)?(x)',
'<rootDir>/src/**/__tests__/*.(spec|test).+(ts|js)?(x)',
],
// Extension-less imports of components are resolved to .ts files by TS,
// grating correct type-checking in test files.

28
src/components/__tests__/UserPanel.spec.js Normal file
View File

@ -0,0 +1,28 @@
import { describe, expect, it } from '@jest/globals';
import { installQuasarPlugin } from '@quasar/quasar-app-extension-testing-unit-jest';
import { mount } from '@vue/test-utils';
import { i18n } from 'src/boot/i18n';
import UserPanel from '../UserPanel.vue';
// Specify here Quasar config you'll need to test your component
installQuasarPlugin();
const routerPushMock = jest.fn();
jest.mock('vue-router', () => ({
useRouter: () => ({
push: routerPushMock,
}),
}));
describe('UserPanel', () => {
it('should have the function logout defined', () => {
const wrapper = mount(UserPanel, {
global: {
plugins: [i18n]
}
});
const { vm } = wrapper;
expect(vm.logout).toBeDefined();
});
});

27
src/pages/Login/Login.vue
View File

@ -11,14 +11,25 @@
true-value="en"
v-model="locale"
/>
<q-toggle v-model="darkMode" checked-icon="dark_mode" color="orange" unchecked-icon="light_mode" />
<q-toggle
v-model="darkMode"
checked-icon="dark_mode"
color="orange"
unchecked-icon="light_mode"
/>
</q-toolbar>
</q-header>
<q-page-container>
<q-page>
<div id="login">
<q-card class="login q-pa-xl">
<q-img src="~/assets/logo.svg" alt="Logo" fit="contain" :ratio="16 / 9" class="q-mb-md" />
<q-img
src="~/assets/logo.svg"
alt="Logo"
fit="contain"
:ratio="16 / 9"
class="q-mb-md"
/>
<q-form @submit="onSubmit" class="q-gutter-md">
<q-input
filled
@ -27,7 +38,7 @@
:label="t('login.username')"
lazy-rules
:rules="[
(val: string) => (val && val.length > 0) || 'Please type something',
(val) => (val && val.length > 0) || 'Please type something',
]"
/>
<q-input
@ -38,10 +49,14 @@
:label="t('login.password')"
lazy-rules
:rules="[
(val: string) => (val && val.length > 0) || 'Please type something',
(val) => (val && val.length > 0) || 'Please type something',
]"
/>
<q-toggle v-model="keepLogin" :label="t('login.keepLogin')" color="orange" />
<q-toggle
v-model="keepLogin"
:label="t('login.keepLogin')"
color="orange"
/>
<div>
<q-btn :label="t('login.submit')" type="submit" color="orange" />
@ -87,6 +102,7 @@ async function onSubmit(): Promise<void> {
user: username.value,
password: password.value,
});
session.setToken({
token: data.token,
keepLogin: keepLogin.value,
@ -96,6 +112,7 @@ async function onSubmit(): Promise<void> {
message: t('login.loginSuccess'),
type: 'positive',
});
await router.push({ path: '/dashboard' });
} catch (error) {
if (axios.isAxiosError(error)) {

66
src/pages/Login/__tests__/Login.spec.ts Normal file
View File

@ -0,0 +1,66 @@
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 Login from '../Login.vue';
// Specify here Quasar config you'll need to test your component
installQuasarPlugin({
plugins: {
Notify
}
});
const routerPushMock = jest.fn();
jest.mock('vue-router', () => ({
useRouter: () => ({
push: routerPushMock,
}),
}));
describe('Login', () => {
it('should successfully set the token into session', async () => {
const wrapper = mount(Login, {
global: {
plugins: [i18n]
}
});
const { vm } = wrapper;
jest.spyOn(axios, 'post').mockResolvedValue({ data: { token: 'token' } });
jest.spyOn(vm.quasar, 'notify')
expect(vm.session.getToken()).toEqual('');
await vm.onSubmit();
expect(vm.session.getToken()).toEqual('token');
expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
{ 'type': 'positive' }
));
vm.session.destroy();
});
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')
expect(vm.session.getToken()).toEqual('');
await vm.onSubmit();
expect(vm.quasar.notify).toHaveBeenCalledWith(expect.objectContaining(
{ 'type': 'negative' }
));
});
});

33
test/cypress/integration/home.spec.js
View File

@ -7,34 +7,11 @@
// This test will pass when run against a clean Quasar project
describe('Landing', () => {
beforeEach(() => {
cy.visit('/');
cy.visit('/#/login');
});
it('.should() - assert that <title> is correct', () => {
cy.title().should('include', 'Salix');
it('should log in', () => {
cy.get('input[aria-label="Username"]').type('developer')
cy.get('input[aria-label="Password"]').type('nightmare')
cy.get('button[type="submit"]').click()
});
});
// ** The following code is an example to show you how to write some tests for your home page **
//
// describe('Home page tests', () => {
// beforeEach(() => {
// cy.visit('/');
// });
// it('has pretty background', () => {
// cy.dataCy('landing-wrapper')
// .should('have.css', 'background').and('match', /(".+(\/img\/background).+\.png)/);
// });
// it('has pretty logo', () => {
// cy.dataCy('landing-wrapper img')
// .should('have.class', 'logo-main')
// .and('have.attr', 'src')
// .and('match', /^(data:image\/svg\+xml).+/);
// });
// it('has very important information', () => {
// cy.dataCy('instruction-wrapper')
// .should('contain', 'SETUP INSTRUCTIONS')
// .and('contain', 'Configure Authentication')
// .and('contain', 'Database Configuration and CRUD operations')
// .and('contain', 'Continuous Integration & Continuous Deployment CI/CD');
// });
// });