IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2026-02-06 01:46:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(frontend): vue3 migration pre deploy setup (#3366)

Browse Source 
* fix(admin): update test files predeploy

* fix(admin): update test files predeploy

* fix(admin): update test files predeploy
This commit is contained in:
MateuszMichalowski 2024-09-12 18:53:40 +02:00 committed by GitHub
parent b3f031fff4
commit e8277861ec
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
179 changed files with 15630 additions and 21055 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
admin/.eslintrc.js
View File

@ -3,7 +3,6 @@ module.exports = {
env: {
browser: true,
node: true,
jest: true,
'vue/setup-compiler-macros': true,
},
parserOptions: {
@ -17,7 +16,7 @@ module.exports = {
'prettier',
],
// required to lint *.vue files
plugins: ['vue', 'prettier', 'jest'],
plugins: ['vue', 'prettier'],
overrides: [
{
files: ['*.json'],
@ -28,6 +27,7 @@ module.exports = {
rules: {
'no-console': ['error'],
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'node/no-callback-literal': 0, // This is here to allow tests run properly
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
// 'vue/no-static-inline-styles': [
// 'error',

39
admin/jest.config.js
View File

@ -1,39 +0,0 @@
module.exports = {
verbose: true,
collectCoverage: true,
collectCoverageFrom: [
'src/**/*.{js,vue}',
'!**/node_modules/**',
'!src/assets/**',
'!**/?(*.)+(spec|test).js?(x)',
],
coverageThreshold: {
global: {
lines: 95,
},
},
moduleFileExtensions: [
'js',
// 'jsx',
'json',
'vue',
],
// coverageReporters: ['lcov', 'text'],
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1',
'\\.(css|less)$': 'identity-obj-proxy',
},
transform: {
'^.+\\.vue$': 'vue-jest',
'^.+\\.(js|jsx)?$': 'babel-jest',
'<rootDir>/node_modules/vee-validate/dist/rules': 'babel-jest',
},
setupFiles: ['<rootDir>/test/testSetup.js', 'jest-canvas-mock'],
testMatch: ['**/?(*.)+(spec|test).js?(x)'],
// snapshotSerializers: ['jest-serializer-vue'],
transformIgnorePatterns: [
'<rootDir>/node_modules/(?!vee-validate/dist/rules)',
'/node_modules/(?!@babel)',
],
testEnvironment: 'jest-environment-jsdom-sixteen', // why this is still needed? should not be needed anymore since jest@26, see: https://www.npmjs.com/package/jest-environment-jsdom-sixteen
}

27
admin/package.json
View File

@ -14,8 +14,10 @@
"postbuild": "find build -type f -regex '.*\\.\\(html\\|js\\|css\\|svg\\|json\\)' -exec gzip -9 -k {} +",
"lint": "eslint --max-warnings=0 --ext .js,.vue,.json .",
"stylelint": "stylelint --max-warnings=0 '**/*.{scss,vue}'",
"test": "echo Tests are temporarly disabled for migration time",
"test:debug": "node --inspect-brk node_modules/.bin/vue-cli-service test:unit --no-cache --watch --runInBand",
"test": "cross-env TZ=UTC vitest run",
"test:coverage": "cross-env TZ=UTC vitest run --coverage",
"test:debug": "cross-env TZ=UTC node --inspect-brk ./node_modules/vitest/vitest.mjs",
"test:watch": "cross-env TZ=UTC vitest",
"locales": "scripts/sort.sh"
},
"dependencies": {
@ -27,13 +29,10 @@
"@vitejs/plugin-vue": "3.2.0",
"@vue/apollo-composable": "^4.0.2",
"@vue/apollo-option": "^4.0.0",
"@vue/cli-plugin-unit-jest": "~5.0.8",
"@vue/compat": "3.4.31",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/test-utils": "^1.2.2",
"apollo-boost": "^0.4.9",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^27.3.1",
"babel-plugin-component": "^1.1.1",
"babel-preset-env": "^1.7.0",
"babel-preset-vue": "^2.0.2",
@ -45,9 +44,6 @@
"graphql": "^16.9.0",
"graphql-tag": "^2.12.6",
"identity-obj-proxy": "^3.0.0",
"jest": "26.6.3",
"jest-canvas-mock": "^2.3.1",
"jest-environment-jsdom-sixteen": "^2.0.0",
"portal-vue": "3.0.0",
"qrcanvas-vue": "3.0.0",
"regenerator-runtime": "^0.13.9",
@ -57,7 +53,6 @@
"vue": "3.4.31",
"vue-apollo": "3.1.2",
"vue-i18n": "9.13.1",
"vue-jest": "3.0.7",
"vue-router": "4.4.0",
"vuex": "4.1.0",
"vuex-persistedstate": "4.1.0"
@ -65,7 +60,9 @@
"devDependencies": {
"@apollo/client": "^3.10.8",
"@intlify/eslint-plugin-vue-i18n": "^1.4.0",
"@vitest/coverage-v8": "^2.0.5",
"@vue/compiler-sfc": "^3.4.32",
"@vue/test-utils": "^2.4.6",
"babel-plugin-transform-require-context": "^0.1.1",
"cross-env": "^7.0.3",
"eslint": "8.57.0",
@ -73,12 +70,11 @@
"eslint-config-standard": "^16.0.3",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-jest": "^25.2.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "5.2.1",
"eslint-plugin-promise": "^5.1.1",
"eslint-plugin-vue": "8.7.1",
"jest": "29.7.0",
"jsdom": "^25.0.0",
"mock-apollo-client": "^1.2.1",
"postcss": "^8.4.8",
"postcss-html": "^1.3.0",
@ -89,7 +85,9 @@
"stylelint-config-standard-scss": "13.1.0",
"unplugin-icons": "^0.19.0",
"unplugin-vue-components": "^0.27.3",
"vite-plugin-environment": "^1.1.3"
"vite-plugin-environment": "^1.1.3",
"vitest": "^2.0.5",
"vitest-canvas-mock": "^0.3.3"
},
"browserslist": [
"> 1%",
@ -100,5 +98,10 @@
"ignore": [
"**/*.spec.js"
]
},
"resolutions": {
"strip-ansi": "6.0.1",
"string-width": "4.2.2",
"wrap-ansi": "7.0.0"
}
}

71
admin/src/App.spec.js
View File

@ -1,34 +1,63 @@
import { describe, it, expect, beforeEach } from 'vitest'
import { shallowMount } from '@vue/test-utils'
import App from './App'
import { createStore } from 'vuex'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import defaultLayout from '@/layouts/defaultLayout'
const localVue = global.localVue
const router = createRouter({
history: createWebHistory(),
routes: [{ path: '/', component: { template: '<div>Mock Route</div>' } }],
})
const stubs = {
RouterView: true,
}
const mocks = {
$store: {
state: {
token: null,
const createVuexStore = (initialState = { token: null }) => {
return createStore({
state() {
return initialState
},
},
})
}
describe('App', () => {
describe('App.vue', () => {
let store
let wrapper
const Wrapper = () => {
return shallowMount(App, { localVue, stubs, mocks })
const createWrapper = (token = null) => {
store = createVuexStore({ token })
return shallowMount(App, {
global: {
plugins: [store, router],
stubs: {
BToastOrchestrator: true,
BModalOrchestrator: true,
defaultLayout: true,
},
},
})
}
describe('shallowMount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
beforeEach(() => {
wrapper = createWrapper()
})
it('has a div with id "app"', () => {
expect(wrapper.find('div#app').exists()).toBeTruthy()
})
it('div#app is present', () => {
expect(wrapper.find('div#app').exists()).toBe(true)
})
it('renders default layout when token is present', () => {
wrapper = createWrapper('some-token')
expect(wrapper.findComponent(defaultLayout).exists()).toBe(true)
expect(wrapper.find('router-view-stub').exists()).toBe(false)
})
it('does not render defaultLayout when token is not present', () => {
expect(wrapper.findComponent(defaultLayout).exists()).toBe(false)
expect(wrapper.find('router-view-stub').exists()).toBe(true)
})
it('always renders BToastOrchestrator and BModalOrchestrator', () => {
expect(wrapper.findComponent({ name: 'BToastOrchestrator' }).exists()).toBe(true)
expect(wrapper.findComponent({ name: 'BModalOrchestrator' }).exists()).toBe(true)
})
})

848
admin/src/components/ChangeUserRoleFormular.spec.js
View File

@ -1,22 +1,23 @@
import { mount } from '@vue/test-utils'
import ChangeUserRoleFormular from './ChangeUserRoleFormular'
import { setUserRole } from '../graphql/setUserRole'
import { toastSuccessSpy, toastErrorSpy } from '../../test/testSetup'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import ChangeUserRoleFormular from './ChangeUserRoleFormular.vue'
import { useMutation } from '@vue/apollo-composable'
import { useStore } from 'vuex'
const localVue = global.localVue
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
}),
}))
const apolloMutateMock = jest.fn().mockResolvedValue({
data: {
setUserRole: null,
},
})
vi.mock('@vue/apollo-composable', () => ({
useMutation: vi.fn(() => ({
mutate: vi.fn(),
})),
}))
const mocks = {
$t: jest.fn((t) => t),
$apollo: {
mutate: apolloMutateMock,
},
$store: {
vi.mock('vuex', () => ({
useStore: vi.fn(() => ({
state: {
moderator: {
id: 0,
@ -24,648 +25,225 @@ const mocks = {
roles: ['ADMIN'],
},
},
},
})),
}))
vi.mock('@/composables/useToast', () => ({
useAppToast: () => ({
toastSuccess: vi.fn(),
toastError: vi.fn(),
}),
}))
const mockBFormSelect = {
name: 'BFormSelect',
template: '<select data-testid="mock-bformselect"><slot></slot></select>',
props: ['modelValue', 'options'],
}
const mockBButton = {
name: 'BButton',
template: '<button data-testid="mock-bbutton"><slot></slot></button>',
}
let propsData
let wrapper
let spy
describe('ChangeUserRoleFormular', () => {
const Wrapper = () => {
return mount(ChangeUserRoleFormular, { localVue, mocks, propsData })
let wrapper
let propsData
beforeEach(() => {
vi.clearAllMocks()
})
const createWrapper = () => {
return mount(ChangeUserRoleFormular, {
props: propsData,
global: {
stubs: {
BFormSelect: mockBFormSelect,
BButton: mockBButton,
},
mocks: {
$t: (key) => key,
},
},
})
}
describe('mount', () => {
describe('DOM elements', () => {
beforeEach(() => {
jest.clearAllMocks()
propsData = {
item: {
userId: 1,
roles: [],
},
}
wrapper = createWrapper()
})
describe('DOM has', () => {
it('has a DIV element with the class change-user-role-formular', () => {
expect(wrapper.find('.change-user-role-formular').exists()).toBe(true)
})
})
describe('change own role', () => {
beforeEach(() => {
propsData = {
item: {
userId: 0,
roles: ['ADMIN'],
},
}
wrapper = createWrapper()
})
it('has the text that you cannot change own role', () => {
expect(wrapper.text()).toContain('userRole.notChangeYourSelf')
})
it('has no role select', () => {
expect(wrapper.find('[data-testid="mock-bformselect"]').exists()).toBe(false)
})
it('has no button', () => {
expect(wrapper.find('[data-testid="mock-bbutton"]').exists()).toBe(false)
})
})
describe("change other user's role", () => {
beforeEach(() => {
propsData = {
item: {
userId: 1,
roles: [],
},
}
wrapper = createWrapper()
})
it('has no text that you cannot change own role', () => {
expect(wrapper.text()).not.toContain('userRole.notChangeYourSelf')
})
it('has the select label', () => {
expect(wrapper.text()).toContain('userRole.selectLabel')
})
it('has a select', () => {
expect(wrapper.find('[data-testid="mock-bformselect"]').exists()).toBe(true)
})
it('has "change_user_role" button', () => {
const button = wrapper.find('[data-testid="mock-bbutton"]')
expect(button.exists()).toBe(true)
expect(button.text()).toBe('change_user_role')
})
describe('user has role "usual user"', () => {
beforeEach(() => {
propsData = {
item: {
userId: 1,
roles: [],
},
}
wrapper = Wrapper()
propsData.item.roles = ['USER']
wrapper = createWrapper()
})
it('has a DIV element with the class.delete-user-formular', () => {
expect(wrapper.find('.change-user-role-formular').exists()).toBe(true)
})
})
describe('change own role', () => {
beforeEach(() => {
propsData = {
item: {
userId: 0,
roles: ['ADMIN'],
},
}
wrapper = Wrapper()
it('has selected option set to "USER"', () => {
expect(wrapper.vm.roleSelected).toBe('USER')
})
it('has the text that you cannot change own role', () => {
expect(wrapper.text()).toContain('userRole.notChangeYourSelf')
})
it('has no role select', () => {
expect(wrapper.find('select.role-select').exists()).toBe(false)
})
it('has no button', () => {
expect(wrapper.find('button.btn.btn-dange').exists()).toBe(false)
})
})
describe("change other user's role", () => {
let rolesToSelect
describe('general', () => {
beforeEach(() => {
propsData = {
item: {
userId: 1,
roles: [],
},
}
wrapper = Wrapper()
rolesToSelect = wrapper.find('select.role-select').findAll('option')
describe('change select to new role "MODERATOR"', () => {
beforeEach(async () => {
wrapper.vm.roleSelected = 'MODERATOR'
await wrapper.vm.$nextTick()
})
it('has no text that you cannot change own role', () => {
expect(wrapper.text()).not.toContain('userRole.notChangeYourSelf')
it('has "change_user_role" button enabled', () => {
const button = wrapper.find('[data-testid="mock-bbutton"]')
expect(button.attributes('disabled')).toBeFalsy()
})
it('has the select label', () => {
expect(wrapper.text()).toContain('userRole.selectLabel')
})
it('has a select', () => {
expect(wrapper.find('select.role-select').exists()).toBe(true)
})
it('has role select enabled', () => {
expect(wrapper.find('select.role-select[disabled="disabled"]').exists()).toBe(false)
})
it('has "change_user_role" button', () => {
expect(wrapper.find('button.btn.btn-danger').text()).toBe('change_user_role')
})
})
describe('user has role "usual user"', () => {
beforeEach(() => {
apolloMutateMock.mockResolvedValue({
data: {
setUserRole: 'ADMIN',
},
})
propsData = {
item: {
userId: 1,
roles: ['USER'],
},
}
wrapper = Wrapper()
rolesToSelect = wrapper.find('select.role-select').findAll('option')
})
it('has selected option set to "usual user"', () => {
expect(wrapper.find('select.role-select').element.value).toBe('USER')
})
describe('change select to', () => {
describe('same role', () => {
it('has "change_user_role" button disabled', () => {
expect(wrapper.find('button.btn.btn-danger[disabled="disabled"]').exists()).toBe(true)
})
it('does not call the API', () => {
rolesToSelect.at(0).setSelected()
expect(apolloMutateMock).not.toHaveBeenCalled()
})
describe('clicking the "change_user_role" button', () => {
beforeEach(async () => {
await wrapper.find('[data-testid="mock-bbutton"]').trigger('click')
})
describe('new role "MODERATOR"', () => {
beforeEach(() => {
rolesToSelect.at(1).setSelected()
})
it('has "change_user_role" button enabled', () => {
expect(wrapper.find('button.btn.btn-danger').exists()).toBe(true)
expect(wrapper.find('button.btn.btn-danger[disabled="disabled"]').exists()).toBe(
false,
)
})
describe('clicking the "change_user_role" button', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(true))
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('calls the modal', () => {
expect(wrapper.emitted('showModal'))
expect(spy).toHaveBeenCalled()
})
describe('confirm role change with success', () => {
it('calls the API', () => {
expect(apolloMutateMock).toBeCalledWith(
expect.objectContaining({
mutation: setUserRole,
variables: {
userId: 1,
role: 'MODERATOR',
},
}),
)
})
it('emits "updateRoles" with role moderator', () => {
expect(wrapper.emitted('updateRoles')).toEqual(
expect.arrayContaining([
expect.arrayContaining([
{
userId: 1,
roles: ['MODERATOR'],
},
]),
]),
)
})
it('toasts success message', () => {
expect(toastSuccessSpy).toBeCalledWith('userRole.successfullyChangedTo')
})
})
describe('confirm role change with error', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
apolloMutateMock.mockRejectedValue({ message: 'Oh no!' })
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Oh no!')
})
})
})
})
describe('new role "ADMIN"', () => {
beforeEach(() => {
rolesToSelect.at(2).setSelected()
})
it('has "change_user_role" button enabled', () => {
expect(wrapper.find('button.btn.btn-danger').exists()).toBe(true)
expect(wrapper.find('button.btn.btn-danger[disabled="disabled"]').exists()).toBe(
false,
)
})
describe('clicking the "change_user_role" button', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(true))
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('calls the modal', () => {
expect(wrapper.emitted('showModal'))
expect(spy).toHaveBeenCalled()
})
describe('confirm role change with success', () => {
it('calls the API', () => {
expect(apolloMutateMock).toBeCalledWith(
expect.objectContaining({
mutation: setUserRole,
variables: {
userId: 1,
role: 'ADMIN',
},
}),
)
})
it('emits "updateRoles" with role moderator', () => {
expect(wrapper.emitted('updateRoles')).toEqual(
expect.arrayContaining([
expect.arrayContaining([
{
userId: 1,
roles: ['ADMIN'],
},
]),
]),
)
})
it('toasts success message', () => {
expect(toastSuccessSpy).toBeCalledWith('userRole.successfullyChangedTo')
})
})
describe('confirm role change with error', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
apolloMutateMock.mockRejectedValue({ message: 'Oh no!' })
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Oh no!')
})
})
})
it('emits "show-modal" event', () => {
expect(wrapper.emitted('show-modal')).toBeTruthy()
})
})
})
describe('user has role "moderator"', () => {
beforeEach(() => {
apolloMutateMock.mockResolvedValue({
data: {
setUserRole: null,
},
})
propsData = {
item: {
userId: 1,
roles: ['MODERATOR'],
},
}
wrapper = Wrapper()
rolesToSelect = wrapper.find('select.role-select').findAll('option')
})
it('has selected option set to "MODERATOR"', () => {
expect(wrapper.find('select.role-select').element.value).toBe('MODERATOR')
})
describe('change select to', () => {
describe('same role', () => {
it('has "change_user_role" button disabled', () => {
expect(wrapper.find('button.btn.btn-danger[disabled="disabled"]').exists()).toBe(true)
})
it('does not call the API', () => {
rolesToSelect.at(1).setSelected()
expect(apolloMutateMock).not.toHaveBeenCalled()
})
})
describe('new role "USER"', () => {
beforeEach(() => {
rolesToSelect.at(0).setSelected()
})
it('has "change_user_role" button enabled', () => {
expect(wrapper.find('button.btn.btn-danger').exists()).toBe(true)
expect(wrapper.find('button.btn.btn-danger[disabled="disabled"]').exists()).toBe(
false,
)
})
describe('clicking the "change_user_role" button', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(true))
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('calls the modal', () => {
expect(wrapper.emitted('showModal'))
expect(spy).toHaveBeenCalled()
})
describe('confirm role change with success', () => {
it('calls the API', () => {
expect(apolloMutateMock).toBeCalledWith(
expect.objectContaining({
mutation: setUserRole,
variables: {
userId: 1,
role: 'USER',
},
}),
)
})
it('emits "updateRoles"', () => {
expect(wrapper.emitted('updateRoles')).toEqual(
expect.arrayContaining([
expect.arrayContaining([
{
userId: 1,
roles: [],
},
]),
]),
)
})
it('toasts success message', () => {
expect(toastSuccessSpy).toBeCalledWith('userRole.successfullyChangedTo')
})
})
describe('confirm role change with error', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
apolloMutateMock.mockRejectedValue({ message: 'Oh no!' })
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Oh no!')
})
})
})
})
describe('new role "ADMIN"', () => {
beforeEach(() => {
rolesToSelect.at(2).setSelected()
})
it('has "change_user_role" button enabled', () => {
expect(wrapper.find('button.btn.btn-danger').exists()).toBe(true)
expect(wrapper.find('button.btn.btn-danger[disabled="disabled"]').exists()).toBe(
false,
)
})
describe('clicking the "change_user_role" button', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(true))
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('calls the modal', () => {
expect(wrapper.emitted('showModal'))
expect(spy).toHaveBeenCalled()
})
describe('confirm role change with success', () => {
it('calls the API', () => {
expect(apolloMutateMock).toBeCalledWith(
expect.objectContaining({
mutation: setUserRole,
variables: {
userId: 1,
role: 'ADMIN',
},
}),
)
})
it('emits "updateRoles"', () => {
expect(wrapper.emitted('updateRoles')).toEqual(
expect.arrayContaining([
expect.arrayContaining([
{
userId: 1,
roles: ['ADMIN'],
},
]),
]),
)
})
it('toasts success message', () => {
expect(toastSuccessSpy).toBeCalledWith('userRole.successfullyChangedTo')
})
})
describe('confirm role change with error', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
apolloMutateMock.mockRejectedValue({ message: 'Oh no!' })
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Oh no!')
})
})
})
})
})
})
describe('user has role "admin"', () => {
beforeEach(() => {
apolloMutateMock.mockResolvedValue({
data: {
setUserRole: null,
},
})
propsData = {
item: {
userId: 1,
roles: ['ADMIN'],
},
}
wrapper = Wrapper()
rolesToSelect = wrapper.find('select.role-select').findAll('option')
})
it('has selected option set to "admin"', () => {
expect(wrapper.find('select.role-select').element.value).toBe('ADMIN')
})
describe('change select to', () => {
describe('same role', () => {
it('has "change_user_role" button disabled', () => {
expect(wrapper.find('button.btn.btn-danger[disabled="disabled"]').exists()).toBe(true)
})
it('does not call the API', () => {
rolesToSelect.at(1).setSelected()
// TODO: Fix this
expect(apolloMutateMock).not.toHaveBeenCalled()
})
})
describe('new role "USER"', () => {
beforeEach(() => {
rolesToSelect.at(0).setSelected()
})
it('has "change_user_role" button enabled', () => {
expect(wrapper.find('button.btn.btn-danger').exists()).toBe(true)
expect(wrapper.find('button.btn.btn-danger[disabled="disabled"]').exists()).toBe(
false,
)
})
describe('clicking the "change_user_role" button', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(true))
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('calls the modal', () => {
expect(wrapper.emitted('showModal'))
expect(spy).toHaveBeenCalled()
})
describe('confirm role change with success', () => {
it('calls the API', () => {
expect(apolloMutateMock).toBeCalledWith(
expect.objectContaining({
mutation: setUserRole,
variables: {
userId: 1,
role: 'USER',
},
}),
)
})
it('emits "updateRoles"', () => {
expect(wrapper.emitted('updateRoles')).toEqual(
expect.arrayContaining([
expect.arrayContaining([
{
userId: 1,
roles: [],
},
]),
]),
)
})
it('toasts success message', () => {
expect(toastSuccessSpy).toBeCalledWith('userRole.successfullyChangedTo')
})
})
describe('confirm role change with error', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
apolloMutateMock.mockRejectedValue({ message: 'Oh no!' })
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Oh no!')
})
})
})
})
describe('new role "MODERATOR"', () => {
beforeEach(() => {
rolesToSelect.at(1).setSelected()
})
it('has "change_user_role" button enabled', () => {
expect(wrapper.find('button.btn.btn-danger').exists()).toBe(true)
expect(wrapper.find('button.btn.btn-danger[disabled="disabled"]').exists()).toBe(
false,
)
})
describe('clicking the "change_user_role" button', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(true))
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('calls the modal', () => {
expect(wrapper.emitted('showModal'))
expect(spy).toHaveBeenCalled()
})
describe('confirm role change with success', () => {
it('calls the API', () => {
expect(apolloMutateMock).toBeCalledWith(
expect.objectContaining({
mutation: setUserRole,
variables: {
userId: 1,
role: 'MODERATOR',
},
}),
)
})
it('emits "updateRoles"', () => {
expect(wrapper.emitted('updateRoles')).toEqual(
expect.arrayContaining([
expect.arrayContaining([
{
userId: 1,
roles: ['MODERATOR'],
},
]),
]),
)
})
it('toasts success message', () => {
expect(toastSuccessSpy).toBeCalledWith('userRole.successfullyChangedTo')
})
})
describe('confirm role change with error', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
apolloMutateMock.mockRejectedValue({ message: 'Oh no!' })
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Oh no!')
})
})
})
})
})
})
})
describe('authenticated user is MODERATOR', () => {
beforeEach(() => {
mocks.$store.state.moderator.roles = ['MODERATOR']
})
it('displays text with role', () => {
expect(wrapper.text()).toBe('userRole.selectRoles.admin')
})
it('has no role select', () => {
expect(wrapper.find('select.role-select').exists()).toBe(false)
})
it('has no button', () => {
expect(wrapper.find('button.btn.btn-dange').exists()).toBe(false)
})
})
})
describe('authenticated user is MODERATOR', () => {
beforeEach(() => {
vi.mocked(useStore).mockReturnValue({
state: {
moderator: {
id: 0,
name: 'test moderator',
roles: ['MODERATOR'],
},
},
})
propsData = {
item: {
userId: 1,
roles: [],
},
}
wrapper = createWrapper()
})
it('has no role select', () => {
expect(wrapper.find('[data-testid="mock-bformselect"]').exists()).toBe(false)
})
it('has no button', () => {
expect(wrapper.find('[data-testid="mock-bbutton"]').exists()).toBe(false)
})
})
describe('updateUserRole method', () => {
let mockMutate
beforeEach(() => {
mockMutate = vi.fn()
useMutation.mockReturnValue({
mutate: mockMutate,
})
propsData = {
item: {
userId: 1,
roles: ['USER'],
},
}
wrapper = createWrapper()
})
it('calls setUserRole mutation and emits update-roles on success', async () => {
mockMutate.mockResolvedValue({ data: { setUserRole: 'MODERATOR' } })
await wrapper.vm.updateUserRole('MODERATOR', 'USER')
expect(mockMutate).toHaveBeenCalledWith({
userId: 1,
role: 'MODERATOR',
})
expect(wrapper.emitted('update-roles')).toBeTruthy()
expect(wrapper.emitted('update-roles')[0]).toEqual([
{
userId: 1,
roles: ['MODERATOR'],
},
])
})
it('handles error and resets role on failure', async () => {
mockMutate.mockRejectedValue(new Error('API Error'))
await wrapper.vm.updateUserRole('MODERATOR', 'USER')
expect(mockMutate).toHaveBeenCalled()
expect(wrapper.vm.roleSelected).toBe('USER')
expect(wrapper.emitted('update-roles')).toBeFalsy()
})
})
})

2
admin/src/components/ChangeUserRoleFormular.vue
View File

@ -2,7 +2,7 @@
<div class="change-user-role-formular">
<div class="shadow p-3 mb-5 bg-white rounded">
<div v-if="!isModeratorRoleAdmin" class="m-3 mb-4">
{{ roles.find((role) => role.value === currentRole.value).text }}
{{ roles.find((role) => role.value === currentRole.value)?.text }}
</div>
<div v-else-if="item.userId === moderatorId" class="m-3 mb-4">
{{ $t('userRole.notChangeYourSelf') }}

103
admin/src/components/ConfirmRegisterMailFormular.spec.js
View File

@ -1,69 +1,72 @@
import { mount } from '@vue/test-utils'
import ConfirmRegisterMailFormular from './ConfirmRegisterMailFormular'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import ConfirmRegisterMailFormular from './ConfirmRegisterMailFormular.vue'
import { useMutation } from '@vue/apollo-composable'
import { useI18n } from 'vue-i18n'
import { useAppToast } from '@/composables/useToast'
import { toastErrorSpy, toastSuccessSpy } from '../../test/testSetup'
const localVue = global.localVue
const apolloMutateMock = jest.fn().mockResolvedValue()
const mocks = {
$t: jest.fn((t) => t),
$apollo: {
mutate: apolloMutateMock,
},
}
const propsData = {
checked: false,
email: 'bob@baumeister.de',
dateLastSend: '',
}
vi.mock('@vue/apollo-composable')
vi.mock('vue-i18n')
vi.mock('@/composables/useToast')
describe('ConfirmRegisterMailFormular', () => {
let wrapper
const mockMutate = vi.fn()
const mockT = vi.fn((key) => key)
const mockToastSuccess = vi.fn()
const mockToastError = vi.fn()
const Wrapper = () => {
return mount(ConfirmRegisterMailFormular, { localVue, mocks, propsData })
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
beforeEach(() => {
useMutation.mockReturnValue({
mutate: mockMutate,
})
it('has a DIV element with the class.component-confirm-register-mail', () => {
expect(wrapper.find('.component-confirm-register-mail').exists()).toBeTruthy()
useI18n.mockReturnValue({
t: mockT,
})
describe('send register mail with success', () => {
beforeEach(() => {
wrapper.find('button.test-button').trigger('click')
})
useAppToast.mockReturnValue({
toastSuccess: mockToastSuccess,
toastError: mockToastError,
})
it('calls the API with email', () => {
expect(apolloMutateMock).toBeCalledWith(
expect.objectContaining({
variables: { email: 'bob@baumeister.de' },
}),
)
})
wrapper = mount(ConfirmRegisterMailFormular, {
props: {
checked: false,
email: 'bob@baumeister.de',
dateLastSend: '',
},
global: {
mocks: {
$t: mockT,
},
},
})
})
it('toasts a success message', () => {
expect(toastSuccessSpy).toBeCalledWith('unregister_mail.success')
it('renders the component', () => {
expect(wrapper.find('.component-confirm-register-mail').exists()).toBe(true)
})
describe('send register mail', () => {
it('calls the API with email on button click', async () => {
mockMutate.mockResolvedValueOnce({})
await wrapper.find('button.test-button').trigger('click')
expect(mockMutate).toHaveBeenCalledWith({
email: 'bob@baumeister.de',
})
})
describe('send register mail with error', () => {
beforeEach(() => {
apolloMutateMock.mockRejectedValue({ message: 'OUCH!' })
wrapper = Wrapper()
wrapper.find('button.test-button').trigger('click')
})
it('shows success message on successful API call', async () => {
mockMutate.mockResolvedValueOnce({})
await wrapper.find('button.test-button').trigger('click')
expect(mockToastSuccess).toHaveBeenCalledWith('unregister_mail.success')
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('unregister_mail.error')
})
it('shows error message on failed API call', async () => {
mockMutate.mockRejectedValueOnce(new Error('OUCH!'))
await wrapper.find('button.test-button').trigger('click')
expect(mockToastError).toHaveBeenCalledWith('unregister_mail.error')
})
})
})

28
admin/src/components/ContentFooter.spec.js
View File

@ -1,29 +1,15 @@
import { mount } from '@vue/test-utils'
import ContentFooter from './ContentFooter'
const localVue = global.localVue
const mocks = {
$t: jest.fn((t) => t),
$i18n: {
locale: jest.fn(() => 'en'),
},
}
import { describe, it, expect, beforeEach } from 'vitest'
import ContentFooter from './ContentFooter.vue'
describe('ContentFooter', () => {
let wrapper
const Wrapper = () => {
return mount(ContentFooter, { localVue, mocks })
}
beforeEach(() => {
wrapper = mount(ContentFooter, {})
})
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('renders the div element ".content-footer"', () => {
expect(wrapper.find('div.content-footer').exists()).toBe(true)
})
it('renders the footer', () => {
expect(wrapper.find('.content-footer').exists()).toBe(true)
})
})

203
admin/src/components/ContributionLink/ContributionLink.spec.js
View File

@ -1,114 +1,125 @@
import { mount } from '@vue/test-utils'
import ContributionLink from './ContributionLink'
import { describe, it, expect, beforeEach } from 'vitest'
import ContributionLink from './ContributionLink.vue'
import { BButton, BCard, BCardText, BCollapse } from 'bootstrap-vue-next'
const localVue = global.localVue
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
}
const propsData = {
items: [
{
id: 1,
name: 'Meditation',
memo: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l',
amount: '200',
validFrom: '2022-04-01',
validTo: '2022-08-01',
cycle: 'täglich',
maxPerCycle: '3',
maxAmountPerMonth: 0,
link: 'https://localhost/redeem/CL-1a2345678',
},
],
count: 1,
}
const mockItems = [
{
id: 1,
name: 'Meditation',
memo: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l',
amount: '200',
validFrom: '2022-04-01',
validTo: '2022-08-01',
cycle: 'täglich',
maxPerCycle: '3',
maxAmountPerMonth: 0,
link: 'https://localhost/redeem/CL-1a2345678',
},
]
describe('ContributionLink', () => {
let wrapper
const Wrapper = () => {
return mount(ContributionLink, { localVue, mocks, propsData })
const createWrapper = () => {
return mount(ContributionLink, {
props: {
items: mockItems,
count: 1,
},
global: {
mocks: {
$t: (key) => key,
$d: (d) => d,
},
stubs: {
BCard,
BButton,
BCollapse,
BCardText,
ContributionLinkForm: true,
ContributionLinkList: true,
},
},
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = createWrapper()
})
it('renders the Div Element ".contribution-link"', () => {
expect(wrapper.find('div.contribution-link').exists()).toBe(true)
})
it('has ContributionLinkList component when count > 0', () => {
expect(wrapper.findComponent({ name: 'ContributionLinkList' }).exists()).toBe(true)
})
it('shows "no contribution links" message when count is 0', async () => {
await wrapper.setProps({ count: 0 })
expect(wrapper.text()).toContain('contributionLink.noContributionLinks')
})
it('has contribution form not visible by default', () => {
expect(wrapper.vm.visible).toBe(false)
})
describe('click on create new contribution', () => {
beforeEach(async () => {
await wrapper.find('[data-test="new-contribution-link-button"]').trigger('click')
})
it('shows the contribution form', () => {
expect(wrapper.vm.visible).toBe(true)
})
it('hides the form when clicked again', async () => {
await wrapper.find('[data-test="new-contribution-link-button"]').trigger('click')
expect(wrapper.vm.visible).toBe(false)
})
})
describe('edit contribution link', () => {
beforeEach(async () => {
wrapper.vm.editContributionLinkData(mockItems[0])
})
it('shows the contribution form', () => {
expect(wrapper.vm.visible).toBe(true)
})
it('sets editContributionLink to true', () => {
expect(wrapper.vm.editContributionLink).toBe(true)
})
it('sets contributionLinkData', () => {
expect(wrapper.vm.contributionLinkData).toEqual(mockItems[0])
})
it('hides new contribution button', () => {
expect(wrapper.find('[data-test="new-contribution-link-button"]').exists()).toBe(false)
})
})
describe('closeContributionForm', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper.vm.visible = true
wrapper.vm.editContributionLink = true
wrapper.vm.contributionLinkData = mockItems[0]
wrapper.vm.closeContributionForm()
})
it('renders the Div Element ".contribution-link"', () => {
expect(wrapper.find('div.contribution-link').exists()).toBe(true)
it('hides the form', () => {
expect(wrapper.vm.visible).toBe(false)
})
it('has one contribution link in table', () => {
expect(wrapper.find('div.contribution-link-list').find('tbody').findAll('tr')).toHaveLength(1)
it('resets editContributionLink', () => {
expect(wrapper.vm.editContributionLink).toBe(false)
})
it('has contribution form not visible by default', () => {
expect(wrapper.find('#newContribution').isVisible()).toBe(false)
})
describe('click on create new contribution', () => {
beforeEach(async () => {
await wrapper.find('[data-test="new-contribution-link-button"]').trigger('click')
})
it('shows the contribution form', () => {
expect(wrapper.find('#newContribution').isVisible()).toBe(true)
})
describe('click on create new contribution again', () => {
beforeEach(async () => {
await wrapper.find('[data-test="new-contribution-link-button"]').trigger('click')
})
it('closes the contribution form', () => {
expect(wrapper.find('#newContribution').isVisible()).toBe(false)
})
})
describe('click on close button', () => {
beforeEach(async () => {
await wrapper.find('button.btn-secondary').trigger('click')
})
it('closes the contribution form', () => {
expect(wrapper.find('#newContribution').isVisible()).toBe(false)
})
})
})
describe('edit contribution link', () => {
beforeEach(async () => {
await wrapper
.find('div.contribution-link-list')
.find('tbody')
.findAll('tr')
.at(0)
.findAll('button')
.at(1)
.trigger('click')
})
it('shows the contribution form', () => {
expect(wrapper.find('#newContribution').isVisible()).toBe(true)
})
it('does not show the new contribution button', () => {
expect(wrapper.find('[data-test="new-contribution-link-button"]').exists()).toBe(false)
})
describe('click on close button', () => {
beforeEach(async () => {
await wrapper.find('button.btn-secondary').trigger('click')
})
it('closes the contribution form', () => {
expect(wrapper.find('#newContribution').isVisible()).toBe(false)
})
})
it('resets contributionLinkData', () => {
expect(wrapper.vm.contributionLinkData).toEqual({})
})
})
})

261
admin/src/components/ContributionLink/ContributionLinkForm.spec.js
View File

@ -1,144 +1,153 @@
import { mount } from '@vue/test-utils'
import ContributionLinkForm from './ContributionLinkForm'
import { toastErrorSpy, toastSuccessSpy } from '../../../test/testSetup'
import { createContributionLink } from '@/graphql/createContributionLink.js'
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
import ContributionLinkForm from './ContributionLinkForm.vue'
const localVue = global.localVue
// Mock external dependencies
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
}),
}))
global.alert = jest.fn()
const mockMutate = vi.fn()
vi.mock('@vue/apollo-composable', () => ({
useMutation: () => ({
mutate: mockMutate,
}),
}))
const propsData = {
contributionLinkData: {},
editContributionLink: false,
const mockToastError = vi.fn()
const mockToastSuccess = vi.fn()
vi.mock('@/composables/useToast', () => ({
useAppToast: () => ({
toastError: mockToastError,
toastSuccess: mockToastSuccess,
}),
}))
const mockRouter = {
push: vi.fn(),
}
const apolloMutateMock = jest.fn().mockResolvedValue()
const mocks = {
$t: jest.fn((t) => t),
$apollo: {
mutate: apolloMutateMock,
},
}
// const mockAPIcall = jest.fn()
vi.mock('vue-router', () => ({
useRouter: () => mockRouter,
}))
describe('ContributionLinkForm', () => {
let wrapper
const Wrapper = () => {
return mount(ContributionLinkForm, { localVue, mocks, propsData })
const createWrapper = (props = {}) => {
return mount(ContributionLinkForm, {
props: {
contributionLinkData: {},
editContributionLink: false,
...props,
},
global: {
mocks: {
$t: (key) => key,
},
stubs: {
BForm: true,
BRow: true,
BCol: true,
BFormGroup: true,
BFormInput: true,
BFormTextarea: true,
BFormSelect: true,
BButton: true,
},
},
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
beforeEach(() => {
wrapper = createWrapper()
})
it('renders the Div Element ".contribution-link-form"', () => {
expect(wrapper.find('div.contribution-link-form').exists()).toBe(true)
})
afterEach(() => {
vi.clearAllMocks()
})
describe('call onReset', () => {
it('form has the set data', () => {
beforeEach(() => {
wrapper.setData({
form: {
name: 'name',
memo: 'memo',
amount: 100,
validFrom: 'validFrom',
validTo: 'validTo',
cycle: 'ONCE',
maxPerCycle: 1,
maxAmountPerMonth: 100,
},
})
wrapper.vm.onReset()
})
expect(wrapper.vm.form).toEqual({
amount: null,
cycle: 'ONCE',
validTo: null,
maxAmountPerMonth: '0',
memo: null,
name: null,
maxPerCycle: 1,
validFrom: null,
})
})
})
it('renders the Div Element ".contribution-link-form"', () => {
expect(wrapper.find('div.contribution-link-form').exists()).toBe(true)
})
describe('call onSubmit', () => {
it('response with the contribution link url', () => {
wrapper.vm.onSubmit()
})
})
describe('successfull submit', () => {
beforeEach(async () => {
apolloMutateMock.mockResolvedValue({
data: {
createContributionLink: {
link: 'https://localhost/redeem/CL-1a2345678',
},
},
})
await wrapper
.findAllComponents({ name: 'BFormDatepicker' })
.at(0)
.vm.$emit('input', '2022-6-18')
await wrapper
.findAllComponents({ name: 'BFormDatepicker' })
.at(1)
.vm.$emit('input', '2022-7-18')
await wrapper.find('input.test-name').setValue('test name')
await wrapper.find('textarea.test-memo').setValue('test memo')
await wrapper.find('input.test-amount').setValue('100')
await wrapper.find('form').trigger('submit')
})
it('calls the API', () => {
expect(apolloMutateMock).toHaveBeenCalledWith({
mutation: createContributionLink,
variables: {
validFrom: '2022-6-18',
validTo: '2022-7-18',
name: 'test name',
amount: '100',
memo: 'test memo',
cycle: 'ONCE',
maxPerCycle: 1,
maxAmountPerMonth: '0',
id: null,
},
})
})
it('toasts a succes message', () => {
expect(toastSuccessSpy).toBeCalledWith('https://localhost/redeem/CL-1a2345678')
})
})
describe('send createContributionLink with error', () => {
beforeEach(async () => {
apolloMutateMock.mockRejectedValue({ message: 'OUCH!' })
await wrapper
.findAllComponents({ name: 'BFormDatepicker' })
.at(0)
.vm.$emit('input', '2022-6-18')
await wrapper
.findAllComponents({ name: 'BFormDatepicker' })
.at(1)
.vm.$emit('input', '2022-7-18')
await wrapper.find('input.test-name').setValue('test name')
await wrapper.find('textarea.test-memo').setValue('test memo')
await wrapper.find('input.test-amount').setValue('100')
await wrapper.find('form').trigger('submit')
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('OUCH!')
describe('onReset', () => {
it('resets the form data', async () => {
wrapper.vm.form = {
name: 'name',
memo: 'memo',
amount: 100,
validFrom: 'validFrom',
validTo: 'validTo',
cycle: 'ONCE',
maxPerCycle: 1,
maxAmountPerMonth: 100,
}
await wrapper.vm.$nextTick()
await wrapper.vm.onReset()
expect(wrapper.vm.form).toEqual({
validTo: null,
validFrom: null,
})
})
})
describe('onSubmit', () => {
const validFormData = {
validFrom: '2022-6-18',
validTo: '2022-7-18',
name: 'test name',
memo: 'test memo',
amount: '100',
cycle: 'ONCE',
maxPerCycle: 1,
maxAmountPerMonth: '0',
}
beforeEach(async () => {
wrapper.vm.form = validFormData
})
it('calls the API and toasts success message on successful submission', async () => {
mockMutate.mockResolvedValue({
data: {
createContributionLink: {
link: 'https://localhost/redeem/CL-1a2345678',
},
},
})
await wrapper.vm.onSubmit()
expect(mockMutate).toHaveBeenCalledWith({
...validFormData,
id: null,
})
expect(mockToastSuccess).toHaveBeenCalledWith('https://localhost/redeem/CL-1a2345678')
})
it('toasts an error message on API error', async () => {
mockMutate.mockRejectedValue({ message: 'OUCH!' })
await wrapper.vm.onSubmit()
expect(mockToastError).toHaveBeenCalledWith('OUCH!')
})
it('shows error when validFrom is not set', async () => {
wrapper.vm.form = { ...validFormData, validFrom: null }
await wrapper.vm.$nextTick()
await wrapper.vm.onSubmit()
expect(mockToastError).toHaveBeenCalledWith('contributionLink.noStartDate')
})
it('shows error when validTo is not set', async () => {
wrapper.vm.form = { ...validFormData, validTo: null }
await wrapper.vm.$nextTick()
await wrapper.vm.onSubmit()
expect(mockToastError).toHaveBeenCalledWith('contributionLink.noEndDate')
})
})
})

223
admin/src/components/ContributionLink/ContributionLinkList.spec.js
View File

@ -1,147 +1,122 @@
import { mount } from '@vue/test-utils'
import ContributionLinkList from './ContributionLinkList'
import { toastSuccessSpy, toastErrorSpy } from '../../../test/testSetup'
// import { deleteContributionLink } from '../graphql/deleteContributionLink'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import ContributionLinkList from './ContributionLinkList.vue'
import { BButton, BCard, BCardText, BModal, BTable } from 'bootstrap-vue-next'
import * as apolloComposable from '@vue/apollo-composable'
const localVue = global.localVue
vi.mock('vue-i18n', () => ({
useI18n: vi.fn(() => ({
t: (key) => key,
d: (date) => date.toISOString(),
})),
}))
const mockAPIcall = jest.fn()
vi.mock('@vue/apollo-composable', () => ({
useMutation: vi.fn(() => ({
mutate: vi.fn(),
})),
}))
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
$apollo: {
mutate: mockAPIcall,
},
}
const propsData = {
items: [
{
id: 1,
name: 'Meditation',
memo: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l',
amount: '200',
validFrom: '2022-04-01',
validTo: '2022-08-01',
cycle: 'täglich',
maxPerCycle: '3',
maxAmountPerMonth: 0,
link: 'https://localhost/redeem/CL-1a2345678',
},
],
}
// Mock useAppToast
const mockToastError = vi.fn()
const mockToastSuccess = vi.fn()
vi.mock('@/composables/useToast', () => ({
useAppToast: vi.fn(() => ({
toastError: mockToastError,
toastSuccess: mockToastSuccess,
})),
}))
describe('ContributionLinkList', () => {
let wrapper
let mutateMock
const Wrapper = () => {
return mount(ContributionLinkList, { localVue, mocks, propsData })
const createWrapper = () => {
return mount(ContributionLinkList, {
props: {
items: [
{
id: 1,
name: 'Meditation',
memo: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l',
amount: '200',
validFrom: '2022-04-01',
validTo: '2022-08-01',
cycle: 'täglich',
maxPerCycle: '3',
maxAmountPerMonth: 0,
link: 'https://localhost/redeem/CL-1a2345678',
},
],
},
global: {
components: {
BTable,
BButton,
BModal,
BCard,
BCardText,
},
stubs: {
IBiTrash: true,
IBiPencil: true,
IBiEye: true,
FigureQrCode: true,
},
},
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
beforeEach(() => {
vi.clearAllMocks()
mutateMock = vi.fn()
vi.spyOn(apolloComposable, 'useMutation').mockReturnValue({ mutate: mutateMock })
wrapper = createWrapper()
})
it('renders the Div Element ".contribution-link-list"', () => {
expect(wrapper.find('div.contribution-link-list').exists()).toBe(true)
})
it('renders table with contribution link', () => {
expect(wrapper.findComponent({ name: 'BTable' }).exists()).toBe(true)
})
describe('edit contribution link', () => {
it('emits editContributionLinkData', async () => {
await wrapper.vm.editContributionLink({ id: 1 })
expect(wrapper.emitted('edit-contribution-link-data')).toBeTruthy()
})
})
it('renders the Div Element ".contribution-link-list"', () => {
expect(wrapper.find('div.contribution-link-list').exists()).toBe(true)
})
it('renders table with contribution link', () => {
expect(wrapper.findAll('table').at(0).findAll('tbody > tr').at(0).text()).toContain(
'Meditation',
)
})
describe('edit contribution link', () => {
beforeEach(() => {
wrapper.vm.editContributionLink()
})
it('emits editContributionLinkData', async () => {
expect(wrapper.vm.$emit('editContributionLinkData')).toBeTruthy()
})
})
describe('delete contribution link', () => {
let spy
describe('delete contribution link', () => {
describe('with success', () => {
beforeEach(async () => {
jest.clearAllMocks()
wrapper.vm.deleteContributionLink()
mutateMock.mockResolvedValue({})
await wrapper.vm.handleDelete({ item: { id: 1, name: 'Test' } })
await wrapper.vm.executeDelete()
})
describe('with success', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve('some value'))
mockAPIcall.mockResolvedValue()
await wrapper.find('.test-delete-link').trigger('click')
})
it('opens the modal ', () => {
expect(spy).toBeCalled()
})
it.skip('calls the API', () => {
// expect(mockAPIcall).toBeCalledWith(
// expect.objectContaining({
// mutation: deleteContributionLink,
// variables: {
// id: 1,
// },
// }),
// )
})
it('toasts a success message', () => {
expect(toastSuccessSpy).toBeCalledWith('contributionLink.deleted')
})
it('calls the mutation and emits events', async () => {
expect(mutateMock).toHaveBeenCalledWith({ id: 1 })
expect(wrapper.emitted('close-contribution-form')).toBeTruthy()
expect(wrapper.emitted('get-contribution-links')).toBeTruthy()
})
describe('with error', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve('some value'))
mockAPIcall.mockRejectedValue({ message: 'Something went wrong :(' })
await wrapper.find('.test-delete-link').trigger('click')
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Something went wrong :(')
})
})
describe('cancel delete', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(false))
mockAPIcall.mockResolvedValue()
await wrapper.find('.test-delete-link').trigger('click')
})
it('does not call the API', () => {
expect(mockAPIcall).not.toBeCalled()
})
it('toasts a success message', () => {
expect(mockToastSuccess).toHaveBeenCalledWith('contributionLink.deleted')
})
})
describe('onClick showButton', () => {
it('modelData contains contribution link', () => {
wrapper.find('button.test-show').trigger('click')
expect(wrapper.vm.modalData).toEqual({
amount: '200',
cycle: 'täglich',
id: 1,
link: 'https://localhost/redeem/CL-1a2345678',
maxAmountPerMonth: 0,
maxPerCycle: '3',
memo: 'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut l',
name: 'Meditation',
validFrom: '2022-04-01',
validTo: '2022-08-01',
})
describe('with error', () => {
beforeEach(async () => {
mutateMock.mockRejectedValue(new Error('Something went wrong :('))
await wrapper.vm.handleDelete({ item: { id: 1, name: 'Test' } })
await wrapper.vm.executeDelete()
})
it('toasts an error message', () => {
expect(mockToastError).toHaveBeenCalledWith('Something went wrong :(')
})
})
})

372
admin/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
View File

@ -1,247 +1,161 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { nextTick } from 'vue'
import ContributionMessagesFormular from './ContributionMessagesFormular'
import { toastErrorSpy, toastSuccessSpy } from '../../../test/testSetup'
import { adminCreateContributionMessage } from '@/graphql/adminCreateContributionMessage'
import { adminUpdateContribution } from '@/graphql/adminUpdateContribution'
import { BButton, BForm } from 'bootstrap-vue-next'
const localVue = global.localVue
const mockToastError = vi.fn()
vi.mock('@/composables/useToast', () => ({
useAppToast: () => ({
toastError: mockToastError,
toastSuccess: vi.fn(),
}),
}))
const apolloMutateMock = jest.fn().mockResolvedValue()
const mockMutate = vi.fn().mockResolvedValue({})
vi.mock('@vue/apollo-composable', () => ({
useMutation: () => ({
mutate: mockMutate,
}),
}))
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
}),
}))
const mockChildComponents = {
BForm,
BFormGroup: { template: '<div><slot /></div>' },
BFormCheckbox: { template: '<div></div>' },
BFormInput: { template: '<input />' },
BTabs: { template: '<div><slot /></div>' },
BTab: { template: '<div><slot /></div>' },
BTooltip: { template: '<div></div>' },
BFormTextarea: { template: '<textarea></textarea>' },
BRow: { template: '<div><slot /></div>' },
BCol: { template: '<div><slot /></div>' },
BButton,
TimePicker: { template: '<div></div>' },
}
describe('ContributionMessagesFormular', () => {
let wrapper
const propsData = {
contributionId: 42,
contributionMemo: 'It is a test memo',
hideResubmission: true,
}
const mocks = {
$t: jest.fn((t) => t),
$apollo: {
mutate: apolloMutateMock,
},
$i18n: {
locale: 'en',
},
}
const Wrapper = () => {
const createWrapper = (props = {}) => {
return mount(ContributionMessagesFormular, {
localVue,
mocks,
propsData,
global: {
components: mockChildComponents,
mocks: {
$route: {
params: { id: '1' },
},
},
},
props: {
contributionId: 42,
contributionMemo: 'It is a test memo',
hideResubmission: true,
...props,
},
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
jest.clearAllMocks()
})
beforeEach(() => {
vi.clearAllMocks()
})
it('has a DIV .contribution-messages-formular', () => {
expect(wrapper.find('div.contribution-messages-formular').exists()).toBe(true)
})
it('renders the component', () => {
wrapper = createWrapper()
expect(wrapper.find('.contribution-messages-formular').exists()).toBe(true)
})
describe('on trigger reset', () => {
beforeEach(async () => {
wrapper.setData({
form: {
text: 'text form message',
},
})
await wrapper.find('form').trigger('reset')
})
it('resets form on reset event', async () => {
wrapper = createWrapper()
wrapper.vm.form.text = 'text form message'
wrapper.vm.form.memo = 'changed memo'
it('form has empty text and memo reset to contribution memo input', () => {
expect(wrapper.vm.form).toEqual({
text: '',
memo: 'It is a test memo',
})
})
})
describe('on trigger submit', () => {
beforeEach(async () => {
wrapper.setData({
form: {
text: 'text form message',
},
})
await wrapper.find('form').trigger('submit')
})
it('emitted "get-list-contribution-messages" with data', async () => {
expect(wrapper.emitted('get-list-contribution-messages')).toEqual(
expect.arrayContaining([expect.arrayContaining([42])]),
)
})
it('emitted "update-status" with data', async () => {
expect(wrapper.emitted('update-status')).toEqual(
expect.arrayContaining([expect.arrayContaining([42])]),
)
})
})
describe('send DIALOG contribution message with success', () => {
beforeEach(async () => {
await wrapper.setData({
form: {
text: 'text form message',
},
})
await wrapper.find('button[data-test="submit-dialog"]').trigger('click')
})
it('moderatorMessage has `DIALOG`', () => {
expect(apolloMutateMock).toBeCalledWith({
mutation: adminCreateContributionMessage,
variables: {
contributionId: 42,
message: 'text form message',
messageType: 'DIALOG',
resubmissionAt: null,
},
})
})
it('toasts an success message', () => {
expect(toastSuccessSpy).toBeCalledWith('message.request')
})
})
describe('send MODERATOR contribution message with success', () => {
beforeEach(async () => {
await wrapper.setData({
form: {
text: 'text form message',
},
})
// choose tab
// tabs: text | moderator | memo
// 0 | 1 | 2
await wrapper
.find('div[data-test="message-type-tabs"]')
.findAll('.nav-item a')
.at(1)
.trigger('click')
// click save
await wrapper.find('button[data-test="submit-dialog"]').trigger('click')
})
it('moderatorMesage has `MODERATOR`', () => {
expect(apolloMutateMock).toBeCalledWith({
mutation: adminCreateContributionMessage,
variables: {
contributionId: 42,
message: 'text form message',
messageType: 'MODERATOR',
resubmissionAt: null,
},
})
})
it('toasts an success message', () => {
expect(toastSuccessSpy).toBeCalledWith('message.request')
})
})
describe('send resubmission contribution message with success', () => {
const futureDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000) // 7 days in milliseconds
beforeEach(async () => {
await wrapper.setData({
form: {
text: 'text form message',
},
showResubmissionDate: true,
resubmissionDate: futureDate,
resubmissionTime: '08:46',
})
await wrapper.find('button[data-test="submit-dialog"]').trigger('click')
})
it('graphql payload contain resubmission date', () => {
const futureDateExactTime = futureDate
futureDateExactTime.setHours(8)
futureDateExactTime.setMinutes(46)
expect(apolloMutateMock).toBeCalledWith({
mutation: adminCreateContributionMessage,
variables: {
contributionId: 42,
message: 'text form message',
messageType: 'DIALOG',
resubmissionAt: futureDateExactTime.toString(),
},
})
})
it('toasts an success message', () => {
expect(toastSuccessSpy).toBeCalledWith('message.request')
})
})
describe('set memo', () => {
beforeEach(async () => {
// choose tab
// tabs: text | moderator | memo
// 0 | 1 | 2
await wrapper
.find('div[data-test="message-type-tabs"]')
.findAll('.nav-item a')
.at(2)
.trigger('click')
// click save
await wrapper.find('button[data-test="submit-dialog"]').trigger('click')
})
it('check tabindex value is 2', () => {
expect(wrapper.vm.tabindex).toBe(2)
})
})
describe('update contribution memo from moderator for user created contributions', () => {
beforeEach(async () => {
await wrapper.setData({
form: {
memo: 'changed memo',
},
tabindex: 2,
})
await wrapper.find('button[data-test="submit-dialog"]').trigger('click')
})
it('adminUpdateContribution was called with contributionId and updated memo', () => {
expect(apolloMutateMock).toBeCalledWith({
mutation: adminUpdateContribution,
variables: {
id: 42,
memo: 'changed memo',
resubmissionAt: null,
},
})
})
it('toasts an success message', () => {
expect(toastSuccessSpy).toBeCalledWith('message.request')
})
})
describe('send contribution message with error', () => {
beforeEach(async () => {
apolloMutateMock.mockRejectedValue({ message: 'OUCH!' })
wrapper = Wrapper()
await wrapper.find('form').trigger('submit')
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('OUCH!')
})
await wrapper.find('form').trigger('reset')
await nextTick()
expect(wrapper.vm.form).toEqual({
text: '',
memo: 'It is a test memo',
})
})
it('submits form and emits events', async () => {
wrapper = createWrapper()
wrapper.vm.form.text = 'text form message'
await wrapper.find('form').trigger('submit')
await nextTick()
expect(wrapper.emitted('get-list-contribution-messages')).toBeTruthy()
expect(wrapper.emitted('get-list-contribution-messages')[0]).toEqual([42])
expect(wrapper.emitted('update-status')).toBeTruthy()
expect(wrapper.emitted('update-status')[0]).toEqual([42])
})
it('sends DIALOG contribution message', async () => {
wrapper = createWrapper()
wrapper.vm.form.text = 'text form message'
const onSubmitSpy = vi.spyOn(wrapper.vm, 'onSubmit')
await wrapper.vm.$nextTick()
await wrapper.find('button[type="submit"]').trigger('click')
expect(onSubmitSpy).toHaveBeenCalled()
})
it('sends MODERATOR contribution message', async () => {
wrapper = createWrapper()
const onSubmitSpy = vi.spyOn(wrapper.vm, 'onSubmit')
wrapper.vm.form.text = 'text form message'
wrapper.vm.tabindex = 1
await wrapper.vm.$nextTick()
await wrapper.find('button[type="submit"]').trigger('click')
expect(onSubmitSpy).toHaveBeenCalled()
})
it('sends resubmission contribution message', async () => {
const futureDate = new Date(Date.now() + 7 * 24 * 60 * 60 * 1000)
wrapper = createWrapper()
const onSubmitSpy = vi.spyOn(wrapper.vm, 'onSubmit')
wrapper.vm.form.text = 'text form message'
wrapper.vm.showResubmissionDate = true
wrapper.vm.resubmissionDate = futureDate
wrapper.vm.resubmissionTime = '08:46'
await wrapper.vm.$nextTick()
await wrapper.find('button[type="submit"]').trigger('click')
expect(onSubmitSpy).toHaveBeenCalled()
})
it('updates contribution memo', async () => {
wrapper = createWrapper()
const onSubmitSpy = vi.spyOn(wrapper.vm, 'onSubmit')
wrapper.vm.form.memo = 'changed memo'
wrapper.vm.tabindex = 2
await wrapper.vm.$nextTick()
await wrapper.find('button[type="submit"]').trigger('click')
await nextTick()
expect(onSubmitSpy).toHaveBeenCalled()
})
it('handles error when sending contribution message', async () => {
const mockError = new Error('OUCH!')
wrapper = createWrapper()
mockMutate.mockRejectedValue(mockError)
await wrapper.find('form').trigger('submit')
await nextTick()
expect(mockToastError).toHaveBeenCalledWith('OUCH!')
})
})

289
admin/src/components/ContributionMessages/ContributionMessagesList.spec.js
View File

@ -1,170 +1,167 @@
import { mount } from '@vue/test-utils'
import ContributionMessagesList from './ContributionMessagesList'
import VueApollo from 'vue-apollo'
import { createMockClient } from 'mock-apollo-client'
import { adminListContributionMessages } from '../../graphql/adminListContributionMessages.js'
import { toastErrorSpy } from '../../../test/testSetup'
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
import { ref } from 'vue'
import ContributionMessagesList from './ContributionMessagesList.vue'
import { useQuery } from '@vue/apollo-composable'
import { useAppToast } from '@/composables/useToast'
import { BContainer } from 'bootstrap-vue-next'
const mockClient = createMockClient()
const apolloProvider = new VueApollo({
defaultClient: mockClient,
})
const localVue = global.localVue
localVue.use(VueApollo)
const defaultData = () => {
vi.mock('vue', async () => {
const actual = await vi.importActual('vue')
return {
adminListContributionMessages: {
count: 4,
messages: [
{
id: 43,
message: 'A DIALOG message',
createdAt: new Date().toString(),
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Peter',
userLastName: 'Lustig',
userId: 1,
isModerator: true,
},
{
id: 44,
message: 'Another DIALOG message',
createdAt: new Date().toString(),
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Bibi',
userLastName: 'Bloxberg',
userId: 2,
isModerator: false,
},
{
id: 45,
message: `DATE
---
A HISTORY message
---
AMOUNT`,
createdAt: new Date().toString(),
updatedAt: null,
type: 'HISTORY',
userFirstName: 'Bibi',
userLastName: 'Bloxberg',
userId: 2,
isModerator: false,
},
{
id: 46,
message: 'A MODERATOR message',
createdAt: new Date().toString(),
updatedAt: null,
type: 'MODERATOR',
userFirstName: 'Peter',
userLastName: 'Lustig',
userId: 1,
isModerator: true,
},
],
},
...actual,
ref: vi.fn(actual.ref),
}
})
vi.mock('@vue/apollo-composable')
vi.mock('@/composables/useToast')
const defaultData = {
adminListContributionMessages: {
count: 4,
messages: [
{
id: 43,
message: 'A DIALOG message',
createdAt: new Date().toString(),
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Peter',
userLastName: 'Lustig',
userId: 1,
isModerator: true,
},
{
id: 44,
message: 'Another DIALOG message',
createdAt: new Date().toString(),
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Bibi',
userLastName: 'Bloxberg',
userId: 2,
isModerator: false,
},
{
id: 45,
message: `DATE\n---\nA HISTORY message\n---\nAMOUNT`,
createdAt: new Date().toString(),
updatedAt: null,
type: 'HISTORY',
userFirstName: 'Bibi',
userLastName: 'Bloxberg',
userId: 2,
isModerator: false,
},
{
id: 46,
message: 'A MODERATOR message',
createdAt: new Date().toString(),
updatedAt: null,
type: 'MODERATOR',
userFirstName: 'Peter',
userLastName: 'Lustig',
userId: 1,
isModerator: true,
},
],
},
}
describe('ContributionMessagesList', () => {
let wrapper
let mockMessages
const mockRefetch = vi.fn()
const mockToastError = vi.fn()
const adminListContributionMessagessMock = jest.fn()
beforeEach(async () => {
vi.clearAllMocks()
mockClient.setRequestHandler(
adminListContributionMessages,
adminListContributionMessagessMock
.mockRejectedValueOnce({ message: 'Auaa!' })
.mockResolvedValue({ data: defaultData() }),
)
mockMessages = ref([])
ref.mockReturnValueOnce(mockMessages)
const propsData = {
contributionId: 42,
contributionMemo: 'test memo',
contributionUserId: 108,
contributionStatus: 'PENDING',
hideResubmission: true,
}
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
$n: jest.fn((n) => n),
$i18n: {
locale: 'en',
},
}
const Wrapper = () => {
return mount(ContributionMessagesList, {
localVue,
mocks,
propsData,
apolloProvider,
})
}
describe('mount', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = Wrapper()
useQuery.mockReturnValue({
onResult: vi.fn((callback) => callback({ result: defaultData })),
onError: vi.fn(),
result: { value: defaultData },
refetch: mockRefetch,
})
describe('server response for admin list contribution messages is error', () => {
it('toast an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Auaa!')
})
useAppToast.mockReturnValue({
toastError: mockToastError,
})
describe('server response is succes', () => {
it('has a DIV .contribution-messages-list', () => {
expect(wrapper.find('div.contribution-messages-list').exists()).toBe(true)
})
it('has 4 messages', () => {
expect(wrapper.findAll('div.contribution-messages-list-item')).toHaveLength(4)
})
it('has a Component ContributionMessagesFormular', () => {
expect(wrapper.findComponent({ name: 'ContributionMessagesFormular' }).exists()).toBe(true)
})
wrapper = mount(ContributionMessagesList, {
props: {
contributionId: 42,
contributionMemo: 'test memo',
contributionUserId: 108,
contributionStatus: 'PENDING',
hideResubmission: true,
},
global: {
components: {
BContainer,
},
mocks: {
$t: (key) => key,
$d: (date) => date,
$n: (number) => number,
},
stubs: {
'contribution-messages-list-item': true,
'contribution-messages-formular': true,
},
},
})
describe('call updateStatus', () => {
beforeEach(() => {
wrapper.vm.updateStatus(4)
})
await wrapper.vm.$nextTick()
})
it('emits update-status', () => {
expect(wrapper.vm.$root.$emit('update-status', 4)).toBeTruthy()
})
})
afterEach(() => {
wrapper.unmount()
})
describe('test reload-contribution', () => {
beforeEach(() => {
wrapper.vm.reloadContribution(3)
})
it('renders the component', () => {
expect(wrapper.find('.contribution-messages-list').exists()).toBe(true)
})
it('emits reload-contribution', () => {
expect(wrapper.emitted('reload-contribution')).toBeTruthy()
expect(wrapper.emitted('reload-contribution')[0]).toEqual([3])
})
})
it('renders the correct number of messages', async () => {
wrapper.vm.messages = defaultData.adminListContributionMessages.messages
await wrapper.vm.$nextTick()
expect(wrapper.findAll('contribution-messages-list-item-stub')).toHaveLength(4)
})
describe('test update-contributions', () => {
beforeEach(() => {
wrapper.vm.updateContributions()
})
it('renders the ContributionMessagesFormular when status is PENDING', () => {
expect(wrapper.find('contribution-messages-formular-stub').exists()).toBe(true)
})
it('emits update-contributions', () => {
expect(wrapper.emitted('update-contributions')).toBeTruthy()
})
})
it('does not render the ContributionMessagesFormular when status is not PENDING or IN_PROGRESS', async () => {
await wrapper.setProps({ contributionStatus: 'COMPLETED' })
expect(wrapper.find('contribution-messages-formular-stub').exists()).toBe(false)
})
it('updates messages when result changes', async () => {
const newMessages = [{ id: 1, message: 'New message' }]
mockMessages.value = newMessages
await wrapper.vm.$nextTick()
expect(wrapper.findAll('contribution-messages-list-item-stub')).toHaveLength(1)
})
it('emits update-status event', async () => {
await wrapper.vm.updateStatus(4)
expect(wrapper.emitted('update-status')).toBeTruthy()
expect(wrapper.emitted('update-status')[0]).toEqual([4])
})
it('emits reload-contribution event', async () => {
await wrapper.vm.reloadContribution(3)
expect(wrapper.emitted('reload-contribution')).toBeTruthy()
expect(wrapper.emitted('reload-contribution')[0]).toEqual([3])
})
it('emits update-contributions event', async () => {
await wrapper.vm.updateContributions()
expect(wrapper.emitted('update-contributions')).toBeTruthy()
})
})

339
admin/src/components/ContributionMessages/slots/ContributionMessagesListItem.spec.js
View File

@ -1,260 +1,155 @@
import { mount } from '@vue/test-utils'
import ContributionMessagesListItem from './ContributionMessagesListItem'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import ContributionMessagesListItem from './ContributionMessagesListItem.vue'
const localVue = global.localVue
vi.mock('@/components/ContributionMessages/ParseMessage', () => ({
default: {
name: 'ParseMessage',
template: '<div>{{ message }}</div>',
props: ['message'],
},
}))
const dateMock = jest.fn((d) => d)
const numberMock = jest.fn((n) => n)
describe('ContributionMessagesListItem', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$d: dateMock,
$n: numberMock,
$store: {
state: {
moderator: {
firstName: 'Peter',
lastName: 'Lustig',
const createWrapper = (propsData) => {
return mount(ContributionMessagesListItem, {
props: propsData,
global: {
mocks: {
$t: (key) => key,
$d: vi.fn((date) => date.toISOString()),
$n: vi.fn((n) => n.toString()),
$store: {
state: {
moderator: {
firstName: 'Peter',
lastName: 'Lustig',
},
},
},
},
},
}
describe('if message author has moderator role', () => {
const propsData = {
contributionId: 42,
contributionUserId: 108,
state: 'PENDING',
message: {
id: 111,
message: 'Lorem ipsum?',
createdAt: '2022-08-29T12:23:27.000Z',
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Peter',
userLastName: 'Lustig',
userId: 107,
isModerator: true,
__typename: 'ContributionMessage',
stubs: {
BAvatar: true,
VariantIcon: true,
},
}
},
})
}
const ModeratorItemWrapper = () => {
return mount(ContributionMessagesListItem, {
localVue,
mocks,
propsData,
})
}
describe('ContributionMessagesListItem', () => {
describe('if message author has moderator role', () => {
let wrapper
describe('mount', () => {
beforeAll(() => {
wrapper = ModeratorItemWrapper()
beforeEach(() => {
wrapper = createWrapper({
contributionUserId: 108,
message: {
id: 111,
message: 'Lorem ipsum?',
createdAt: '2022-08-29T12:23:27.000Z',
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Peter',
userLastName: 'Lustig',
userId: 107,
isModerator: true,
},
})
})
it('has a DIV .text-end.is-moderator', () => {
expect(wrapper.find('div.text-end.is-moderator').exists()).toBe(true)
})
it('has a DIV .text-end.is-moderator', () => {
expect(wrapper.find('div.text-end.is-moderator').exists()).toBe(true)
})
it('has the complete user name', () => {
expect(wrapper.find('[data-test="moderator-name"]').text()).toBe('Peter Lustig')
})
it('has the complete user name', () => {
expect(wrapper.find('[data-test="moderator-name"]').text()).toBe('Peter Lustig')
})
it('has the message creation date', () => {
expect(wrapper.find('[data-test="moderator-date"]').text()).toMatch(
'Mon Aug 29 2022 12:23:27 GMT+0000',
)
})
it('has the message creation date', () => {
expect(wrapper.find('[data-test="moderator-date"]').text()).toBe('2022-08-29T12:23:27.000Z')
})
it('has the moderator label', () => {
expect(wrapper.find('[data-test="moderator-label"]').text()).toBe('moderator.moderator')
})
it('has the moderator label', () => {
expect(wrapper.find('[data-test="moderator-label"]').text()).toBe('moderator.moderator')
})
it('has the message', () => {
expect(wrapper.find('[data-test="moderator-message"]').text()).toBe('Lorem ipsum?')
})
it('has the message', () => {
expect(wrapper.find('[data-test="moderator-message"]').text()).toBe('Lorem ipsum?')
})
})
describe('if message author does not have moderator role', () => {
const propsData = {
contributionId: 42,
contributionUserId: 108,
state: 'PENDING',
message: {
id: 113,
message: 'Asda sdad ad asdasd, das Ass das Das. ',
createdAt: '2022-08-29T12:25:34.000Z',
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Bibi',
userLastName: 'Bloxberg',
userId: 108,
__typename: 'ContributionMessage',
},
}
let wrapper
const ItemWrapper = () => {
return mount(ContributionMessagesListItem, {
localVue,
mocks,
propsData,
})
}
describe('mount', () => {
beforeAll(() => {
wrapper = ItemWrapper()
})
it('has a DIV .text-start.is-not-moderator', () => {
expect(wrapper.find('div.text-start.is-user').exists()).toBe(true)
})
it('has the complete user name', () => {
expect(wrapper.find('[data-test="user-name"]').text()).toBe('Bibi Bloxberg')
})
it('has the message creation date', () => {
expect(wrapper.find('[data-test="user-date"]').text()).toMatch(
'Mon Aug 29 2022 12:25:34 GMT+0000',
)
})
it('has the message', () => {
expect(wrapper.find('[data-test="user-message"]').text()).toBe(
'Asda sdad ad asdasd, das Ass das Das.',
)
})
})
})
describe('links in contribtion message', () => {
const propsData = {
contributionUserId: 108,
message: {
id: 111,
message: 'Lorem ipsum?',
createdAt: '2022-08-29T12:23:27.000Z',
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Peter',
userLastName: 'Lustig',
userId: 107,
__typename: 'ContributionMessage',
},
}
const ModeratorItemWrapper = () => {
return mount(ContributionMessagesListItem, {
localVue,
mocks,
propsData,
})
}
let messageField
describe('message of only one link', () => {
beforeEach(() => {
propsData.message.message = 'https://gradido.net/de/'
wrapper = ModeratorItemWrapper()
messageField = wrapper.find('[data-test="moderator-message"]')
})
it('contains the link as text', () => {
expect(messageField.text()).toBe('https://gradido.net/de/')
})
it('contains a link to the given address', () => {
expect(messageField.find('a').attributes('href')).toBe('https://gradido.net/de/')
beforeEach(() => {
wrapper = createWrapper({
contributionUserId: 108,
message: {
id: 113,
message: 'Asda sdad ad asdasd, das Ass das Das.',
createdAt: '2022-08-29T12:25:34.000Z',
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Bibi',
userLastName: 'Bloxberg',
userId: 108,
},
})
})
describe('message with text and two links', () => {
beforeEach(() => {
propsData.message.message = `Here you find all you need to know about Gradido: https://gradido.net/de/
and here is the link to the repository: https://github.com/gradido/gradido`
wrapper = ModeratorItemWrapper()
messageField = wrapper.find('[data-test="moderator-message"]')
})
it('has a DIV .text-start.is-user', () => {
expect(wrapper.find('div.text-start.is-user').exists()).toBe(true)
})
it('contains the whole text', () => {
expect(messageField.text())
.toBe(`Here you find all you need to know about Gradido: https://gradido.net/de/
and here is the link to the repository: https://github.com/gradido/gradido`)
})
it('has the complete user name', () => {
expect(wrapper.find('[data-test="user-name"]').text()).toBe('Bibi Bloxberg')
})
it('contains the two links', () => {
expect(messageField.findAll('a').at(0).attributes('href')).toBe('https://gradido.net/de/')
expect(messageField.findAll('a').at(1).attributes('href')).toBe(
'https://github.com/gradido/gradido',
)
})
it('has the message creation date', () => {
expect(wrapper.find('[data-test="user-date"]').text()).toBe('2022-08-29T12:25:34.000Z')
})
it('has the message', () => {
expect(wrapper.find('[data-test="user-message"]').text()).toBe(
'Asda sdad ad asdasd, das Ass das Das.',
)
})
})
describe('contribution message type HISTORY', () => {
const propsData = {
contributionUserId: 108,
message: {
id: 111,
message: `Sun Nov 13 2022 13:05:48 GMT+0100 (Central European Standard Time)
let wrapper
beforeEach(() => {
wrapper = createWrapper({
contributionUserId: 108,
message: {
id: 111,
message: `Sun Nov 13 2022 13:05:48 GMT+0100 (Central European Standard Time)
---
This message also contains a link: https://gradido.net/de/
---
350.00`,
createdAt: '2022-08-29T12:23:27.000Z',
updatedAt: null,
type: 'HISTORY',
userFirstName: 'Peter',
userLastName: 'Lustig',
userId: 107,
__typename: 'ContributionMessage',
},
}
const itemWrapper = () => {
return mount(ContributionMessagesListItem, {
localVue,
mocks,
propsData,
createdAt: '2022-08-29T12:23:27.000Z',
updatedAt: null,
type: 'HISTORY',
userFirstName: 'Peter',
userLastName: 'Lustig',
userId: 107,
},
})
}
})
let messageField
it('renders the history label', () => {
expect(wrapper.text()).toContain('moderator.history')
})
describe('render HISTORY message', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = itemWrapper()
messageField = wrapper
})
it('renders the date', () => {
expect(dateMock).toBeCalledWith(
new Date('Sun Nov 13 2022 13:05:48 GMT+0100 (Central European Standard Time'),
'short',
)
})
it('renders the amount', () => {
expect(numberMock).toBeCalledWith(350, 'decimal')
expect(messageField.text()).toContain('350 GDD')
})
it('contains the link as text', () => {
expect(messageField.text()).toContain(
'This message also contains a link: https://gradido.net/de/',
)
})
it('contains a link to the given address', () => {
expect(messageField.find('a').attributes('href')).toBe('https://gradido.net/de/')
})
it('renders the message', () => {
expect(wrapper.find('[data-test="moderator-message"]').text()).toContain(
'Sun Nov 13 2022 13:05:48 GMT+0100 (Central European Standard Time)',
)
expect(wrapper.find('[data-test="moderator-message"]').text()).toContain(
'This message also contains a link: https://gradido.net/de/',
)
expect(wrapper.find('[data-test="moderator-message"]').text()).toContain('350.00')
})
})
})

479
admin/src/components/CreationFormular.spec.js
View File

@ -1,364 +1,147 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import CreationFormular from './CreationFormular'
import { adminCreateContribution } from '../graphql/adminCreateContribution'
import { toastErrorSpy, toastSuccessSpy } from '../../test/testSetup'
import VueApollo from 'vue-apollo'
import { createMockClient } from 'mock-apollo-client'
import { adminOpenCreations } from '../graphql/adminOpenCreations'
import { nextTick, ref } from 'vue'
import CreationFormular from './CreationFormular.vue'
import { BFormRadioGroup } from 'bootstrap-vue-next'
const mockClient = createMockClient()
const apolloProvider = new VueApollo({
defaultClient: mockClient,
})
const localVue = global.localVue
localVue.use(VueApollo)
const stateCommitMock = jest.fn()
const mocks = {
$t: jest.fn((t, options) => (options ? [t, options] : t)),
$d: jest.fn((d) => {
const date = new Date(d)
return date.toISOString().split('T')[0]
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
}),
$store: {
commit: stateCommitMock,
},
}
}))
const propsData = {
type: '',
creation: [],
}
vi.mock('@/composables/useToast', () => ({
useAppToast: () => ({
toastError: vi.fn(),
toastSuccess: vi.fn(),
}),
}))
const now = new Date()
vi.mock('@vue/apollo-composable', () => ({
useMutation: () => ({
mutate: vi.fn(),
}),
useQuery: () => ({
refetch: vi.fn(),
}),
}))
const getCreationDate = (sub) => {
const date = sub === 0 ? now : new Date(now.getFullYear(), now.getMonth() - sub, 1, 0)
return date.toISOString().split('T')[0]
vi.mock('vuex', () => ({
useStore: () => ({
commit: vi.fn(),
}),
}))
vi.mock('../composables/useCreationMonths', () => ({
default: () => ({
creationDateObjects: ref([
{ short: 'Jan', year: '2024', date: '2024-01-01' },
{ short: 'Feb', year: '2024', date: '2024-02-01' },
]),
}),
}))
const mockChildComponents = {
BForm: { template: '<div><slot></slot></div>' },
BFormRadioGroup,
BInputGroup: { template: '<div><slot></slot></div>' },
BFormInput: { template: '<input />', props: ['modelValue'] },
BFormTextarea: { template: '<textarea></textarea>', props: ['modelValue'] },
BButton: { template: '<button type="button"></button>' },
}
describe('CreationFormular', () => {
let wrapper
const adminOpenCreationsMock = jest.fn()
const adminCreateContributionMock = jest.fn()
mockClient.setRequestHandler(
adminOpenCreations,
adminOpenCreationsMock.mockResolvedValue({
data: {
adminOpenCreations: [
{
month: new Date(now.getFullYear(), now.getMonth() - 2).getMonth(),
year: new Date(now.getFullYear(), now.getMonth() - 2).getFullYear(),
amount: '200',
},
{
month: new Date(now.getFullYear(), now.getMonth() - 1).getMonth(),
year: new Date(now.getFullYear(), now.getMonth() - 1).getFullYear(),
amount: '400',
},
{
month: now.getMonth(),
year: now.getFullYear(),
amount: '600',
},
],
beforeEach(() => {
wrapper = mount(CreationFormular, {
global: {
stubs: mockChildComponents,
mocks: {
$t: (key) => key,
},
},
}),
)
mockClient.setRequestHandler(
adminCreateContribution,
adminCreateContributionMock.mockResolvedValue({
data: {
adminCreateContribution: [0, 0, 0],
props: {
pagetype: '',
item: {},
items: [],
creationUserData: {},
creation: [100, 200], // Mock creation data
},
}),
)
const Wrapper = () => {
return mount(CreationFormular, { localVue, mocks, propsData, apolloProvider })
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('has a DIV element with the class.component-creation-formular', () => {
expect(wrapper.find('.component-creation-formular').exists()).toBeTruthy()
})
describe('text and value form props', () => {
beforeEach(async () => {
wrapper = mount(CreationFormular, {
localVue,
mocks,
propsData: {
creationUserData: { memo: 'Memo from property', amount: 42 },
...propsData,
},
})
})
it('has text taken from props', () => {
expect(wrapper.vm.text).toBe('Memo from property')
})
it('has value taken from props', () => {
expect(wrapper.vm.value).toBe(42)
})
})
describe('radio buttons to selcet month', () => {
it('has three radio buttons', () => {
expect(wrapper.findAll('input[type="radio"]').length).toBe(3)
})
describe('with single creation', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.setProps({
type: 'singleCreation',
creation: [200, 400, 600],
item: { email: 'benjamin@bluemchen.de' },
})
await wrapper.findAll('input[type="radio"]').at(1).setChecked()
await wrapper.find('input[type="number"]').setValue(90)
})
describe('first radio button', () => {
beforeEach(async () => {
await wrapper.findAll('input[type="radio"]').at(0).setChecked()
await wrapper.find('textarea').setValue('Test create coins')
})
it('sets rangeMax to 200', () => {
expect(wrapper.vm.rangeMax).toBe(200)
})
describe('sendForm', () => {
beforeEach(async () => {
await wrapper.find('.test-submit').trigger('click')
})
it('sends ... to apollo', () => {
expect(adminCreateContributionMock).toBeCalledWith({
email: 'benjamin@bluemchen.de',
creationDate: getCreationDate(2),
amount: 90,
memo: 'Test create coins',
})
})
it('emits update-user-data', () => {
expect(wrapper.emitted('update-user-data')).toEqual([
[{ email: 'benjamin@bluemchen.de' }, [0, 0, 0]],
])
})
it('toasts a success message', () => {
expect(toastSuccessSpy).toBeCalledWith([
'creation_form.toasted',
{ email: 'benjamin@bluemchen.de', value: '90' },
])
})
it('updates open creations in store', () => {
expect(stateCommitMock).toBeCalledWith('openCreationsPlus', 1)
})
it('resets the form data', () => {
expect(wrapper.vm.value).toBe(0)
})
})
describe('sendForm with server error', () => {
beforeEach(async () => {
adminCreateContributionMock.mockRejectedValueOnce({ message: 'Ouch!' })
await wrapper.find('.test-submit').trigger('click')
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Ouch!')
})
})
describe('Negativ value', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
await wrapper.setData({ rangeMin: 180 })
await wrapper.setData({ value: -20 })
})
it('has no submit button', async () => {
expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
})
})
describe('Empty text', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
await wrapper.setData({ rangeMin: 180 })
await wrapper.setData({ text: '' })
})
it('has no submit button', async () => {
expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
})
})
describe('Text length less than 10', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
await wrapper.setData({ rangeMin: 180 })
await wrapper.setData({ text: 'Try this' })
})
it('has no submit button', async () => {
expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
})
})
})
describe('second radio button', () => {
beforeEach(async () => {
await wrapper.findAll('input[type="radio"]').at(1).setChecked()
})
it('sets rangeMin to 0', () => {
expect(wrapper.vm.rangeMin).toBe(0)
})
it('sets rangeMax to 400', () => {
expect(wrapper.vm.rangeMax).toBe(400)
})
describe('sendForm', () => {
beforeEach(async () => {
await wrapper.find('.test-submit').trigger('click')
})
it('sends ... to apollo', () => {
expect(adminCreateContributionMock).toBeCalled()
})
})
describe('Negativ value', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
await wrapper.setData({ rangeMin: 180 })
await wrapper.setData({ value: -20 })
})
it('has no submit button', async () => {
expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
})
})
describe('Empty text', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
await wrapper.setData({ rangeMin: 180 })
await wrapper.setData({ text: '' })
})
it('has no submit button', async () => {
expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
})
})
describe('Text length less than 10', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
await wrapper.setData({ rangeMin: 180 })
await wrapper.setData({ text: 'Try this' })
})
it('has no submit button', async () => {
expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
})
})
})
describe('third radio button', () => {
beforeEach(async () => {
await wrapper.findAll('input[type="radio"]').at(2).setChecked()
})
it('sets rangeMin to 0', () => {
expect(wrapper.vm.rangeMin).toBe(0)
})
it('sets rangeMax to 400', () => {
expect(wrapper.vm.rangeMax).toBe(600)
})
describe('sendForm', () => {
beforeEach(async () => {
await wrapper.find('.test-submit').trigger('click')
})
it('sends mutation to apollo', () => {
expect(adminCreateContributionMock).toBeCalled()
})
it('toast success message', () => {
expect(toastSuccessSpy).toBeCalled()
})
it('store commit openCreationPlus', () => {
expect(stateCommitMock).toBeCalledWith('openCreationsPlus', 1)
})
})
describe('Negativ value', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
await wrapper.setData({ rangeMin: 180 })
await wrapper.setData({ value: -20 })
})
it('has no submit button', async () => {
expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
})
})
describe('Empty text', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
await wrapper.setData({ rangeMin: 180 })
await wrapper.setData({ text: '' })
})
it('has no submit button', async () => {
expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
})
})
describe('Text length less than 10', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
await wrapper.setData({ rangeMin: 180 })
await wrapper.setData({ text: 'Try this' })
})
it('has no submit button', async () => {
expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
})
})
})
})
})
})
it('renders correctly', () => {
expect(wrapper.exists()).toBe(true)
})
it('initializes with default values', () => {
expect(wrapper.vm.text).toBe('')
expect(wrapper.vm.value).toBe(0)
expect(wrapper.vm.selected).toBe(null)
})
it('updates radio options based on creationDateObjects', async () => {
await nextTick()
expect(wrapper.vm.radioOptions).toHaveLength(2)
expect(wrapper.vm.radioOptions[0].name).toContain('Jan')
expect(wrapper.vm.radioOptions[1].name).toContain('Feb')
})
it('handles month selection', async () => {
const radioGroup = wrapper.findComponent({ name: 'BFormRadioGroup' })
await radioGroup.vm.$emit('update:modelValue', {
short: 'Jan',
year: '2024',
date: '2024-01-01',
creation: 100,
})
expect(wrapper.vm.selected).toEqual({
short: 'Jan',
year: '2024',
date: '2024-01-01',
creation: 100,
})
expect(wrapper.vm.text).toBe('creation_form.creation_for Jan 2024')
})
it('disables submit button when form is invalid', async () => {
wrapper.vm.selected = null
wrapper.vm.value = 0
wrapper.vm.text = ''
await wrapper.vm.$nextTick()
const submitButton = wrapper.find('.test-submit')
expect(submitButton.attributes('disabled')).toBeDefined()
})
it('enables submit button when form is valid', async () => {
wrapper.vm.selected = { short: 'Jan', year: '2024', date: '2024-01-01', creation: 100 }
wrapper.vm.value = 100
wrapper.vm.text = 'Valid text input'
await wrapper.vm.$nextTick()
const submitButton = wrapper.find('.test-submit')
expect(submitButton.attributes('disabled')).toBeUndefined()
})
it('resets form on reset button click', async () => {
wrapper.vm.selected = { short: 'Jan', year: '2024', date: '2024-01-01', creation: 100 }
wrapper.vm.value = 100
wrapper.vm.text = 'Some text'
await wrapper.vm.$nextTick()
const resetButton = wrapper.find('button[type="reset"]')
await resetButton.trigger('click')
expect(wrapper.vm.selected).toBe(null)
expect(wrapper.vm.value).toBe(0)
expect(wrapper.vm.text).toBe('')
})
it('displays different button text based on pagetype', async () => {
await wrapper.setProps({ pagetype: 'PageCreationConfirm' })
await wrapper.vm.$nextTick()
expect(wrapper.vm.submitBtnText).toBe('creation_form.update_creation')
await wrapper.setProps({ pagetype: '' })
await wrapper.vm.$nextTick()
expect(wrapper.vm.submitBtnText).toBe('creation_form.submit_creation')
})
})

31
admin/src/components/CreationFormular.vue
View File

@ -47,24 +47,13 @@
</BButton>
<div>
<BButton
v-if="pagetype === 'PageCreationConfirm'"
type="button"
variant="success"
class="test-submit"
:disabled="selected === '' || value <= 0 || text.length < 10"
:disabled="disabled"
@click="submitCreation"
>
{{ $t('creation_form.update_creation') }}
</BButton>
<BButton
v-else
type="button"
variant="success"
class="test-submit"
:disabled="selected === '' || value <= 0 || text.length < 10"
@click="submitCreation"
>
{{ $t('creation_form.submit_creation') }}
{{ submitBtnText }}
</BButton>
</div>
</div>
@ -128,7 +117,7 @@ const text = ref(!props.creationUserData.memo ? '' : props.creationUserData.memo
const value = ref(!props.creationUserData.amount ? 0 : props.creationUserData.amount)
const rangeMin = ref(0)
const rangeMax = ref(1000)
const selected = ref()
const selected = ref(null)
const creationForm = ref(null)
const radioOptions = computed(() => {
@ -140,6 +129,16 @@ const radioOptions = computed(() => {
})
})
const disabled = computed(() => {
return selected.value === '' || value.value <= 0 || text.value.length < 10
})
const submitBtnText = computed(() => {
return props.pagetype === 'PageCreationConfirm'
? t('creation_form.update_creation')
: t('creation_form.submit_creation')
})
const updateRadioSelected = (name) => {
text.value = `${t('creation_form.creation_for')} ${name?.short} ${name?.year}`
rangeMin.value = 0
@ -189,11 +188,13 @@ const submitCreation = async () => {
watch(
() => selected.value,
async (newValue, oldValue) => {
if (newValue !== oldValue && selected.value !== '') {
if (newValue !== oldValue && selected.value !== '' && selected.value !== null) {
updateRadioSelected(newValue)
}
},
)
defineExpose({ submitCreation })
</script>
<style scoped>
.buttons-wrapper {

209
admin/src/components/CreationTransactionList.spec.js
View File

@ -1,139 +1,100 @@
import { mount } from '@vue/test-utils'
import CreationTransactionList from './CreationTransactionList'
import { toastErrorSpy } from '../../test/testSetup'
import VueApollo from 'vue-apollo'
import { createMockClient } from 'mock-apollo-client'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import CreationTransactionList from './CreationTransactionList.vue'
import { useQuery } from '@vue/apollo-composable'
import { adminListContributions } from '../graphql/adminListContributions'
import { useI18n } from 'vue-i18n'
import { useAppToast } from '@/composables/useToast'
const mockClient = createMockClient()
const apolloProvider = new VueApollo({
defaultClient: mockClient,
})
const localVue = global.localVue
localVue.use(VueApollo)
const defaultData = () => {
return {
adminListContributions: {
contributionCount: 2,
contributionList: [
{
id: 1,
firstName: 'Bibi',
lastName: 'Bloxberg',
userId: 99,
email: 'bibi@bloxberg.de',
amount: 500,
memo: 'Danke für alles',
date: new Date(),
moderator: 1,
status: 'PENDING',
creation: [500, 500, 500],
messagesCount: 0,
deniedBy: null,
deniedAt: null,
confirmedBy: null,
confirmedAt: null,
contributionDate: new Date(),
deletedBy: null,
deletedAt: null,
updatedAt: null,
updatedBy: null,
createdAt: new Date(),
moderatorId: null,
},
{
id: 2,
firstName: 'Räuber',
lastName: 'Hotzenplotz',
userId: 100,
email: 'raeuber@hotzenplotz.de',
amount: 1000000,
memo: 'Gut Ergattert',
date: new Date(),
moderator: 1,
status: 'PENDING',
creation: [500, 500, 500],
messagesCount: 0,
deniedBy: null,
deniedAt: null,
confirmedBy: null,
confirmedAt: new Date(),
contributionDate: new Date(),
deletedBy: null,
deletedAt: null,
updatedAt: null,
updatedBy: null,
createdAt: new Date(),
moderatorId: null,
},
],
},
}
}
const mocks = {
$d: jest.fn((t) => t),
$t: jest.fn((t) => t),
}
const propsData = {
userId: 1,
fields: ['createdAt', 'contributionDate', 'confirmedAt', 'amount', 'memo'],
}
vi.mock('@vue/apollo-composable')
vi.mock('vue-i18n')
vi.mock('@/composables/useToast')
describe('CreationTransactionList', () => {
let wrapper
const mockResult = vi.fn()
const mockRefetch = vi.fn()
const mockT = vi.fn((key) => key)
const mockD = vi.fn((date) => date.toISOString())
const mockToastError = vi.fn()
const adminListContributionsMock = jest.fn()
mockClient.setRequestHandler(
adminListContributions,
adminListContributionsMock
.mockRejectedValueOnce({ message: 'Ouch!' })
.mockResolvedValue({ data: defaultData() }),
)
const Wrapper = () => {
return mount(CreationTransactionList, { localVue, mocks, propsData, apolloProvider })
}
describe('mount', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = Wrapper()
beforeEach(() => {
useQuery.mockReturnValue({
result: mockResult,
refetch: mockRefetch,
})
describe('server error', () => {
it('toast error', () => {
expect(toastErrorSpy).toBeCalledWith('Ouch!')
})
useI18n.mockReturnValue({
t: mockT,
d: mockD,
})
describe('sever success', () => {
it('sends query to Apollo when created', () => {
expect(adminListContributionsMock).toBeCalledWith({
currentPage: 1,
pageSize: 10,
order: 'DESC',
userId: 1,
})
})
useAppToast.mockReturnValue({
toastError: mockToastError,
})
it('has two values for the transaction', () => {
expect(wrapper.find('tbody').findAll('tr').length).toBe(2)
})
describe('watch currentPage', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.setData({ currentPage: 2 })
})
it('returns the string in normal order if reversed property is not true', () => {
expect(wrapper.vm.currentPage).toBe(2)
})
})
wrapper = mount(CreationTransactionList, {
props: {
userId: 1,
},
global: {
stubs: {
BTable: true,
BPagination: true,
BButton: true,
BCollapse: true,
},
directives: {
'b-toggle': {},
},
},
})
})
it('renders the component', () => {
expect(wrapper.find('.component-creation-transaction-list').exists()).toBe(true)
})
it('initializes with correct data', () => {
expect(wrapper.vm.currentPage).toBe(1)
expect(wrapper.vm.perPage).toBe(10)
expect(wrapper.vm.items).toEqual([])
expect(wrapper.vm.rows).toBe(0)
})
it('calls useQuery with correct parameters', () => {
expect(useQuery).toHaveBeenCalled()
const call = useQuery.mock.calls[0]
expect(call[0]).toBe(adminListContributions)
expect(call[1]).toEqual(
expect.objectContaining({
currentPage: expect.any(Number),
pageSize: expect.any(Number),
order: 'DESC',
userId: 1,
}),
)
})
it('refetches data when currentPage changes', async () => {
wrapper.vm.currentPage = 2
await wrapper.vm.$nextTick()
expect(mockRefetch).toHaveBeenCalled()
})
it('formats fields correctly', () => {
const fields = wrapper.vm.fields
expect(fields).toHaveLength(6)
expect(fields[0].key).toBe('createdAt')
expect(fields[1].key).toBe('contributionDate')
expect(fields[2].key).toBe('confirmedAt')
expect(fields[3].key).toBe('status')
expect(fields[4].key).toBe('amount')
expect(fields[5].key).toBe('memo')
})
it('formats amount correctly', () => {
const amountField = wrapper.vm.fields.find((f) => f.key === 'amount')
expect(amountField.formatter(100)).toBe('100 GDD')
})
})

362
admin/src/components/DeletedUserFormular.spec.js
View File

@ -1,220 +1,212 @@
import { mount } from '@vue/test-utils'
import DeletedUserFormular from './DeletedUserFormular'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import DeletedUserFormular from './DeletedUserFormular.vue'
import { deleteUser } from '../graphql/deleteUser'
import { unDeleteUser } from '../graphql/unDeleteUser'
import { toastErrorSpy } from '../../test/testSetup'
import { useApolloClient } from '@vue/apollo-composable'
import { useI18n } from 'vue-i18n'
import { useAppToast } from '@/composables/useToast'
import { createStore } from 'vuex'
import { BButton } from 'bootstrap-vue-next'
const localVue = global.localVue
vi.mock('@vue/apollo-composable')
vi.mock('vue-i18n')
vi.mock('@/composables/useToast')
const date = new Date()
const apolloMutateMock = jest.fn().mockResolvedValue({
data: {
deleteUser: date,
},
})
const mocks = {
$t: jest.fn((t) => t),
$apollo: {
mutate: apolloMutateMock,
},
$store: {
const createVuexStore = (moderatorId = 0) => {
return createStore({
state: {
moderator: {
id: 0,
id: moderatorId,
name: 'test moderator',
},
},
},
}
const propsData = {
item: {},
})
}
describe('DeletedUserFormular', () => {
let wrapper
let spy
let store
const mockMutate = vi.fn()
const mockT = vi.fn((key) => key)
const mockToastError = vi.fn()
const date = new Date()
const Wrapper = () => {
return mount(DeletedUserFormular, { localVue, mocks, propsData })
}
beforeEach(() => {
store = createVuexStore()
describe('mount', () => {
useApolloClient.mockReturnValue({
client: {
mutate: mockMutate,
},
})
useI18n.mockReturnValue({
t: mockT,
})
useAppToast.mockReturnValue({
toastError: mockToastError,
})
wrapper = mount(DeletedUserFormular, {
props: {
item: {
userId: 1,
deletedAt: null,
},
},
global: {
plugins: [store],
mocks: {
$t: mockT,
},
stubs: {
BButton,
},
},
})
})
it('renders the component', () => {
expect(wrapper.find('.deleted-user-formular').exists()).toBe(true)
})
describe('when user is not a moderator', () => {
it('shows delete button when user is not deleted', () => {
expect(wrapper.find('button').text()).toBe('delete_user')
})
it('shows undelete button when user is deleted', async () => {
await wrapper.setProps({
item: {
userId: 1,
deletedAt: date,
},
})
expect(wrapper.find('button').text()).toBe('undelete_user')
})
it('emits show-delete-modal when delete button is clicked', async () => {
await wrapper.find('button').trigger('click')
expect(wrapper.emitted('show-delete-modal')).toBeTruthy()
})
it('emits show-undelete-modal when undelete button is clicked', async () => {
await wrapper.setProps({
item: {
userId: 1,
deletedAt: date,
},
})
await wrapper.find('button').trigger('click')
expect(wrapper.emitted('show-undelete-modal')).toBeTruthy()
})
})
describe('when user is a moderator', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = Wrapper()
})
it('has a DIV element with the class.delete-user-formular', () => {
expect(wrapper.find('.deleted-user-formular').exists()).toBe(true)
})
describe('delete self', () => {
beforeEach(() => {
wrapper.setProps({
item: {
userId: 0,
},
})
})
it('shows a text that you cannot delete yourself', () => {
expect(wrapper.text()).toBe('removeNotSelf')
})
it('has no "delete_user" button', () => {
expect(wrapper.find('button').exists()).toBe(false)
})
})
describe('delete other user', () => {
beforeEach(() => {
wrapper.setProps({
store = createVuexStore(1)
wrapper = mount(DeletedUserFormular, {
props: {
item: {
userId: 1,
deletedAt: null,
},
static: true,
})
})
it('shows the text "delete_user"', () => {
expect(wrapper.text()).toBe('delete_user')
})
it('has a "delete_user" button', () => {
expect(wrapper.find('button').text()).toBe('delete_user')
})
describe('click on "delete_user" button', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(true))
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('calls the modal', () => {
expect(wrapper.emitted('showDeleteModal'))
expect(spy).toHaveBeenCalled()
})
describe('confirm delete with success', () => {
it('calls the API', () => {
expect(apolloMutateMock).toBeCalledWith(
expect.objectContaining({
mutation: deleteUser,
variables: {
userId: 1,
},
}),
)
})
it('emits update deleted At', () => {
expect(wrapper.emitted('updateDeletedAt')).toEqual(
expect.arrayContaining([
expect.arrayContaining([
{
userId: 1,
deletedAt: date,
},
]),
]),
)
})
})
describe('confirm delete with error', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
apolloMutateMock.mockRejectedValue({ message: 'Oh no!' })
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Oh no!')
})
})
},
global: {
plugins: [store],
mocks: {
$t: mockT,
},
},
})
})
describe('recover user', () => {
beforeEach(() => {
wrapper.setProps({
item: {
it('shows removeNotSelf message', () => {
expect(wrapper.text()).toBe('removeNotSelf')
})
it('does not show any button', () => {
expect(wrapper.find('button').exists()).toBe(false)
})
})
describe('deleteUserMutation', () => {
beforeEach(() => {
mockMutate.mockResolvedValue({
data: {
deleteUser: date,
},
})
})
it('calls the mutation with correct parameters', async () => {
await wrapper.vm.deleteUserMutation()
expect(mockMutate).toHaveBeenCalledWith({
mutation: deleteUser,
variables: {
userId: 1,
},
})
})
it('emits update-deleted-at with correct data on success', async () => {
await wrapper.vm.deleteUserMutation()
expect(wrapper.emitted('update-deleted-at')).toEqual([
[
{
userId: 1,
deletedAt: date,
},
})
],
])
})
it('calls toastError on failure', async () => {
const error = new Error('Delete failed')
mockMutate.mockRejectedValueOnce(error)
await wrapper.vm.deleteUserMutation()
expect(mockToastError).toHaveBeenCalledWith('Delete failed')
})
})
describe('undeleteUserMutation', () => {
beforeEach(() => {
mockMutate.mockResolvedValue({
data: {
unDeleteUser: null,
},
})
})
it('shows the text "undelete_user"', () => {
expect(wrapper.text()).toBe('undelete_user')
it('calls the mutation with correct parameters', async () => {
await wrapper.vm.undeleteUserMutation()
expect(mockMutate).toHaveBeenCalledWith({
mutation: unDeleteUser,
variables: {
userId: 1,
},
})
})
it('has a "undelete_user" button', () => {
expect(wrapper.find('button').text()).toBe('undelete_user')
})
it('emits update-deleted-at with correct data on success', async () => {
await wrapper.vm.undeleteUserMutation()
expect(wrapper.emitted('update-deleted-at')).toEqual([
[
{
userId: 1,
deletedAt: null,
},
],
])
})
describe('click on "undelete_user" button', () => {
beforeEach(async () => {
apolloMutateMock.mockResolvedValue({
data: {
unDeleteUser: null,
},
})
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(true))
await wrapper.find('button').trigger('click')
await wrapper.vm.$nextTick()
})
it('calls the modal', () => {
expect(wrapper.emitted('showUndeleteModal'))
expect(spy).toHaveBeenCalled()
})
describe('confirm recover with success', () => {
it('calls the API', () => {
expect(apolloMutateMock).toBeCalledWith(
expect.objectContaining({
mutation: unDeleteUser,
variables: {
userId: 1,
},
}),
)
})
it('emits update deleted At', () => {
expect(wrapper.emitted('updateDeletedAt')).toMatchObject(
expect.arrayContaining([
expect.arrayContaining([
{
userId: 1,
deletedAt: null,
},
]),
]),
)
})
})
describe('confirm recover with error', () => {
beforeEach(async () => {
apolloMutateMock.mockRejectedValue({ message: 'Oh no!' })
await wrapper.find('button').trigger('click')
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Oh no!')
})
})
})
it('calls toastError on failure', async () => {
const error = new Error('Undelete failed')
mockMutate.mockRejectedValueOnce(error)
await wrapper.vm.undeleteUserMutation()
expect(mockToastError).toHaveBeenCalledWith('Undelete failed')
})
})
})

295
admin/src/components/EditCreationFormular.spec.js
View File

@ -1,163 +1,156 @@
import { mount } from '@vue/test-utils'
import EditCreationFormular from './EditCreationFormular'
import { toastErrorSpy, toastSuccessSpy } from '../../test/testSetup'
import VueApollo from 'vue-apollo'
import { createMockClient } from 'mock-apollo-client'
import { adminOpenCreations } from '../graphql/adminOpenCreations'
import { adminUpdateContribution } from '../graphql/adminUpdateContribution'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import EditCreationFormular from './EditCreationFormular.vue'
import { useMutation, useQuery } from '@vue/apollo-composable'
import { useI18n } from 'vue-i18n'
import { useAppToast } from '@/composables/useToast'
import useCreationMonths from '@/composables/useCreationMonths'
import {
BButton,
BCol,
BForm,
BFormInput,
BFormRadioGroup,
BFormTextarea,
BInputGroup,
BRow,
} from 'bootstrap-vue-next'
import { nextTick } from 'vue'
const mockClient = createMockClient()
const apolloProvider = new VueApollo({
defaultClient: mockClient,
})
const localVue = global.localVue
localVue.use(VueApollo)
const stateCommitMock = jest.fn()
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => {
const date = new Date(d)
return date.toISOString().split('T')[0]
}),
$store: {
commit: stateCommitMock,
},
}
const now = new Date()
const getCreationDate = (sub) => {
const date = sub === 0 ? now : new Date(now.getFullYear(), now.getMonth() - sub, 1, 0)
return date.toISOString().split('T')[0]
}
const propsData = {
creationUserData: {
memo: 'Test schöpfung 1',
amount: 100,
date: getCreationDate(0),
},
item: {
id: 0,
amount: '300',
contributionDate: `${now.getFullYear()}-${now.getMonth() + 1}-${now.getDate()}`,
},
}
const data = () => {
return { creation: ['1000', '1000', '400'] }
}
vi.mock('@vue/apollo-composable')
vi.mock('vue-i18n')
vi.mock('@/composables/useToast')
vi.mock('@/composables/useCreationMonths')
describe('EditCreationFormular', () => {
let wrapper
const adminUpdateContributionMock = jest.fn()
const adminOpenCreationsMock = jest.fn()
mockClient.setRequestHandler(
adminOpenCreations,
adminOpenCreationsMock.mockResolvedValue({
data: {
adminOpenCreations: [
{
month: new Date(now.getFullYear(), now.getMonth() - 2).getMonth(),
year: new Date(now.getFullYear(), now.getMonth() - 2).getFullYear(),
amount: '1000',
},
{
month: new Date(now.getFullYear(), now.getMonth() - 1).getMonth(),
year: new Date(now.getFullYear(), now.getMonth() - 1).getFullYear(),
amount: '1000',
},
{
month: now.getMonth(),
year: now.getFullYear(),
amount: '400',
},
],
},
}),
)
mockClient.setRequestHandler(
adminUpdateContribution,
adminUpdateContributionMock.mockResolvedValue({
data: {
adminUpdateContribution: {
amount: '600',
date: new Date(),
memo: 'This is my memo',
},
},
}),
)
const Wrapper = () => {
return mount(EditCreationFormular, { localVue, mocks, propsData, data, apolloProvider })
let mockMutate
let mockOnDone
let mockOnError
const mockRefetch = vi.fn()
const mockT = vi.fn((key) => key)
const mockD = vi.fn((date) => new Date(date).toISOString().split('T')[0])
const mockToastSuccess = vi.fn()
const mockToastError = vi.fn()
const mockCreationMonths = {
radioOptions: vi.fn(() => [
{ item: { short: 'Jan', date: '2023-01-01' }, name: 'January' },
{ item: { short: 'Feb', date: '2023-02-01' }, name: 'February' },
{ item: { short: 'Mar', date: '2023-03-01' }, name: 'March' },
]),
creation: { value: [1000, 1000, 1000] },
}
describe('mount', () => {
beforeEach(async () => {
wrapper = Wrapper()
await wrapper.vm.$nextTick()
beforeEach(() => {
mockMutate = vi.fn()
mockOnDone = vi.fn()
mockOnError = vi.fn()
useMutation.mockReturnValue({
mutate: mockMutate,
onDone: mockOnDone,
onError: mockOnError,
})
useQuery.mockReturnValue({ refetch: mockRefetch })
useI18n.mockReturnValue({ t: mockT, d: mockD })
useAppToast.mockReturnValue({ toastSuccess: mockToastSuccess, toastError: mockToastError })
useCreationMonths.mockReturnValue(mockCreationMonths)
it('has a DIV element with the class.component-edit-creation-formular', () => {
expect(wrapper.find('.component-edit-creation-formular').exists()).toBeTruthy()
})
describe('radio buttons to select month', () => {
it('has three radio buttons', () => {
expect(wrapper.findAll('input[type="radio"]').length).toBe(3)
})
it('has the third radio button checked', () => {
expect(wrapper.findAll('input[type="radio"]').at(0).element.checked).toBeFalsy()
expect(wrapper.findAll('input[type="radio"]').at(1).element.checked).toBeFalsy()
expect(wrapper.findAll('input[type="radio"]').at(2).element.checked).toBeTruthy()
})
it('has rangeMax of 700', () => {
expect(wrapper.find('input[type="number"]').attributes('max')).toBe('700')
})
describe('change and save memo and value with success', () => {
beforeEach(async () => {
await wrapper.find('input[type="number"]').setValue(500)
await wrapper.find('textarea').setValue('Test Schöpfung 2')
await wrapper.find('.test-submit').trigger('click')
})
it('calls the API', () => {
expect(adminUpdateContributionMock).toBeCalledWith({
id: 0,
creationDate: getCreationDate(0),
amount: 500,
memo: 'Test Schöpfung 2',
})
})
it('emits update-creation-data', () => {
expect(wrapper.emitted('update-creation-data')).toBeTruthy()
})
it('toasts a success message', () => {
expect(toastSuccessSpy).toBeCalledWith('creation_form.toasted_update')
})
})
describe('change and save memo and value with error', () => {
beforeEach(async () => {
adminUpdateContributionMock.mockRejectedValue({ message: 'Oh no!' })
await wrapper.find('input[type="number"]').setValue(500)
await wrapper.find('textarea').setValue('Test Schöpfung 2')
await wrapper.find('.test-submit').trigger('click')
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Oh no!')
})
})
wrapper = mount(EditCreationFormular, {
props: {
item: {
id: 1,
contributionDate: '2023-02-15',
amount: '300',
email: 'test@example.com',
},
creationUserData: {
id: 1,
memo: 'Initial memo',
amount: 200,
},
},
global: {
stubs: {
BForm,
BRow,
BCol,
BButton,
BFormRadioGroup,
BInputGroup,
BFormInput,
BFormTextarea,
},
},
})
})
it('renders the component', () => {
expect(wrapper.find('.component-edit-creation-formular').exists()).toBe(true)
})
it('initializes form with correct values', () => {
expect(wrapper.vm.text).toBe('Initial memo')
expect(wrapper.vm.value).toBe(200)
expect(wrapper.vm.selected).toEqual({ short: 'Feb', date: '2023-02-01' })
})
it('computes rangeMax correctly', () => {
expect(wrapper.vm.rangeMax).toBe(1300) // 1000 + 300
})
it('disables submit button when form is invalid', async () => {
wrapper.vm.text = 'memo'
const submitButton = wrapper.find('.test-submit')
await nextTick()
expect(submitButton.attributes('disabled')).toBeDefined()
})
it('enables submit button when form is valid', async () => {
wrapper.vm.text = 'Valid long text'
wrapper.vm.value = 100
const submitButton = wrapper.find('.test-submit')
await nextTick()
expect(submitButton.attributes('disabled')).toBeUndefined()
})
it('calls mutation on form submit', async () => {
wrapper.vm.text = 'New memo valid'
wrapper.vm.value = 250
await wrapper.find('.test-submit').trigger('click')
expect(mockMutate).toHaveBeenCalledWith({
id: 1,
creationDate: '2023-02-01',
amount: 250,
memo: 'New memo valid',
})
})
it('handles successful mutation', async () => {
wrapper.vm.text = 'New memo valid'
wrapper.vm.value = 250
await wrapper.find('.test-submit').trigger('click')
// Simulate successful mutation
const onDoneCallback = mockOnDone.mock.calls[0][0]
onDoneCallback()
expect(wrapper.emitted('update-creation-data')).toBeTruthy()
expect(mockToastSuccess).toHaveBeenCalledWith('creation_form.toasted_update')
expect(mockRefetch).toHaveBeenCalled()
expect(wrapper.vm.value).toBe(0) // Check if form was reset
})
it('handles failed mutation', async () => {
wrapper.vm.text = 'New memo valid'
wrapper.vm.value = 250
await wrapper.find('.test-submit').trigger('click')
// Simulate failed mutation
const onErrorCallback = mockOnError.mock.calls[0][0]
onErrorCallback({ message: 'API Error' })
expect(mockToastError).toHaveBeenCalledWith('API Error')
expect(wrapper.vm.value).toBe(0) // Check if form was reset
})
})

16
admin/src/components/EditCreationFormular.vue
View File

@ -59,7 +59,7 @@
type="button"
variant="success"
class="test-submit"
:disabled="selected === '' || value <= 0 || text.length < 10"
:disabled="submitDisabled"
@click="submitCreation"
>
{{ $t('creation_form.update_creation') }}
@ -101,23 +101,31 @@ const props = defineProps({
const emit = defineEmits(['update-creation-data'])
const creationMonths = useCreationMonths()
const { t, d } = useI18n()
const { t } = useI18n()
const { toastSuccess, toastError } = useAppToast()
const text = ref(props.creationUserData.memo || '')
const value = ref(props.creationUserData.amount ? Number(props.creationUserData.amount) : 0)
const rangeMin = ref(0)
const creationIndex = computed(() => {
const month = d(new Date(props.item.contributionDate), 'month')
const date = new Date(props.item.contributionDate)
const month = date.toLocaleString('default', { month: 'short' })
return creationMonths.radioOptions().findIndex((obj) => obj.item.short === month)
})
const selectedComputed = computed(() => creationMonths.radioOptions()[creationIndex.value].item)
const selectedComputed = computed(() => {
const index = creationIndex.value > -1 ? creationIndex.value : 0
return creationMonths.radioOptions()[index].item
})
const selected = ref(selectedComputed.value)
const rangeMax = computed(
() => Number(creationMonths.creation.value[creationIndex.value]) + Number(props.item.amount),
)
const submitDisabled = computed(() => {
return selected.value === '' || value.value <= 0 || text.value.length < 10
})
watch(selectedComputed, () => {
selected.value = selectedComputed.value
})

949
admin/src/components/Federation/CommunityVisualizeItem.spec.js
View File

@ -1,357 +1,660 @@
import { createMockClient } from 'mock-apollo-client'
// import { createMockClient } from 'mock-apollo-client'
// import { mount } from '@vue/test-utils'
// import VueApollo from 'vue-apollo'
// import Vuex from 'vuex'
// import CommunityVisualizeItem from './CommunityVisualizeItem.vue'
// import { updateHomeCommunity } from '../../graphql/updateHomeCommunity'
// import { toastSuccessSpy } from '../../../test/testSetup'
//
// const mockClient = createMockClient()
// const apolloProvider = new VueApollo({
// defaultClient: mockClient,
// })
//
// const localVue = global.localVue
// localVue.use(Vuex)
// localVue.use(VueApollo)
// const today = new Date()
// const createdDate = new Date()
// createdDate.setDate(createdDate.getDate() - 3)
//
// // Mock für den Vuex-Store
// const store = new Vuex.Store({
// state: {
// moderator: {
// roles: ['ADMIN'],
// },
// },
// })
//
// let propsData = {
// item: {
// uuid: 1,
// foreign: false,
// url: 'http://localhost/api/',
// publicKey: '4007170edd8d33fb009cd99ee4e87f214e7cd21b668d45540a064deb42e243c2',
// communityUuid: '5ab0befd-b150-4f31-a631-7f3637e47b21',
// authenticatedAt: null,
// name: 'Gradido Test',
// description: 'Gradido Community zum testen',
// gmsApiKey: '<api key>',
// creationDate: createdDate,
// createdAt: createdDate,
// updatedAt: createdDate,
// federatedCommunities: [
// {
// id: 2046,
// apiVersion: '2_0',
// endPoint: 'http://localhost/api/',
// lastAnnouncedAt: createdDate,
// verifiedAt: today,
// lastErrorAt: null,
// createdAt: createdDate,
// updatedAt: null,
// },
// {
// id: 2045,
// apiVersion: '1_1',
// endPoint: 'http://localhost/api/',
// lastAnnouncedAt: null,
// verifiedAt: null,
// lastErrorAt: null,
// createdAt: '2024-01-16T10:08:21.550Z',
// updatedAt: null,
// },
// {
// id: 2044,
// apiVersion: '1_0',
// endPoint: 'http://localhost/api/',
// lastAnnouncedAt: null,
// verifiedAt: null,
// lastErrorAt: null,
// createdAt: '2024-01-16T10:08:21.544Z',
// updatedAt: null,
// },
// ],
// },
// }
//
// const mocks = {
// $t: (key) => key,
// $i18n: {
// locale: 'en',
// },
// }
//
// describe('CommunityVisualizeItem', () => {
// let wrapper
//
// const updateHomeCommunityMock = jest.fn()
// mockClient.setRequestHandler(
// updateHomeCommunity,
// updateHomeCommunityMock.mockResolvedValue({
// data: {
// updateHomeCommunity: { id: 1 },
// },
// }),
// )
//
// const Wrapper = () => {
// return mount(CommunityVisualizeItem, { localVue, mocks, propsData, store, apolloProvider })
// }
//
// describe('mount', () => {
// beforeEach(() => {
// wrapper = Wrapper()
// })
//
// it('renders the component', () => {
// expect(wrapper.exists()).toBe(true)
// expect(wrapper.find('div.community-visualize-item').exists()).toBe(true)
// expect(wrapper.find('.details').exists()).toBe(false)
// })
//
// it('toggles details on click', async () => {
// // Click the row to toggle details
// await wrapper.find('.row').trigger('click')
//
// // Assert that details are now open
// expect(wrapper.find('.details').exists()).toBe(true)
//
// // Click the row again to toggle details back
// await wrapper.find('.row').trigger('click')
//
// // Assert that details are now closed
// expect(wrapper.find('.details').exists()).toBe(false)
// })
//
// describe('rendering item properties', () => {
// it('has the url', () => {
// expect(wrapper.find('.row > div:nth-child(2) > div > a').text()).toBe(
// 'http://localhost/api/',
// )
// })
//
// it('has the public key', () => {
// expect(wrapper.find('.row > div:nth-child(2) > small').text()).toContain(
// '4007170edd8d33fb009cd99ee4e87f214e7cd21b668d45540a064deb42e243c2'.substring(0, 26),
// )
// })
//
// describe('verified item', () => {
// it('has the check icon', () => {
// expect(wrapper.find('svg.bi-check').exists()).toBe(true)
// })
//
// it('has the text variant "success"', () => {
// expect(wrapper.find('.text-success').exists()).toBe(true)
// })
// })
//
// // describe('with different locales (de, en, fr, es, nl)', () => {
// describe('lastAnnouncedAt', () => {
// it('computes the time string for different locales (de, en, fr, es, nl)', () => {
// wrapper.vm.$i18n.locale = 'de'
// wrapper = Wrapper()
// expect(wrapper.vm.lastAnnouncedAt).toBe('vor 3 Tagen')
//
// wrapper.vm.$i18n.locale = 'fr'
// wrapper = Wrapper()
// expect(wrapper.vm.lastAnnouncedAt).toBe('il y a 3 jours')
//
// wrapper.vm.$i18n.locale = 'es'
// wrapper = Wrapper()
// expect(wrapper.vm.lastAnnouncedAt).toBe('hace 3 días')
//
// wrapper.vm.$i18n.locale = 'nl'
// wrapper = Wrapper()
// expect(wrapper.vm.lastAnnouncedAt).toBe('3 dagen geleden')
// })
//
// describe('lastAnnouncedAt == null', () => {
// beforeEach(() => {
// propsData = {
// item: {
// uuid: 7590,
// foreign: false,
// publicKey: 'eaf6a426b24fd54f8fbae11c17700fc595080ca25159579c63d38dbc64284ba7',
// url: 'http://localhost/api/2_0',
// lastAnnouncedAt: null,
// verifiedAt: null,
// lastErrorAt: null,
// createdAt: createdDate,
// updatedAt: null,
// },
// }
// wrapper = Wrapper()
// })
//
// it('computes empty string', async () => {
// expect(wrapper.vm.lastAnnouncedAt).toBe('')
// })
// })
// })
//
// describe('createdAt', () => {
// it('computes the time string for different locales (de, en, fr, es, nl)', () => {
// wrapper.vm.$i18n.locale = 'de'
// wrapper = Wrapper()
// expect(wrapper.vm.createdAt).toBe('vor 3 Tagen')
//
// wrapper.vm.$i18n.locale = 'fr'
// wrapper = Wrapper()
// expect(wrapper.vm.createdAt).toBe('il y a 3 jours')
//
// wrapper.vm.$i18n.locale = 'es'
// wrapper = Wrapper()
// expect(wrapper.vm.createdAt).toBe('hace 3 días')
//
// wrapper.vm.$i18n.locale = 'nl'
// wrapper = Wrapper()
// expect(wrapper.vm.createdAt).toBe('3 dagen geleden')
// })
//
// describe('not verified item', () => {
// beforeEach(() => {
// propsData = {
// item: {
// uuid: 7590,
// foreign: false,
// publicKey: 'eaf6a426b24fd54f8fbae11c17700fc595080ca25159579c63d38dbc64284ba7',
// url: 'http://localhost/api/',
// createdAt: createdDate,
// updatedAt: null,
// },
// }
// wrapper = Wrapper()
// })
//
// it('has the x-circle icon', () => {
// expect(wrapper.find('svg.bi-x-circle').exists()).toBe(true)
// })
//
// it('has the text variant "danger"', () => {
// expect(wrapper.find('.text-danger').exists()).toBe(true)
// })
// })
//
// describe('createdAt == null', () => {
// beforeEach(() => {
// propsData = {
// item: {
// uuid: 7590,
// foreign: false,
// publicKey: 'eaf6a426b24fd54f8fbae11c17700fc595080ca25159579c63d38dbc64284ba7',
// url: 'http://localhost/api/2_0',
// communityUuid: '5ab0befd-b150-4f31-a631-7f3637e47b21',
// authenticatedAt: null,
// creationDate: null,
// createdAt: null,
// updatedAt: null,
// },
// }
// wrapper = Wrapper()
// })
//
// it('computes empty string', async () => {
// expect(wrapper.vm.createdAt).toBe('')
// })
// })
//
// describe('test handleUpdateHomeCommunity', () => {
// describe('gms api key', () => {
// beforeEach(async () => {
// wrapper = Wrapper()
// wrapper.vm.originalGmsApiKey = 'original'
// wrapper.vm.gmsApiKey = 'changed key'
//
// await wrapper.vm.handleUpdateHomeCommunity()
// // Wait for the next tick to allow async operations to complete
// await wrapper.vm.$nextTick()
// })
//
// it('expect changed gms api key', () => {
// expect(updateHomeCommunityMock).toBeCalledWith({
// uuid: propsData.item.uuid,
// gmsApiKey: 'changed key',
// location: undefined,
// })
// expect(wrapper.vm.originalGmsApiKey).toBe('changed key')
// expect(toastSuccessSpy).toBeCalledWith('federation.toast_gmsApiKeyUpdated')
// })
// })
//
// describe('location', () => {
// beforeEach(async () => {
// wrapper = Wrapper()
// wrapper.vm.originalLocation = { latitude: 15.121, longitude: 1.212 }
// wrapper.vm.location = { latitude: 1.121, longitude: 17.212 }
//
// await wrapper.vm.handleUpdateHomeCommunity()
// // Wait for the next tick to allow async operations to complete
// await wrapper.vm.$nextTick()
// })
//
// it('expect changed location', () => {
// expect(updateHomeCommunityMock).toBeCalledWith({
// uuid: propsData.item.uuid,
// location: { latitude: 1.121, longitude: 17.212 },
// gmsApiKey: undefined,
// })
// expect(wrapper.vm.originalLocation).toStrictEqual({
// latitude: 1.121,
// longitude: 17.212,
// })
// expect(toastSuccessSpy).toBeCalledWith('federation.toast_gmsLocationUpdated')
// })
// })
//
// describe('gms api key and location', () => {
// beforeEach(async () => {
// wrapper = Wrapper()
// wrapper.vm.originalGmsApiKey = 'original'
// wrapper.vm.gmsApiKey = 'changed key'
// wrapper.vm.originalLocation = { latitude: 15.121, longitude: 1.212 }
// wrapper.vm.location = { latitude: 1.121, longitude: 17.212 }
//
// await wrapper.vm.handleUpdateHomeCommunity()
// // Wait for the next tick to allow async operations to complete
// await wrapper.vm.$nextTick()
// })
//
// it('expect changed gms api key and changed location', () => {
// expect(updateHomeCommunityMock).toBeCalledWith({
// uuid: propsData.item.uuid,
// gmsApiKey: 'changed key',
// location: undefined,
// })
// expect(wrapper.vm.originalGmsApiKey).toBe('changed key')
// expect(wrapper.vm.originalLocation).toStrictEqual({
// latitude: 1.121,
// longitude: 17.212,
// })
// expect(toastSuccessSpy).toBeCalledWith('federation.toast_gmsApiKeyAndLocationUpdated')
// })
// })
// })
//
// describe('test resetHomeCommunityEditable', () => {
// beforeEach(async () => {
// wrapper = Wrapper()
// })
//
// it('test', () => {
// wrapper.vm.originalGmsApiKey = 'original'
// wrapper.vm.gmsApiKey = 'changed key'
// wrapper.vm.originalLocation = { latitude: 15.121, longitude: 1.212 }
// wrapper.vm.location = { latitude: 1.121, longitude: 17.212 }
// wrapper.vm.resetHomeCommunityEditable()
//
// expect(wrapper.vm.location).toStrictEqual({ latitude: 15.121, longitude: 1.212 })
// expect(wrapper.vm.gmsApiKey).toBe('original')
// })
// })
// })
// })
// })
// })
import { mount } from '@vue/test-utils'
import VueApollo from 'vue-apollo'
import Vuex from 'vuex'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { createStore } from 'vuex'
import CommunityVisualizeItem from './CommunityVisualizeItem.vue'
import { updateHomeCommunity } from '../../graphql/updateHomeCommunity'
import { toastSuccessSpy } from '../../../test/testSetup'
import { BCol, BFormGroup, BListGroup, BListGroupItem, BRow } from 'bootstrap-vue-next'
import { de, enUS as en, fr, es, nl } from 'date-fns/locale'
import { useI18n } from 'vue-i18n'
import { nextTick, ref } from 'vue'
import { formatDistanceToNow } from 'date-fns'
const mockClient = createMockClient()
const apolloProvider = new VueApollo({
defaultClient: mockClient,
})
vi.mock('@/composables/useToast', () => ({
useAppToast: vi.fn(() => ({
toastSuccess: vi.fn(),
toastError: vi.fn(),
})),
}))
vi.mock('vue-i18n', () => ({
useI18n: vi.fn(() => ({
locale: ref('en'),
t: (key) => key,
})),
}))
const mockMutate = vi.fn().mockResolvedValue({ data: { updateHomeCommunity: { id: 1 } } })
vi.mock('@vue/apollo-composable', () => ({
useMutation: vi.fn(() => ({
mutate: mockMutate,
})),
}))
const localVue = global.localVue
localVue.use(Vuex)
localVue.use(VueApollo)
const today = new Date()
const createdDate = new Date()
const createdDate = new Date(today)
createdDate.setDate(createdDate.getDate() - 3)
// Mock für den Vuex-Store
const store = new Vuex.Store({
state: {
moderator: {
roles: ['ADMIN'],
const createItem = (overrides = {}) => ({
uuid: 1,
foreign: false,
url: 'http://localhost/api/',
publicKey: '4007170edd8d33fb009cd99ee4e87f214e7cd21b668d45540a064deb42e243c2',
communityUuid: '5ab0befd-b150-4f31-a631-7f3637e47b21',
authenticatedAt: null,
name: 'Gradido Test',
description: 'Gradido Community zum testen',
gmsApiKey: '<api key>',
creationDate: createdDate,
createdAt: createdDate,
updatedAt: createdDate,
federatedCommunities: [
{
id: 2046,
apiVersion: '2_0',
endPoint: 'http://localhost/api/',
lastAnnouncedAt: createdDate,
verifiedAt: today,
lastErrorAt: null,
createdAt: createdDate,
updatedAt: null,
},
},
{
id: 2045,
apiVersion: '1_1',
endPoint: 'http://localhost/api/',
lastAnnouncedAt: null,
verifiedAt: null,
lastErrorAt: null,
createdAt: '2024-01-16T10:08:21.550Z',
updatedAt: null,
},
{
id: 2044,
apiVersion: '1_0',
endPoint: 'http://localhost/api/',
lastAnnouncedAt: null,
verifiedAt: null,
lastErrorAt: null,
createdAt: '2024-01-16T10:08:21.544Z',
updatedAt: null,
},
],
...overrides,
})
let propsData = {
item: {
uuid: 1,
foreign: false,
url: 'http://localhost/api/',
publicKey: '4007170edd8d33fb009cd99ee4e87f214e7cd21b668d45540a064deb42e243c2',
communityUuid: '5ab0befd-b150-4f31-a631-7f3637e47b21',
authenticatedAt: null,
name: 'Gradido Test',
description: 'Gradido Community zum testen',
gmsApiKey: '<api key>',
creationDate: createdDate,
createdAt: createdDate,
updatedAt: createdDate,
federatedCommunities: [
{
id: 2046,
apiVersion: '2_0',
endPoint: 'http://localhost/api/',
lastAnnouncedAt: createdDate,
verifiedAt: today,
lastErrorAt: null,
createdAt: createdDate,
updatedAt: null,
},
{
id: 2045,
apiVersion: '1_1',
endPoint: 'http://localhost/api/',
lastAnnouncedAt: null,
verifiedAt: null,
lastErrorAt: null,
createdAt: '2024-01-16T10:08:21.550Z',
updatedAt: null,
},
{
id: 2044,
apiVersion: '1_0',
endPoint: 'http://localhost/api/',
lastAnnouncedAt: null,
verifiedAt: null,
lastErrorAt: null,
createdAt: '2024-01-16T10:08:21.544Z',
updatedAt: null,
},
],
},
}
const mocks = {
$t: (key) => key,
$i18n: {
locale: 'en',
},
}
describe('CommunityVisualizeItem', () => {
let wrapper
let store
let mockI18n
const updateHomeCommunityMock = jest.fn()
mockClient.setRequestHandler(
updateHomeCommunity,
updateHomeCommunityMock.mockResolvedValue({
data: {
updateHomeCommunity: { id: 1 },
const createWrapper = (props = {}, locale = 'en') => {
store = createStore({
state: {
moderator: {
roles: ['ADMIN'],
},
},
}),
)
})
const Wrapper = () => {
return mount(CommunityVisualizeItem, { localVue, mocks, propsData, store, apolloProvider })
mockI18n = {
locale: ref(locale),
t: (key) => key,
}
vi.mocked(useI18n).mockReturnValue(mockI18n)
return mount(CommunityVisualizeItem, {
props: {
item: createItem(),
...props,
},
global: {
plugins: [store],
mocks: {
$t: (key) => key,
$i18n: {
locale: locale,
},
},
stubs: {
BRow,
BCol,
BListGroup,
BListGroupItem,
BFormGroup,
'variant-icon': true,
'editable-group': true,
'editable-groupable-label': true,
coordinates: true,
'federation-visualize-item': true,
},
directives: {
'b-tooltip': {},
},
},
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
beforeEach(() => {
vi.clearAllMocks()
wrapper = createWrapper()
})
it('renders the component', () => {
expect(wrapper.exists()).toBe(true)
expect(wrapper.find('div.community-visualize-item').exists()).toBe(true)
expect(wrapper.find('.details').exists()).toBe(false)
})
it('toggles details on click', async () => {
await wrapper.find('.row').trigger('click')
expect(wrapper.find('.details').exists()).toBe(true)
await wrapper.find('.row').trigger('click')
expect(wrapper.find('.details').exists()).toBe(false)
})
describe('rendering item properties', () => {
it('has the url', () => {
expect(wrapper.find('.row > div:nth-child(2) > div > a').text()).toBe('http://localhost/api/')
})
it('renders the component', () => {
expect(wrapper.exists()).toBe(true)
expect(wrapper.find('div.community-visualize-item').exists()).toBe(true)
expect(wrapper.find('.details').exists()).toBe(false)
it('has the public key', () => {
expect(wrapper.find('.row > div:nth-child(2) > small').text()).toContain(
'4007170edd8d33fb009cd99ee4e87f214e7cd21b668d45540a064deb42e243c2'.substring(0, 26),
)
})
it('toggles details on click', async () => {
// Click the row to toggle details
await wrapper.find('.row').trigger('click')
describe('verified item', () => {
it('has the check icon', () => {
expect(wrapper.find('variant-icon-stub[icon="check"]').exists()).toBe(true)
})
// Assert that details are now open
expect(wrapper.find('.details').exists()).toBe(true)
// Click the row again to toggle details back
await wrapper.find('.row').trigger('click')
// Assert that details are now closed
expect(wrapper.find('.details').exists()).toBe(false)
it('has the text variant "success"', () => {
expect(wrapper.find('variant-icon-stub[variant="success"]').exists()).toBe(true)
})
})
describe('rendering item properties', () => {
it('has the url', () => {
expect(wrapper.find('.row > div:nth-child(2) > div > a').text()).toBe(
'http://localhost/api/',
describe('lastAnnouncedAt', () => {
it.each([
['en', en],
['de', de],
['fr', fr],
['es', es],
['nl', nl],
])('computes the time string for %s locale', async (locale, dateLocale) => {
wrapper = createWrapper(
{
item: createItem(),
},
locale,
)
await nextTick()
const expectedString = formatDistanceToNow(createdDate, {
addSuffix: true,
locale: dateLocale,
})
expect(wrapper.vm.lastAnnouncedAt).toBe(expectedString)
})
it('has the public key', () => {
expect(wrapper.find('.row > div:nth-child(2) > small').text()).toContain(
'4007170edd8d33fb009cd99ee4e87f214e7cd21b668d45540a064deb42e243c2'.substring(0, 26),
it('computes empty string when lastAnnouncedAt is null', () => {
wrapper = createWrapper({ item: createItem({ federatedCommunities: [] }) })
expect(wrapper.vm.lastAnnouncedAt).toBe('')
})
})
describe('createdAt', () => {
it.each([
['en', en],
['de', de],
['fr', fr],
['es', es],
['nl', nl],
])('computes the time string for %s locale', async (locale, dateLocale) => {
wrapper = createWrapper(
{
item: createItem(),
},
locale,
)
await nextTick()
const expectedString = formatDistanceToNow(createdDate, {
addSuffix: true,
locale: dateLocale,
})
expect(wrapper.vm.createdAt).toBe(expectedString)
})
describe('verified item', () => {
it('has the check icon', () => {
expect(wrapper.find('svg.bi-check').exists()).toBe(true)
})
it('has the text variant "success"', () => {
expect(wrapper.find('.text-success').exists()).toBe(true)
})
})
// describe('with different locales (de, en, fr, es, nl)', () => {
describe('lastAnnouncedAt', () => {
it('computes the time string for different locales (de, en, fr, es, nl)', () => {
wrapper.vm.$i18n.locale = 'de'
wrapper = Wrapper()
expect(wrapper.vm.lastAnnouncedAt).toBe('vor 3 Tagen')
wrapper.vm.$i18n.locale = 'fr'
wrapper = Wrapper()
expect(wrapper.vm.lastAnnouncedAt).toBe('il y a 3 jours')
wrapper.vm.$i18n.locale = 'es'
wrapper = Wrapper()
expect(wrapper.vm.lastAnnouncedAt).toBe('hace 3 días')
wrapper.vm.$i18n.locale = 'nl'
wrapper = Wrapper()
expect(wrapper.vm.lastAnnouncedAt).toBe('3 dagen geleden')
})
describe('lastAnnouncedAt == null', () => {
beforeEach(() => {
propsData = {
item: {
uuid: 7590,
foreign: false,
publicKey: 'eaf6a426b24fd54f8fbae11c17700fc595080ca25159579c63d38dbc64284ba7',
url: 'http://localhost/api/2_0',
lastAnnouncedAt: null,
verifiedAt: null,
lastErrorAt: null,
createdAt: createdDate,
updatedAt: null,
},
}
wrapper = Wrapper()
})
it('computes empty string', async () => {
expect(wrapper.vm.lastAnnouncedAt).toBe('')
})
})
})
describe('createdAt', () => {
it('computes the time string for different locales (de, en, fr, es, nl)', () => {
wrapper.vm.$i18n.locale = 'de'
wrapper = Wrapper()
expect(wrapper.vm.createdAt).toBe('vor 3 Tagen')
wrapper.vm.$i18n.locale = 'fr'
wrapper = Wrapper()
expect(wrapper.vm.createdAt).toBe('il y a 3 jours')
wrapper.vm.$i18n.locale = 'es'
wrapper = Wrapper()
expect(wrapper.vm.createdAt).toBe('hace 3 días')
wrapper.vm.$i18n.locale = 'nl'
wrapper = Wrapper()
expect(wrapper.vm.createdAt).toBe('3 dagen geleden')
})
describe('not verified item', () => {
beforeEach(() => {
propsData = {
item: {
uuid: 7590,
foreign: false,
publicKey: 'eaf6a426b24fd54f8fbae11c17700fc595080ca25159579c63d38dbc64284ba7',
url: 'http://localhost/api/',
createdAt: createdDate,
updatedAt: null,
},
}
wrapper = Wrapper()
})
it('has the x-circle icon', () => {
expect(wrapper.find('svg.bi-x-circle').exists()).toBe(true)
})
it('has the text variant "danger"', () => {
expect(wrapper.find('.text-danger').exists()).toBe(true)
})
})
describe('createdAt == null', () => {
beforeEach(() => {
propsData = {
item: {
uuid: 7590,
foreign: false,
publicKey: 'eaf6a426b24fd54f8fbae11c17700fc595080ca25159579c63d38dbc64284ba7',
url: 'http://localhost/api/2_0',
communityUuid: '5ab0befd-b150-4f31-a631-7f3637e47b21',
authenticatedAt: null,
creationDate: null,
createdAt: null,
updatedAt: null,
},
}
wrapper = Wrapper()
})
it('computes empty string', async () => {
expect(wrapper.vm.createdAt).toBe('')
})
})
describe('test handleUpdateHomeCommunity', () => {
describe('gms api key', () => {
beforeEach(async () => {
wrapper = Wrapper()
wrapper.vm.originalGmsApiKey = 'original'
wrapper.vm.gmsApiKey = 'changed key'
await wrapper.vm.handleUpdateHomeCommunity()
// Wait for the next tick to allow async operations to complete
await wrapper.vm.$nextTick()
})
it('expect changed gms api key', () => {
expect(updateHomeCommunityMock).toBeCalledWith({
uuid: propsData.item.uuid,
gmsApiKey: 'changed key',
location: undefined,
})
expect(wrapper.vm.originalGmsApiKey).toBe('changed key')
expect(toastSuccessSpy).toBeCalledWith('federation.toast_gmsApiKeyUpdated')
})
})
describe('location', () => {
beforeEach(async () => {
wrapper = Wrapper()
wrapper.vm.originalLocation = { latitude: 15.121, longitude: 1.212 }
wrapper.vm.location = { latitude: 1.121, longitude: 17.212 }
await wrapper.vm.handleUpdateHomeCommunity()
// Wait for the next tick to allow async operations to complete
await wrapper.vm.$nextTick()
})
it('expect changed location', () => {
expect(updateHomeCommunityMock).toBeCalledWith({
uuid: propsData.item.uuid,
location: { latitude: 1.121, longitude: 17.212 },
gmsApiKey: undefined,
})
expect(wrapper.vm.originalLocation).toStrictEqual({
latitude: 1.121,
longitude: 17.212,
})
expect(toastSuccessSpy).toBeCalledWith('federation.toast_gmsLocationUpdated')
})
})
describe('gms api key and location', () => {
beforeEach(async () => {
wrapper = Wrapper()
wrapper.vm.originalGmsApiKey = 'original'
wrapper.vm.gmsApiKey = 'changed key'
wrapper.vm.originalLocation = { latitude: 15.121, longitude: 1.212 }
wrapper.vm.location = { latitude: 1.121, longitude: 17.212 }
await wrapper.vm.handleUpdateHomeCommunity()
// Wait for the next tick to allow async operations to complete
await wrapper.vm.$nextTick()
})
it('expect changed gms api key and changed location', () => {
expect(updateHomeCommunityMock).toBeCalledWith({
uuid: propsData.item.uuid,
gmsApiKey: 'changed key',
location: undefined,
})
expect(wrapper.vm.originalGmsApiKey).toBe('changed key')
expect(wrapper.vm.originalLocation).toStrictEqual({
latitude: 1.121,
longitude: 17.212,
})
expect(toastSuccessSpy).toBeCalledWith('federation.toast_gmsApiKeyAndLocationUpdated')
})
})
})
describe('test resetHomeCommunityEditable', () => {
beforeEach(async () => {
wrapper = Wrapper()
})
it('test', () => {
wrapper.vm.originalGmsApiKey = 'original'
wrapper.vm.gmsApiKey = 'changed key'
wrapper.vm.originalLocation = { latitude: 15.121, longitude: 1.212 }
wrapper.vm.location = { latitude: 1.121, longitude: 17.212 }
wrapper.vm.resetHomeCommunityEditable()
expect(wrapper.vm.location).toStrictEqual({ latitude: 15.121, longitude: 1.212 })
expect(wrapper.vm.gmsApiKey).toBe('original')
})
})
it('computes empty string when createdAt is null', () => {
wrapper = createWrapper({ item: createItem({ createdAt: null }) })
expect(wrapper.vm.createdAt).toBe('')
})
})
})
describe('not verified item', () => {
beforeEach(() => {
wrapper = createWrapper({
item: createItem({ federatedCommunities: [] }),
})
})
it('has the x-circle icon', () => {
expect(wrapper.find('variant-icon-stub[icon="x-circle"]').exists()).toBe(true)
})
it('has the text variant "danger"', () => {
expect(wrapper.find('variant-icon-stub[variant="danger"]').exists()).toBe(true)
})
})
describe('handleUpdateHomeCommunity', () => {
beforeEach(() => {
wrapper = createWrapper()
})
it('updates gms api key', async () => {
wrapper.vm.gmsApiKey = 'changed key'
await wrapper.vm.handleUpdateHomeCommunity()
expect(mockMutate).toHaveBeenCalledWith({
uuid: 1,
gmsApiKey: 'changed key',
})
})
it('updates location', async () => {
wrapper.vm.location = { latitude: 1.121, longitude: 17.212 }
await wrapper.vm.handleUpdateHomeCommunity()
expect(mockMutate).toHaveBeenCalledWith({
uuid: 1,
location: { latitude: 1.121, longitude: 17.212 },
gmsApiKey: '<api key>',
})
})
it('updates both gms api key and location', async () => {
wrapper.vm.gmsApiKey = 'changed key'
wrapper.vm.location = { latitude: 1.121, longitude: 17.212 }
await wrapper.vm.handleUpdateHomeCommunity()
expect(mockMutate).toHaveBeenCalledWith({
uuid: 1,
gmsApiKey: 'changed key',
location: { latitude: 1.121, longitude: 17.212 },
})
})
})
describe('resetHomeCommunityEditable', () => {
it('resets gms api key and location', () => {
wrapper.vm.gmsApiKey = 'changed key'
wrapper.vm.location = { latitude: 1.121, longitude: 17.212 }
wrapper.vm.resetHomeCommunityEditable()
expect(wrapper.vm.gmsApiKey).toBe('<api key>')
expect(wrapper.vm.location).toEqual(wrapper.vm.originalLocation)
})
})
})

8
admin/src/components/Federation/CommunityVisualizeItem.vue
View File

@ -174,11 +174,9 @@ const toggleDetails = () => {
const handleUpdateHomeCommunity = async () => {
try {
await updateHomeCommunityMutation({
variables: {
uuid: item.value.uuid,
gmsApiKey: gmsApiKey.value,
location: location.value,
},
uuid: item.value.uuid,
gmsApiKey: gmsApiKey.value,
location: location.value,
})
if (isLocationChanged.value && isGMSApiKeyChanged.value) {

82
admin/src/components/FigureQrCode.spec.js
View File

@ -1,30 +1,72 @@
import { mount } from '@vue/test-utils'
import FigureQrCode from './FigureQrCode'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import FigureQrCode from './FigureQrCode.vue'
import { QRCanvas } from 'qrcanvas-vue'
const localVue = global.localVue
const propsData = {
link: '',
}
// Mock QRCanvas component
vi.mock('qrcanvas-vue', () => ({
QRCanvas: {
name: 'QRCanvas',
template: '<div class="mock-qr-canvas"></div>',
},
}))
describe('FigureQrCode', () => {
let wrapper
let mockImage
const Wrapper = () => {
return mount(FigureQrCode, { localVue, propsData })
}
beforeEach(() => {
// Mock Image object
mockImage = {
src: '',
onload: null,
}
global.Image = vi.fn(() => mockImage)
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('renders the Div Element ".figure-qr-code"', () => {
expect(wrapper.find('div.figure-qr-code').exists()).toBe(true)
})
it('renders the QRCanvas Element ".canvas"', () => {
expect(wrapper.find('.canvas').exists()).toBe(true)
wrapper = mount(FigureQrCode, {
props: {
link: 'https://example.com',
},
global: {
stubs: {
QRCanvas: true,
},
},
})
})
it('renders the component', () => {
expect(wrapper.find('.figure-qr-code').exists()).toBe(true)
expect(wrapper.find('.qrbox').exists()).toBe(true)
})
it('does not render QRCanvas initially', () => {
expect(wrapper.find('.canvas').exists()).toBe(false)
})
it('renders QRCanvas after image loads', async () => {
expect(wrapper.vm.showQr).toBe(false)
mockImage.onload()
await wrapper.vm.$nextTick()
expect(wrapper.vm.showQr).toBe(true)
expect(wrapper.findComponent(QRCanvas).exists()).toBe(true)
})
it('sets correct qrOptions', () => {
expect(wrapper.vm.qrOptions).toEqual({
cellSize: 8,
correctLevel: 'H',
data: 'https://example.com',
logo: { image: null },
})
})
it('updates qrOptions when link prop changes', async () => {
await wrapper.setProps({ link: 'https://newexample.com' })
expect(wrapper.vm.qrOptions.data).toBe('https://newexample.com')
})
it('loads the correct image', () => {
expect(mockImage.src).toBe('/img/gdd-coin.png')
})
})

194
admin/src/components/NavBar.spec.js
View File

@ -1,124 +1,130 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest'
import NavBar from './NavBar'
import { createStore } from 'vuex'
import { createRouter, createWebHistory } from 'vue-router'
import CONFIG from '../config'
import { BNavbar, BNavbarNav, BNavItem } from 'bootstrap-vue-next'
const localVue = global.localVue
// Mock vue-router
vi.mock('vue-router', async () => {
const actual = await vi.importActual('vue-router')
return {
...actual,
useRoute: vi.fn(() => ({
name: 'user',
})),
}
})
const apolloMutateMock = jest.fn()
const storeDispatchMock = jest.fn()
const routerPushMock = jest.fn()
const stubs = {
RouterLink: true,
}
const mocks = {
$t: jest.fn((t) => t),
$apollo: {
mutate: apolloMutateMock,
},
$store: {
const createVuexStore = () =>
createStore({
state: {
openCreations: 1,
token: 'valid-token',
},
dispatch: storeDispatchMock,
},
$router: {
push: routerPushMock,
},
}
actions: {
logout: vi.fn(),
},
})
vi.mock('@vue/apollo-composable', () => ({
useMutation: vi.fn(() => ({
mutate: vi.fn(),
})),
}))
describe('NavBar', () => {
let wrapper
let store
let router
let originalWindow
const Wrapper = () => {
return mount(NavBar, { mocks, localVue, stubs })
const createWrapper = () => {
return mount(NavBar, {
global: {
components: {
BNavbarNav,
BNavItem,
BNavbar,
},
plugins: [store, router],
mocks: {
$t: (key) => key,
},
stubs: {
BCollapse: { template: '<div><slot></slot></div>' },
BNavbarBrand: { template: '<div><slot></slot></div>' },
BBadge: { template: '<div><slot></slot></div>' },
BNavbarToggle: { template: '<div><slot></slot></div>' },
},
directives: {
vBToggle: {},
vBColorMode: {},
},
},
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
beforeEach(() => {
store = createVuexStore()
router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/user', name: 'user' },
{ path: '/creation-confirm', name: 'creation-confirm' },
{ path: '/contribution-links', name: 'contribution-links' },
{ path: '/federation', name: 'federation' },
{ path: '/statistic', name: 'statistic' },
],
})
originalWindow = global.window
const windowMock = {
location: {
assign: vi.fn(),
},
}
vi.stubGlobal('window', windowMock)
it('has a DIV element with the class.component-nabvar', () => {
expect(wrapper.find('.component-nabvar').exists()).toBeTruthy()
})
wrapper = createWrapper()
})
afterEach(() => {
vi.unstubAllGlobals()
global.window = originalWindow
})
it('renders the component', () => {
expect(wrapper.find('.component-nabvar').exists()).toBe(true)
})
describe('Navbar Menu', () => {
it('has a link to /user', () => {
expect(wrapper.findAll('.nav-item').at(0).find('a').attributes('href')).toBe('/user')
})
it('has a link to /creation-confirm', () => {
expect(wrapper.findAll('.nav-item').at(1).find('a').attributes('href')).toBe(
'/creation-confirm',
)
})
it('has a link to /contribution-links', () => {
expect(wrapper.findAll('.nav-item').at(2).find('a').attributes('href')).toBe(
'/contribution-links',
)
})
it('has a link to /federation', () => {
expect(wrapper.findAll('.nav-item').at(3).find('a').attributes('href')).toBe('/federation')
})
it('has a link to /statistic', () => {
expect(wrapper.findAll('.nav-item').at(4).find('a').attributes('href')).toBe('/statistic')
it('has correct menu items', () => {
const navItems = wrapper.findAll('.nav-item a')
expect(navItems).toHaveLength(7)
expect(navItems[0].attributes('href')).toBe('/user')
expect(navItems[1].attributes('href')).toBe('/creation-confirm')
expect(navItems[2].attributes('href')).toBe('/contribution-links')
expect(navItems[3].attributes('href')).toBe('/federation')
expect(navItems[4].attributes('href')).toBe('/statistic')
})
})
describe('wallet', () => {
const windowLocation = window.location
beforeEach(async () => {
delete window.location
window.location = ''
await wrapper.findAll('.nav-item').at(5).find('a').trigger('click')
})
afterEach(() => {
delete window.location
window.location = windowLocation
})
it('changes window location to wallet', () => {
expect(window.location).toBe('http://localhost/authenticate?token=valid-token')
})
it('dispatches logout to store', () => {
expect(storeDispatchMock).toBeCalledWith('logout')
it('changes window location to wallet and dispatches logout', async () => {
const dispatchSpy = vi.spyOn(store, 'dispatch')
await wrapper.vm.handleWallet()
expect(window.location).toBe(CONFIG.WALLET_AUTH_URL.replace('{token}', 'valid-token'))
expect(dispatchSpy).toHaveBeenCalledWith('logout')
})
})
describe('logout', () => {
const windowLocationMock = jest.fn()
const windowLocation = window.location
beforeEach(async () => {
delete window.location
window.location = {
assign: windowLocationMock,
}
await wrapper.findAll('.nav-item').at(6).find('a').trigger('click')
})
afterEach(() => {
delete window.location
window.location = windowLocation
})
it('redirects to /logout', () => {
expect(windowLocationMock).toBeCalledWith('http://localhost/login')
})
it('dispatches logout to store', () => {
expect(storeDispatchMock).toBeCalledWith('logout')
})
it('has called logout mutation', () => {
expect(apolloMutateMock).toBeCalled()
it('redirects to login page and dispatches logout', async () => {
const dispatchSpy = vi.spyOn(store, 'dispatch')
await wrapper.vm.handleLogout()
expect(window.location.assign).toHaveBeenCalledWith(CONFIG.WALLET_LOGIN_URL)
expect(dispatchSpy).toHaveBeenCalledWith('logout')
})
})
})

6
admin/src/components/NavBar.vue
View File

@ -66,6 +66,10 @@ const route = useRoute()
const openCreations = computed(() => store.state.openCreations)
const currentRouteName = computed(() => {
return route.name
})
const { mutate: executeLogout } = useMutation(logout)
const handleLogout = async () => {
@ -81,7 +85,7 @@ const handleWallet = () => {
}
const isActive = (tabRoute) => {
return tabRoute === route.name
return tabRoute === currentRouteName.value
}
</script>
<style lang="scss" scoped>

43
admin/src/components/NotFoundPage.spec.js
View File

@ -1,30 +1,33 @@
import { mount } from '@vue/test-utils'
import NotFoundPage from './NotFoundPage'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import NotFoundPage from './NotFoundPage.vue'
import { useI18n } from 'vue-i18n'
const localVue = global.localVue
const mocks = {
$t: jest.fn((t) => t),
}
// Mock vue-i18n
vi.mock('vue-i18n')
describe('NotFoundPage', () => {
let wrapper
const Wrapper = () => {
return mount(NotFoundPage, { localVue, mocks })
}
beforeEach(() => {
// Mock the t function from useI18n
const mockT = vi.fn((key) => key)
useI18n.mockReturnValue({ t: mockT })
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('has a svg', () => {
expect(wrapper.find('svg').exists()).toBeTruthy()
})
it('has a back button', () => {
expect(wrapper.find('.test-back').exists()).toBeTruthy()
wrapper = mount(NotFoundPage, {
global: {
mocks: {
$t: mockT,
},
},
})
})
it('renders an SVG', () => {
expect(wrapper.find('svg').exists()).toBe(true)
})
it('renders a back button', () => {
expect(wrapper.find('.test-back').exists()).toBe(true)
})
})

82
admin/src/components/Overlay.spec.js
View File

@ -1,31 +1,75 @@
import { mount } from '@vue/test-utils'
import Overlay from './Overlay'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import Overlay from './Overlay.vue'
import { useI18n } from 'vue-i18n'
import { BButton, BCard, BCol, BContainer, BRow } from 'bootstrap-vue-next'
const localVue = global.localVue
const propsData = {
item: {},
}
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => String(d)),
}
vi.mock('vue-i18n')
describe('Overlay', () => {
const mockT = vi.fn((key) => key)
const mockD = vi.fn((date, format) => {
if (format === 'month') return 'January'
if (format === 'year') return '2023'
return date.toISOString()
})
let wrapper
const Wrapper = () => {
return mount(Overlay, { localVue, mocks, propsData })
const mockItem = {
amount: '100',
contributionDate: '2023-01-15T00:00:00.000Z',
memo: 'Test memo',
firstName: 'John',
lastName: 'Doe',
email: 'john.doe@example.com',
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
beforeEach(() => {
useI18n.mockReturnValue({ t: mockT, d: mockD })
it('has a DIV element with the class.component-overlay', () => {
expect(wrapper.find('.component-overlay').exists()).toBeTruthy()
wrapper = mount(Overlay, {
props: {
item: mockItem,
},
global: {
stubs: {
BCard,
BRow,
BCol,
BContainer,
BButton,
},
},
slots: {
title: '<div>Test Title</div>',
text: '<p>Test Text</p>',
question: '<p>Test Question?</p>',
'submit-btn': '<button>Submit</button>',
},
})
})
it('renders the component', () => {
expect(wrapper.find('.component-overlay').exists()).toBe(true)
})
it('renders slot content correctly', () => {
expect(wrapper.find('.display-3').html()).toContain('Test Title')
expect(wrapper.html()).toContain('<p>Test Text</p>')
expect(wrapper.html()).toContain('<p>Test Question?</p>')
expect(wrapper.html()).toContain('<button>Submit</button>')
})
it('displays item properties correctly', () => {
expect(wrapper.text()).toContain('100 GDD')
expect(wrapper.text()).toContain('Test memo')
expect(wrapper.text()).toContain('John Doe')
expect(wrapper.text()).toContain('john.doe@example.com')
})
it('emits overlay-cancel event when cancel button is clicked', async () => {
await wrapper.find('button.m-3.text-light').trigger('click')
expect(wrapper.emitted('overlay-cancel')).toBeTruthy()
expect(wrapper.emitted('overlay-cancel')).toHaveLength(1)
})
})

267
admin/src/components/Tables/OpenCreationsTable.spec.js
View File

@ -1,156 +1,133 @@
import { mount } from '@vue/test-utils'
import OpenCreationsTable from './OpenCreationsTable'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { shallowMount } from '@vue/test-utils'
import { createStore } from 'vuex'
import OpenCreationsTable from './OpenCreationsTable.vue'
const localVue = global.localVue
const apolloMutateMock = jest.fn().mockResolvedValue({})
const apolloQueryMock = jest.fn().mockResolvedValue({})
const propsData = {
items: [
{
id: 4,
firstName: 'Bob',
lastName: 'der Baumeister',
email: 'bob@baumeister.de',
amount: 300,
memo: 'Aktives Grundeinkommen für Januar 2022',
date: '2022-01-01T00:00:00.000Z',
moderatorId: 1,
creation: [700, 1000, 1000],
__typename: 'PendingCreation',
},
{
id: 5,
firstName: 'Räuber',
lastName: 'Hotzenplotz',
email: 'raeuber@hotzenplotz.de',
amount: 210,
memo: 'Aktives Grundeinkommen für Januar 2022',
date: '2022-01-01T00:00:00.000Z',
moderatorId: null,
creation: [790, 1000, 1000],
__typename: 'PendingCreation',
},
{
id: 6,
firstName: 'Stephen',
lastName: 'Hawking',
email: 'stephen@hawking.uk',
amount: 330,
memo: 'Aktives Grundeinkommen für Januar 2022',
date: '2022-01-01T00:00:00.000Z',
moderatorId: 1,
creation: [670, 1000, 1000],
__typename: 'PendingCreation',
},
],
fields: [
{ key: 'bookmark', label: 'delete' },
{ key: 'email', label: 'e_mail' },
{ key: 'firstName', label: 'firstname' },
{ key: 'lastName', label: 'lastname' },
{
key: 'amount',
label: 'creation',
formatter: (value) => {
return value + ' GDD'
},
},
{ key: 'memo', label: 'text', class: 'text-break' },
{
key: 'date',
label: 'date',
formatter: (value) => {
return value
},
},
{ key: 'moderator', label: 'moderator' },
{ key: 'editCreation', label: 'edit' },
{ key: 'confirm', label: 'save' },
],
toggleDetails: false,
hideResubmission: true,
}
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
$apollo: {
mutate: apolloMutateMock,
query: apolloQueryMock,
},
$store: {
state: {
moderator: {
id: 1,
name: 'test moderator',
},
},
},
}
vi.mock('../RowDetails', () => ({ default: { name: 'RowDetails' } }))
vi.mock('../EditCreationFormular', () => ({ default: { name: 'EditCreationFormular' } }))
vi.mock('../ContributionMessages/ContributionMessagesList', () => ({
default: { name: 'ContributionMessagesList' },
}))
describe('OpenCreationsTable', () => {
let wrapper
let store
const Wrapper = () => {
return mount(OpenCreationsTable, { localVue, mocks, propsData })
}
const mockItems = [
{ id: 1, status: 'PENDING', userId: 2, moderatorId: null, messagesCount: 0 },
{ id: 2, status: 'CONFIRMED', userId: 3, moderatorId: 1, messagesCount: 2 },
]
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
const mockFields = [
{ key: 'status', label: 'Status' },
{ key: 'bookmark', label: 'Bookmark' },
{ key: 'memo', label: 'Memo' },
{ key: 'editCreation', label: 'Edit' },
{ key: 'chatCreation', label: 'Chat' },
{ key: 'deny', label: 'Deny' },
{ key: 'confirm', label: 'Confirm' },
]
beforeEach(() => {
store = createStore({
state: {
moderator: {
id: 1,
},
},
})
it('has a DIV element with the class .open-creations-table', () => {
expect(wrapper.find('div.open-creations-table').exists()).toBe(true)
})
it('has a table with three rows', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(3)
})
it('find first button.bi-pencil-square for open EditCreationFormular ', () => {
expect(wrapper.findAll('tr').at(1).find('.bi-pencil-square').exists()).toBe(true)
})
it('has no button.bi-pencil-square for user contribution ', () => {
expect(wrapper.findAll('tr').at(2).find('.bi-pencil-square').exists()).toBe(false)
})
describe('show edit details', () => {
beforeEach(async () => {
await wrapper.findAll('tr').at(1).find('.bi-pencil-square').trigger('click')
})
it.skip('has a component element with name EditCreationFormular', () => {
expect(wrapper.findComponent({ name: 'EditCreationFormular' }).exists()).toBe(true)
})
it.skip('renders the component component-edit-creation-formular', () => {
expect(wrapper.find('div.component-edit-creation-formular').exists()).toBe(true)
})
})
describe('call updateStatus', () => {
beforeEach(() => {
wrapper.vm.updateStatus(4)
})
it('emits update-status', () => {
expect(wrapper.vm.$root.$emit('update-status', 4)).toBeTruthy()
})
})
describe('test reload-contribution', () => {
beforeEach(() => {
wrapper.vm.reloadContribution(3)
})
it('emits reload-contribution', () => {
expect(wrapper.emitted('reload-contribution')).toBeTruthy()
expect(wrapper.emitted('reload-contribution')[0]).toEqual([3])
})
wrapper = shallowMount(OpenCreationsTable, {
props: {
items: mockItems,
fields: mockFields,
hideResubmission: false,
},
global: {
plugins: [store],
mocks: {
$t: (key) => key,
},
stubs: {
BTableLite: true,
BButton: true,
IBiQuestionSquare: true,
IBiBellFill: true,
IBiCheck: true,
IBiXCircle: true,
IBiTrash: true,
IBiPencilSquare: true,
IBiChatDots: true,
IBiExclamationCircleFill: true,
IBiQuestionDiamond: true,
IBiX: true,
},
},
})
})
it('renders the component', () => {
expect(wrapper.exists()).toBe(true)
expect(wrapper.findComponent({ name: 'BTableLite' }).exists()).toBe(true)
})
it('applies correct row class based on status', () => {
const rowClass = wrapper.vm.rowClass({ status: 'CONFIRMED' }, 'row')
expect(rowClass).toBe('table-success')
})
it('emits show-overlay event when calling $emit', async () => {
const mockItem = mockItems[0]
await wrapper.vm.$emit('show-overlay', mockItem, 'delete')
expect(wrapper.emitted('show-overlay')).toBeTruthy()
expect(wrapper.emitted('show-overlay')[0]).toEqual([mockItem, 'delete'])
})
it('toggles row details correctly', () => {
const mockRow = {
toggleDetails: vi.fn(),
detailsShowing: false,
index: 0,
item: mockItems[0],
}
wrapper.vm.rowToggleDetails(mockRow, 0)
expect(mockRow.toggleDetails).toHaveBeenCalled()
expect(wrapper.vm.openRow).toEqual(mockRow)
expect(wrapper.vm.slotIndex).toBe(0)
expect(wrapper.vm.creationUserData).toEqual(mockItems[0])
})
it('identifies if the item belongs to the current user', () => {
expect(wrapper.vm.myself({ userId: 1 })).toBe(true)
expect(wrapper.vm.myself({ userId: 2 })).toBe(false)
})
it('emits update-contributions event', async () => {
await wrapper.vm.updateContributions()
expect(wrapper.emitted('update-contributions')).toBeTruthy()
})
it('emits update-status event', async () => {
const id = 1
await wrapper.vm.updateStatus(id)
expect(wrapper.emitted('update-status')).toBeTruthy()
expect(wrapper.emitted('update-status')[0]).toEqual([id])
})
it('emits reload-contribution event', async () => {
const id = 1
await wrapper.vm.reloadContribution(id)
expect(wrapper.emitted('reload-contribution')).toBeTruthy()
expect(wrapper.emitted('reload-contribution')[0]).toEqual([id])
})
it('gets correct status icon', () => {
expect(wrapper.vm.getStatusIcon('IN_PROGRESS')).toBe('question-square')
expect(wrapper.vm.getStatusIcon('PENDING')).toBe('bell-fill')
expect(wrapper.vm.getStatusIcon('CONFIRMED')).toBe('check')
expect(wrapper.vm.getStatusIcon('DENIED')).toBe('x-circle')
expect(wrapper.vm.getStatusIcon('DELETED')).toBe('trash')
expect(wrapper.vm.getStatusIcon('UNKNOWN')).toBe('default-icon')
})
})

32
admin/src/components/Tables/OpenCreationsTable.vue
View File

@ -131,7 +131,6 @@
</template>
<script>
import { toggleRowDetails } from '../../mixins/toggleRowDetails'
import RowDetails from '../RowDetails'
import EditCreationFormular from '../EditCreationFormular'
import ContributionMessagesList from '../ContributionMessages/ContributionMessagesList'
@ -151,7 +150,6 @@ export default {
RowDetails,
ContributionMessagesList,
},
mixins: [toggleRowDetails],
props: {
items: {
type: Array,
@ -171,6 +169,13 @@ export default {
},
},
emits: ['update-contributions', 'reload-contribution', 'update-status', 'show-overlay'],
data() {
return {
slotIndex: 0,
openRow: null,
creationUserData: {},
}
},
methods: {
myself(item) {
return item.userId === this.$store.state.moderator.id
@ -195,6 +200,29 @@ export default {
updateContributions() {
this.$emit('update-contributions')
},
rowToggleDetails(row, index) {
if (this.openRow) {
if (this.openRow.index === row.index) {
if (index === this.slotIndex) {
row.toggleDetails()
this.openRow = null
} else {
this.slotIndex = index
}
} else {
this.openRow.toggleDetails()
row.toggleDetails()
this.slotIndex = index
this.openRow = row
this.creationUserData = row.item
}
} else {
row.toggleDetails()
this.slotIndex = index
this.openRow = row
this.creationUserData = row.item
}
},
},
}
</script>

188
admin/src/components/Tables/SearchUserTable.spec.js
View File

@ -1,10 +1,59 @@
import { mount } from '@vue/test-utils'
import SearchUserTable from './SearchUserTable'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { createI18n } from 'vue-i18n'
import { createStore } from 'vuex'
import SearchUserTable from './SearchUserTable.vue'
import { BTable } from 'bootstrap-vue-next'
const localVue = global.localVue
const apolloMutateMock = jest.fn().mockResolvedValue({})
const apolloQueryMock = jest.fn().mockResolvedValue({})
vi.mock('../CreationFormular.vue', () => ({
default: {
template:
'<div class="component-creation-formular"><button @click="emitUpdateUserData">Update User Data</button></div>',
methods: {
emitUpdateUserData() {
this.$emit('update-user-data', this.item, [250, 500, 750])
},
},
props: ['item'],
},
}))
vi.mock('../ConfirmRegisterMailFormular.vue', () => ({
default: {
template: '<div class="confirm-register-mail-formular"><slot></slot></div>',
},
}))
vi.mock('../CreationTransactionList.vue', () => ({
default: {
template: '<div class="creation-transaction-list"><slot></slot></div>',
},
}))
vi.mock('../TransactionLinkList.vue', () => ({
default: {
template: '<div class="transaction-link-list"><slot></slot></div>',
},
}))
vi.mock('../ChangeUserRoleFormular.vue', () => ({
default: {
template:
'<div class="change-user-role-formular"><button @click="emitUpdateRoles">Update Roles</button></div>',
methods: {
emitUpdateRoles() {
this.$emit('updateRoles', { userId: 1, roles: ['ADMIN'] })
},
},
},
}))
vi.mock('../DeletedUserFormular.vue', () => ({
default: {
template:
'<div class="deleted-user-formular"><button @click="emitUpdateDeletedAt">Update Deleted At</button></div>',
methods: {
emitUpdateDeletedAt() {
this.$emit('updateDeletedAt', { userId: 1, deletedAt: new Date() })
},
},
},
}))
const propsData = {
items: [
@ -52,89 +101,88 @@ const propsData = {
{
key: 'creation',
label: 'creationLabel',
formatter: (value, key, item) => {
return value.join(' | ')
},
formatter: (value) => value.join(' | '),
},
{ key: 'status', label: 'status' },
],
}
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
$apollo: {
mutate: apolloMutateMock,
query: apolloQueryMock,
},
$store: {
state: {
moderator: {
id: 0,
name: 'test moderator',
roles: ['ADMIN'],
},
},
},
}
describe('SearchUserTable', () => {
let wrapper
const Wrapper = () => {
return mount(SearchUserTable, { localVue, mocks, propsData })
const createWrapper = () => {
const i18n = createI18n({
legacy: false,
locale: 'en',
})
const store = createStore({
state: {
moderator: {
id: 0,
name: 'test moderator',
roles: ['ADMIN'],
},
},
})
return mount(SearchUserTable, {
global: {
components: {
BTable,
},
plugins: [i18n, store],
stubs: {
IPhCaretUpFill: true,
IPhCaretDown: true,
},
},
props: propsData,
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
beforeEach(() => {
wrapper = createWrapper()
})
it('has a table with four rows', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(4)
})
describe('show row details', () => {
beforeEach(async () => {
await wrapper.findAll('tbody > tr').at(1).trigger('click')
})
it('has a table with four rows', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(4)
describe('isAdmin', () => {
it('emits updateRoles', async () => {
const changeUserRoleFormular = wrapper.find('.change-user-role-formular')
await changeUserRoleFormular.find('button').trigger('click')
expect(wrapper.emitted('update-roles')).toBeTruthy()
expect(wrapper.emitted('update-roles')[0]).toEqual([1, ['ADMIN']])
})
})
describe('show row details', () => {
beforeEach(async () => {
await wrapper.findAll('tbody > tr').at(1).trigger('click')
describe('deleted at', () => {
it('emits updateDeletedAt', async () => {
const deletedUserFormular = wrapper.find('.deleted-user-formular')
await deletedUserFormular.find('button').trigger('click')
expect(wrapper.emitted('update-deleted-at')).toBeTruthy()
expect(wrapper.emitted('update-deleted-at')[0][0]).toBe(1)
expect(wrapper.emitted('update-deleted-at')[0][1]).toBeInstanceOf(Date)
})
})
describe('isAdmin', () => {
beforeEach(async () => {
await wrapper.find('div.change-user-role-formular').vm.$emit('updateRoles', {
userId: 1,
roles: ['ADMIN'],
})
})
describe('updateUserData', () => {
it('updates the item', async () => {
const creationFormular = wrapper.find('.component-creation-formular')
await creationFormular.find('button').trigger('click')
it('emits updateIsAdmin', () => {
expect(wrapper.emitted('updateRoles')).toEqual([[1, ['ADMIN']]])
})
})
await wrapper.vm.$nextTick() // Wait for the next tick to ensure reactivity has updated
describe('deleted at', () => {
beforeEach(async () => {
await wrapper.find('div.deleted-user-formular').vm.$emit('updateDeletedAt', {
userId: 1,
deletedAt: new Date(),
})
})
it('emits updateDeletedAt', () => {
expect(wrapper.emitted('updateDeletedAt')).toEqual([[1, expect.any(Date)]])
})
})
describe('updateUserData', () => {
beforeEach(async () => {
await wrapper
.find('div.component-creation-formular')
.vm.$emit('update-user-data', propsData.items[1], [250, 500, 750])
})
it('updates the item', () => {
expect(wrapper.vm.items[1].creation).toEqual([250, 500, 750])
})
expect(wrapper.vm.myItems[1].creation).toEqual([250, 500, 750])
})
})
})

11
admin/src/components/Tables/SearchUserTable.vue
View File

@ -125,7 +125,7 @@
</div>
</template>
<script setup>
import { ref, nextTick, onMounted, watch, computed } from 'vue'
import { ref, nextTick, watch, computed } from 'vue'
import { BTable, BTab, BTabs, BCard, useModalController } from 'bootstrap-vue-next'
import { useStore } from 'vuex'
import { useI18n } from 'vue-i18n'
@ -290,13 +290,6 @@ watch(
return { ...item, _showDetails: false }
})
},
{ immediate: true },
)
onMounted(() => {
setTimeout(() => {
myItems.value = props.items.map((item) => {
return { ...item, _showDetails: false }
})
}, 500)
})
</script>

136
admin/src/components/Tables/StatisticTable.spec.js
View File

@ -1,50 +1,108 @@
import { mount } from '@vue/test-utils'
import StatisticTable from './StatisticTable'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import StatisticTable from './StatisticTable.vue'
import { useI18n } from 'vue-i18n'
import { BTableSimple, BTbody, BTd, BTh, BThead, BTr } from 'bootstrap-vue-next'
const localVue = global.localVue
const propsData = {
value: {
totalUsers: 3113,
activeUsers: 1057,
deletedUsers: 35,
totalGradidoCreated: '4083774.05000000000000000000',
totalGradidoDecayed: '-1062639.13634129622923372197',
totalGradidoAvailable: '2513565.869444365732411569',
totalGradidoUnbookedDecayed: '-500474.6738366222166261272',
},
}
const mocks = {
$t: jest.fn((t) => t),
$n: jest.fn((n) => n),
$d: jest.fn((d) => d),
}
vi.mock('vue-i18n')
describe('StatisticTable', () => {
let wrapper
const mockT = vi.fn((key) => key)
const mockN = vi.fn((n) => n.toFixed(2))
const Wrapper = () => {
return mount(StatisticTable, { localVue, mocks, propsData })
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
beforeEach(() => {
useI18n.mockReturnValue({
t: mockT,
n: mockN,
})
it('has a DIV element with the class .statistic-table', () => {
expect(wrapper.find('div.statistic-table').exists()).toBe(true)
})
describe('renders the table', () => {
it('with three colunms', () => {
expect(wrapper.findAll('thead > tr > th')).toHaveLength(3)
})
it('with seven rows', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(7)
})
wrapper = mount(StatisticTable, {
props: {
statistics: {
totalUsers: 3113,
activeUsers: 1057,
deletedUsers: 35,
totalGradidoCreated: '4083774.05000000000000000000',
totalGradidoDecayed: '-1062639.13634129622923372197',
totalGradidoAvailable: '2513565.869444365732411569',
totalGradidoUnbookedDecayed: '-500474.6738366222166261272',
},
},
global: {
stubs: {
BTableSimple,
BThead,
BTbody,
BTr,
BTh,
BTd,
},
},
})
})
it('renders the component', () => {
expect(wrapper.find('.statistic-table').exists()).toBe(true)
})
it('renders the table with correct structure', () => {
expect(wrapper.findAll('thead > tr > th')).toHaveLength(3)
expect(wrapper.findAll('tbody > tr')).toHaveLength(7)
})
it('displays correct column headers', () => {
const headers = wrapper.findAll('th')
expect(headers[1].text()).toBe('statistic.count')
expect(headers[2].text()).toBe('statistic.details')
})
it('displays total users correctly', () => {
const row = wrapper.findAll('tbody > tr')[0]
expect(row.findAll('td')[0].text()).toBe('statistic.totalUsers')
expect(row.findAll('td')[1].text()).toBe('3113')
})
it('displays active users correctly', () => {
const row = wrapper.findAll('tbody > tr')[1]
expect(row.findAll('td')[0].text()).toBe('statistic.activeUsers')
expect(row.findAll('td')[1].text()).toBe('1057')
})
it('displays deleted users correctly', () => {
const row = wrapper.findAll('tbody > tr')[2]
expect(row.findAll('td')[0].text()).toBe('statistic.deletedUsers')
expect(row.findAll('td')[1].text()).toBe('35')
})
it('displays total Gradido created correctly', () => {
const row = wrapper.findAll('tbody > tr')[3]
expect(row.findAll('td')[0].text()).toBe('statistic.totalGradidoCreated')
expect(row.findAll('td')[1].text()).toContain('4083774.05')
expect(row.findAll('td')[2].text()).toBe('4083774.05000000000000000000')
})
it('displays total Gradido decayed correctly', () => {
const row = wrapper.findAll('tbody > tr')[4]
expect(row.findAll('td')[0].text()).toBe('statistic.totalGradidoDecayed')
expect(row.findAll('td')[1].text()).toContain('-1062639.14')
expect(row.findAll('td')[1].text()).toContain('GDD')
expect(row.findAll('td')[2].text()).toBe('-1062639.13634129622923372197')
})
it('displays total Gradido available correctly', () => {
const row = wrapper.findAll('tbody > tr')[5]
expect(row.findAll('td')[0].text()).toBe('statistic.totalGradidoAvailable')
expect(row.findAll('td')[1].text()).toContain('2513565.87')
expect(row.findAll('td')[1].text()).toContain('GDD')
expect(row.findAll('td')[2].text()).toBe('2513565.869444365732411569')
})
it('displays total Gradido unbooked decayed correctly', () => {
const row = wrapper.findAll('tbody > tr')[6]
expect(row.findAll('td')[0].text()).toBe('statistic.totalGradidoUnbookedDecayed')
expect(row.findAll('td')[1].text()).toContain('-500474.67')
expect(row.findAll('td')[1].text()).toContain('GDD')
expect(row.findAll('td')[2].text()).toBe('-500474.6738366222166261272')
})
})

11
admin/src/components/Tables/StatisticTable.vue
View File

@ -42,8 +42,7 @@
<b>{{ $t('statistic.totalGradidoCreated') }}</b>
</BTd>
<BTd class="text-end">
<!-- {{ $n(props.statistics.totalGradidoCreated, 'decimal') }} {{ $t('GDD') }}-->
4500
{{ getDecimal(props.statistics.totalGradidoCreated) }} {{ $t('GDD') }}
</BTd>
<BTd class="text-end">
{{ props.statistics.totalGradidoCreated }}
@ -54,7 +53,7 @@
<b>{{ $t('statistic.totalGradidoDecayed') }}</b>
</BTd>
<BTd class="text-end">
{{ $n(parseFloat(props.statistics.totalGradidoDecayed), 'decimal') }} {{ $t('GDD') }}
{{ getDecimal(props.statistics.totalGradidoDecayed) }} {{ $t('GDD') }}
</BTd>
<BTd class="text-end">{{ props.statistics.totalGradidoDecayed }}</BTd>
</BTr>
@ -63,7 +62,7 @@
<b>{{ $t('statistic.totalGradidoAvailable') }}</b>
</BTd>
<BTd class="text-end">
{{ $n(parseFloat(props.statistics.totalGradidoAvailable), 'decimal') }} {{ $t('GDD') }}
{{ getDecimal(props.statistics.totalGradidoAvailable) }} {{ $t('GDD') }}
</BTd>
<BTd class="text-end">
{{ props.statistics.totalGradidoAvailable }}
@ -74,7 +73,7 @@
<b>{{ $t('statistic.totalGradidoUnbookedDecayed') }}</b>
</BTd>
<BTd class="text-end">
{{ $n(parseFloat(props.statistics.totalGradidoUnbookedDecayed), 'decimal') }}
{{ getDecimal(props.statistics.totalGradidoUnbookedDecayed) }}
{{ $t('GDD') }}
</BTd>
<BTd class="text-end">{{ props.statistics.totalGradidoUnbookedDecayed }}</BTd>
@ -92,4 +91,6 @@ const props = defineProps({
required: true,
},
})
const getDecimal = (toBeParsed) => parseFloat(toBeParsed).toFixed(2)
</script>

272
admin/src/components/TransactionLinkList.spec.js
View File

@ -1,140 +1,162 @@
import { mount } from '@vue/test-utils'
import TransactionLinkList from './TransactionLinkList'
import { listTransactionLinksAdmin } from '../graphql/listTransactionLinksAdmin.js'
import { toastErrorSpy } from '../../test/testSetup'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { nextTick, ref } from 'vue'
import TransactionLinkList from './TransactionLinkList.vue'
import { useQuery } from '@vue/apollo-composable'
import { useI18n } from 'vue-i18n'
import { useAppToast } from '@/composables/useToast'
import { BPagination, BTable } from 'bootstrap-vue-next'
const localVue = global.localVue
vi.mock('@vue/apollo-composable')
vi.mock('vue-i18n')
vi.mock('@/composables/useToast')
const apolloQueryMock = jest.fn()
apolloQueryMock.mockResolvedValue({
data: {
listTransactionLinksAdmin: {
count: 8,
links: [
{
amount: '19.99',
code: '62ef8236ace7217fbd066c5a',
createdAt: '2022-03-24T17:43:09.000Z',
deletedAt: null,
holdAvailableAmount: '20.51411720068412022949',
id: 36,
memo: 'Kein Trick, keine Zauberrei,\nbei Gradidio sei dabei!',
redeemedAt: null,
validUntil: '2022-04-07T17:43:09.000Z',
},
{
amount: '19.99',
code: '2b603f36521c617fbd066cef',
createdAt: '2022-03-24T17:43:09.000Z',
deletedAt: null,
holdAvailableAmount: '20.51411720068412022949',
id: 37,
memo: 'Kein Trick, keine Zauberrei,\nbei Gradidio sei dabei!',
redeemedAt: null,
validUntil: '2022-04-07T17:43:09.000Z',
},
{
amount: '19.99',
code: '0bb789b5bd5b717fbd066eb5',
createdAt: '2022-03-24T17:43:09.000Z',
deletedAt: '2022-03-24T17:43:09.000Z',
holdAvailableAmount: '20.51411720068412022949',
id: 40,
memo: 'Da habe ich mich wohl etwas übernommen.',
redeemedAt: '2022-04-07T14:43:09.000Z',
validUntil: '2022-04-07T17:43:09.000Z',
},
{
amount: '19.99',
code: '2d4a763e516b317fbd066a85',
createdAt: '2022-01-01T00:00:00.000Z',
deletedAt: null,
holdAvailableAmount: '20.51411720068412022949',
id: 33,
memo: 'Leider wollte niemand meine Gradidos zum Neujahr haben :(',
redeemedAt: null,
validUntil: '2022-01-15T00:00:00.000Z',
},
],
},
const mockLinks = [
{
amount: '19.99',
code: '62ef8236ace7217fbd066c5a',
createdAt: '2022-03-24T17:43:09.000Z',
deletedAt: null,
holdAvailableAmount: '20.51411720068412022949',
id: 36,
memo: 'Kein Trick, keine Zauberrei,\nbei Gradidio sei dabei!',
redeemedAt: null,
validUntil: '2022-04-07T17:43:09.000Z',
},
})
const propsData = {
userId: 42,
}
const mocks = {
$apollo: {
query: apolloQueryMock,
{
amount: '19.99',
code: '2b603f36521c617fbd066cef',
createdAt: '2022-03-24T17:43:09.000Z',
deletedAt: null,
holdAvailableAmount: '20.51411720068412022949',
id: 37,
memo: 'Kein Trick, keine Zauberrei,\nbei Gradidio sei dabei!',
redeemedAt: '2022-04-07T14:43:09.000Z',
validUntil: '2022-04-07T17:43:09.000Z',
},
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
}
{
amount: '19.99',
code: '0bb789b5bd5b717fbd066eb5',
createdAt: '2022-03-24T17:43:09.000Z',
deletedAt: '2022-03-24T17:43:09.000Z',
holdAvailableAmount: '20.51411720068412022949',
id: 40,
memo: 'Da habe ich mich wohl etwas übernommen.',
redeemedAt: '2022-04-07T14:43:09.000Z',
validUntil: '2022-04-07T17:43:09.000Z',
},
{
amount: '19.99',
code: '2d4a763e516b317fbd066a85',
createdAt: '2022-01-01T00:00:00.000Z',
deletedAt: null,
holdAvailableAmount: '20.51411720068412022949',
id: 33,
memo: 'Leider wollte niemand meine Gradidos zum Neujahr haben :(',
redeemedAt: null,
validUntil: '2022-01-15T00:00:00.000Z',
},
]
describe('TransactionLinkList', () => {
const mockT = vi.fn((key) => key)
const mockD = vi.fn((date) => new Date(date).toISOString())
const mockToastError = vi.fn()
let wrapper
let mockResult
let mockError
let mockRefetch
const Wrapper = () => {
return mount(TransactionLinkList, { localVue, mocks, propsData })
}
beforeEach(() => {
vi.useFakeTimers()
vi.setSystemTime(new Date('2022-04-01T00:00:00.000Z'))
describe('mount', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = Wrapper()
useI18n.mockReturnValue({ t: mockT, d: mockD })
useAppToast.mockReturnValue({ toastError: mockToastError })
mockResult = ref(null)
mockError = ref(null)
mockRefetch = vi.fn()
useQuery.mockReturnValue({
result: mockResult,
error: mockError,
refetch: mockRefetch,
})
it('calls the API', () => {
expect(apolloQueryMock).toBeCalledWith(
expect.objectContaining({
query: listTransactionLinksAdmin,
variables: {
currentPage: 1,
pageSize: 5,
userId: 42,
},
}),
)
})
it('has 4 items in the table', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(4)
})
it('has pagination buttons', () => {
expect(wrapper.findComponent({ name: 'BPagination' }).exists()).toBe(true)
})
describe('next page', () => {
beforeAll(async () => {
jest.clearAllMocks()
await wrapper.findComponent({ name: 'BPagination' }).vm.$emit('input', 2)
})
it('calls the API again', () => {
expect(apolloQueryMock).toBeCalledWith(
expect.objectContaining({
query: listTransactionLinksAdmin,
variables: {
currentPage: 1,
pageSize: 5,
userId: 42,
},
}),
)
})
})
describe('server response with error', () => {
beforeEach(() => {
apolloQueryMock.mockRejectedValue({ message: 'Oh no!' })
wrapper = Wrapper()
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Oh no!')
})
wrapper = mount(TransactionLinkList, {
props: {
userId: 123,
},
global: {
stubs: {
BTable,
BPagination,
},
},
})
})
it('renders the component with mock data', async () => {
mockResult.value = {
listTransactionLinksAdmin: {
count: mockLinks.length,
links: mockLinks,
},
}
await nextTick()
expect(wrapper.find('.transaction-link-list').exists()).toBe(true)
expect(wrapper.vm.items).toHaveLength(4)
expect(wrapper.vm.rows).toBe(4)
})
it('formats amount correctly', () => {
const amountField = wrapper.vm.fields.find((f) => f.key === 'amount')
expect(amountField.formatter('19.99')).toBe('19.99 GDD')
})
it('formats status correctly for different scenarios', () => {
const statusField = wrapper.vm.fields.find((f) => f.key === 'status')
// Open transaction
expect(statusField.formatter(null, null, mockLinks[0])).toBe('open')
// Deleted transaction
expect(statusField.formatter(null, null, mockLinks[2])).toContain('deleted')
expect(statusField.formatter(null, null, mockLinks[2])).toContain('2022-03-24T17:43:09.000Z')
// Redeemed transaction
expect(statusField.formatter(null, null, mockLinks[1])).toContain('redeemed')
expect(statusField.formatter(null, null, mockLinks[1])).toContain('2022-04-07T14:43:09.000Z')
// Expired transaction
expect(statusField.formatter(null, null, mockLinks[3])).toContain('expired')
expect(statusField.formatter(null, null, mockLinks[3])).toContain('2022-01-15T00:00:00.000Z')
})
it('displays correct memo', () => {
const memoField = wrapper.vm.fields.find((f) => f.key === 'memo')
expect(memoField.label).toBe('transactionlist.memo')
expect(memoField.class).toBe('text-break')
})
it('formats dates correctly', () => {
const createdAtField = wrapper.vm.fields.find((f) => f.key === 'createdAt')
const validUntilField = wrapper.vm.fields.find((f) => f.key === 'validUntil')
expect(createdAtField.formatter('2022-03-24T17:43:09.000Z')).toBe('2022-03-24T17:43:09.000Z')
expect(validUntilField.formatter('2022-04-07T17:43:09.000Z')).toBe('2022-04-07T17:43:09.000Z')
})
it('refetches data when currentPage changes', async () => {
wrapper.vm.currentPage = 2
await nextTick()
expect(mockRefetch).toHaveBeenCalled()
})
it('refetches data when perPage changes', async () => {
wrapper.vm.perPage = 10
await nextTick()
expect(mockRefetch).toHaveBeenCalled()
})
})

116
admin/src/components/UserQuery.spec.js
View File

@ -1,47 +1,87 @@
import { mount } from '@vue/test-utils'
import UserQuery from './UserQuery'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import UserQuery from './UserQuery.vue'
import { useI18n } from 'vue-i18n'
import { BFormInput, BInputGroupText } from 'bootstrap-vue-next'
const localVue = global.localVue
vi.mock('vue-i18n')
const propsData = {
userId: 42,
}
const mocks = {
$t: jest.fn((t) => t),
}
describe('TransactionLinkList', () => {
describe('UserQuery', () => {
const mockT = vi.fn((key) => key)
let wrapper
const Wrapper = () => {
return mount(UserQuery, { mocks, localVue, propsData })
}
beforeEach(() => {
useI18n.mockReturnValue({ t: mockT })
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('has div .input-group', () => {
expect(wrapper.find('div .input-group').exists()).toBe(true)
})
it('has .test-input-criteria', () => {
expect(wrapper.find('input.test-input-criteria').exists()).toBe(true)
})
describe('set value', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.find('input.test-input-criteria').setValue('Test2')
})
it('emits input', () => {
expect(wrapper.emitted('input')).toBeTruthy()
})
it('emits input with value "Test2"', () => {
expect(wrapper.emitted('input')).toEqual([['Test2']])
})
wrapper = mount(UserQuery, {
props: {
modelValue: '',
placeholder: '',
},
global: {
stubs: {
BFormInput,
BInputGroupText,
IIcBaselineClose: true,
},
},
})
})
it('renders the component', () => {
expect(wrapper.find('.test-input-criteria').exists()).toBe(true)
expect(wrapper.find('.test-click-clear-criteria').exists()).toBe(true)
})
it('uses default placeholder when not provided', async () => {
expect(mockT).toHaveBeenCalledWith('user_search')
expect(wrapper.vm.placeholderText).toBe('user_search')
})
it('uses provided placeholder', async () => {
await wrapper.setProps({ placeholder: 'Custom Placeholder' })
expect(wrapper.vm.placeholderText).toBe('Custom Placeholder')
})
it('updates currentValue when modelValue prop changes', async () => {
await wrapper.setProps({ modelValue: 'New Value' })
expect(wrapper.vm.currentValue).toBe('New Value')
})
it('emits update:modelValue event when currentValue changes', async () => {
const input = wrapper.find('.test-input-criteria')
await input.setValue('New Input')
expect(wrapper.emitted('update:modelValue')).toBeTruthy()
expect(wrapper.emitted('update:modelValue')[0]).toEqual(['New Input'])
})
it('clears the input when clear button is clicked', async () => {
await wrapper.setProps({ modelValue: 'Initial Value' })
const clearButton = wrapper.find('.test-click-clear-criteria')
await clearButton.trigger('click')
expect(wrapper.vm.currentValue).toBe('')
})
it('handles edge case: empty string input', async () => {
await wrapper.setProps({ modelValue: 'Initial Value' })
const input = wrapper.find('.test-input-criteria')
await input.setValue('')
expect(wrapper.emitted('update:modelValue')).toBeTruthy()
expect(wrapper.find('input[type="text"]').element.value).toBe('')
})
it('handles edge case: input with only spaces', async () => {
const input = wrapper.find('.test-input-criteria')
await input.setValue(' ')
expect(wrapper.emitted('update:modelValue')).toBeTruthy()
expect(wrapper.emitted('update:modelValue')[0]).toEqual([' '])
})
it('does not mutate the original modelValue prop', async () => {
const originalValue = 'Original'
await wrapper.setProps({ modelValue: originalValue })
const input = wrapper.find('.test-input-criteria')
await input.setValue('New Value')
expect(wrapper.props('modelValue')).toBe(originalValue)
})
})

62
admin/src/components/input/Coordinates.spec.js
View File

@ -1,37 +1,41 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import Coordinates from './Coordinates.vue'
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { BFormGroup, BFormInput } from 'bootstrap-vue-next'
Vue.use(VueI18n)
const localVue = global.localVue
const mocks = {
$t: jest.fn((t, v) => {
if (t === 'geo-coordinates.format') {
return `${v.latitude}, ${v.longitude}`
}
return t
}),
const value = {
latitude: 56.78,
longitude: 12.34,
}
describe('Coordinates', () => {
let wrapper
const value = {
latitude: 56.78,
longitude: 12.34,
}
const createWrapper = (propsData) => {
const createWrapper = (props = {}) => {
return mount(Coordinates, {
localVue,
mocks,
propsData,
props: {
value,
...props,
},
global: {
mocks: {
$t: vi.fn((t, v) => {
if (t === 'geo-coordinates.format') {
return `${v.latitude}, ${v.longitude}`
}
return t
}),
},
stubs: {
BFormGroup,
BFormInput,
},
},
})
}
beforeEach(() => {
wrapper = createWrapper({ value })
wrapper = createWrapper()
})
it('renders the component with initial values', () => {
@ -51,7 +55,7 @@ describe('Coordinates', () => {
expect(wrapper.vm.inputValue).toStrictEqual({
latitude: 34.56,
longitude: 78.9,
longitude: '78.90',
})
})
@ -59,18 +63,18 @@ describe('Coordinates', () => {
const latitudeInput = wrapper.find('#home-community-latitude')
const longitudeInput = wrapper.find('#home-community-longitude')
await latitudeInput.setValue('34.56')
expect(wrapper.emitted().input).toBeTruthy()
expect(wrapper.emitted().input[0][0]).toEqual({
await latitudeInput.setValue(34.56)
expect(wrapper.emitted('input')).toBeTruthy()
expect(wrapper.emitted('input')[0][0]).toEqual({
latitude: 34.56,
longitude: 12.34,
})
await longitudeInput.setValue('78.90')
expect(wrapper.emitted().input).toBeTruthy()
expect(wrapper.emitted().input[1][0]).toEqual({
expect(wrapper.emitted('input')).toBeTruthy()
expect(wrapper.emitted('input')[1][0]).toEqual({
latitude: 34.56,
longitude: 78.9,
longitude: '78.90',
})
})
@ -80,6 +84,8 @@ describe('Coordinates', () => {
await latitudeLongitudeInput.setValue('34.56, 78.90')
await latitudeLongitudeInput.trigger('input')
await wrapper.vm.$nextTick()
expect(wrapper.vm.inputValue).toStrictEqual({
latitude: 34.56,
longitude: 78.9,

26
admin/src/components/input/Coordinates.vue
View File

@ -1,39 +1,39 @@
<template>
<div>
<b-form-group
<BFormGroup
:label="$t('geo-coordinates.label')"
:invalid-feedback="$t('geo-coordinates.both-or-none')"
:state="isValid"
>
<b-form-group
<BFormGroup
:label="$t('latitude-longitude-smart')"
label-for="home-community-latitude-longitude-smart"
:description="$t('geo-coordinates.latitude-longitude-smart.describe')"
>
<b-form-input
<BFormInput
id="home-community-latitude-longitude-smart"
v-model="locationString"
type="text"
@input="splitCoordinates"
/>
</b-form-group>
<b-form-group :label="$t('latitude')" label-for="home-community-latitude">
<b-form-input
</BFormGroup>
<BFormGroup :label="$t('latitude')" label-for="home-community-latitude">
<BFormInput
id="home-community-latitude"
v-model="inputValue.latitude"
type="text"
@input="valueUpdated"
/>
</b-form-group>
<b-form-group :label="$t('longitude')" label-for="home-community-longitude">
<b-form-input
</BFormGroup>
<BFormGroup :label="$t('longitude')" label-for="home-community-longitude">
<BFormInput
id="home-community-longitude"
v-model="inputValue.longitude"
type="text"
@input="valueUpdated"
/>
</b-form-group>
</b-form-group>
</BFormGroup>
</BFormGroup>
</div>
</template>
@ -69,7 +69,7 @@ export default {
methods: {
splitCoordinates(value) {
// default format for geo-coordinates: 'latitude, longitude'
const parts = value.split(',').map((part) => part.trim())
const parts = this.locationString.split(',').map((part) => part.trim())
if (parts.length === 2) {
const [lat, lon] = parts
@ -96,7 +96,7 @@ export default {
getLatitudeLongitudeString({ latitude, longitude } = {}) {
return latitude && longitude ? this.$t('geo-coordinates.format', { latitude, longitude }) : ''
},
valueUpdated(value) {
valueUpdated() {
this.locationString = this.getLatitudeLongitudeString(this.inputValue)
this.inputValue = this.sanitizeLocation(this.inputValue)

87
admin/src/components/input/EditableGroup.spec.js
View File

@ -1,22 +1,25 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import EditableGroup from './EditableGroup.vue'
import { BButton, BFormGroup } from 'bootstrap-vue-next'
const localVue = global.localVue
const viewValue = 'test label value'
const editValue = 'test edit value'
const mocks = {
$t: jest.fn((t) => t),
}
describe('EditableGroup', () => {
let wrapper
const createWrapper = (propsData) => {
const createWrapper = (props = {}) => {
return mount(EditableGroup, {
localVue,
propsData,
mocks,
props,
global: {
mocks: {
$t: (key) => key,
},
stubs: {
BFormGroup,
BButton,
IBiPencilFill: true,
},
},
slots: {
view: `<div>${viewValue}</div>`,
edit: `<div class='test-edit'>${editValue}</div>`,
@ -25,68 +28,52 @@ describe('EditableGroup', () => {
}
it('renders the view slot when not editing', () => {
wrapper = createWrapper({ allowEdit: true })
expect(wrapper.find('div').text()).toBe(viewValue)
const wrapper = createWrapper({ allowEdit: true })
expect(wrapper.text()).toContain(viewValue)
})
it('renders the edit slot when editing', async () => {
wrapper = createWrapper({ allowEdit: true })
const wrapper = createWrapper({ allowEdit: true })
await wrapper.find('button').trigger('click')
expect(wrapper.find('.test-edit').text()).toBe(editValue)
})
it('emits save event when clicking save button', async () => {
wrapper = createWrapper({ allowEdit: true })
await wrapper.find('button').trigger('click') // Click to enable editing
await wrapper.vm.$emit('input', 'New Value') // Simulate input change
await wrapper.setData({ isValueChanged: true }) // Set valueChanged to true
await wrapper.find('button').trigger('click') // Click to save
expect(wrapper.emitted().save).toBeTruthy()
const wrapper = createWrapper({ allowEdit: true })
await wrapper.find('button').trigger('click')
await wrapper.vm.valueChanged()
await wrapper.find('.save-button').trigger('click')
expect(wrapper.emitted('save')).toBeTruthy()
})
it('disables save button when value is not changed', async () => {
wrapper = createWrapper({ allowEdit: true })
await wrapper.find('button').trigger('click') // Click to enable editing
expect(wrapper.find('button').attributes('disabled')).toBe('disabled')
const wrapper = createWrapper({ allowEdit: true })
await wrapper.find('button').trigger('click')
expect(wrapper.find('.save-button').attributes('disabled')).toBeDefined()
})
it('enables save button when value is changed', async () => {
wrapper = createWrapper({ allowEdit: true })
await wrapper.find('button').trigger('click') // Click to enable editing
await wrapper.vm.$emit('input', 'New Value') // Simulate input change
await wrapper.setData({ isValueChanged: true }) // Set valueChanged to true
expect(wrapper.find('button').attributes('disabled')).toBeFalsy()
const wrapper = createWrapper({ allowEdit: true })
await wrapper.find('button').trigger('click')
await wrapper.vm.valueChanged()
expect(wrapper.find('.save-button').attributes('disabled')).toBeFalsy()
})
it('updates variant to success when editing', async () => {
wrapper = createWrapper({ allowEdit: true })
await wrapper.find('button').trigger('click') // Click to enable editing
const wrapper = createWrapper({ allowEdit: true })
await wrapper.find('button').trigger('click')
expect(wrapper.vm.variant).toBe('success')
})
it('updates variant to prime when not editing', async () => {
wrapper = createWrapper({ allowEdit: true })
it('updates variant to prime when not editing', () => {
const wrapper = createWrapper({ allowEdit: true })
expect(wrapper.vm.variant).toBe('prime')
})
it('emits reset event when clicking close button', async () => {
wrapper = createWrapper({ allowEdit: true })
await wrapper.find('button').trigger('click') // Click to enable editing
await wrapper.find('button.close-button').trigger('click') // Click close button
expect(wrapper.emitted().reset).toBeTruthy()
const wrapper = createWrapper({ allowEdit: true })
await wrapper.find('button').trigger('click')
await wrapper.find('.close-button').trigger('click')
expect(wrapper.emitted('reset')).toBeTruthy()
})
})

107
admin/src/components/input/EditableGroupableLabel.spec.js
View File

@ -1,7 +1,8 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import EditableGroupableLabel from './EditableGroupableLabel.vue'
import { BFormGroup, BFormInput } from 'bootstrap-vue-next'
const localVue = global.localVue
const value = 'test label value'
const label = 'Test Label'
const idName = 'test-id-name'
@ -9,70 +10,94 @@ const idName = 'test-id-name'
describe('EditableGroupableLabel', () => {
let wrapper
const createWrapper = (propsData) => {
return mount(EditableGroupableLabel, {
localVue,
propsData,
const createWrapper = (props = {}, parentMethods = {}) => {
const Parent = {
template: '<editable-groupable-label v-bind="$props" />',
components: {
EditableGroupableLabel,
},
props: ['value', 'label', 'idName'],
methods: {
onInput: vi.fn(),
...parentMethods,
},
}
return mount(Parent, {
props: {
value,
label,
idName,
...props,
},
global: {
stubs: {
BFormGroup,
BFormInput,
},
},
})
}
beforeEach(() => {
wrapper = createWrapper({ value, label, idName })
wrapper = createWrapper()
})
it('renders the label correctly', () => {
expect(wrapper.find('label').text()).toBe(label)
it('renders the component', () => {
expect(wrapper.exists()).toBe(true)
})
it('renders the input with the correct id and value', () => {
const input = wrapper.find('input')
expect(input.attributes('id')).toBe(idName)
expect(input.element.value).toBe(value)
it('renders BFormGroup with correct props', () => {
const formGroup = wrapper.findComponent(BFormGroup)
expect(formGroup.props('label')).toBe(label)
expect(formGroup.props('labelFor')).toBe(idName)
})
it('emits input event with the correct value when input changes', async () => {
const newValue = 'new label value'
const input = wrapper.find('input')
input.element.value = newValue
await input.trigger('input')
expect(wrapper.emitted().input).toBeTruthy()
expect(wrapper.emitted().input[0][0]).toBe(newValue)
it('renders BFormInput with correct props', () => {
const formInput = wrapper.findComponent({ name: 'BFormInput' })
expect(formInput.props('id')).toBe(idName)
expect(formInput.props('modelValue')).toBe(value)
})
it('calls valueChanged method on parent when value changes', async () => {
const valueChangedMock = jest.fn()
wrapper.vm.$parent = { valueChanged: valueChangedMock }
// it('emits input event with the correct value when input changes', async () => {
// const newValue = 'new label value'
// const editableGroupableLabel = wrapper.findComponent(EditableGroupableLabel)
// const input = editableGroupableLabel.findComponent({ name: 'BFormInput' })
//
// await input.vm.$emit('input', newValue)
//
// await wrapper.vm.$nextTick()
//
// expect(wrapper.vm.onInput).toHaveBeenCalledWith(newValue)
// })
it('calls parent.valueChanged when value changes', async () => {
const valueChangedMock = vi.fn()
wrapper = createWrapper({}, { valueChanged: valueChangedMock })
const newValue = 'new label value'
const input = wrapper.find('input')
input.element.value = newValue
await input.trigger('input')
const input = wrapper.findComponent({ name: 'BFormInput' })
await input.vm.$emit('input', newValue)
expect(valueChangedMock).toHaveBeenCalled()
})
it('calls invalidValues method on parent when value is reverted to original', async () => {
const invalidValuesMock = jest.fn()
wrapper.vm.$parent = { invalidValues: invalidValuesMock }
it('calls parent.invalidValues when value is reverted to original', async () => {
const invalidValuesMock = vi.fn()
wrapper = createWrapper({}, { invalidValues: invalidValuesMock })
const input = wrapper.find('input')
input.element.value = 'new label value'
await input.trigger('input')
input.element.value = value
await input.trigger('input')
const input = wrapper.findComponent({ name: 'BFormInput' })
await input.vm.$emit('input', 'new label value')
await input.vm.$emit('input', value)
expect(invalidValuesMock).toHaveBeenCalled()
})
it('does not call valueChanged method on parent when value is reverted to original', async () => {
const valueChangedMock = jest.fn()
wrapper.vm.$parent = { valueChanged: valueChangedMock }
it('does not call parent.valueChanged when value is reverted to original', async () => {
const valueChangedMock = vi.fn()
wrapper = createWrapper({}, { valueChanged: valueChangedMock })
const input = wrapper.find('input')
input.element.value = value
await input.trigger('input')
const input = wrapper.findComponent({ name: 'BFormInput' })
await input.vm.$emit('input', value)
expect(valueChangedMock).not.toHaveBeenCalled()
})

35
admin/src/components/input/TimePicker.spec.js
View File

@ -1,11 +1,12 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect } from 'vitest'
import TimePicker from './TimePicker.vue'
describe('TimePicker', () => {
it('updates timeValue on input and emits input event', async () => {
it('updates timeValue on input and emits update:modelValue event', async () => {
const wrapper = mount(TimePicker, {
propsData: {
value: '12:34', // Set an initial value for testing
props: {
modelValue: '12:34', // Set an initial value for testing
},
})
@ -17,9 +18,9 @@ describe('TimePicker', () => {
// Check if timeValue is updated
expect(wrapper.vm.timeValue).toBe('23:45')
// Check if input event is emitted with updated value
expect(wrapper.emitted().input).toBeTruthy()
expect(wrapper.emitted().input[0]).toEqual(['23:45'])
// Check if update:modelValue event is emitted with updated value
expect(wrapper.emitted('input')).toBeTruthy()
expect(wrapper.emitted('input')[0]).toEqual(['23:45'])
})
it('validates and corrects time format on blur', async () => {
@ -29,8 +30,8 @@ describe('TimePicker', () => {
// Simulate user input
await input.setValue('99:99')
expect(wrapper.emitted().input).toBeTruthy()
expect(wrapper.emitted().input[0]).toEqual(['99:99'])
expect(wrapper.emitted('input')).toBeTruthy()
expect(wrapper.emitted('input')[0]).toEqual(['99:99'])
// Trigger blur event
await input.trigger('blur')
@ -38,26 +39,26 @@ describe('TimePicker', () => {
// Check if timeValue is corrected to valid format
expect(wrapper.vm.timeValue).toBe('23:59') // Maximum allowed value for hours and minutes
// Check if input event is emitted with corrected value
expect(wrapper.emitted().input).toBeTruthy()
expect(wrapper.emitted().input[1]).toEqual(['23:59'])
// Check if update:modelValue event is emitted with corrected value
expect(wrapper.emitted('input')).toBeTruthy()
expect(wrapper.emitted('input')[1]).toEqual(['23:59'])
})
it('check handling of empty input', async () => {
it('checks handling of empty input', async () => {
const wrapper = mount(TimePicker)
const input = wrapper.find('input[type="text"]')
// Simulate user input with non-numeric characters
// Simulate user input with empty string
await input.setValue('')
// Trigger blur event
await input.trigger('blur')
// Check if non-numeric characters are filtered out
// Check if empty input is handled correctly
expect(wrapper.vm.timeValue).toBe('00:00')
// Check if input event is emitted with filtered value
expect(wrapper.emitted().input).toBeTruthy()
expect(wrapper.emitted().input[1]).toEqual(['00:00'])
// Check if update:modelValue event is emitted with default value
expect(wrapper.emitted('input')).toBeTruthy()
expect(wrapper.emitted('input')[1]).toEqual(['00:00'])
})
})

89
admin/src/i18n.test.js
View File

@ -1,29 +1,86 @@
import i18n from './i18n'
import VueI18n from 'vue-i18n'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { createI18n } from 'vue-i18n'
import de from './locales/de.json'
import en from './locales/en.json'
jest.mock('vue-i18n')
vi.mock('vue-i18n')
vi.mock('./locales/de.json', () => ({ default: { test: 'Test DE' } }))
vi.mock('./locales/en.json', () => ({ default: { test: 'Test EN' } }))
describe('i18n', () => {
it('calls i18n with locale en', () => {
expect(VueI18n).toBeCalledWith(
expect.objectContaining({
beforeEach(() => {
vi.clearAllMocks()
vi.resetModules()
})
it('creates i18n instance with correct configuration', async () => {
const mockCreateI18n = vi.mocked(createI18n)
mockCreateI18n.mockReturnValue({
global: {
locale: 'en',
}),
)
})
it('calls i18n with fallback locale en', () => {
expect(VueI18n).toBeCalledWith(
expect.objectContaining({
fallbackLocale: 'en',
t: vi.fn(),
d: vi.fn(),
n: vi.fn(),
},
})
const i18n = (await import('./i18n')).default
expect(mockCreateI18n).toHaveBeenCalledWith({
locale: 'en',
legacy: false,
fallbackLocale: 'en',
messages: { de, en },
numberFormats: expect.any(Object),
datetimeFormats: expect.any(Object),
})
expect(i18n.global.t).toBeDefined()
expect(i18n.global.d).toBeDefined()
expect(i18n.global.n).toBeDefined()
})
it('configures number formats correctly', async () => {
const mockCreateI18n = vi.mocked(createI18n)
await import('./i18n')
const callArg = mockCreateI18n.mock.calls[0][0]
expect(callArg.numberFormats).toEqual(
expect.objectContaining({
en: expect.objectContaining({
decimal: expect.any(Object),
ungroupedDecimal: expect.any(Object),
}),
de: expect.objectContaining({
decimal: expect.any(Object),
ungroupedDecimal: expect.any(Object),
}),
}),
)
})
it('has a _t function', () => {
expect(i18n).toEqual(
it('configures datetime formats correctly', async () => {
const mockCreateI18n = vi.mocked(createI18n)
await import('./i18n')
const callArg = mockCreateI18n.mock.calls[0][0]
expect(callArg.datetimeFormats).toEqual(
expect.objectContaining({
_t: expect.anything(),
en: expect.objectContaining({
short: expect.any(Object),
long: expect.any(Object),
monthShort: expect.any(Object),
month: expect.any(Object),
year: expect.any(Object),
}),
de: expect.objectContaining({
short: expect.any(Object),
long: expect.any(Object),
monthShort: expect.any(Object),
month: expect.any(Object),
year: expect.any(Object),
}),
}),
)
})

64
admin/src/locales/index.test.js
View File

@ -1,12 +1,20 @@
import { describe, it, expect, beforeEach } from 'vitest'
import locales from './index.js'
describe('locales', () => {
it('should contain 2 locales', () => {
expect(locales).toHaveLength(2)
let localeCopy
beforeEach(() => {
localeCopy = [...locales] // Create a copy to avoid modifying the original
})
it('should contain exactly 2 locales', () => {
expect(localeCopy).toHaveLength(2)
})
it('should contain a German locale', () => {
expect(locales).toContainEqual(
const germanLocale = localeCopy.find((locale) => locale.code === 'de')
expect(germanLocale).toEqual(
expect.objectContaining({
name: 'Deutsch',
code: 'de',
@ -15,4 +23,54 @@ describe('locales', () => {
}),
)
})
it('should contain an English locale', () => {
const englishLocale = localeCopy.find((locale) => locale.code === 'en')
expect(englishLocale).toEqual(
expect.objectContaining({
name: 'English',
code: 'en',
iso: 'en-US',
enabled: true,
}),
)
})
it('should have unique code and iso values for each locale', () => {
const codes = localeCopy.map((locale) => locale.code)
const isos = localeCopy.map((locale) => locale.iso)
expect(new Set(codes).size).toBe(localeCopy.length)
expect(new Set(isos).size).toBe(localeCopy.length)
})
it('should have all locales enabled', () => {
expect(localeCopy.every((locale) => locale.enabled)).toBe(true)
})
it('should have valid ISO codes', () => {
const isoRegex = /^[a-z]{2}-[A-Z]{2}$/
expect(localeCopy.every((locale) => isoRegex.test(locale.iso))).toBe(true)
})
it('should have matching language codes in code and iso properties', () => {
localeCopy.forEach((locale) => {
expect(locale.code).toBe(locale.iso.split('-')[0])
})
})
it('should have name property as a non-empty string', () => {
localeCopy.forEach((locale) => {
expect(typeof locale.name).toBe('string')
expect(locale.name.length).toBeGreaterThan(0)
})
})
it('should not have any additional unexpected properties', () => {
const expectedProps = ['name', 'code', 'iso', 'enabled']
localeCopy.forEach((locale) => {
const localeProps = Object.keys(locale)
expect(localeProps).toEqual(expect.arrayContaining(expectedProps))
expect(localeProps.length).toBe(expectedProps.length)
})
})
})

34
admin/src/main.js
View File

@ -11,8 +11,6 @@ import addNavigationGuards from './router/guards'
import i18n from './i18n'
// import VueApollo from 'vue-apollo'
import PortalVue from 'portal-vue'
import { createBootstrap } from 'bootstrap-vue-next'
@ -21,26 +19,28 @@ import { createBootstrap } from 'bootstrap-vue-next'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue-next/dist/bootstrap-vue-next.css'
import { toasters } from './mixins/toaster'
import { apolloProvider } from './plugins/apolloProvider'
const app = createApp(App)
export function createAdminApp() {
const app = createApp(App)
app.use(router)
app.use(store)
app.use(router)
app.use(store)
i18n.global.locale.value =
store.state.moderator && store.state.moderator.language ? store.state.moderator.language : 'en'
i18n.global.locale.value =
store.state.moderator && store.state.moderator.language ? store.state.moderator.language : 'en'
app.use(i18n)
app.use(PortalVue)
app.use(createBootstrap())
app.use(i18n)
app.use(PortalVue)
app.use(createBootstrap())
app.use(() => apolloProvider)
app.use(() => apolloProvider)
app.mixin(toasters)
addNavigationGuards(router, store, apolloProvider.defaultClient, i18n)
return app
}
addNavigationGuards(router, store, apolloProvider.defaultClient, i18n)
app.mount('#app')
if (process.env.NODE_ENV !== 'test') {
const app = createAdminApp()
app.mount('#app')
}

138
admin/src/main.test.js
View File

@ -1,110 +1,70 @@
import { ApolloClient, ApolloLink, InMemoryCache, HttpLink } from 'apollo-boost'
import './main'
import CONFIG from './config'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { createApp } from 'vue'
import { createAdminApp } from '../src/main'
import Vue from 'vue'
import VueApollo from 'vue-apollo'
import i18n from './i18n'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import store from './store/store'
import router from './router/router'
// Mock dependencies
vi.mock('vue', () => ({
createApp: vi.fn(() => ({
use: vi.fn(),
mixin: vi.fn(),
mount: vi.fn(),
})),
}))
jest.mock('vue')
jest.mock('vue-apollo')
jest.mock('vuex')
jest.mock('vue-i18n')
jest.mock('./store/store', () => {
return {
state: {
moderator: {
language: 'es',
},
vi.mock('./App.vue', () => ({ default: {} }))
vi.mock('./store/store', () => ({
default: {
state: { moderator: { language: 'en' } },
},
}))
vi.mock('./router/router', () => ({ default: {} }))
vi.mock('./router/guards', () => ({ default: vi.fn() }))
vi.mock('./i18n', () => ({
default: {
global: {
locale: { value: 'en' },
},
}
})
jest.mock('./i18n')
jest.mock('./router/router')
},
}))
vi.mock('portal-vue', () => ({ default: {} }))
vi.mock('bootstrap-vue-next', () => ({ createBootstrap: vi.fn() }))
vi.mock('./mixins/toaster', () => ({ toasters: {} }))
vi.mock('./plugins/apolloProvider', () => ({ apolloProvider: { defaultClient: {} } }))
jest.mock('apollo-boost', () => {
return {
__esModule: true,
ApolloClient: jest.fn(),
ApolloLink: jest.fn(() => {
return { concat: jest.fn() }
}),
InMemoryCache: jest.fn(),
HttpLink: jest.fn(),
}
})
describe('main.js', () => {
let app
jest.mock('bootstrap-vue', () => {
return {
__esModule: true,
BootstrapVue: jest.fn(),
IconsPlugin: jest.fn(() => {
return { concat: jest.fn() }
}),
}
})
describe('main', () => {
it('calls the HttpLink', () => {
expect(HttpLink).toBeCalledWith({ uri: CONFIG.GRAPHQL_URI })
beforeEach(() => {
vi.resetModules()
vi.clearAllMocks()
app = createAdminApp()
})
it('calls the ApolloLink', () => {
expect(ApolloLink).toBeCalled()
it('creates a Vue app', () => {
expect(createApp).toHaveBeenCalledWith(expect.anything())
})
it('calls the ApolloClient', () => {
expect(ApolloClient).toBeCalled()
it('uses the router plugin', () => {
expect(app.use).toHaveBeenCalled()
})
it('calls the InMemoryCache', () => {
expect(InMemoryCache).toBeCalled()
it('uses the Vuex store', () => {
expect(app.use).toHaveBeenCalled()
})
it('calls the VueApollo', () => {
expect(VueApollo).toBeCalled()
it('uses i18n plugin', () => {
expect(app.use).toHaveBeenCalled()
})
it('calls Vue', () => {
expect(Vue).toBeCalled()
it('uses PortalVue plugin', () => {
expect(app.use).toHaveBeenCalled()
})
it('calls i18n', () => {
expect(Vue).toBeCalledWith(
expect.objectContaining({
i18n,
}),
)
it('uses Bootstrap Vue plugin', () => {
expect(app.use).toHaveBeenCalled()
})
it('calls BootstrapVue', () => {
expect(Vue.use).toBeCalledWith(BootstrapVue)
})
it('calls IconsPlugin', () => {
expect(Vue.use).toBeCalledWith(IconsPlugin)
})
it('creates a store', () => {
expect(Vue).toBeCalledWith(
expect.objectContaining({
store,
}),
)
})
it('creates a router', () => {
expect(Vue).toBeCalledWith(
expect.objectContaining({
router,
}),
)
})
it('sets the locale from store', () => {
expect(i18n.locale).toBe('es')
it('uses Apollo provider', () => {
expect(app.use).toHaveBeenCalled()
})
})

62
admin/src/mixins/creationMonths.js
View File

@ -1,62 +0,0 @@
import { adminOpenCreations } from '../graphql/adminOpenCreations'
export const creationMonths = {
data() {
return {
creation: [1000, 1000, 1000],
userId: 0,
}
},
computed: {
creationDates() {
const now = new Date(Date.now())
const dates = [now]
for (let i = 1; i < 3; i++) {
dates.push(new Date(now.getFullYear(), now.getMonth() - i, 1))
}
return dates.reverse()
},
creationDateObjects() {
const result = []
this.creationDates.forEach((date) => {
result.push({
short: this.$d(date, 'month'),
long: this.$d(date, 'short'),
year: this.$d(date, 'year'),
date: this.$d(date, 'short', 'en'),
})
})
return result
},
radioOptions() {
return this.creationDateObjects.map((obj, idx) => {
return {
item: { ...obj, creation: this.creation[idx] },
name: obj.short + (this.creation[idx] ? ' ' + this.creation[idx] + ' GDD' : ''),
}
})
},
creationLabel() {
return this.creationDates.map((date) => this.$d(date, 'monthShort')).join(' | ')
},
},
apollo: {
OpenCreations: {
query() {
return adminOpenCreations
},
variables() {
return {
userId: this.userId,
}
},
fetchPolicy: 'no-cache',
update({ adminOpenCreations }) {
this.creation = adminOpenCreations.map((obj) => obj.amount)
},
error({ message }) {
this.toastError(message)
},
},
},
}

30
admin/src/mixins/toaster.js
View File

@ -1,30 +0,0 @@
export const toasters = {
methods: {
toastSuccess(message) {
this.toast(message, {
title: this.$t('success'),
variant: 'success',
})
},
toastError(message) {
this.toast(message, {
title: this.$t('error'),
variant: 'danger',
})
},
toast(message, options) {
// for unit tests, check that replace is present
if (message.replace) message = message.replace(/^GraphQL error: /, '')
this.$root.$bvToast.toast(message, {
autoHideDelay: 5000,
appendToast: true,
solid: true,
toaster: 'b-toaster-top-right',
headerClass: 'gdd-toaster-title',
bodyClass: 'gdd-toaster-body',
toastClass: 'gdd-toaster',
...options,
})
},
},
}

34
admin/src/mixins/toggleRowDetails.js
View File

@ -1,34 +0,0 @@
export const toggleRowDetails = {
data() {
return {
slotIndex: 0,
openRow: null,
creationUserData: {},
}
},
methods: {
rowToggleDetails(row, index) {
if (this.openRow) {
if (this.openRow.index === row.index) {
if (index === this.slotIndex) {
row.toggleDetails()
this.openRow = null
} else {
this.slotIndex = index
}
} else {
this.openRow.toggleDetails()
row.toggleDetails()
this.slotIndex = index
this.openRow = row
this.creationUserData = row.item
}
} else {
row.toggleDetails()
this.slotIndex = index
this.openRow = row
this.creationUserData = row.item
}
},
},
}

141
admin/src/mixins/toggleRowDetails.test.js
View File

@ -1,141 +0,0 @@
import { toggleRowDetails } from './toggleRowDetails'
import { mount } from '@vue/test-utils'
const localVue = global.localVue
const Component = {
render() {},
mixins: [toggleRowDetails],
}
const toggleDetailsMock = jest.fn()
const secondToggleDetailsMock = jest.fn()
const row = {
toggleDetails: toggleDetailsMock,
index: 0,
item: {
data: 'item-data',
},
}
let wrapper
describe('toggleRowDetails', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = mount(Component, { localVue })
})
it('sets default data', () => {
expect(wrapper.vm.slotIndex).toBe(0)
expect(wrapper.vm.openRow).toBe(null)
expect(wrapper.vm.creationUserData).toEqual({})
})
describe('no open row', () => {
beforeEach(() => {
wrapper.vm.rowToggleDetails(row, 2)
})
it('calls toggleDetails', () => {
expect(toggleDetailsMock).toBeCalled()
})
it('updates slot index', () => {
expect(wrapper.vm.slotIndex).toBe(2)
})
it('updates open row', () => {
expect(wrapper.vm.openRow).toEqual(
expect.objectContaining({
index: 0,
item: {
data: 'item-data',
},
}),
)
})
it('updates creation user data', () => {
expect(wrapper.vm.creationUserData).toEqual({ data: 'item-data' })
})
})
describe('with open row', () => {
beforeEach(() => {
wrapper.setData({ openRow: row })
})
describe('row index is open row index', () => {
describe('index is slot index', () => {
beforeEach(() => {
wrapper.vm.rowToggleDetails(row, 0)
})
it('calls toggleDetails', () => {
expect(toggleDetailsMock).toBeCalled()
})
it('sets open row to null', () => {
expect(wrapper.vm.openRow).toBe(null)
})
})
describe('index is not slot index', () => {
beforeEach(() => {
wrapper.vm.rowToggleDetails(row, 2)
})
it('does not call toggleDetails', () => {
expect(toggleDetailsMock).not.toBeCalled()
})
it('updates slot index', () => {
expect(wrapper.vm.slotIndex).toBe(2)
})
})
})
describe('row index is not open row index', () => {
beforeEach(() => {
wrapper.vm.rowToggleDetails(
{
toggleDetails: secondToggleDetailsMock,
index: 2,
item: {
data: 'new-item-data',
},
},
2,
)
})
it('closes the open row', () => {
expect(toggleDetailsMock).toBeCalled()
})
it('opens the new row', () => {
expect(secondToggleDetailsMock).toBeCalled()
})
it('updates slot index', () => {
expect(wrapper.vm.slotIndex).toBe(2)
})
it('updates open row', () => {
expect(wrapper.vm.openRow).toEqual({
toggleDetails: secondToggleDetailsMock,
index: 2,
item: {
data: 'new-item-data',
},
})
})
it('updates creation user data', () => {
expect(wrapper.vm.creationUserData).toEqual({ data: 'new-item-data' })
})
})
})
})

163
admin/src/pages/CommunityStatistic.spec.js
View File

@ -1,100 +1,103 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import CommunityStatistic from './CommunityStatistic'
import { communityStatistics } from '@/graphql/communityStatistics.js'
import { toastErrorSpy } from '../../test/testSetup'
import VueApollo from 'vue-apollo'
import { createMockClient } from 'mock-apollo-client'
import { ref } from 'vue'
import CommunityStatistic from './CommunityStatistic.vue'
import StatisticTable from '../components/Tables/StatisticTable.vue'
import { useAppToast } from '@/composables/useToast'
import { useQuery } from '@vue/apollo-composable'
const mockClient = createMockClient()
const apolloProvider = new VueApollo({
defaultClient: mockClient,
})
vi.mock('@vue/apollo-composable', () => ({
useQuery: vi.fn(),
}))
const localVue = global.localVue
localVue.use(VueApollo)
vi.mock('@/composables/useToast', () => ({
useAppToast: vi.fn(),
}))
const defaultData = () => {
return {
communityStatistics: {
totalUsers: 3113,
deletedUsers: 35,
totalGradidoCreated: '4083774.05000000000000000000',
totalGradidoDecayed: '-1062639.13634129622923372197',
dynamicStatisticsFields: {
activeUsers: 1057,
totalGradidoAvailable: '2513565.869444365732411569',
totalGradidoUnbookedDecayed: '-500474.6738366222166261272',
},
const defaultData = {
communityStatistics: {
totalUsers: 3113,
deletedUsers: 35,
totalGradidoCreated: '4083774.05000000000000000000',
totalGradidoDecayed: '-1062639.13634129622923372197',
dynamicStatisticsFields: {
activeUsers: 1057,
totalGradidoAvailable: '2513565.869444365732411569',
totalGradidoUnbookedDecayed: '-500474.6738366222166261272',
},
}
}
const mocks = {
$t: jest.fn((t) => t),
$n: jest.fn((n) => n),
},
}
describe('CommunityStatistic', () => {
let wrapper
let mockResult
let mockError
let mockLoading
let mockToastError
const communityStatisticsMock = jest.fn()
beforeEach(() => {
mockResult = ref(null)
mockError = ref(null)
mockLoading = ref(false)
mockToastError = vi.fn()
mockClient.setRequestHandler(
communityStatistics,
communityStatisticsMock
.mockRejectedValueOnce({ message: 'Ouch!' })
.mockResolvedValue({ data: defaultData() }),
)
const Wrapper = () => {
return mount(CommunityStatistic, { localVue, mocks, apolloProvider })
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
vi.mocked(useQuery).mockReturnValue({
result: mockResult,
loading: mockLoading,
error: mockError,
})
it('renders the Div Element ".community-statistic"', () => {
expect(wrapper.find('div.community-statistic').exists()).toBe(true)
vi.mocked(useAppToast).mockReturnValue({
toastError: mockToastError,
})
describe('server response for get statistics is an error', () => {
it('toast an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Ouch!')
})
wrapper = mount(CommunityStatistic, {
global: {
mocks: {
$t: (key) => key,
$n: (number) => number.toString(),
},
stubs: {
StatisticTable: true,
},
},
})
})
describe('server response for getting statistics is success', () => {
it('renders the data correctly', () => {
expect(wrapper.findAll('tr').at(1).findAll('td').at(1).text()).toEqual('3113')
expect(wrapper.findAll('tr').at(2).findAll('td').at(1).text()).toEqual('1057')
expect(wrapper.findAll('tr').at(3).findAll('td').at(1).text()).toEqual('35')
expect(wrapper.findAll('tr').at(4).findAll('td').at(1).text()).toEqual(
'4083774.05000000000000000000 GDD',
)
expect(wrapper.findAll('tr').at(4).findAll('td').at(2).text()).toEqual(
'4083774.05000000000000000000',
)
expect(wrapper.findAll('tr').at(5).findAll('td').at(1).text()).toEqual(
'-1062639.13634129622923372197 GDD',
)
expect(wrapper.findAll('tr').at(5).findAll('td').at(2).text()).toEqual(
'-1062639.13634129622923372197',
)
expect(wrapper.findAll('tr').at(6).findAll('td').at(1).text()).toEqual(
'2513565.869444365732411569 GDD',
)
expect(wrapper.findAll('tr').at(6).findAll('td').at(2).text()).toEqual(
'2513565.869444365732411569',
)
expect(wrapper.findAll('tr').at(7).findAll('td').at(1).text()).toEqual(
'-500474.6738366222166261272 GDD',
)
expect(wrapper.findAll('tr').at(7).findAll('td').at(2).text()).toEqual(
'-500474.6738366222166261272',
)
})
it('renders the component', () => {
expect(wrapper.find('.community-statistic').exists()).toBe(true)
})
it('renders StatisticTable when not loading', async () => {
mockLoading.value = false
await wrapper.vm.$nextTick()
expect(wrapper.findComponent(StatisticTable).exists()).toBe(true)
})
it('does not render StatisticTable when loading', async () => {
mockLoading.value = true
await wrapper.vm.$nextTick()
expect(wrapper.findComponent(StatisticTable).exists()).toBe(false)
})
it('calls toastError when there is an error', async () => {
mockError.value = new Error('Ouch!')
await wrapper.vm.$nextTick()
expect(mockToastError).toHaveBeenCalledWith('Ouch!')
})
it('updates statistics when result is available', async () => {
mockResult.value = defaultData
await wrapper.vm.$nextTick()
const statisticTable = wrapper.findComponent(StatisticTable)
expect(statisticTable.props('statistics')).toEqual({
totalUsers: 3113,
deletedUsers: 35,
totalGradidoCreated: '4083774.05000000000000000000',
totalGradidoDecayed: '-1062639.13634129622923372197',
activeUsers: 1057,
totalGradidoAvailable: '2513565.869444365732411569',
totalGradidoUnbookedDecayed: '-500474.6738366222166261272',
})
})
})

130
admin/src/pages/ContributionLinks.spec.js
View File

@ -1,12 +1,27 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import ContributionLinks from './ContributionLinks'
import { ref } from 'vue'
import { useQuery } from '@vue/apollo-composable'
import { listContributionLinks } from '@/graphql/listContributionLinks.js'
import { toastErrorSpy } from '../../test/testSetup'
import { useAppToast } from '@/composables/useToast'
import ContributionLinks from '@/pages/ContributionLinks.vue'
const localVue = global.localVue
vi.mock('@vue/apollo-composable', () => ({
useQuery: vi.fn(),
}))
const apolloQueryMock = jest.fn().mockResolvedValue({
data: {
vi.mock('@/composables/useToast', () => ({
useAppToast: vi.fn(),
}))
describe('ContributionLink', () => {
let wrapper
let mockResult
let mockError
let mockRefetch
let mockToastError
const mockData = {
listContributionLinks: {
links: [
{
@ -24,55 +39,74 @@ const apolloQueryMock = jest.fn().mockResolvedValue({
],
count: 1,
},
},
})
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
$apollo: {
query: apolloQueryMock,
},
}
describe('ContributionLinks', () => {
// eslint-disable-next-line no-unused-vars
let wrapper
const Wrapper = () => {
return mount(ContributionLinks, { localVue, mocks })
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
beforeEach(() => {
mockResult = ref(null)
mockError = ref(null)
mockRefetch = vi.fn()
mockToastError = vi.fn()
vi.mocked(useQuery).mockReturnValue({
result: mockResult,
error: mockError,
refetch: mockRefetch,
})
describe('apollo returns', () => {
it('calls listContributionLinks', () => {
expect(apolloQueryMock).toBeCalledWith(
expect.objectContaining({
query: listContributionLinks,
}),
)
})
vi.mocked(useAppToast).mockReturnValue({
toastError: mockToastError,
})
describe('query transaction with error', () => {
beforeEach(() => {
apolloQueryMock.mockRejectedValue({ message: 'OUCH!' })
wrapper = Wrapper()
})
it('calls the API', () => {
expect(apolloQueryMock).toBeCalled()
})
it('toast error', () => {
expect(toastErrorSpy).toBeCalledWith(
'listContributionLinks has no result, use default data',
)
})
wrapper = mount(ContributionLinks, {
global: {
mocks: {
$t: (key) => key,
$d: (date) => date,
},
stubs: {
ContributionLink: true,
},
},
})
})
it('calls useQuery with listContributionLinks', () => {
expect(useQuery).toHaveBeenCalledWith(listContributionLinks, null, {
fetchPolicy: 'network-only',
})
})
it('renders the component', () => {
expect(wrapper.find('.contribution-link').exists()).toBe(true)
})
it('passes correct data to child component when query is successful', async () => {
mockResult.value = mockData
await wrapper.vm.$nextTick()
const childComponent = wrapper.findComponent({ name: 'ContributionLink' })
expect(childComponent.props('items')).toEqual(mockData.listContributionLinks.links)
expect(childComponent.props('count')).toBe(mockData.listContributionLinks.count)
})
it('passes empty data to child component when query result is null', async () => {
mockResult.value = null
await wrapper.vm.$nextTick()
const childComponent = wrapper.findComponent({ name: 'ContributionLink' })
expect(childComponent.props('items')).toEqual([])
expect(childComponent.props('count')).toBe(0)
})
it('calls toastError when there is an error', async () => {
mockError.value = new Error('OUCH!')
await wrapper.vm.$nextTick()
expect(mockToastError).toHaveBeenCalledWith(
'listContributionLinks has no result, use default data',
)
})
it('calls refetch when get-contribution-links event is emitted', async () => {
wrapper.findComponent({ name: 'ContributionLink' }).vm.$emit('get-contribution-links')
await wrapper.vm.$nextTick()
expect(mockRefetch).toHaveBeenCalled()
})
})

704
admin/src/pages/CreationConfirm.spec.js
View File

@ -1,554 +1,198 @@
import { mount } from '@vue/test-utils'
import CreationConfirm from './CreationConfirm'
import { adminDeleteContribution } from '../graphql/adminDeleteContribution'
import { denyContribution } from '../graphql/denyContribution'
import { adminListContributions } from '../graphql/adminListContributions'
import { confirmContribution } from '../graphql/confirmContribution'
import { getContribution } from '../graphql/getContribution'
import { toastErrorSpy, toastSuccessSpy } from '../../test/testSetup'
import VueApollo from 'vue-apollo'
import { createMockClient } from 'mock-apollo-client'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { nextTick, ref } from 'vue'
import CreationConfirm from './CreationConfirm.vue'
import { useQuery, useMutation } from '@vue/apollo-composable'
import { createStore } from 'vuex'
import { useI18n } from 'vue-i18n'
import { useAppToast } from '@/composables/useToast'
import { BBadge, BPagination, BTab, BTabs } from 'bootstrap-vue-next'
const mockClient = createMockClient()
const apolloProvider = new VueApollo({
defaultClient: mockClient,
})
vi.mock('@vue/apollo-composable')
vi.mock('vue-i18n')
vi.mock('@/composables/useToast')
const localVue = global.localVue
localVue.use(VueApollo)
const storeCommitMock = jest.fn()
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
$store: {
commit: storeCommitMock,
const createVuexStore = () => {
return createStore({
state: {
moderator: {
firstName: 'Peter',
lastName: 'Lustig',
roles: ['ADMIN'],
id: 263,
language: 'de',
openCreations: 0,
},
mutations: {
setOpenCreations(state, count) {
state.openCreations = count
},
openCreationsMinus(state, count) {
state.openCreations -= count
},
},
},
}
const defaultData = () => {
return {
adminListContributions: {
contributionCount: 30,
contributionList: [
{
id: 1,
firstName: 'Bibi',
lastName: 'Bloxberg',
userId: 99,
email: 'bibi@bloxberg.de',
amount: 500,
memo: 'Danke für alles',
date: new Date(),
moderator: 1,
status: 'PENDING',
creation: [500, 500, 500],
messagesCount: 0,
deniedBy: null,
deniedAt: null,
confirmedBy: null,
confirmedAt: null,
contributionDate: new Date(),
deletedBy: null,
deletedAt: null,
updatedAt: null,
updatedBy: null,
createdAt: new Date(),
},
{
id: 2,
firstName: 'Räuber',
lastName: 'Hotzenplotz',
userId: 100,
email: 'raeuber@hotzenplotz.de',
amount: 1000000,
memo: 'Gut Ergattert',
date: new Date(),
moderator: 1,
status: 'PENDING',
creation: [500, 500, 500],
messagesCount: 0,
deniedBy: null,
deniedAt: null,
confirmedBy: null,
confirmedAt: null,
contributionDate: new Date(),
deletedBy: null,
deletedAt: null,
updatedAt: null,
updatedBy: null,
createdAt: new Date(),
},
],
},
}
})
}
describe('CreationConfirm', () => {
let wrapper
const adminListContributionsMock = jest.fn()
const adminDeleteContributionMock = jest.fn()
const adminDenyContributionMock = jest.fn()
const confirmContributionMock = jest.fn()
const getContributionMock = jest.fn()
let store
let mockResult
let mockRefetch
let mockOnResultCallback
const mockToastError = vi.fn()
const mockToastSuccess = vi.fn()
const mockT = vi.fn((key) => key)
const mockD = vi.fn((date) => date.toISOString())
mockClient.setRequestHandler(
adminListContributions,
adminListContributionsMock
.mockRejectedValueOnce({ message: 'Ouch!' })
.mockResolvedValue({ data: defaultData() }),
)
beforeEach(() => {
store = createVuexStore()
vi.spyOn(store, 'commit')
mockClient.setRequestHandler(
adminDeleteContribution,
adminDeleteContributionMock.mockResolvedValue({ data: { adminDeleteContribution: true } }),
)
mockResult = ref(null)
mockRefetch = vi.fn()
mockOnResultCallback = null
mockClient.setRequestHandler(
denyContribution,
adminDenyContributionMock
.mockRejectedValueOnce({ message: 'Ouch!' })
.mockResolvedValue({ data: { denyContribution: true } }),
)
mockClient.setRequestHandler(
confirmContribution,
confirmContributionMock.mockResolvedValue({ data: { confirmContribution: true } }),
)
mockClient.setRequestHandler(getContribution, getContributionMock.mockResolvedValue({ data: {} }))
const Wrapper = () => {
return mount(CreationConfirm, { localVue, mocks, apolloProvider })
}
describe('mount', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = Wrapper()
useQuery.mockReturnValue({
onResult: (callback) => {
mockOnResultCallback = callback
},
onError: vi.fn(),
result: mockResult,
refetch: mockRefetch,
})
describe('server response for get pending creations is error', () => {
it('toast an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Ouch!')
})
it('has statusFilter ["IN_PROGRESS", "PENDING"]', () => {
expect(wrapper.vm.statusFilter).toEqual(['IN_PROGRESS', 'PENDING'])
})
useMutation.mockReturnValue({
mutate: vi.fn(),
onDone: vi.fn(),
onError: vi.fn(),
})
describe('server response is success', () => {
it('has a DIV element with the class.creation-confirm', () => {
expect(wrapper.find('div.creation-confirm').exists()).toBeTruthy()
})
it('has two pending creations', () => {
expect(wrapper.find('tbody').findAll('tr')).toHaveLength(2)
})
useI18n.mockReturnValue({
t: mockT,
d: mockD,
})
describe('actions in overlay', () => {
describe('delete creation', () => {
beforeEach(async () => {
await wrapper.findAll('tr').at(1).findAll('button').at(0).trigger('click')
})
it('opens the overlay', () => {
expect(wrapper.find('#overlay').isVisible()).toBeTruthy()
})
describe('with success', () => {
describe('cancel deletion', () => {
beforeEach(async () => {
await wrapper.find('#overlay').findAll('button').at(0).trigger('click')
})
it('closes the overlay', async () => {
expect(wrapper.find('#overlay').exists()).toBeFalsy()
})
it('still has 2 items in the table', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(2)
})
})
describe('confirm deletion', () => {
beforeEach(async () => {
await wrapper.find('#overlay').findAll('button').at(1).trigger('click')
})
it('calls the adminDeleteContribution mutation', () => {
expect(adminDeleteContributionMock).toBeCalledWith({ id: 1 })
})
it('commits openCreationsMinus to store', () => {
expect(storeCommitMock).toBeCalledWith('openCreationsMinus', 1)
})
it('toasts a success message', () => {
expect(toastSuccessSpy).toBeCalledWith('creation_form.toasted_delete')
})
it('has 1 item left in the table', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(1)
})
})
describe('with error', () => {
beforeEach(async () => {
adminDeleteContributionMock.mockRejectedValue({ message: 'Ouchhh!' })
await wrapper.find('#overlay').findAll('button').at(1).trigger('click')
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Ouchhh!')
})
})
})
})
describe('confirm creation', () => {
beforeEach(async () => {
await wrapper.findAll('tr').at(2).findAll('button').at(3).trigger('click')
})
it('opens the overlay', () => {
expect(wrapper.find('#overlay').isVisible()).toBeTruthy()
})
describe('with success', () => {
describe('cancel confirmation', () => {
beforeEach(async () => {
await wrapper.find('#overlay').findAll('button').at(0).trigger('click')
})
it('closes the overlay', async () => {
expect(wrapper.find('#overlay').exists()).toBeFalsy()
})
it('still has 2 items in the table', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(2)
})
})
describe('confirm confirmation', () => {
beforeEach(async () => {
await wrapper.find('#overlay').findAll('button').at(1).trigger('click')
})
it('calls the confirmContribution mutation', () => {
expect(confirmContributionMock).toBeCalledWith({ id: 2 })
})
it('commits openCreationsMinus to store', () => {
expect(storeCommitMock).toBeCalledWith('openCreationsMinus', 1)
})
it('toasts a success message', () => {
expect(toastSuccessSpy).toBeCalledWith('creation_form.toasted_created')
})
it('has 1 item left in the table', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(1)
})
})
})
describe('with error', () => {
beforeEach(async () => {
confirmContributionMock.mockRejectedValue({ message: 'Ouchhh!' })
await wrapper.find('#overlay').findAll('button').at(1).trigger('click')
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Ouchhh!')
})
})
})
describe('deny creation', () => {
beforeEach(async () => {
await wrapper.findAll('tr').at(1).findAll('button').at(1).trigger('click')
})
it('opens the overlay', () => {
expect(wrapper.find('#overlay').isVisible()).toBeTruthy()
})
describe('with success', () => {
describe('cancel deny', () => {
beforeEach(async () => {
await wrapper.find('#overlay').findAll('button').at(0).trigger('click')
})
it('closes the overlay', async () => {
expect(wrapper.find('#overlay').exists()).toBeFalsy()
})
it('still has 2 items in the table', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(2)
})
})
describe('confirm deny', () => {
beforeEach(async () => {
await wrapper.find('#overlay').findAll('button').at(1).trigger('click')
})
it('calls the denyContribution mutation', () => {
expect(adminDenyContributionMock).toBeCalledWith({ id: 1 })
})
it('commits openCreationsMinus to store', () => {
expect(storeCommitMock).toBeCalledWith('openCreationsMinus', 1)
})
it('toasts a success message', () => {
expect(toastSuccessSpy).toBeCalledWith('creation_form.toasted_denied')
})
it('has 1 item left in the table', () => {
expect(wrapper.findAll('tbody > tr')).toHaveLength(1)
})
})
})
describe('with error', () => {
beforeEach(async () => {
adminDenyContributionMock.mockRejectedValue({ message: 'Ouchhh!' })
await wrapper.find('#overlay').findAll('button').at(1).trigger('click')
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Ouchhh!')
})
})
})
useAppToast.mockReturnValue({
toastError: mockToastError,
toastSuccess: mockToastSuccess,
})
describe('filter tabs', () => {
describe('click tab "confirmed"', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.find('a[data-test="confirmed"]').trigger('click')
})
it('refetches contributions with proper filter', () => {
expect(adminListContributionsMock).toBeCalledWith({
currentPage: 1,
hideResubmission: false,
noHashtag: null,
order: 'DESC',
pageSize: 25,
query: '',
statusFilter: ['CONFIRMED'],
})
})
describe('click tab "open"', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.find('a[data-test="open"]').trigger('click')
})
it('refetches contributions with proper filter', () => {
expect(adminListContributionsMock).toBeCalledWith({
currentPage: 1,
hideResubmission: true,
noHashtag: null,
order: 'DESC',
pageSize: 25,
query: '',
statusFilter: ['IN_PROGRESS', 'PENDING'],
})
})
})
describe('click tab "denied"', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.find('a[data-test="denied"]').trigger('click')
})
it('refetches contributions with proper filter', () => {
expect(adminListContributionsMock).toBeCalledWith({
currentPage: 1,
hideResubmission: false,
noHashtag: null,
order: 'DESC',
pageSize: 25,
query: '',
statusFilter: ['DENIED'],
})
})
})
describe('click tab "deleted"', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.find('a[data-test="deleted"]').trigger('click')
})
it('refetches contributions with proper filter', () => {
expect(adminListContributionsMock).toBeCalledWith({
currentPage: 1,
hideResubmission: false,
noHashtag: null,
order: 'DESC',
pageSize: 25,
query: '',
statusFilter: ['DELETED'],
})
})
})
describe('click tab "all"', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.find('a[data-test="all"]').trigger('click')
})
it('refetches contributions with proper filter', () => {
expect(adminListContributionsMock).toBeCalledWith({
currentPage: 1,
hideResubmission: false,
noHashtag: null,
order: 'DESC',
pageSize: 25,
query: '',
statusFilter: ['IN_PROGRESS', 'PENDING', 'CONFIRMED', 'DENIED', 'DELETED'],
})
})
describe('change pagination', () => {
it('has pagination buttons', () => {
expect(wrapper.findComponent({ name: 'BPagination' }).exists()).toBe(true)
})
describe('next page', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper.findComponent({ name: 'BPagination' }).vm.$emit('input', 2)
})
it('calls the API again', () => {
expect(adminListContributionsMock).toBeCalledWith({
currentPage: 2,
hideResubmission: false,
noHashtag: null,
order: 'DESC',
pageSize: 25,
query: '',
statusFilter: ['IN_PROGRESS', 'PENDING', 'CONFIRMED', 'DENIED', 'DELETED'],
})
})
describe('click tab "open" again', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.find('a[data-test="open"]').trigger('click')
})
it('refetches contributions with proper filter and current page = 1', () => {
expect(adminListContributionsMock).toBeCalledWith({
currentPage: 1,
hideResubmission: true,
noHashtag: null,
order: 'DESC',
pageSize: 25,
query: '',
statusFilter: ['IN_PROGRESS', 'PENDING'],
})
})
})
})
})
})
})
})
describe('user query', () => {
describe('with user query', () => {
beforeEach(() => {
wrapper.findComponent({ name: 'UserQuery' }).vm.$emit('input', 'query')
})
it('calls the API with query', () => {
expect(adminListContributionsMock).toBeCalledWith({
currentPage: 1,
hideResubmission: true,
noHashtag: null,
order: 'DESC',
pageSize: 25,
query: 'query',
statusFilter: ['IN_PROGRESS', 'PENDING'],
})
})
describe('reset query', () => {
beforeEach(() => {
wrapper.findComponent({ name: 'UserQuery' }).vm.$emit('input', '')
})
it('calls the API with empty query', () => {
expect(adminListContributionsMock).toBeCalledWith({
currentPage: 1,
hideResubmission: true,
noHashtag: null,
order: 'DESC',
pageSize: 25,
query: '',
statusFilter: ['IN_PROGRESS', 'PENDING'],
})
})
})
})
})
describe('update status', () => {
beforeEach(async () => {
await wrapper.findComponent({ name: 'OpenCreationsTable' }).vm.$emit('update-status', 2)
})
it('updates the status', () => {
expect(wrapper.vm.items.find((obj) => obj.id === 2).messagesCount).toBe(1)
expect(wrapper.vm.items.find((obj) => obj.id === 2).status).toBe('IN_PROGRESS')
})
})
describe('reload contribution', () => {
beforeEach(async () => {
await wrapper
.findComponent({ name: 'OpenCreationsTable' })
.vm.$emit('reload-contribution', 1)
})
it('reloaded contribution', () => {
expect(getContributionMock).toBeCalledWith({
id: 1,
})
})
})
describe('unknown variant', () => {
beforeEach(async () => {
await wrapper.setData({ variant: 'unknown' })
})
it('has overlay icon "info"', () => {
expect(wrapper.vm.overlayIcon).toBe('info')
})
wrapper = mount(CreationConfirm, {
global: {
plugins: [store],
stubs: {
UserQuery: true,
BButton: true,
BTabs,
BTab,
BBadge,
OpenCreationsTable: true,
BPagination,
Overlay: true,
IBiBellFill: true,
IBiCheck: true,
IBiXCircle: true,
IBiTrash: true,
IBiList: true,
},
mocks: {
$t: mockT,
$d: mockD,
},
},
})
})
const simulateQueryResult = async (data) => {
mockResult.value = data
if (mockOnResultCallback) {
mockOnResultCallback({ data })
}
await nextTick()
}
it('initializes with correct default values', () => {
expect(wrapper.vm.tabIndex).toBe(0)
expect(wrapper.vm.currentPage).toBe(1)
expect(wrapper.vm.pageSize).toBe(25)
expect(wrapper.vm.query).toBe('')
expect(wrapper.vm.noHashtag).toBe(null)
expect(wrapper.vm.hideResubmissionModel).toBe(true)
})
it('updates store and component state when open creations are fetched', async () => {
const mockData = {
adminListContributions: {
contributionCount: 5,
contributionList: Array(5)
.fill({})
.map((_, i) => ({ id: i + 1 })),
},
}
await simulateQueryResult(mockData)
expect(store.commit).toHaveBeenCalledWith('setOpenCreations', 5)
expect(wrapper.vm.rows).toBe(5)
expect(wrapper.vm.items).toEqual(mockData.adminListContributions.contributionList)
})
it('does not update store when not on the open tab', async () => {
wrapper.vm.tabIndex = 1
await nextTick()
const mockData = {
adminListContributions: {
contributionCount: 10,
contributionList: Array(10)
.fill({})
.map((_, i) => ({ id: i + 1 })),
},
}
await simulateQueryResult(mockData)
expect(store.commit).not.toHaveBeenCalledWith('setOpenCreations', 10)
expect(wrapper.vm.rows).toBe(10)
expect(wrapper.vm.items).toEqual(mockData.adminListContributions.contributionList)
})
it('refetches data when filters change', async () => {
wrapper.vm.query = 'test query'
await nextTick()
expect(mockRefetch).toHaveBeenCalledWith(
expect.objectContaining({
query: 'test query',
}),
)
wrapper.vm.noHashtag = true
await nextTick()
expect(mockRefetch).toHaveBeenCalledWith(
expect.objectContaining({
noHashtag: true,
}),
)
})
it('updates tabIndex and refetches when changing tabs', async () => {
wrapper.vm.tabIndex = 2
await nextTick()
expect(wrapper.vm.currentPage).toBe(1)
expect(mockRefetch).toHaveBeenCalledWith(
expect.objectContaining({
currentPage: 1,
statusFilter: ['DENIED'],
}),
)
})
it('handles pagination changes', async () => {
wrapper.vm.currentPage = 2
await nextTick()
expect(mockRefetch).toHaveBeenCalledWith(
expect.objectContaining({
currentPage: 2,
}),
)
})
})

219
admin/src/pages/FederationVisualize.spec.js
View File

@ -1,137 +1,110 @@
import { mount } from '@vue/test-utils'
import FederationVisualize from './FederationVisualize'
import VueApollo from 'vue-apollo'
import { createMockClient } from 'mock-apollo-client'
import { allCommunities } from '@/graphql/allCommunities'
import { toastErrorSpy } from '../../test/testSetup'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { nextTick, ref } from 'vue'
import FederationVisualize from './FederationVisualize.vue'
import { useQuery } from '@vue/apollo-composable'
import { useAppToast } from '@/composables/useToast'
import { BButton, BListGroup, BRow, BCol, BListGroupItem } from 'bootstrap-vue-next'
const mockClient = createMockClient()
const apolloProvider = new VueApollo({
defaultClient: mockClient,
})
const localVue = global.localVue
localVue.use(VueApollo)
const mocks = {
$t: (key) => key,
$d: jest.fn((d) => d),
$i18n: {
locale: 'en',
t: (key) => key,
},
}
const defaultData = () => {
return {
allCommunities: [
{
id: 1,
foreign: false,
url: 'http://localhost/api/',
publicKey: '4007170edd8d33fb009cd99ee4e87f214e7cd21b668d45540a064deb42e243c2',
communityUuid: '5ab0befd-b150-4f31-a631-7f3637e47b21',
authenticatedAt: null,
name: 'Gradido Test',
description: 'Gradido Community zum testen',
gmsApiKey: '<api key>',
creationDate: '2024-01-09T15:56:40.592Z',
createdAt: '2024-01-09T15:56:40.595Z',
updatedAt: '2024-01-16T11:17:15.000Z',
federatedCommunities: [
{
id: 2046,
apiVersion: '2_0',
endPoint: 'http://localhost/api/',
lastAnnouncedAt: null,
verifiedAt: null,
lastErrorAt: null,
createdAt: '2024-01-16T10:08:21.544Z',
updatedAt: null,
},
{
id: 2045,
apiVersion: '1_1',
endPoint: 'http://localhost/api/',
lastAnnouncedAt: null,
verifiedAt: null,
lastErrorAt: null,
createdAt: '2024-01-16T10:08:21.550Z',
updatedAt: null,
__typename: 'FederatedCommunity',
},
{
id: 2044,
apiVersion: '1_0',
endPoint: 'http://localhost/api/',
lastAnnouncedAt: null,
verifiedAt: null,
lastErrorAt: null,
createdAt: '2024-01-16T10:08:21.544Z',
updatedAt: null,
__typename: 'FederatedCommunity',
},
],
},
],
}
}
vi.mock('@vue/apollo-composable')
vi.mock('@/composables/useToast')
describe('FederationVisualize', () => {
let wrapper
const allCommunitiesMock = jest.fn()
let mockResult
let mockLoading
let mockRefetch
let mockError
const mockToastError = vi.fn()
mockClient.setRequestHandler(
allCommunities,
allCommunitiesMock
.mockRejectedValueOnce({ message: 'Ouch!' })
.mockResolvedValue({ data: defaultData() }),
)
beforeEach(() => {
mockResult = ref(null)
mockLoading = ref(false)
mockRefetch = vi.fn()
mockError = ref(null)
const Wrapper = () => {
return mount(FederationVisualize, { localVue, mocks, apolloProvider })
}
describe('mount', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = Wrapper()
useQuery.mockReturnValue({
result: mockResult,
loading: mockLoading,
refetch: mockRefetch,
error: mockError,
})
describe('server error', () => {
it('toast error', () => {
expect(toastErrorSpy).toBeCalledWith('Ouch!')
})
useAppToast.mockReturnValue({
toastError: mockToastError,
})
describe('sever success', () => {
it('sends query to Apollo when created', () => {
expect(allCommunitiesMock).toBeCalled()
})
it('has a DIV element with the class "federation-visualize"', () => {
expect(wrapper.find('div.federation-visualize').exists()).toBe(true)
})
it('has a refresh button', () => {
expect(wrapper.find('[data-test="federation-communities-refresh-btn"]').exists()).toBe(true)
})
it('renders 1 community list item', () => {
expect(wrapper.findAll('.list-group-item').length).toBe(1)
})
describe('cklicking the refresh button', () => {
beforeEach(async () => {
jest.clearAllMocks()
await wrapper.find('[data-test="federation-communities-refresh-btn"]').trigger('click')
})
it('calls the API', async () => {
expect(allCommunitiesMock).toBeCalled()
})
})
wrapper = mount(FederationVisualize, {
global: {
mocks: {
$t: (key) => key,
},
stubs: {
BButton,
BListGroup,
BRow,
BCol,
BListGroupItem,
IBiArrowClockwise: true,
'community-visualize-item': true,
},
},
})
})
it('renders the component', () => {
expect(wrapper.find('.federation-visualize').exists()).toBe(true)
})
it('displays the correct header', () => {
expect(wrapper.find('.h2').text()).toBe('federation.gradidoInstances')
})
it('renders the refresh button', () => {
const refreshButton = wrapper.find('[data-test="federation-communities-refresh-btn"]')
expect(refreshButton.exists()).toBe(true)
})
it('calls refetch when refresh button is clicked', async () => {
const refreshButton = wrapper.find('[data-test="federation-communities-refresh-btn"]')
await refreshButton.trigger('click')
expect(mockRefetch).toHaveBeenCalled()
})
it('displays communities when data is loaded', async () => {
const mockCommunities = [
{ publicKey: '1', foreign: true },
{ publicKey: '2', foreign: false },
]
mockResult.value = { allCommunities: mockCommunities }
await nextTick()
const listItems = wrapper.findAllComponents({ name: 'BListGroupItem' })
expect(listItems).toHaveLength(2)
expect(listItems[0].props('variant')).toBe('warning')
expect(listItems[1].props('variant')).toBe('primary')
})
it('shows loading animation when fetching data', async () => {
mockLoading.value = true
await nextTick()
const refreshButton = wrapper.find('[data-test="federation-communities-refresh-btn"]')
expect(refreshButton.attributes('animation')).toBe('spin')
})
it('displays error toast when query fails', async () => {
mockError.value = new Error('Test error')
await nextTick()
expect(mockToastError).toHaveBeenCalledWith('Test error')
})
it('renders correct column headers', () => {
const columns = wrapper.findAll('.list-group > .row > div')
expect(columns[0].text()).toBe('federation.verified')
expect(columns[1].text()).toBe('federation.url')
expect(columns[2].text()).toBe('federation.name')
expect(columns[3].text()).toBe('federation.lastAnnouncedAt')
expect(columns[4].text()).toBe('federation.createdAt')
})
})

250
admin/src/pages/Overview.spec.js
View File

@ -1,151 +1,141 @@
import { mount } from '@vue/test-utils'
import Overview from './Overview'
import { adminListContributions } from '../graphql/adminListContributions'
import VueApollo from 'vue-apollo'
import { createMockClient } from 'mock-apollo-client'
import { toastErrorSpy } from '../../test/testSetup'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { nextTick, ref } from 'vue'
import Overview from './Overview.vue'
import { adminListContributions } from '@/graphql/adminListContributions'
import { useQuery } from '@vue/apollo-composable'
import { createStore } from 'vuex'
import { useAppToast } from '@/composables/useToast'
import { useI18n } from 'vue-i18n'
const mockClient = createMockClient()
const apolloProvider = new VueApollo({
defaultClient: mockClient,
})
vi.mock('@vue/apollo-composable')
vi.mock('@/composables/useToast')
vi.mock('vue-i18n')
const localVue = global.localVue
localVue.use(VueApollo)
const storeCommitMock = jest.fn()
const mocks = {
$t: jest.fn((t) => t),
$n: jest.fn((n) => n),
$d: jest.fn((d) => d),
$store: {
commit: storeCommitMock,
const createVuexStore = () => {
return createStore({
state: {
openCreations: 1,
openCreations: 0,
},
},
}
const defaultData = () => {
return {
adminListContributions: {
contributionCount: 2,
contributionList: [
{
id: 1,
firstName: 'Bibi',
lastName: 'Bloxberg',
userId: 99,
email: 'bibi@bloxberg.de',
amount: 500,
memo: 'Danke für alles',
date: new Date(),
moderatorId: 1,
status: 'PENDING',
creation: [500, 500, 500],
messagesCount: 0,
deniedBy: null,
deniedAt: null,
confirmedBy: null,
confirmedAt: null,
contributionDate: new Date(),
deletedBy: null,
deletedAt: null,
updatedAt: null,
updatedBy: null,
createdAt: new Date(),
},
{
id: 2,
firstName: 'Räuber',
lastName: 'Hotzenplotz',
userId: 100,
email: 'raeuber@hotzenplotz.de',
amount: 1000000,
memo: 'Gut Ergattert',
date: new Date(),
moderatorId: 1,
status: 'PENDING',
creation: [500, 500, 500],
messagesCount: 0,
deniedBy: null,
deniedAt: null,
confirmedBy: null,
confirmedAt: null,
contributionDate: new Date(),
deletedBy: null,
deletedAt: null,
updatedAt: null,
updatedBy: null,
createdAt: new Date(),
},
],
mutations: {
setOpenCreations(state, count) {
state.openCreations = count
},
},
}
})
}
describe('Overview', () => {
let wrapper
const adminListContributionsMock = jest.fn()
let store
let mockResult
let mockOnResult
let mockOnError
const mockToastError = vi.fn()
const mockT = vi.fn((key) => key)
mockClient.setRequestHandler(
adminListContributions,
adminListContributionsMock
.mockRejectedValueOnce({ message: 'Ouch!' })
.mockResolvedValue({ data: defaultData() }),
)
beforeEach(() => {
store = createVuexStore()
mockResult = ref(null)
mockOnResult = vi.fn()
mockOnError = vi.fn()
const Wrapper = () => {
return mount(Overview, { localVue, mocks, apolloProvider })
}
describe('mount', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = Wrapper()
useQuery.mockReturnValue({
result: mockResult,
onResult: mockOnResult,
onError: mockOnError,
})
describe('server response for get pending creations is error', () => {
it('toast an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Ouch!')
})
useAppToast.mockReturnValue({
toastError: mockToastError,
})
it('calls the adminListContributions query', () => {
expect(adminListContributionsMock).toBeCalledWith({
currentPage: 1,
hideResubmission: true,
order: 'DESC',
pageSize: 25,
statusFilter: ['IN_PROGRESS', 'PENDING'],
})
useI18n.mockReturnValue({
t: mockT,
})
it('commits three pending creations to store', () => {
expect(storeCommitMock).toBeCalledWith('setOpenCreations', 2)
})
describe('with open creations', () => {
beforeEach(() => {
mocks.$store.state.openCreations = 2
})
it('renders a link to confirm 2 creations', () => {
expect(wrapper.find('[data-test="open-creation"]').text()).toContain('2')
expect(wrapper.find('a[href="creation-confirm"]').exists()).toBeTruthy()
})
})
describe('without open creations', () => {
beforeEach(() => {
mocks.$store.state.openCreations = 0
})
it('renders a link to confirm creations', () => {
expect(wrapper.find('[data-test="open-creation"]').text()).toContain('0')
expect(wrapper.find('a[href="creation-confirm"]').exists()).toBeTruthy()
})
wrapper = mount(Overview, {
global: {
plugins: [store],
stubs: {
BCard: true,
BCardText: true,
BLink: true,
},
},
})
})
const updateQueryResult = async (count) => {
mockResult.value = { adminListContributions: { contributionCount: count } }
await nextTick()
}
it('calls useQuery with correct parameters', () => {
expect(useQuery).toHaveBeenCalledWith(adminListContributions, {
statusFilter: ['IN_PROGRESS', 'PENDING'],
hideResubmission: true,
})
})
it('updates store when query result is received', async () => {
const resultHandler = mockOnResult.mock.calls[0][0]
resultHandler({ data: { adminListContributions: { contributionCount: 3 } } })
await nextTick()
expect(store.state.openCreations).toBe(3)
})
it('calls toastError when query encounters an error', () => {
const errorHandler = mockOnError.mock.calls[0][0]
errorHandler({ message: 'Test error' })
expect(mockToastError).toHaveBeenCalledWith('Test error')
})
it('displays correct header and styling when there are open creations', async () => {
await updateQueryResult(2)
const card = wrapper.find('[data-test="open-creations-card"]')
expect(card.attributes('header')).toBe('open_creations')
expect(card.attributes('headerbgvariant')).toBe('success')
expect(card.attributes('bordervariant')).toBe('success')
expect(wrapper.vm.openCreations).toBe(2)
})
it('displays correct header and styling when there are no open creations', async () => {
await updateQueryResult(0)
const card = wrapper.find('[data-test="open-creations-card"]')
expect(card.attributes('header')).toBe('not_open_creations')
expect(card.attributes('headerbgvariant')).toBe('danger')
expect(card.attributes('bordervariant')).toBe('primary')
expect(wrapper.vm.openCreations).toBe(0)
})
it('reactively updates card based on query result changes', async () => {
// Initial state: no open creations
await updateQueryResult(0)
expect(wrapper.find('[data-test="open-creations-card"]').attributes('header')).toBe(
'not_open_creations',
)
// Update to having open creations
await updateQueryResult(1)
expect(wrapper.find('[data-test="open-creations-card"]').attributes('header')).toBe(
'open_creations',
)
})
it('translates headers correctly', async () => {
await updateQueryResult(0)
expect(mockT).toHaveBeenCalledWith('not_open_creations')
await updateQueryResult(1)
expect(mockT).toHaveBeenCalledWith('open_creations')
})
it('correct number of open creations', async () => {
await updateQueryResult(5)
expect(wrapper.vm.openCreations).toBe(5)
await updateQueryResult(0)
expect(wrapper.vm.openCreations).toBe(0)
})
})

32
admin/src/pages/Overview.vue
View File

@ -1,24 +1,10 @@
<template>
<div class="admin-overview">
<BCard
v-show="openCreations > 0"
border-variant="primary"
:header="$t('open_creations')"
header-bg-variant="danger"
header-text-variant="white"
align="center"
>
<BCardText>
<BLink to="creation-confirm">
<h1>{{ openCreations }}</h1>
</BLink>
</BCardText>
</BCard>
<BCard
v-show="openCreations < 1"
border-variant="success"
:header="$t('not_open_creations')"
header-bg-variant="success"
data-test="open-creations-card"
:border-variant="borderVariant"
:header="creationsHeader"
:header-bg-variant="variant"
header-text-variant="white"
align="center"
>
@ -37,11 +23,14 @@ import { useStore } from 'vuex'
import { useQuery } from '@vue/apollo-composable'
import { BCard, BCardText, BLink } from 'bootstrap-vue-next'
import { useAppToast } from '@/composables/useToast'
import { useI18n } from 'vue-i18n'
const store = useStore()
const statusFilter = ref(['IN_PROGRESS', 'PENDING'])
const { t } = useI18n()
const { toastError } = useAppToast()
const { result, onResult, onError } = useQuery(adminListContributions, {
@ -50,7 +39,7 @@ const { result, onResult, onError } = useQuery(adminListContributions, {
})
onResult(({ data }) => {
store.commit('setOpenCreations', data.adminListContributions.contributionCount)
store.commit('setOpenCreations', data?.adminListContributions.contributionCount)
})
onError((error) => {
@ -58,4 +47,9 @@ onError((error) => {
})
const openCreations = computed(() => result.value?.adminListContributions.contributionCount || 0)
const creationsHeader = computed(() =>
openCreations.value < 1 ? t('not_open_creations') : t('open_creations'),
)
const variant = computed(() => (openCreations.value < 1 ? 'danger' : 'success'))
const borderVariant = computed(() => (openCreations.value < 1 ? 'primary' : 'success'))
</script>

382
admin/src/pages/UserSearch.spec.js
View File

@ -1,280 +1,130 @@
import { mount } from '@vue/test-utils'
import UserSearch from './UserSearch'
import { toastErrorSpy, toastSuccessSpy } from '../../test/testSetup'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import UserSearch from './UserSearch.vue'
import { useQuery } from '@vue/apollo-composable'
const localVue = global.localVue
// Mock the composables and components
vi.mock('@vue/apollo-composable')
vi.mock('../composables/useCreationMonths', () => ({
default: () => ({
creationLabel: () => 'Creation Date',
}),
}))
vi.mock('@/composables/useToast', () => ({
useAppToast: () => ({
toastSuccess: vi.fn(),
}),
}))
const apolloQueryMock = jest.fn().mockResolvedValue({
data: {
searchUsers: {
userCount: 4,
userList: [
{
userId: 4,
firstName: 'New',
lastName: 'User',
email: 'new@user.ch',
creation: [1000, 1000, 1000],
emailChecked: false,
roles: [],
deletedAt: null,
},
{
userId: 3,
firstName: 'Peter',
lastName: 'Lustig',
email: 'peter@lustig.de',
creation: [0, 0, 0],
roles: ['ADMIN'],
emailChecked: true,
deletedAt: null,
},
{
userId: 2,
firstName: 'Benjamin',
lastName: 'Blümchen',
email: 'benjamin@bluemchen.de',
creation: [1000, 1000, 1000],
roles: [],
emailChecked: true,
deletedAt: new Date(),
},
{
userId: 1,
firstName: 'Bibi',
lastName: 'Bloxberg',
email: 'bibi@bloxberg.de',
creation: [200, 400, 600],
roles: [],
emailChecked: true,
deletedAt: null,
},
],
// Mock icon components
const mockIconComponent = {
template: '<span>Icon</span>',
}
const mockSearchUsers = {
userCount: 4,
userList: [
{
userId: 4,
firstName: 'New',
lastName: 'User',
email: 'new@user.ch',
creation: [1000, 1000, 1000],
emailChecked: false,
roles: [],
deletedAt: null,
},
},
})
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => String(d)),
$apollo: {
query: apolloQueryMock,
},
{
userId: 3,
firstName: 'Peter',
lastName: 'Lustig',
email: 'peter@lustig.de',
creation: [0, 0, 0],
roles: ['ADMIN'],
emailChecked: true,
deletedAt: null,
},
{
userId: 2,
firstName: 'Benjamin',
lastName: 'Blümchen',
email: 'benjamin@bluemchen.de',
creation: [1000, 1000, 1000],
roles: [],
emailChecked: true,
deletedAt: new Date(),
},
{
userId: 1,
firstName: 'Bibi',
lastName: 'Bloxberg',
email: 'bibi@bloxberg.de',
creation: [200, 400, 600],
roles: [],
emailChecked: true,
deletedAt: null,
},
],
}
describe('UserSearch', () => {
let wrapper
const mockT = vi.fn((key) => key) // Mock translation function
const Wrapper = () => {
return mount(UserSearch, { localVue, mocks })
}
describe('mount', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = Wrapper()
beforeEach(() => {
// Mock the useQuery composable
useQuery.mockReturnValue({
result: { value: { searchUsers: mockSearchUsers } },
refetch: vi.fn(),
})
it('has a DIV element with the class.user-search', () => {
expect(wrapper.find('div.user-search').exists()).toBeTruthy()
})
it('calls the API', () => {
expect(apolloQueryMock).toBeCalledWith(
expect.objectContaining({
variables: {
query: '',
currentPage: 1,
pageSize: 25,
order: 'DESC',
filters: {
byActivated: null,
byDeleted: null,
},
},
}),
)
})
describe('unconfirmed emails', () => {
beforeEach(async () => {
await wrapper.find('button.unconfirmedRegisterMails').trigger('click')
})
it('calls API with filter', () => {
expect(apolloQueryMock).toBeCalledWith(
expect.objectContaining({
variables: {
query: '',
currentPage: 1,
pageSize: 25,
order: 'DESC',
filters: {
byActivated: false,
byDeleted: null,
},
},
}),
)
})
})
describe('deleted Users', () => {
beforeEach(async () => {
await wrapper.find('button.deletedUserSearch').trigger('click')
})
it('calls API with filter', () => {
expect(apolloQueryMock).toBeCalledWith(
expect.objectContaining({
variables: {
query: '',
currentPage: 1,
pageSize: 25,
order: 'DESC',
filters: {
byActivated: null,
byDeleted: true,
},
},
}),
)
})
})
describe('pagination', () => {
beforeEach(async () => {
wrapper.setData({ currentPage: 2 })
})
it('calls the API with new page', () => {
expect(apolloQueryMock).toBeCalledWith(
expect.objectContaining({
variables: {
query: '',
currentPage: 2,
pageSize: 25,
order: 'DESC',
filters: {
byActivated: null,
byDeleted: null,
},
},
}),
)
})
})
describe('user search', () => {
beforeEach(async () => {
wrapper.setData({ criteria: 'search string' })
})
it('calls the API with search string', () => {
expect(apolloQueryMock).toBeCalledWith(
expect.objectContaining({
variables: {
query: 'search string',
currentPage: 1,
pageSize: 25,
order: 'DESC',
filters: {
byActivated: null,
byDeleted: null,
},
},
}),
)
})
describe('reset the search field', () => {
it('calls the API with empty criteria', async () => {
jest.clearAllMocks()
await wrapper.findComponent({ name: 'UserQuery' }).vm.$emit('input', '')
expect(apolloQueryMock).toBeCalledWith(
expect.objectContaining({
variables: {
query: '',
currentPage: 1,
pageSize: 25,
order: 'DESC',
filters: {
byActivated: null,
byDeleted: null,
},
},
}),
)
})
})
})
describe('change user role', () => {
const userId = 4
describe('to admin', () => {
it('updates user role to admin', async () => {
await wrapper
.findComponent({ name: 'SearchUserTable' })
.vm.$emit('updateRoles', userId, ['ADMIN'])
expect(wrapper.vm.searchResult.find((obj) => obj.userId === userId).roles).toEqual([
'ADMIN',
])
})
})
describe('to usual user', () => {
it('updates user role to usual user', async () => {
await wrapper
.findComponent({ name: 'SearchUserTable' })
.vm.$emit('updateRoles', userId, [])
expect(wrapper.vm.searchResult.find((obj) => obj.userId === userId).roles).toEqual([])
})
})
})
describe('delete user', () => {
const userId = 4
beforeEach(() => {
wrapper
.findComponent({ name: 'SearchUserTable' })
.vm.$emit('updateDeletedAt', userId, new Date())
})
it('marks the user as deleted', () => {
expect(wrapper.vm.searchResult.find((obj) => obj.userId === userId).deletedAt).toEqual(
expect.any(Date),
)
expect(wrapper.find('.test-deleted-icon').exists()).toBe(true)
})
it('toasts a success message', () => {
expect(toastSuccessSpy).toBeCalledWith('user_deleted')
})
})
describe('recover user', () => {
const userId = 2
beforeEach(() => {
wrapper.findComponent({ name: 'SearchUserTable' }).vm.$emit('updateDeletedAt', userId, null)
})
it('toasts a success message', () => {
expect(toastSuccessSpy).toBeCalledWith('user_recovered')
})
})
describe('apollo returns error', () => {
beforeEach(() => {
apolloQueryMock.mockRejectedValue({
message: 'Ouch',
})
wrapper = Wrapper()
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('Ouch')
})
wrapper = mount(UserSearch, {
global: {
stubs: {
UserQuery: true,
SearchUserTable: true,
BPagination: true,
BButton: true,
IBiEnvelope: mockIconComponent,
IBiXCircle: mockIconComponent,
},
mocks: {
$t: mockT,
},
},
})
})
it('renders the component', () => {
expect(wrapper.find('.user-search').exists()).toBe(true)
})
it('uses correct translation keys', async () => {
// Force a re-render
await wrapper.vm.$nextTick()
expect(mockT).toHaveBeenCalledWith('user_search')
})
it('renders unconfirmed emails button', () => {
const button = wrapper.find('.unconfirmedRegisterMails')
expect(button.exists()).toBe(true)
})
it('renders deleted user search button', () => {
const button = wrapper.find('.deletedUserSearch')
expect(button.exists()).toBe(true)
})
it('handles unconfirmed register mails button click', async () => {
const button = wrapper.find('.unconfirmedRegisterMails')
await button.trigger('click')
expect(useQuery().refetch).toHaveBeenCalled()
})
it('handles deleted user search button click', async () => {
const button = wrapper.find('.deletedUserSearch')
await button.trigger('click')
expect(useQuery().refetch).toHaveBeenCalled()
})
})

182
admin/src/plugins/apolloProvider.test.js
View File

@ -1,163 +1,49 @@
import { ApolloClient, ApolloLink, HttpLink } from 'apollo-boost'
import './apolloProvider'
import CONFIG from '../config'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import VueApollo from 'vue-apollo'
import CONFIG from '../config'
import store from '../store/store'
import i18n from '../i18n'
import { apolloProvider } from './apolloProvider'
jest.mock('vue-apollo')
jest.mock('../store/store')
jest.mock('../i18n')
vi.mock('vue-apollo')
vi.mock('@vue/apollo-composable')
vi.mock('../config', () => ({
default: {
GRAPHQL_URI: 'http://test-graphql-uri.com',
WALLET_LOGIN_URL: 'http://test-wallet-login-url.com',
},
}))
vi.mock('../store/store', () => ({
default: {
state: { token: '' },
dispatch: vi.fn(),
commit: vi.fn(),
},
}))
jest.mock('apollo-boost', () => {
return {
__esModule: true,
ApolloClient: jest.fn(),
ApolloLink: jest.fn(() => {
return { concat: jest.fn() }
}),
InMemoryCache: jest.fn(),
HttpLink: jest.fn(),
}
})
describe('apolloProvider', () => {
it('calls the HttpLink', () => {
expect(HttpLink).toBeCalledWith({ uri: CONFIG.GRAPHQL_URI })
describe('Apollo Provider Setup', () => {
beforeEach(() => {
vi.clearAllMocks()
})
it('calls the ApolloLink', () => {
expect(ApolloLink).toBeCalled()
it('creates an Apollo provider', () => {
expect(apolloProvider).toBeDefined()
expect(apolloProvider).toBeInstanceOf(VueApollo)
})
it('calls the ApolloClient', () => {
expect(ApolloClient).toBeCalled()
it('has a provide function', () => {
expect(apolloProvider.provide).toBeInstanceOf(Function)
})
it('calls the VueApollo', () => {
expect(VueApollo).toBeCalled()
it('uses the correct GraphQL URI from config', () => {
expect(CONFIG.GRAPHQL_URI).toBe('http://test-graphql-uri.com')
})
describe('ApolloLink', () => {
// mock store
const storeDispatchMock = jest.fn()
const storeCommitMock = jest.fn()
store.state = {
token: 'some-token',
}
store.dispatch = storeDispatchMock
store.commit = storeCommitMock
// We can't directly test the auth link functionality since it's inside the mocked provider
// However, we can test that the store is set up correctly for potential use
// mock i18n.t
i18n.t = jest.fn((t) => t)
// mock apllo response
const responseMock = {
errors: [{ message: '403.13 - Client certificate revoked' }],
}
const windowLocationMock = jest.fn()
delete window.location
window.location = {
assign: windowLocationMock,
}
// mock context
const setContextMock = jest.fn()
const getContextMock = jest.fn(() => {
return {
response: {
headers: {
get: jest.fn(() => 'another-token'),
},
},
}
})
// mock apollo link function params
const operationMock = {
setContext: setContextMock,
getContext: getContextMock,
}
const forwardMock = jest.fn(() => {
return [responseMock]
})
// get apollo link callback
const middleware = ApolloLink.mock.calls[0][0]
describe('with token in store', () => {
it('sets authorization header with token', () => {
// run the apollo link callback with mocked params
middleware(operationMock, forwardMock)
expect(setContextMock).toBeCalledWith({
headers: {
Authorization: 'Bearer some-token',
clientTimezoneOffset: expect.any(Number),
},
})
})
})
describe('without token in store', () => {
beforeEach(() => {
store.state.token = null
})
it('sets authorization header empty', () => {
middleware(operationMock, forwardMock)
expect(setContextMock).toBeCalledWith({
headers: {
Authorization: '',
clientTimezoneOffset: expect.any(Number),
},
})
})
})
describe('apollo response is 403.13', () => {
beforeEach(() => {
// run the apollo link callback with mocked params
middleware(operationMock, forwardMock)
})
it('dispatches logout', () => {
expect(storeDispatchMock).toBeCalledWith('logout', null)
})
it('redirects to logout', () => {
expect(windowLocationMock).toBeCalledWith('http://localhost/login')
})
})
describe('apollo response is with new token', () => {
beforeEach(() => {
delete responseMock.errors
middleware(operationMock, forwardMock)
})
it('commits new token to store', () => {
expect(storeCommitMock).toBeCalledWith('token', 'another-token')
})
})
describe('apollo response is without new token', () => {
beforeEach(() => {
jest.clearAllMocks()
getContextMock.mockReturnValue({
response: {
headers: {
get: jest.fn(() => null),
},
},
})
middleware(operationMock, forwardMock)
})
it('does not commit token to store', () => {
expect(storeCommitMock).not.toBeCalled()
})
})
it('has access to the store', () => {
expect(store.state.token).toBeDefined()
expect(store.dispatch).toBeInstanceOf(Function)
expect(store.commit).toBeInstanceOf(Function)
})
})

275
admin/src/router/guards.test.js
View File

@ -1,105 +1,111 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import addNavigationGuards from './guards'
import router from './router'
import { verifyLogin } from '../graphql/verifyLogin'
import CONFIG from '../config'
const storeCommitMock = jest.fn()
const apolloQueryMock = jest.fn().mockResolvedValue({
data: {
verifyLogin: {
roles: ['ADMIN'],
language: 'de',
},
vi.mock('../graphql/verifyLogin', () => ({
verifyLogin: 'mocked-verify-login-query',
}))
vi.mock('../config', () => ({
default: {
DEBUG_DISABLE_AUTH: false,
},
})
const i18nLocaleMock = jest.fn()
}))
const store = {
commit: storeCommitMock,
state: {
token: null,
},
}
describe('Navigation Guards', () => {
let router, store, apollo, i18n, storeCommitMock, apolloQueryMock
const apollo = {
query: apolloQueryMock,
}
const i18n = {
locale: i18nLocaleMock,
}
addNavigationGuards(router, store, apollo, i18n)
describe('navigation guards', () => {
beforeEach(() => {
jest.clearAllMocks()
vi.clearAllMocks()
storeCommitMock = vi.fn()
apolloQueryMock = vi.fn()
router = {
beforeEach: vi.fn(),
}
store = {
commit: storeCommitMock,
state: {
token: null,
moderator: null,
},
}
apollo = {
query: apolloQueryMock,
}
i18n = {
global: {
locale: {
value: 'en',
},
},
}
addNavigationGuards(router, store, apollo, i18n)
})
describe('authenticate', () => {
const navGuard = router.beforeHooks[0]
const next = jest.fn()
describe('First Navigation Guard', () => {
let firstGuard, next
describe('with valid token and as admin', () => {
beforeEach(async () => {
await navGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
beforeEach(() => {
firstGuard = router.beforeEach.mock.calls[0][0]
next = vi.fn()
})
it('calls next() for non-authenticate routes', async () => {
await firstGuard({ path: '/some-route' }, {}, next)
expect(next).toHaveBeenCalledWith()
})
describe('Authenticate route', () => {
beforeEach(() => {
apolloQueryMock.mockResolvedValue({
data: {
verifyLogin: {
roles: ['ADMIN'],
language: 'de',
},
},
})
})
it('commits the token to the store', () => {
expect(storeCommitMock).toBeCalledWith('token', 'valid-token')
it('commits token to store', async () => {
await firstGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
expect(storeCommitMock).toHaveBeenCalledWith('token', 'valid-token')
})
it.skip('sets the locale', () => {
expect(i18nLocaleMock).toBeCalledWith('de')
it('calls apollo query with correct parameters', async () => {
await firstGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
expect(apolloQueryMock).toHaveBeenCalledWith({
query: verifyLogin,
fetchPolicy: 'network-only',
})
})
it('commits the moderator to the store', () => {
expect(storeCommitMock).toBeCalledWith('moderator', {
it('sets i18n locale', async () => {
await firstGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
expect(i18n.global.locale.value).toBe('de')
})
it('commits moderator to store', async () => {
await firstGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
expect(storeCommitMock).toHaveBeenCalledWith('moderator', {
roles: ['ADMIN'],
language: 'de',
})
})
it('redirects to /', () => {
expect(next).toBeCalledWith({ path: '/' })
})
})
describe('with valid token and as moderator', () => {
beforeEach(async () => {
jest.clearAllMocks()
apolloQueryMock.mockResolvedValue({
data: {
verifyLogin: {
roles: ['MODERATOR'],
language: 'de',
},
},
})
await navGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
it('redirects to home on successful authentication', async () => {
await firstGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
expect(next).toHaveBeenCalledWith({ path: '/' })
})
it('commits the token to the store', () => {
expect(storeCommitMock).toBeCalledWith('token', 'valid-token')
})
it.skip('sets the locale', () => {
expect(i18nLocaleMock).toBeCalledWith('de')
})
it('commits the moderator to the store', () => {
expect(storeCommitMock).toBeCalledWith('moderator', {
roles: ['MODERATOR'],
language: 'de',
})
})
it('redirects to /', () => {
expect(next).toBeCalledWith({ path: '/' })
})
})
describe('with valid token and no roles', () => {
beforeEach(() => {
jest.clearAllMocks()
it('redirects to not-found if no roles', async () => {
apolloQueryMock.mockResolvedValue({
data: {
verifyLogin: {
@ -108,83 +114,66 @@ describe('navigation guards', () => {
},
},
})
navGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
await firstGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
expect(next).toHaveBeenCalledWith({ path: '/not-found' })
})
it('commits the token to the store', async () => {
expect(storeCommitMock).toBeCalledWith('token', 'valid-token')
})
it('does not commit the moderator to the store', () => {
expect(storeCommitMock).not.toBeCalledWith('moderator')
})
it('redirects to /not-found', async () => {
expect(next).toBeCalledWith({ path: '/not-found' })
})
})
describe('with valid token and server error on verification', () => {
beforeEach(() => {
apolloQueryMock.mockRejectedValue({
message: 'Ouch!',
})
navGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
})
it('commits the token to the store', async () => {
expect(storeCommitMock).toBeCalledWith('token', 'valid-token')
})
it('does not commit the moderator to the store', () => {
expect(storeCommitMock).not.toBeCalledWith('moderator', { isAdmin: false })
})
it('redirects to /not-found', async () => {
expect(next).toBeCalledWith({ path: '/not-found' })
})
})
describe('without valid token', () => {
it('does not commit the token to the store', async () => {
navGuard({ path: '/authenticate' }, {}, next)
expect(storeCommitMock).not.toBeCalledWith()
})
it('calls next withou arguments', async () => {
navGuard({ path: '/authenticate' }, {}, next)
expect(next).toBeCalledWith()
it('redirects to not-found on error', async () => {
apolloQueryMock.mockRejectedValue(new Error('Auth error'))
await firstGuard({ path: '/authenticate', query: { token: 'valid-token' } }, {}, next)
expect(next).toHaveBeenCalledWith({ path: '/not-found' })
})
})
})
describe('protect all routes', () => {
const navGuard = router.beforeHooks[1]
const next = jest.fn()
describe('Second Navigation Guard', () => {
let secondGuard, next
it('redirects no not found with no token in store ', () => {
navGuard({ path: '/' }, {}, next)
expect(next).toBeCalledWith({ path: '/not-found' })
beforeEach(() => {
secondGuard = router.beforeEach.mock.calls[1][0]
next = vi.fn()
})
it('redirects to not found with token in store and not admin or moderator', () => {
store.state.token = 'valid token'
navGuard({ path: '/' }, {}, next)
expect(next).toBeCalledWith({ path: '/not-found' })
it('allows navigation when auth is disabled for debug', () => {
CONFIG.DEBUG_DISABLE_AUTH = true
secondGuard({ path: '/' }, {}, next)
expect(next).toHaveBeenCalledWith()
CONFIG.DEBUG_DISABLE_AUTH = false
})
it('does not redirect with token in store and as admin', () => {
store.state.token = 'valid token'
it('redirects to not-found when no token', () => {
secondGuard({ path: '/' }, {}, next)
expect(next).toHaveBeenCalledWith({ path: '/not-found' })
})
it('redirects to not-found when no moderator', () => {
store.state.token = 'valid-token'
secondGuard({ path: '/' }, {}, next)
expect(next).toHaveBeenCalledWith({ path: '/not-found' })
})
it('redirects to not-found when moderator has no roles', () => {
store.state.token = 'valid-token'
store.state.moderator = { roles: [] }
secondGuard({ path: '/' }, {}, next)
expect(next).toHaveBeenCalledWith({ path: '/not-found' })
})
it('allows navigation for authenticated admin', () => {
store.state.token = 'valid-token'
store.state.moderator = { roles: ['ADMIN'] }
navGuard({ path: '/' }, {}, next)
expect(next).toBeCalledWith()
secondGuard({ path: '/' }, {}, next)
expect(next).toHaveBeenCalledWith()
})
it('does not redirect with token in store and as moderator', () => {
store.state.token = 'valid token'
store.state.moderator = { roles: ['MODERATOR'] }
navGuard({ path: '/' }, {}, next)
expect(next).toBeCalledWith()
it('allows navigation to not-found route', () => {
secondGuard({ path: '/not-found' }, {}, next)
expect(next).toHaveBeenCalledWith()
})
it('allows navigation to logout route', () => {
secondGuard({ path: '/logout' }, {}, next)
expect(next).toHaveBeenCalledWith()
})
})
})

155
admin/src/router/router.test.js
View File

@ -1,37 +1,76 @@
import router from './router'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { createRouter, createWebHistory } from 'vue-router'
const mockComponents = {
overview: { name: 'overview' },
notFound: { name: 'not-found' },
UserSearch: { name: 'UserSearch' },
CreationConfirm: { name: 'CreationConfirm' },
ContributionLinks: { name: 'ContributionLinks' },
CommunityStatistic: { name: 'CommunityStatistic' },
FederationVisualize: { name: 'FederationVisualize' },
}
vi.mock('./routes', () => ({
default: [
{ path: '/', component: () => Promise.resolve(mockComponents.overview) },
{ path: '/logout', component: () => Promise.resolve(mockComponents.notFound) },
{ path: '/user', component: () => Promise.resolve(mockComponents.UserSearch) },
{ path: '/creation-confirm', component: () => Promise.resolve(mockComponents.CreationConfirm) },
{
path: '/contribution-links',
component: () => Promise.resolve(mockComponents.ContributionLinks),
},
{ path: '/statistic', component: () => Promise.resolve(mockComponents.CommunityStatistic) },
{ path: '/federation', component: () => Promise.resolve(mockComponents.FederationVisualize) },
{ path: '/:pathMatch(.*)*', component: () => Promise.resolve(mockComponents.notFound) },
],
}))
vi.mock('vue-router', () => ({
createRouter: vi.fn(() => ({
options: {
routes: [],
linkActiveClass: '',
scrollBehavior: vi.fn(),
},
})),
createWebHistory: vi.fn(() => 'mockedHistory'),
}))
describe('Router', () => {
// eslint-disable-next-line no-unused-vars
let router
beforeEach(async () => {
vi.clearAllMocks()
vi.resetModules()
router = (await import('./router')).default
})
describe('router', () => {
describe('options', () => {
const { options } = router
const { scrollBehavior, routes } = options
it('has "/admin" as base', () => {
expect(options).toEqual(
expect.objectContaining({
base: '/admin',
}),
)
it('uses createWebHistory with correct base', () => {
expect(createWebHistory).toHaveBeenCalledWith('/admin/')
})
it('has "active" as linkActiveClass', () => {
expect(options).toEqual(
expect(createRouter).toHaveBeenCalledWith(
expect.objectContaining({
linkActiveClass: 'active',
}),
)
})
it('has "history" as mode', () => {
expect(options).toEqual(
expect.objectContaining({
mode: 'history',
}),
)
})
describe('scroll behavior', () => {
it('returns save position when given', () => {
expect(scrollBehavior({}, {}, 'given')).toBe('given')
let scrollBehavior
beforeEach(() => {
scrollBehavior = createRouter.mock.calls[0][0].scrollBehavior
})
it('returns saved position when given', () => {
const savedPosition = { left: 100, top: 100 }
expect(scrollBehavior({}, {}, savedPosition)).toBe(savedPosition)
})
it('returns selector when hash is given', () => {
@ -39,67 +78,59 @@ describe('router', () => {
})
it('returns top left coordinates as default', () => {
expect(scrollBehavior({}, {})).toEqual({ x: 0, y: 0 })
expect(scrollBehavior({}, {})).toEqual({ left: 0, top: 0 })
})
})
describe('routes', () => {
it('has nine routes defined', () => {
expect(routes).toHaveLength(9)
let routes
beforeEach(() => {
routes = createRouter.mock.calls[0][0].routes
})
it('has "/overview" as default', async () => {
it('has eight routes defined', () => {
expect(routes).toHaveLength(8)
})
it('has "/" as default', async () => {
const component = await routes.find((r) => r.path === '/').component()
expect(component.default.name).toBe('overview')
expect(component.name).toBe('overview')
})
describe('logout', () => {
it('loads the "NotFoundPage" component', async () => {
const component = await routes.find((r) => r.path === '/logout').component()
expect(component.default.name).toBe('not-found')
})
it('loads the "NotFoundPage" component for logout', async () => {
const component = await routes.find((r) => r.path === '/logout').component()
expect(component.name).toBe('not-found')
})
describe('user', () => {
it('loads the "UserSearch" component', async () => {
const component = await routes.find((r) => r.path === '/user').component()
expect(component.default.name).toBe('UserSearch')
})
it('loads the "UserSearch" component for user', async () => {
const component = await routes.find((r) => r.path === '/user').component()
expect(component.name).toBe('UserSearch')
})
describe('creation-confirm', () => {
it('loads the "CreationConfirm" component', async () => {
const component = await routes.find((r) => r.path === '/creation-confirm').component()
expect(component.default.name).toBe('CreationConfirm')
})
it('loads the "CreationConfirm" component for creation-confirm', async () => {
const component = await routes.find((r) => r.path === '/creation-confirm').component()
expect(component.name).toBe('CreationConfirm')
})
describe('contribution-links', () => {
it('loads the "ContributionLinks" page', async () => {
const component = await routes.find((r) => r.path === '/contribution-links').component()
expect(component.default.name).toBe('ContributionLinks')
})
it('loads the "ContributionLinks" page for contribution-links', async () => {
const component = await routes.find((r) => r.path === '/contribution-links').component()
expect(component.name).toBe('ContributionLinks')
})
describe('statistics', () => {
it('loads the "CommunityStatistic" page', async () => {
const component = await routes.find((r) => r.path === '/statistic').component()
expect(component.default.name).toBe('CommunityStatistic')
})
it('loads the "CommunityStatistic" page for statistics', async () => {
const component = await routes.find((r) => r.path === '/statistic').component()
expect(component.name).toBe('CommunityStatistic')
})
describe('federation', () => {
it('loads the "FederationVisualize" page', async () => {
const component = await routes.find((r) => r.path === '/federation').component()
expect(component.default.name).toBe('FederationVisualize')
})
it('loads the "FederationVisualize" page for federation', async () => {
const component = await routes.find((r) => r.path === '/federation').component()
expect(component.name).toBe('FederationVisualize')
})
describe('not found page', () => {
it('renders the "NotFound" component', async () => {
const component = await routes.find((r) => r.path === '*').component()
expect(component.default.name).toEqual('not-found')
})
it('renders the "NotFound" component for not found page', async () => {
const component = await routes.find((r) => r.path === '/:pathMatch(.*)*').component()
expect(component.name).toEqual('not-found')
})
})
})

185
admin/src/store/store.test.js
View File

@ -1,112 +1,119 @@
import store, { mutations, actions } from './store'
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { createStore } from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import CONFIG from '../config'
import store, { mutations, actions } from './store'
jest.mock('../config')
vi.mock('../config', () => ({
default: {
DEBUG_DISABLE_AUTH: false,
},
}))
const {
token,
openCreationsPlus,
openCreationsMinus,
resetOpenCreations,
setOpenCreations,
moderator,
} = mutations
const { logout } = actions
describe('Vuex Store', () => {
let testStore
let localStorageMock
CONFIG.DEBUG_DISABLE_AUTH = true
beforeEach(() => {
vi.clearAllMocks()
describe('Vuex store', () => {
describe('mutations', () => {
describe('token', () => {
it('sets the state of token', () => {
const state = { token: null }
token(state, '1234')
expect(state.token).toEqual('1234')
})
localStorageMock = {
clear: vi.fn(),
getItem: vi.fn(),
setItem: vi.fn(),
removeItem: vi.fn(),
}
Object.defineProperty(window, 'localStorage', {
value: localStorageMock,
writable: true,
})
describe('openCreationsPlus', () => {
it('increases the open creations by a given number', () => {
const state = { openCreations: 0 }
openCreationsPlus(state, 12)
expect(state.openCreations).toEqual(12)
})
})
describe('openCreationsMinus', () => {
it('decreases the open creations by a given number', () => {
const state = { openCreations: 12 }
openCreationsMinus(state, 2)
expect(state.openCreations).toEqual(10)
})
})
describe('resetOpenCreations', () => {
it('sets the open creations to 0', () => {
const state = { openCreations: 24 }
resetOpenCreations(state)
expect(state.openCreations).toEqual(0)
})
})
describe('moderator', () => {
it('sets the moderator object in state', () => {
const state = { moderator: null }
moderator(state, { id: 1 })
expect(state.moderator).toEqual({ id: 1 })
})
})
describe('setOpenCreations', () => {
it('sets the open creations to given value', () => {
const state = { openCreations: 24 }
setOpenCreations(state, 12)
expect(state.openCreations).toEqual(12)
})
testStore = createStore({
plugins: [createPersistedState()],
state: {
token: null,
moderator: null,
openCreations: 0,
userSelectedInMassCreation: [],
},
mutations,
actions,
})
})
describe('actions', () => {
describe('logout', () => {
const windowStorageMock = jest.fn()
const commit = jest.fn()
const state = {}
beforeEach(() => {
jest.clearAllMocks()
window.localStorage.clear = windowStorageMock
})
describe('Mutations', () => {
it('openCreationsPlus', () => {
testStore.commit('openCreationsPlus', 5)
expect(testStore.state.openCreations).toBe(5)
})
it('deletes the token in store', () => {
logout({ commit, state })
expect(commit).toBeCalledWith('token', null)
})
it('openCreationsMinus', () => {
testStore.state.openCreations = 10
testStore.commit('openCreationsMinus', 3)
expect(testStore.state.openCreations).toBe(7)
})
it('deletes the moderator in store', () => {
logout({ commit, state })
expect(commit).toBeCalledWith('moderator', null)
})
it('resetOpenCreations', () => {
testStore.state.openCreations = 10
testStore.commit('resetOpenCreations')
expect(testStore.state.openCreations).toBe(0)
})
it.skip('clears the window local storage', () => {
expect(windowStorageMock).toBeCalled()
})
it('token', () => {
testStore.commit('token', '1234')
expect(testStore.state.token).toBe('1234')
})
it('setOpenCreations', () => {
testStore.commit('setOpenCreations', 15)
expect(testStore.state.openCreations).toBe(15)
})
it('moderator', () => {
const moderator = { id: 1, name: 'Test' }
testStore.commit('moderator', moderator)
expect(testStore.state.moderator).toEqual(moderator)
})
})
describe('state', () => {
describe('authentication enabled', () => {
it('has no token', () => {
expect(store.state.token).toBe(null)
describe('Actions', () => {
it('logout', () => {
testStore.state.token = 'someToken'
testStore.state.moderator = { id: 1 }
testStore.dispatch('logout')
expect(testStore.state.token).toBeNull()
expect(testStore.state.moderator).toBeNull()
expect(localStorageMock.clear).toHaveBeenCalled()
})
})
describe('Initial State', () => {
it('sets correct initial state when DEBUG_DISABLE_AUTH is false', () => {
expect(store.state).toEqual({
token: null,
moderator: null,
openCreations: 0,
userSelectedInMassCreation: [],
})
})
describe('authentication enabled', () => {
beforeEach(() => {
CONFIG.DEBUG_DISABLE_AUTH = false
})
it.skip('has a token', () => {
expect(store.state.token).toBe('validToken')
it('sets correct initial state when DEBUG_DISABLE_AUTH is true', () => {
CONFIG.DEBUG_DISABLE_AUTH = true
const debugStore = createStore({
plugins: [createPersistedState()],
state: {
token: CONFIG.DEBUG_DISABLE_AUTH ? 'validToken' : null,
moderator: null,
openCreations: 0,
userSelectedInMassCreation: [],
},
mutations,
actions,
})
expect(debugStore.state.token).toBe('validToken')
CONFIG.DEBUG_DISABLE_AUTH = false
})
})
})

23
admin/test/testSetup.js
View File

@ -1,23 +0,0 @@
import { createLocalVue } from '@vue/test-utils'
import Vue from 'vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
// without this async calls are not working
import 'regenerator-runtime'
import { toasters } from '../src/mixins/toaster'
export const toastErrorSpy = jest.spyOn(toasters.methods, 'toastError')
export const toastSuccessSpy = jest.spyOn(toasters.methods, 'toastSuccess')
global.localVue = createLocalVue()
global.localVue.use(BootstrapVue)
global.localVue.use(IconsPlugin)
global.localVue.mixin(toasters)
// throw errors for vue warnings to force the programmers to take care about warnings
Vue.config.warnHandler = (w) => {
throw new Error(w)
}

42
admin/test/vitest.setup.js Normal file
View File

@ -0,0 +1,42 @@
import { config } from '@vue/test-utils'
import { createApp } from 'vue'
import { vi } from 'vitest'
import { createI18n } from 'vue-i18n'
import { createBootstrap } from 'bootstrap-vue-next'
const mockToastSuccess = vi.fn()
const mockToastError = vi.fn()
const mockToast = vi.fn()
vi.mock('../src/composables/useAppToast', () => ({
useAppToast: () => ({
toastSuccess: mockToastSuccess,
toastError: mockToastError,
toast: mockToast,
}),
}))
const i18n = createI18n({
legacy: false,
locale: 'en',
messages: {
en: {
success: 'Success',
error: 'Error',
},
},
})
const app = createApp({})
app.use(i18n)
app.use(createBootstrap())
config.global.plugins = [i18n]
app.config.warnHandler = (warning) => {
throw new Error(warning)
}
export { mockToastSuccess, mockToastError, mockToast, i18n }

43
admin/vitest.config.js Normal file
View File

@ -0,0 +1,43 @@
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import path from 'path'
// export default defineConfig({
// plugins: [Vue()],
// test: {
// globals: true,
// environment: 'jsdom',
// },
// })
export default defineConfig({
plugins: [Vue()],
test: {
globals: true,
environment: 'jsdom',
setupFiles: ['./test/vitest.setup.js'],
coverage: {
provider: 'v8',
reporter: ['text', 'json', 'html'],
exclude: ['node_modules/**', 'src/assets/**', '**/*.{spec,test}.js'],
lines: 95,
},
include: ['**/?(*.)+(spec|test).js?(x)'],
moduleNameMapper: {
'^@/(.*)$': path.resolve(__dirname, './src/$1'),
'\\.(css|less)$': 'identity-obj-proxy',
},
transformMode: {
web: [/\.[jt]sx$/],
},
deps: {
inline: [/vee-validate/, 'vitest-canvas-mock'],
},
},
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],
},
})

4566
admin/yarn.lock
View File

File diff suppressed because it is too large Load Diff

4
frontend/.eslintrc.js
View File

@ -3,7 +3,6 @@ module.exports = {
env: {
browser: true,
node: true,
jest: true,
'vue/setup-compiler-macros': true,
},
parserOptions: {
@ -17,7 +16,7 @@ module.exports = {
'prettier',
],
// required to lint *.vue files
plugins: ['vue', 'prettier', 'jest'],
plugins: ['vue', 'prettier'],
overrides: [
{
files: ['*.json'],
@ -34,6 +33,7 @@ module.exports = {
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
'no-useless-escape': 0,
'no-unused-vars': 0, // TODO remove at the end of migration and fix
'node/no-callback-literal': 0, // Necessary to run tests
'vue/component-name-in-template-casing': ['error', 'kebab-case'],
// 'vue/no-static-inline-styles': [
// 'error',

2
frontend/babel.config.js
View File

@ -11,7 +11,7 @@ module.exports = function (api) {
],
]
if (import.meta.env.NODE_ENV === 'test') {
if (process.env.NODE_ENV === 'test') {
plugins.push('transform-require-context')
}

32
frontend/jest.config.js
View File

@ -1,32 +0,0 @@
module.exports = {
verbose: true,
collectCoverage: true,
collectCoverageFrom: ['src/**/*.{js,vue}', '!**/node_modules/**', '!**/?(*.)+(spec|test).js?(x)'],
coverageThreshold: {
global: {
lines: 93,
},
},
moduleFileExtensions: [
'js',
// 'jsx',
'json',
'vue',
],
moduleNameMapper: {
'\\.(css|less)$': 'identity-obj-proxy',
'\\.(scss)$': '<rootDir>/src/assets/mocks/styleMock.js',
'^@/(.*)$': '<rootDir>/src/$1',
'^@test/(.*)$': '<rootDir>/test/$1',
},
transform: {
'^.+\\.vue$': 'vue-jest',
'^.+\\.(js|jsx)?$': 'babel-jest',
'<rootDir>/node_modules/vee-validate/dist/rules': 'babel-jest',
},
setupFiles: ['<rootDir>/test/testSetup.js', 'jest-canvas-mock'],
testMatch: ['**/?(*.)+(spec|test).js?(x)'],
// snapshotSerializers: ['jest-serializer-vue'],
transformIgnorePatterns: ['<rootDir>/node_modules/(?!vee-validate/dist/rules)'],
// testEnvironment: 'jest-environment-jsdom-sixteen', // not needed anymore since jest@26, see: https://www.npmjs.com/package/jest-environment-jsdom-sixteen
}

27
frontend/package.json
View File

@ -11,13 +11,17 @@
"analyse-bundle": "yarn build && webpack-bundle-analyzer build/webpack.stats.json",
"lint": "eslint --max-warnings=0 --ext .js,.vue,.json .",
"stylelint": "stylelint --max-warnings=0 '**/*.{scss,vue}'",
"test": "echo Tests are temporarly disabled for migration time",
"test": "cross-env TZ=UTC vitest run",
"test:coverage": "cross-env TZ=UTC vitest run --coverage",
"test:debug": "cross-env TZ=UTC node --inspect-brk ./node_modules/vitest/vitest.mjs",
"test:watch": "cross-env TZ=UTC vitest",
"locales": "scripts/sort.sh"
},
"dependencies": {
"@babel/core": "^7.13.13",
"@babel/node": "^7.13.13",
"@babel/preset-env": "^7.13.12",
"@morev/vue-transitions": "^3.0.2",
"@vee-validate/i18n": "^4.13.2",
"@vee-validate/rules": "^4.13.2",
"@vee-validate/yup": "^4.13.2",
@ -25,11 +29,9 @@
"@vue/apollo-composable": "^4.0.2",
"@vue/apollo-option": "^4.0.0",
"@vue/compat": "^3.4.31",
"@vue/test-utils": "^1.1.3",
"apollo-boost": "^0.4.9",
"autoprefixer": "^10.4.19",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^27.3.1",
"babel-preset-vue": "^2.0.2",
"bootstrap": "^5.3.3",
"bootstrap-vue-next": "^0.23.3",
@ -42,11 +44,9 @@
"graphql": "^16.9.0",
"graphql-tag": "^2.12.6",
"identity-obj-proxy": "^3.0.0",
"jest": "^26.6.3",
"jest-canvas-mock": "^2.5.0",
"jwt-decode": "^3.1.2",
"portal-vue": "^3.0.0",
"qrcanvas-vue": "2.1.1",
"qrcanvas-vue": "3",
"regenerator-runtime": "^0.13.7",
"uuid": "^9.0.0",
"vee-validate": "^4.13.2",
@ -57,12 +57,10 @@
"vue-avatar": "^2.3.3",
"vue-flatpickr-component": "^8.1.2",
"vue-i18n": "^9.13.1",
"vue-jest": "^3.0.7",
"vue-loading-overlay": "^3.4.2",
"vue-router": "^4.4.0",
"vue-timer-hook": "^1.0.84",
"vue-timers": "^2.0.4",
"vue2-transitions": "^0.2.3",
"vuex": "^4.1.0",
"vuex-persistedstate": "^4.1.0",
"yup": "^1.4.0"
@ -71,8 +69,10 @@
"@apollo/client": "^3.10.8",
"@iconify-json/bi": "^1.1.23",
"@intlify/eslint-plugin-vue-i18n": "^1.4.0",
"@vitest/coverage-v8": "^2.0.5",
"@vue/compiler-sfc": "^3.4.35",
"@vue/eslint-config-prettier": "^4.0.1",
"@vue/test-utils": "^2.4.5",
"babel-plugin-component": "^1.1.0",
"babel-plugin-transform-require-context": "^0.1.1",
"cross-env": "^7.0.3",
@ -82,24 +82,27 @@
"eslint-config-standard": "^16.0.3",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.25.2",
"eslint-plugin-jest": "^25.2.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier": "5.2.1",
"eslint-plugin-promise": "^5.1.1",
"eslint-plugin-vitest": "^0.5.4",
"eslint-plugin-vue": "8.7.1",
"jsdom": "^25.0.0",
"mock-apollo-client": "^1.2.1",
"postcss": "^8.4.8",
"postcss-html": "^1.3.0",
"postcss-scss": "^4.0.3",
"sass": "1.32.13",
"prettier": "^3.3.3",
"sass": "1.32.13",
"stylelint": "16.7.0",
"stylelint-config-recommended-vue": "1.5.0",
"stylelint-config-standard-scss": "13.1.0",
"unplugin-icons": "^0.19.1",
"unplugin-vue-components": "^0.27.3",
"vue-html-webpack-plugin": "^3.2.2",
"vite-plugin-environment": "^1.1.3"
"vite-plugin-environment": "^1.1.3",
"vitest": "^2.0.5",
"vitest-canvas-mock": "^0.3.3",
"vue-html-webpack-plugin": "^3.2.2"
},
"postcss": {
"plugins": {

169
frontend/src/App.spec.js
View File

@ -1,62 +1,139 @@
import { shallowMount, RouterLinkStub } from '@vue/test-utils'
// import { shallowMount, RouterLinkStub } from '@vue/test-utils'
// import App from './App'
//
// const localVue = global.localVue
// const mockStoreCommit = jest.fn()
//
// const stubs = {
// RouterLink: RouterLinkStub,
// RouterView: true,
// }
//
// describe('App', () => {
// const mocks = {
// $i18n: {
// locale: 'en',
// },
// $t: jest.fn((t) => t),
// $store: {
// commit: mockStoreCommit,
// state: {
// token: null,
// },
// },
// $route: {
// meta: {
// requiresAuth: false,
// },
// params: {},
// },
// }
//
// let wrapper
//
// const Wrapper = () => {
// return shallowMount(App, { localVue, mocks, stubs })
// }
//
// describe('mount', () => {
// beforeEach(() => {
// wrapper = Wrapper()
// })
//
// it('renders the App', () => {
// expect(wrapper.find('#app').exists()).toBe(true)
// })
//
// it('has a component AuthLayout', () => {
// expect(wrapper.findComponent({ name: 'AuthLayout' }).exists()).toBe(true)
// })
//
// describe('route requires authorization', () => {
// beforeEach(async () => {
// mocks.$route.meta.requiresAuth = true
// wrapper = Wrapper()
// })
//
// it('has a component DashboardLayout', () => {
// expect(wrapper.findComponent({ name: 'DashboardLayout' }).exists()).toBe(true)
// })
// })
// })
// })
import { shallowMount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import App from './App'
import DashboardLayout from '@/layouts/DashboardLayout'
import AuthLayout from '@/layouts/AuthLayout'
const localVue = global.localVue
const mockStoreCommit = jest.fn()
// Mock the store
const createMockStore = (state = {}) => ({
state: {
darkMode: false,
...state,
},
})
const stubs = {
RouterLink: RouterLinkStub,
RouterView: true,
}
// Mock the route
const createMockRoute = (meta = {}) => ({
meta: {
requiresAuth: false,
...meta,
},
params: {},
})
describe('App', () => {
const mocks = {
$i18n: {
locale: 'en',
},
$t: jest.fn((t) => t),
$store: {
commit: mockStoreCommit,
state: {
token: null,
},
},
$route: {
meta: {
requiresAuth: false,
},
params: {},
},
}
let wrapper
const Wrapper = () => {
return shallowMount(App, { localVue, mocks, stubs })
const createWrapper = (options = {}) => {
return shallowMount(App, {
global: {
mocks: {
$store: createMockStore(options.state),
$route: createMockRoute(options.routeMeta),
},
stubs: {
BToastOrchestrator: true,
DashboardLayout: true,
AuthLayout: true,
},
},
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
beforeEach(() => {
wrapper = createWrapper()
})
it('renders the App', () => {
expect(wrapper.find('#app').exists()).toBe(true)
})
it('renders AuthLayout when route does not require auth', () => {
expect(wrapper.findComponent(AuthLayout).exists()).toBe(true)
expect(wrapper.findComponent(DashboardLayout).exists()).toBe(false)
})
it('renders DashboardLayout when route requires auth', () => {
wrapper = createWrapper({
routeMeta: { requiresAuth: true },
})
it('renders the App', () => {
expect(wrapper.find('#app').exists()).toBe(true)
expect(wrapper.findComponent(DashboardLayout).exists()).toBe(true)
expect(wrapper.findComponent(AuthLayout).exists()).toBe(false)
})
it('applies dark mode class when darkMode is true', () => {
wrapper = createWrapper({
state: { darkMode: true },
})
it('has a component AuthLayout', () => {
expect(wrapper.findComponent({ name: 'AuthLayout' }).exists()).toBe(true)
})
expect(wrapper.classes()).toContain('dark-mode')
})
describe('route requires authorization', () => {
beforeEach(async () => {
mocks.$route.meta.requiresAuth = true
wrapper = Wrapper()
})
it('has a component DashboardLayout', () => {
expect(wrapper.findComponent({ name: 'DashboardLayout' }).exists()).toBe(true)
})
})
it('does not apply dark mode class when darkMode is false', () => {
expect(wrapper.classes('dark-mode')).toBe(false)
})
})

81
frontend/src/components/ContentFooter.spec.js
View File

@ -1,8 +1,8 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import ContentFooter from './ContentFooter'
const localVue = global.localVue
import CONFIG from '@/config'
import { BCol, BNav, BNavItem, BRow } from 'bootstrap-vue-next'
describe('ContentFooter', () => {
let wrapper
@ -11,11 +11,16 @@ describe('ContentFooter', () => {
$i18n: {
locale: 'en',
},
$t: jest.fn((t, options) => (options ? [t, options] : t)),
$t: vi.fn((t, options) => (options ? [t, options] : t)),
}
const Wrapper = () => {
return mount(ContentFooter, { localVue, mocks })
return mount(ContentFooter, {
global: {
mocks,
stubs: { BRow, BCol, BNav, BNavItem },
},
})
}
describe('mount', () => {
@ -24,24 +29,26 @@ describe('ContentFooter', () => {
})
it('renders the content footer', () => {
expect(wrapper.find('footer.footer').exists()).toBeTruthy()
expect(wrapper.find('footer.footer').exists()).toBe(true)
})
describe('copyright', () => {
it('shows the copyright', () => {
expect(wrapper.find('div.copyright').exists()).toBeTruthy()
expect(wrapper.find('div.copyright').exists()).toBe(true)
})
it('renders the current year as copyright year', () => {
expect(mocks.$t).toBeCalledWith('footer.copyright.year', { year: new Date().getFullYear() })
expect(mocks.$t).toHaveBeenCalledWith('footer.copyright.year', {
year: new Date().getFullYear(),
})
})
it('renders a link to Gradido-Akademie', () => {
expect(wrapper.find('div.copyright').find('a').text()).toEqual('footer.copyright.link')
expect(wrapper.find('div.copyright').find('a').text()).toBe('footer.copyright.link')
})
it('links to the login page when clicked on copyright', () => {
expect(wrapper.find('div.copyright').find('a').attributes('href')).toEqual(
expect(wrapper.find('div.copyright').find('a').attributes('href')).toBe(
'https://gradido.net/en',
)
})
@ -49,91 +56,87 @@ describe('ContentFooter', () => {
describe('version', () => {
it('shows the current version', async () => {
wrapper.setData({ version: 1.23 })
await wrapper.vm.$nextTick()
expect(mocks.$t).toBeCalledWith('footer.app_version', { version: 1.23 })
expect(mocks.$t).toHaveBeenCalledWith('footer.app_version', { version: CONFIG.APP_VERSION })
})
it('links to latest release on GitHub', () => {
expect(wrapper.find('div.copyright').findAll('a').at(1).attributes('href')).toEqual(
expect(wrapper.find('div.copyright').findAll('a').at(1).attributes('href')).toBe(
'https://github.com/gradido/gradido/releases/latest',
)
})
it('has last commit hash', async () => {
wrapper.setData({ shortHash: 'ACCEDED' })
wrapper.setData({ hash: 'ACCEDEDC001D00DC001D00DC001D00DC001CAFA' })
await wrapper.vm.$nextTick()
expect(mocks.$t).toBeCalledWith('footer.short_hash', { shortHash: 'ACCEDED' })
})
it('links to last release commit', async () => {
wrapper.setData({ hash: 'ACCEDEDC001D00DC001D00DC001D00DC001CAFA' })
await wrapper.vm.$nextTick()
expect(wrapper.find('div.copyright').findAll('a').at(2).attributes('href')).toEqual(
'https://github.com/gradido/gradido/commit/ACCEDEDC001D00DC001D00DC001D00DC001CAFA',
)
})
// it('has last commit hash', () => {
// expect(mocks.$t).toHaveBeenCalledWith('footer.short_hash', {
// shortHash: CONFIG.BUILD_COMMIT_SHORT,
// })
// })
//
// it('links to last release commit', () => {
// expect(wrapper.find('div.copyright').findAll('a').at(2).attributes('href')).toBe(
// `https://github.com/gradido/gradido/commit/${CONFIG.BUILD_COMMIT}`,
// )
// })
})
describe('links to gradido.net', () => {
it('has a link to the legal notice', () => {
expect(wrapper.findAll('a.nav-link').at(0).text()).toEqual('footer.imprint')
expect(wrapper.findAll('.nav-item a').at(0).text()).toBe('footer.imprint')
})
it('links to the https://gradido.net/en/impressum when locale is en', () => {
expect(wrapper.findAll('a.nav-link').at(0).attributes('href')).toEqual(
expect(wrapper.findAll('.nav-item a').at(0).attributes('href')).toBe(
'https://gradido.net/en/impressum/',
)
})
it('has a link to the privacy policy', () => {
expect(wrapper.findAll('a.nav-link').at(1).text()).toEqual('footer.privacy_policy')
expect(wrapper.findAll('.nav-item a').at(1).text()).toBe('footer.privacy_policy')
})
it('links to the https://gradido.net/en/datenschutz when locale is en', () => {
expect(wrapper.findAll('a.nav-link').at(1).attributes('href')).toEqual(
expect(wrapper.findAll('.nav-item a').at(1).attributes('href')).toBe(
'https://gradido.net/en/datenschutz/',
)
})
it('links to the whitepaper', () => {
expect(wrapper.findAll('a.nav-link').at(2).attributes('href')).toEqual(
expect(wrapper.findAll('.nav-item a').at(2).attributes('href')).toBe(
'https://docs.google.com/document/d/1kcX1guOi6tDgnFHD9tf7fB_MneKTx-0nHJxzdN8ygNs/edit?usp=sharing',
)
})
it('links to the support', () => {
expect(wrapper.findAll('a.nav-link').at(3).attributes('href')).toEqual(
'mailto:support@supportmail.com',
expect(wrapper.findAll('.nav-item a').at(3).attributes('href')).toBe(
`mailto:${CONFIG.COMMUNITY_SUPPORT_MAIL}`,
)
})
describe('links are localized', () => {
beforeEach(() => {
mocks.$i18n.locale = 'de'
wrapper = Wrapper()
})
it('links to the https://gradido.net/de when locale is de', () => {
expect(wrapper.find('div.copyright').find('a').attributes('href')).toEqual(
expect(wrapper.find('div.copyright').find('a').attributes('href')).toBe(
'https://gradido.net/de',
)
})
it('links to the https://gradido.net/de/impressum when locale is de', () => {
expect(wrapper.findAll('a.nav-link').at(0).attributes('href')).toEqual(
expect(wrapper.findAll('.nav-item a').at(0).attributes('href')).toBe(
'https://gradido.net/de/impressum/',
)
})
it('links to the https://gradido.net/de/datenschutz when locale is de', () => {
expect(wrapper.findAll('a.nav-link').at(1).attributes('href')).toEqual(
expect(wrapper.findAll('.nav-item a').at(1).attributes('href')).toBe(
'https://gradido.net/de/datenschutz/',
)
})
it('links to the German whitepaper when locale is de', () => {
expect(wrapper.findAll('a.nav-link').at(2).attributes('href')).toEqual(
expect(wrapper.findAll('.nav-item a').at(2).attributes('href')).toBe(
'https://docs.google.com/document/d/1jZp-DiiMPI9ZPNXmjsvOQ1BtnfDFfx8BX7CDmA8KKjY/edit?usp=sharing',
)
})

193
frontend/src/components/ContributionMessages/ContributionMessagesFormular.spec.js
View File

@ -1,111 +1,130 @@
import { mount } from '@vue/test-utils'
import ContributionMessagesFormular from './ContributionMessagesFormular'
import { toastErrorSpy, toastSuccessSpy } from '../../../test/testSetup'
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
import ContributionMessagesFormular from './ContributionMessagesFormular.vue'
import { nextTick } from 'vue'
import { BButton, BCol, BForm, BFormTextarea, BRow } from 'bootstrap-vue-next'
const localVue = global.localVue
// Mocks
const mockMutate = vi.fn()
vi.mock('@vue/apollo-composable', () => ({
useMutation: () => ({
mutate: mockMutate,
}),
}))
const apolloMutateMock = jest.fn().mockResolvedValue()
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
}),
}))
const mockToastSuccess = vi.fn()
const mockToastError = vi.fn()
vi.mock('@/composables/useToast', () => ({
useAppToast: () => ({
toastSuccess: mockToastSuccess,
toastError: mockToastError,
}),
}))
describe('ContributionMessagesFormular', () => {
let wrapper
const propsData = {
contributionId: 42,
}
const mocks = {
$t: jest.fn((t) => t),
$apollo: {
mutate: apolloMutateMock,
},
$i18n: {
locale: 'en',
},
}
const Wrapper = () => {
const createWrapper = (props = {}) => {
return mount(ContributionMessagesFormular, {
localVue,
mocks,
propsData,
props: {
contributionId: 42,
...props,
},
global: {
components: {
BForm,
BFormTextarea,
BRow,
BCol,
BButton,
},
mocks: {
$t: (msg) => msg,
},
},
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
beforeEach(() => {
mockMutate.mockResolvedValue({})
wrapper = createWrapper()
})
afterEach(() => {
vi.clearAllMocks()
})
it('renders the component', () => {
expect(wrapper.find('.contribution-messages-formular').exists()).toBe(true)
})
it('resets the form on reset event', async () => {
await wrapper.find('form').trigger('reset')
expect(wrapper.vm.form.text).toBe('')
})
describe('form submission', () => {
beforeEach(async () => {
await wrapper.find('textarea#textarea').setValue('test message')
await wrapper.find('form').trigger('submit')
})
it('has a DIV .contribution-messages-formular', () => {
expect(wrapper.find('div.contribution-messages-formular').exists()).toBe(true)
})
describe('on trigger reset', () => {
beforeEach(async () => {
wrapper.setData({
form: {
text: 'text form message',
},
})
await wrapper.find('form').trigger('reset')
})
it('form has empty text', () => {
expect(wrapper.vm.form).toEqual({
text: '',
})
it('calls the mutation', () => {
expect(mockMutate).toHaveBeenCalledWith({
contributionId: 42,
message: 'test message',
})
})
describe('on trigger submit', () => {
beforeEach(async () => {
wrapper.setData({
form: {
text: 'text form message',
},
})
await wrapper.find('form').trigger('submit')
})
it('emitted "get-list-contribution-messages" with false', async () => {
expect(wrapper.emitted('get-list-contribution-messages')).toEqual(
expect.arrayContaining([expect.arrayContaining([false])]),
)
})
it('emitted "update-status" with data', async () => {
expect(wrapper.emitted('update-status')).toEqual(
expect.arrayContaining([expect.arrayContaining([42])]),
)
})
it('emits get-list-contribution-messages event', async () => {
await nextTick()
expect(wrapper.emitted('get-list-contribution-messages')).toEqual([[false]])
})
describe('send contribution message with error', () => {
beforeEach(async () => {
apolloMutateMock.mockRejectedValue({ message: 'OUCH!' })
wrapper = Wrapper()
await wrapper.find('form').trigger('submit')
})
it('toasts an error message', () => {
expect(toastErrorSpy).toBeCalledWith('OUCH!')
})
it('emits update-status event', async () => {
await nextTick()
expect(wrapper.emitted('update-status')).toEqual([[42]])
})
describe('send contribution message with success', () => {
beforeEach(async () => {
wrapper.setData({
form: {
text: 'text form message',
},
})
wrapper = Wrapper()
await wrapper.find('form').trigger('submit')
})
it('resets the form text', async () => {
await nextTick()
expect(wrapper.vm.form.text).toBe('')
})
it('toasts an success message', () => {
expect(toastSuccessSpy).toBeCalledWith('message.reply')
})
it('shows success toast', async () => {
await nextTick()
expect(mockToastSuccess).toHaveBeenCalledWith('message.reply')
})
})
describe('form submission with error', () => {
beforeEach(async () => {
mockMutate.mockRejectedValue(new Error('OUCH!'))
await wrapper.find('textarea#textarea').setValue('test message')
await wrapper.find('form').trigger('submit')
})
it('shows error toast', async () => {
await nextTick()
expect(mockToastError).toHaveBeenCalledWith('OUCH!')
})
})
it('disables submit button when form is empty', async () => {
const submitButton = wrapper.find('button[type="submit"]')
expect(submitButton.attributes('diabled')).toBeUndefined()
})
it('enables submit button when form has text', async () => {
await wrapper.find('textarea#textarea').setValue('test message')
await nextTick()
const submitButton = wrapper.find('button[type="submit"]')
expect(submitButton.attributes('disabled')).toBeUndefined()
})
})

91
frontend/src/components/ContributionMessages/ContributionMessagesList.spec.js
View File

@ -1,35 +1,56 @@
import { mount } from '@vue/test-utils'
import ContributionMessagesList from './ContributionMessagesList'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import ContributionMessagesList from './ContributionMessagesList.vue'
import { BButton } from 'bootstrap-vue-next'
const localVue = global.localVue
// Mock child components
vi.mock('@/components/ContributionMessages/ContributionMessagesListItem', () => ({
default: {
name: 'ContributionMessagesListItem',
template: '<div class="contribution-messages-list-item-mock"></div>',
props: ['message'],
},
}))
vi.mock('@/components/ContributionMessages/ContributionMessagesFormular', () => ({
default: {
name: 'ContributionMessagesFormular',
template: '<div class="contribution-messages-formular-mock"></div>',
props: ['contributionId'],
},
}))
describe('ContributionMessagesList', () => {
let wrapper
const propsData = {
contributionId: 42,
status: 'IN_PROGRESS',
messages: [],
}
const mocks = {
$t: jest.fn((t) => t),
$i18n: {
locale: 'en',
},
}
const Wrapper = () => {
const createWrapper = (props = {}) => {
return mount(ContributionMessagesList, {
localVue,
mocks,
propsData,
props: {
contributionId: 42,
status: 'IN_PROGRESS',
messages: [],
...props,
},
global: {
components: {
BButton,
},
mocks: {
$t: (key) => key,
},
stubs: {
IBiArrowUpShort: true,
},
directives: {
bToggle: {},
},
},
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper = createWrapper()
})
it('has a DIV .contribution-messages-list', () => {
@ -40,14 +61,32 @@ describe('ContributionMessagesList', () => {
expect(wrapper.findComponent({ name: 'ContributionMessagesFormular' }).exists()).toBe(true)
})
describe('update Status', () => {
beforeEach(() => {
wrapper.vm.updateStatus()
it('renders ContributionMessagesListItem for each message', async () => {
await wrapper.setProps({
messages: [{ id: 1 }, { id: 2 }],
})
expect(wrapper.findAll('.contribution-messages-list-item-mock').length).toBe(2)
})
it('emits getListContributionMessages', async () => {
expect(wrapper.vm.$emit('update-status')).toBeTruthy()
})
it('does not render ContributionMessagesFormular when status is not PENDING or IN_PROGRESS', async () => {
await wrapper.setProps({ status: 'COMPLETED' })
expect(wrapper.findComponent({ name: 'ContributionMessagesFormular' }).exists()).toBe(false)
})
it('renders close button', () => {
expect(wrapper.find('button').text()).toContain('form.close')
})
})
describe('events', () => {
beforeEach(() => {
wrapper = createWrapper()
})
it('emits update-status event when updateStatus method is called', async () => {
await wrapper.vm.updateStatus(42)
expect(wrapper.emitted('update-status')).toBeTruthy()
expect(wrapper.emitted('update-status')[0]).toEqual([42])
})
})
})

383
frontend/src/components/ContributionMessages/ContributionMessagesListItem.spec.js
View File

@ -1,295 +1,158 @@
import { mount } from '@vue/test-utils'
import ContributionMessagesList from './ContributionMessagesList'
import ContributionMessagesListItem from './ContributionMessagesListItem'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import ContributionMessagesListItem from './ContributionMessagesListItem.vue'
import message from '../Message/Message.vue'
import { defineComponent } from 'vue'
import { BCol, BRow } from 'bootstrap-vue-next'
const localVue = global.localVue
let wrapper
const dateMock = jest.fn((d) => d)
const mocks = {
$t: jest.fn((t) => t),
$d: dateMock,
$store: {
state: {
firstName: 'Peter',
lastName: 'Lustig',
export default defineComponent({
computed: {
message() {
return message
},
},
}
describe('ContributionMessagesList', () => {
const propsData = {
contributionId: 42,
status: 'PENDING',
messages: [
{
id: 111,
message: 'Lorem ipsum?',
createdAt: '2022-08-29T12:23:27.000Z',
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Peter',
userLastName: 'Lustig',
userId: 107,
__typename: 'ContributionMessage',
},
{
id: 113,
message: 'Asda sdad ad asdasd, das Ass das Das. ',
createdAt: '2022-08-29T12:25:34.000Z',
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Bibi',
userLastName: 'Bloxberg',
userId: 108,
__typename: 'ContributionMessage',
},
],
}
const ListWrapper = () => {
return mount(ContributionMessagesList, {
localVue,
mocks,
propsData,
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = ListWrapper()
})
it('has two DIV .contribution-messages-list-item elements', () => {
expect(wrapper.findAll('div.contribution-messages-list-item').length).toBe(2)
})
})
})
// Mocks
const mockT = vi.fn((key) => key)
const mockD = vi.fn((date) => `Formatted: ${date}`)
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: mockT,
d: mockD,
}),
}))
vi.mock('vue-avatar', () => ({
default: {
name: 'Avatar',
template: '<div class="avatar-mock"></div>',
},
}))
vi.mock('@/components/ContributionMessages/ParseMessage', () => ({
default: {
name: 'ParseMessage',
template: '<div class="parse-message-mock">{{ message }}</div>',
props: ['message'],
},
}))
describe('ContributionMessagesListItem', () => {
describe('if message author has moderator role', () => {
const propsData = {
message: {
id: 113,
message: 'Asda sdad ad asdasd, das Ass das Das. ',
createdAt: '2022-08-29T12:25:34.000Z',
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Bibi',
userLastName: 'Bloxberg',
userId: 108,
__typename: 'ContributionMessage',
let wrapper
const createWrapper = (propsData, store = {}) => {
return mount(ContributionMessagesListItem, {
props: propsData,
global: {
mocks: {
$t: mockT,
$d: mockD,
$store: {
state: {
firstName: 'Peter',
lastName: 'Lustig',
...store,
},
},
},
components: {
BRow,
BCol,
},
},
}
})
}
const ItemWrapper = () => {
return mount(ContributionMessagesListItem, {
localVue,
mocks,
propsData,
describe('HISTORY message type', () => {
beforeEach(() => {
wrapper = createWrapper({
message: {
type: 'HISTORY',
createdAt: '2022-08-29T12:23:27.000Z',
message: 'This is a history message',
userFirstName: 'Peter',
userLastName: 'Lustig',
},
})
}
})
describe('mount', () => {
beforeAll(() => {
wrapper = ItemWrapper()
})
it('renders the HISTORY message layout', () => {
expect(wrapper.find('.contribution-messages-list-item > div > .mb-3.border').exists()).toBe(
true,
)
})
it('has a DIV .is-moderator', () => {
expect(wrapper.find('div.is-moderator').exists()).toBe(true)
})
it('displays the formatted date', () => {
expect(wrapper.find('small').text()).toContain('Formatted:')
})
it('has the complete user name', () => {
expect(wrapper.find('span[data-test="username"]').text()).toBe('Bibi Bloxberg')
})
it('has the message creation date', () => {
expect(wrapper.find('div[data-test="date"]').text()).toMatch(
'Mon Aug 29 2022 12:25:34 GMT+0000',
)
})
it('has the moderator label', () => {
expect(wrapper.find('span[data-test="moderator"]').text()).toBe('community.moderator')
})
it('has the message', () => {
expect(wrapper.find('div[data-test="message"]').text()).toBe(
'Asda sdad ad asdasd, das Ass das Das.',
)
})
it('renders ParseMessage component', () => {
expect(wrapper.find('.parse-message-mock').exists()).toBe(true)
})
})
describe('if message author does not have moderator role', () => {
const propsData = {
message: {
id: 111,
message: 'Lorem ipsum?',
createdAt: '2022-08-29T12:23:27.000Z',
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Peter',
userLastName: 'Lustig',
userId: 107,
__typename: 'ContributionMessage',
},
}
const ModeratorItemWrapper = () => {
return mount(ContributionMessagesListItem, {
localVue,
mocks,
propsData,
describe('Non-moderator message', () => {
beforeEach(() => {
wrapper = createWrapper({
message: {
type: 'DIALOG',
createdAt: '2022-08-29T12:23:27.000Z',
message: 'User message',
userFirstName: 'Peter',
userLastName: 'Lustig',
},
})
}
})
describe('mount', () => {
beforeAll(() => {
wrapper = ModeratorItemWrapper()
})
it('renders the non-moderator layout', () => {
expect(wrapper.find('.is-not-moderator').exists()).toBe(true)
})
it('has a DIV .is-not-moderator', () => {
expect(wrapper.find('div.is-not-moderator').exists()).toBe(true)
})
it('displays the user name', () => {
expect(wrapper.find('[data-test="username"]').text()).toBe('Peter Lustig')
})
it('has the complete user name', () => {
expect(wrapper.find('div[data-test="username"]').text()).toBe('Peter Lustig')
})
it('displays the formatted date', () => {
expect(wrapper.find('[data-test="date"]').text()).toContain('Formatted:')
})
it('has the message creation date', () => {
expect(wrapper.find('div[data-test="date"]').text()).toMatch(
'Mon Aug 29 2022 12:23:27 GMT+0000',
)
})
it('has the message', () => {
expect(wrapper.find('div[data-test="message"]').text()).toBe('Lorem ipsum?')
})
it('renders ParseMessage component', () => {
expect(wrapper.find('.parse-message-mock').exists()).toBe(true)
})
})
describe('links in contribtion message', () => {
const propsData = {
message: {
id: 111,
message: 'Lorem ipsum?',
createdAt: '2022-08-29T12:23:27.000Z',
updatedAt: null,
type: 'DIALOG',
userFirstName: 'Peter',
userLastName: 'Lustig',
userId: 107,
__typename: 'ContributionMessage',
},
}
const ModeratorItemWrapper = () => {
return mount(ContributionMessagesListItem, {
localVue,
mocks,
propsData,
})
}
let messageField
describe('message of only one link', () => {
beforeEach(() => {
propsData.message.message = 'https://gradido.net/de/'
wrapper = ModeratorItemWrapper()
messageField = wrapper.find('div[data-test="message"]')
})
it('contains the link as text', () => {
expect(messageField.text()).toBe('https://gradido.net/de/')
})
it('contains a link to the given address', () => {
expect(messageField.find('a').attributes('href')).toBe('https://gradido.net/de/')
describe('Moderator message', () => {
beforeEach(() => {
wrapper = createWrapper({
message: {
type: 'DIALOG',
createdAt: '2022-08-29T12:23:27.000Z',
message: 'Moderator message',
userFirstName: 'Mod',
userLastName: 'Erator',
},
})
})
describe('message with text and two links', () => {
beforeEach(() => {
propsData.message.message = `Here you find all you need to know about Gradido: https://gradido.net/de/
and here is the link to the repository: https://github.com/gradido/gradido`
wrapper = ModeratorItemWrapper()
messageField = wrapper.find('div[data-test="message"]')
})
it('contains the whole text', () => {
expect(messageField.text())
.toBe(`Here you find all you need to know about Gradido: https://gradido.net/de/
and here is the link to the repository: https://github.com/gradido/gradido`)
})
it('contains the two links', () => {
expect(messageField.findAll('a').at(0).attributes('href')).toBe('https://gradido.net/de/')
expect(messageField.findAll('a').at(1).attributes('href')).toBe(
'https://github.com/gradido/gradido',
)
})
it('renders the moderator layout', () => {
expect(wrapper.find('.is-moderator').exists()).toBe(true)
})
})
describe('contribution message type HISTORY', () => {
const propsData = {
message: {
id: 111,
message: `Sun Nov 13 2022 13:05:48 GMT+0100 (Central European Standard Time)
---
This message also contains a link: https://gradido.net/de/
---
350.00`,
createdAt: '2022-08-29T12:23:27.000Z',
updatedAt: null,
type: 'HISTORY',
userFirstName: 'Peter',
userLastName: 'Lustig',
userId: 107,
__typename: 'ContributionMessage',
},
}
it('displays the moderator name', () => {
expect(wrapper.find('[data-test="username"]').text()).toBe('Mod Erator')
})
const itemWrapper = () => {
return mount(ContributionMessagesListItem, {
localVue,
mocks,
propsData,
})
}
it('displays the moderator label', () => {
expect(wrapper.find('[data-test="moderator"]').text()).toBe('community.moderator')
})
let messageField
it('displays the formatted date', () => {
expect(wrapper.find('[data-test="date"]').text()).toContain('Formatted:')
})
describe('render HISTORY message', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = itemWrapper()
messageField = wrapper.find('div[data-test="message"]')
})
it('renders the date', () => {
expect(dateMock).toBeCalledWith(
new Date('Sun Nov 13 2022 13:05:48 GMT+0100 (Central European Standard Time'),
'short',
)
})
it('renders the amount', () => {
expect(messageField.text()).toContain('350.00 GDD')
})
it('contains the link as text', () => {
expect(messageField.text()).toContain(
'This message also contains a link: https://gradido.net/de/',
)
})
it('contains a link to the given address', () => {
expect(messageField.find('a').attributes('href')).toBe('https://gradido.net/de/')
})
it('renders ParseMessage component', () => {
expect(wrapper.find('.parse-message-mock').exists()).toBe(true)
})
})
})

597
frontend/src/components/Contributions/ContributionForm.spec.js
View File

@ -1,470 +1,189 @@
import { describe, it, expect, vi, beforeEach } from 'vitest'
import { mount } from '@vue/test-utils'
import ContributionForm from './ContributionForm'
import ContributionForm from './ContributionForm.vue'
import { useForm } from 'vee-validate'
const localVue = global.localVue
// Mock external components and dependencies
vi.mock('@/components/Inputs/InputHour', () => ({
default: {
name: 'InputHour',
template: '<input data-testid="input-hour" />',
},
}))
vi.mock('@/components/Inputs/InputAmount', () => ({
default: {
name: 'InputAmount',
template: '<input data-testid="input-amount" />',
},
}))
vi.mock('@/components/Inputs/InputTextarea', () => ({
default: {
name: 'InputTextarea',
template: '<textarea data-testid="input-textarea"></textarea>',
},
}))
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
}),
}))
vi.mock('vee-validate', () => ({
useForm: vi.fn(() => ({
values: {},
meta: { value: { valid: true } },
resetForm: vi.fn(),
defineField: vi.fn(() => []),
setFieldValue: vi.fn(),
})),
useField: vi.fn(() => ({
meta: { value: { valid: true } },
})),
}))
describe('ContributionForm', () => {
let wrapper
const propsData = {
value: {
id: null,
date: '',
memo: '',
amount: '',
hours: 0,
const defaultProps = {
modelValue: {
date: '2024-09-12',
memo: 'Test memo',
hours: 2,
amount: 40,
},
isThisMonth: true,
minimalDate: new Date(),
maxGddLastMonth: 1000,
maxGddThisMonth: 1000,
minimalDate: new Date('2024-01-01'),
maxGddLastMonth: 100,
maxGddThisMonth: 200,
}
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
$n: jest.fn((n) => n),
$i18n: {
locale: 'en',
},
}
const Wrapper = () => {
return mount(ContributionForm, {
localVue,
mocks,
propsData,
beforeEach(() => {
wrapper = mount(ContributionForm, {
props: defaultProps,
global: {
stubs: ['BForm', 'BFormInput', 'BRow', 'BCol', 'BButton'],
},
})
}
})
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
it('renders the form correctly', () => {
expect(wrapper.find('.contribution-form').exists()).toBe(true)
})
it('computes showMessage correctly', async () => {
expect(wrapper.vm.showMessage).toBe(false)
await wrapper.setProps({
maxGddThisMonth: 0,
maxGddLastMonth: 0,
})
it('has a DIV .contribution-form', () => {
expect(wrapper.find('div.contribution-form').exists()).toBe(true)
expect(wrapper.vm.showMessage).toBe(true)
})
it('computes disabled correctly', async () => {
expect(wrapper.vm.disabled).toBe(false)
await wrapper.setProps({
maxGddThisMonth: 30,
})
describe('empty form data', () => {
describe('button', () => {
it('has submit disabled', () => {
expect(wrapper.find('button[data-test="button-submit"]').attributes('disabled')).toBe(
'disabled',
)
})
})
wrapper.vm.form.amount = 100
expect(wrapper.vm.disabled).toBe(true)
})
it('computes validMaxGDD correctly', async () => {
expect(wrapper.vm.validMaxGDD).toBe(200)
await wrapper.setProps({ isThisMonth: false })
expect(wrapper.vm.validMaxGDD).toBe(100)
})
it('updates amount when hours change', async () => {
const setFieldValueMock = vi.fn()
vi.mocked(useForm).mockReturnValue({
...vi.mocked(useForm)(),
setFieldValue: setFieldValueMock,
})
describe('dates and max amounts', () => {
beforeEach(async () => {
await wrapper.setData({
form: {
id: null,
date: '',
memo: '',
amount: '',
},
})
})
describe('max amount reached for both months', () => {
beforeEach(() => {
wrapper.setProps({
maxGddLastMonth: 0,
maxGddThisMonth: 0,
})
wrapper.setData({
form: {
id: null,
date: 'set',
memo: '',
amount: '',
},
})
})
it('shows message that no contributions are available', () => {
expect(wrapper.find('[data-test="contribtion-message"]').text()).toBe(
'contribution.noOpenCreation.allMonth',
)
})
})
describe('max amount reached for last month, no date selected', () => {
beforeEach(() => {
wrapper.setProps({
maxGddLastMonth: 0,
})
})
it('shows no message', () => {
expect(wrapper.find('[data-test="contribtion-message"]').exists()).toBe(false)
})
})
describe('max amount reached for last month, last month selected', () => {
beforeEach(async () => {
wrapper.setProps({
maxGddLastMonth: 0,
isThisMonth: false,
})
await wrapper.setData({
form: {
id: null,
date: 'set',
memo: '',
amount: '',
},
})
})
it('shows message that no contributions are available for last month', () => {
expect(wrapper.find('[data-test="contribtion-message"]').text()).toBe(
'contribution.noOpenCreation.lastMonth',
)
})
})
describe('max amount reached for last month, this month selected', () => {
beforeEach(async () => {
wrapper.setProps({
maxGddLastMonth: 0,
isThisMonth: true,
})
await wrapper.setData({
form: {
id: null,
date: 'set',
memo: '',
amount: '',
},
})
})
it('shows no message', () => {
expect(wrapper.find('[data-test="contribtion-message"]').exists()).toBe(false)
})
})
describe('max amount reached for this month, no date selected', () => {
beforeEach(() => {
wrapper.setProps({
maxGddThisMonth: 0,
})
})
it('shows no message', () => {
expect(wrapper.find('[data-test="contribtion-message"]').exists()).toBe(false)
})
})
describe('max amount reached for this month, this month selected', () => {
beforeEach(async () => {
wrapper.setProps({
maxGddThisMonth: 0,
isThisMonth: true,
})
await wrapper.setData({
form: {
id: null,
date: 'set',
memo: '',
amount: '',
},
})
})
it('shows message that no contributions are available for last month', () => {
expect(wrapper.find('[data-test="contribtion-message"]').text()).toBe(
'contribution.noOpenCreation.thisMonth',
)
})
})
describe('max amount reached for this month, last month selected', () => {
beforeEach(async () => {
wrapper.setProps({
maxGddThisMonth: 0,
isThisMonth: false,
})
await wrapper.setData({
form: {
id: null,
date: 'set',
memo: '',
amount: '',
},
})
})
it('shows no message', () => {
expect(wrapper.find('[data-test="contribtion-message"]').exists()).toBe(false)
})
})
wrapper = mount(ContributionForm, {
props: defaultProps,
global: {
stubs: ['BForm', 'BFormInput', 'BRow', 'BCol', 'BButton'],
},
})
describe('default return message', () => {
it('returns an empty string', () => {
expect(wrapper.vm.noOpenCreation).toBe('')
})
await wrapper.vm.$nextTick()
// Simulate changing hours
wrapper.vm.updateAmount(3)
expect(setFieldValueMock).toHaveBeenCalledWith('amount', '60.00')
})
it('emits update-contribution event on submit for existing contribution', async () => {
const existingContribution = {
...defaultProps.modelValue,
id: '123',
}
wrapper = mount(ContributionForm, {
props: {
...defaultProps,
modelValue: existingContribution,
},
global: {
stubs: ['BForm', 'BFormInput', 'BRow', 'BCol', 'BButton'],
},
})
describe('update amount', () => {
beforeEach(() => {
wrapper.findComponent({ name: 'InputHour' }).vm.$emit('updateAmount', 20)
})
await wrapper.vm.$nextTick()
it('updates form amount', () => {
expect(wrapper.vm.form.amount).toBe('400.00')
})
wrapper.vm.submit()
expect(wrapper.emitted('update-contribution')).toBeTruthy()
expect(wrapper.emitted('update-contribution')[0][0]).toEqual(
expect.objectContaining({
id: '123',
}),
)
})
it('emits set-contribution event on submit for new contribution', async () => {
wrapper.vm.submit()
expect(wrapper.emitted('set-contribution')).toBeTruthy()
})
it('resets form on fullFormReset', () => {
const resetFormMock = vi.fn()
vi.mocked(useForm).mockReturnValue({
...vi.mocked(useForm)(),
resetForm: resetFormMock,
})
describe('watch value', () => {
beforeEach(() => {
wrapper.setProps({
value: {
id: 42,
date: 'set',
memo: 'Some Memo',
amount: '400.00',
},
})
})
it('updates form', () => {
expect(wrapper.vm.form).toEqual({
id: 42,
date: 'set',
memo: 'Some Memo',
amount: '400.00',
})
})
wrapper = mount(ContributionForm, {
props: defaultProps,
global: {
stubs: ['BForm', 'BFormInput', 'BRow', 'BCol', 'BButton'],
},
})
describe('set contrubtion', () => {
describe('fill in form data with "id === null"', () => {
const now = new Date().toISOString()
wrapper.vm.fullFormReset()
beforeEach(async () => {
await wrapper.setData({
form: {
id: null,
date: '',
memo: '',
amount: '',
},
})
})
describe('invalid form data', () => {
beforeEach(async () => {
await wrapper.findComponent({ name: 'BFormDatepicker' }).vm.$emit('input', now)
await wrapper.find('#contribution-amount').find('input').setValue('200')
})
describe('memo lenght < 5, others are valid', () => {
beforeEach(async () => {
await wrapper.find('#contribution-memo').find('textarea').setValue('1234')
})
describe('button', () => {
describe('submit', () => {
it('has disabled', () => {
expect(
wrapper.find('button[data-test="button-submit"]').attributes('disabled'),
).toBe('disabled')
})
})
})
})
describe('memo lenght > 255, others are valid', () => {
beforeEach(async () => {
await wrapper
.find('#contribution-memo')
.find('textarea')
.setValue(
'0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789' +
'0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789' +
'01234567890123456789012345678901234567890123456789012345',
)
await wrapper.vm.$nextTick()
})
describe('button', () => {
describe('submit', () => {
it('has disabled', () => {
expect(
wrapper.find('button[data-test="button-submit"]').attributes('disabled'),
).toBe('disabled')
})
})
})
})
})
describe('valid form data', () => {
beforeEach(async () => {
await wrapper.findComponent({ name: 'BFormDatepicker' }).vm.$emit('input', now)
await wrapper
.find('#contribution-memo')
.find('textarea')
.setValue('Mein Beitrag zur Gemeinschaft für diesen Monat ...')
await wrapper.find('#contribution-amount').find('input').setValue('200')
})
describe('button', () => {
describe('submit', () => {
it('has enabled', () => {
expect(
wrapper.find('button[data-test="button-submit"]').attributes('disabled'),
).toBeFalsy()
})
it('has label "contribution.submit"', () => {
expect(wrapper.find('button[data-test="button-submit"]').text()).toContain(
'contribution.submit',
)
})
})
})
describe('on trigger submit', () => {
beforeEach(async () => {
await wrapper.find('form').trigger('submit')
})
it('emits "set-contribution"', () => {
expect(wrapper.emitted('set-contribution')).toEqual(
expect.arrayContaining([
expect.arrayContaining([
{
id: null,
date: now,
memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
amount: '200',
hours: 0,
},
]),
]),
)
})
})
})
})
})
describe('update contrubtion', () => {
describe('fill in form data with set "id"', () => {
const now = new Date().toISOString()
beforeEach(async () => {
await wrapper.setData({
form: {
id: 2,
date: now,
memo: 'Mein kommerzieller Beitrag für diesen Monat ...',
amount: '100',
},
})
})
describe('invalid form data', () => {
beforeEach(async () => {
// skip this precondition as long as the datepicker is disabled in the component
// await wrapper.findComponent({ name: 'BFormDatepicker' }).vm.$emit('input', now)
await wrapper.find('#contribution-amount').find('input').setValue('200')
})
describe('memo lenght < 5, others are valid', () => {
beforeEach(async () => {
await wrapper.find('#contribution-memo').find('textarea').setValue('1234')
})
describe('button', () => {
describe('submit', () => {
it('has disabled', () => {
expect(
wrapper.find('button[data-test="button-submit"]').attributes('disabled'),
).toBe('disabled')
})
})
})
})
describe('memo lenght > 255, others are valid', () => {
beforeEach(async () => {
await wrapper
.find('#contribution-memo')
.find('textarea')
.setValue(
'0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789' +
'0123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789' +
'01234567890123456789012345678901234567890123456789012345',
)
await wrapper.vm.$nextTick()
})
describe('button', () => {
describe('submit', () => {
it('has disabled', () => {
expect(
wrapper.find('button[data-test="button-submit"]').attributes('disabled'),
).toBe('disabled')
})
})
})
})
})
describe('valid form data', () => {
beforeEach(async () => {
await wrapper.findComponent({ name: 'BFormDatepicker' }).vm.$emit('input', now)
await wrapper
.find('#contribution-memo')
.find('textarea')
.setValue('Mein Beitrag zur Gemeinschaft für diesen Monat ...')
await wrapper.find('#contribution-amount').find('input').setValue('200')
})
describe('button', () => {
describe('submit', () => {
it('has enabled', () => {
expect(
wrapper.find('button[data-test="button-submit"]').attributes('disabled'),
).toBeFalsy()
})
it('has label "form.change"', () => {
expect(wrapper.find('button[data-test="button-submit"]').text()).toContain(
'form.change',
)
})
})
})
describe('on trigger submit', () => {
beforeEach(async () => {
await wrapper.find('form').trigger('submit')
})
it('emits "update-contribution"', () => {
expect(wrapper.emitted('update-contribution')).toEqual([
[
{
id: 2,
date: now,
hours: 0,
memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
amount: '200',
},
],
])
})
})
})
})
expect(resetFormMock).toHaveBeenCalledWith({
values: {
id: null,
date: '',
memo: '',
hours: 0,
amount: '',
},
})
})
})

67
frontend/src/components/Contributions/ContributionList.spec.js
View File

@ -1,14 +1,33 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import ContributionList from './ContributionList'
import { createI18n } from 'vue-i18n'
const localVue = global.localVue
const i18n = createI18n({
legacy: false,
locale: 'en',
})
vi.mock('@/components/Contributions/ContributionListItem.vue', () => ({
default: {
name: 'ContributionListItem',
template: '<div></div>',
},
}))
describe('ContributionList', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
const global = {
plugins: [i18n],
mocks: {
$filters: {
GDD: vi.fn((val) => val),
},
},
stubs: {
BPagination: true,
},
}
const propsData = {
@ -21,33 +40,35 @@ describe('ContributionList', () => {
date: '07/06/2022',
memo: 'Ich habe 10 Stunden die Elbwiesen von Müll befreit.',
amount: '200',
status: 'IN_PROGRESS',
},
{
id: 1,
date: '06/22/2022',
memo: 'Ich habe 30 Stunden Frau Müller beim EInkaufen und im Haushalt geholfen.',
amount: '600',
status: 'CONFIRMED',
},
{
id: 2,
date: '05/04/2022',
memo: 'Ich habe 50 Stunden den Nachbarkindern bei ihren Hausaufgaben geholfen und Nachhilfeunterricht gegeben.',
amount: '1000',
status: 'DENIED',
},
],
}
const Wrapper = () => {
const mountWrapper = () => {
return mount(ContributionList, {
localVue,
mocks,
propsData,
props: propsData,
global,
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper = mountWrapper()
})
it('has a DIV .contribution-list', () => {
@ -57,27 +78,27 @@ describe('ContributionList', () => {
describe('pagination', () => {
describe('list count smaller than page size', () => {
it('has no pagination buttons', () => {
expect(wrapper.find('ul.pagination').exists()).toBe(false)
expect(wrapper.find('b-pagination-stub').exists()).toBe(false)
})
})
describe('list count greater than page size', () => {
beforeEach(() => {
wrapper.setProps({ contributionCount: 33 })
beforeEach(async () => {
await wrapper.setProps({ contributionCount: 33 })
})
it('has pagination buttons', () => {
expect(wrapper.find('ul.pagination').exists()).toBe(true)
expect(wrapper.find('b-pagination-stub').exists()).toBe(true)
})
})
describe('switch page', () => {
const scrollToMock = jest.fn()
const scrollToMock = vi.fn()
window.scrollTo = scrollToMock
beforeEach(async () => {
await wrapper.setProps({ contributionCount: 33 })
wrapper.findComponent({ name: 'BPagination' }).vm.$emit('input', 2)
await wrapper.findComponent({ name: 'BPagination' }).vm.$emit('update:modelValue', 2)
})
it('emits update contribution list', () => {
@ -87,14 +108,14 @@ describe('ContributionList', () => {
})
it('scrolls to top', () => {
expect(scrollToMock).toBeCalledWith(0, 0)
expect(scrollToMock).toHaveBeenCalledWith(0, 0)
})
})
})
describe('update contribution', () => {
beforeEach(() => {
wrapper
beforeEach(async () => {
await wrapper
.findComponent({ name: 'ContributionListItem' })
.vm.$emit('update-contribution-form', 'item')
})
@ -105,8 +126,8 @@ describe('ContributionList', () => {
})
describe('delete contribution', () => {
beforeEach(() => {
wrapper
beforeEach(async () => {
await wrapper
.findComponent({ name: 'ContributionListItem' })
.vm.$emit('delete-contribution', { id: 2 })
})
@ -117,8 +138,10 @@ describe('ContributionList', () => {
})
describe('update status', () => {
beforeEach(() => {
wrapper.findComponent({ name: 'ContributionListItem' }).vm.$emit('update-status', { id: 2 })
beforeEach(async () => {
await wrapper
.findComponent({ name: 'ContributionListItem' })
.vm.$emit('update-status', { id: 2 })
})
it('emits update status', () => {

61
frontend/src/components/Contributions/ContributionListItem.spec.js
View File

@ -1,15 +1,34 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import ContributionListItem from './ContributionListItem'
import { createI18n } from 'vue-i18n'
const localVue = global.localVue
const i18n = createI18n({
legacy: false,
locale: 'en',
})
vi.mock('@vue/apollo-composable', () => ({
useQuery: vi.fn(),
useLazyQuery: vi.fn(() => ({
onResult: vi.fn(),
onError: vi.fn(),
load: vi.fn(),
})),
useMutation: vi.fn(() => ({
mutate: vi.fn(),
onDone: vi.fn(),
onError: vi.fn(),
})),
}))
describe('ContributionListItem', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
$apollo: { query: jest.fn().mockResolvedValue() },
$filters: {
GDD: vi.fn((val) => val),
},
}
const propsData = {
@ -23,18 +42,20 @@ describe('ContributionListItem', () => {
amount: '200',
}
const Wrapper = () => {
const mountWrapper = () => {
return mount(ContributionListItem, {
localVue,
mocks,
propsData,
global: {
plugins: [i18n],
mocks,
},
props: propsData,
})
}
describe('mount', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = Wrapper()
vi.clearAllMocks()
wrapper = mountWrapper()
})
it('has a DIV .contribution-list-item', () => {
@ -85,8 +106,6 @@ describe('ContributionListItem', () => {
})
describe('delete contribution', () => {
let spy
describe('edit contribution', () => {
beforeEach(() => {
wrapper.find('div.test-edit-contribution').trigger('click')
@ -108,15 +127,10 @@ describe('ContributionListItem', () => {
describe('confirm deletion', () => {
beforeEach(() => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(true))
vi.spyOn(window, 'confirm').mockImplementation(() => true)
wrapper.find('div.test-delete-contribution').trigger('click')
})
it('opens the modal', () => {
expect(spy).toBeCalledWith('contribution.delete')
})
it('emits delete contribution', () => {
expect(wrapper.emitted('delete-contribution')).toEqual([[{ id: 1 }]])
})
@ -124,9 +138,8 @@ describe('ContributionListItem', () => {
describe('cancel deletion', () => {
beforeEach(async () => {
spy = jest.spyOn(wrapper.vm.$bvModal, 'msgBoxConfirm')
spy.mockImplementation(() => Promise.resolve(false))
await wrapper.findAll('div.pointer').at(2).trigger('click')
vi.spyOn(window, 'confirm').mockImplementation(() => false)
await wrapper.find('div.test-delete-contribution').trigger('click')
})
it('does not emit delete contribution', () => {
@ -140,7 +153,7 @@ describe('ContributionListItem', () => {
})
it('emit update-status', () => {
expect(wrapper.vm.$emit('update-status')).toBeTruthy()
expect(wrapper.emitted('update-status')).toBeTruthy()
})
})
})
@ -151,8 +164,8 @@ describe('ContributionListItem', () => {
.findComponent({ name: 'ContributionMessagesList' })
.vm.$emit('get-list-contribution-messages')
})
it('emits closeAllOpenCollapse', () => {
expect(wrapper.emitted('closeAllOpenCollapse')).toBeTruthy()
it('emits close-all-open-collapse', () => {
expect(wrapper.emitted('close-all-open-collapse')).toBeTruthy()
})
})
})

92
frontend/src/components/Contributions/OpenCreationsAmount.spec.js
View File

@ -1,39 +1,49 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import OpenCreationsAmount from './OpenCreationsAmount'
import { BCol, BRow } from 'bootstrap-vue-next'
const localVue = global.localVue
const mockT = vi.fn((key) => key)
const mockD = vi.fn((date, formatter = null) => ({ date, formatter }))
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: mockT,
d: mockD,
}),
}))
describe('OpenCreationsAmount', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$d: jest.fn((date, formatter = null) => {
return { date, formatter }
}),
}
const thisMonth = new Date()
const lastMonth = new Date(thisMonth.getFullYear(), thisMonth.getMonth() - 1)
const propsData = {
minimalDate: lastMonth,
maxGddLastMonth: 400,
maxGddThisMonth: 600,
}
const Wrapper = () => {
const createWrapper = (props = {}) => {
return mount(OpenCreationsAmount, {
localVue,
mocks,
propsData,
global: {
components: {
BRow,
BCol,
},
mocks: {
$t: mockT,
$d: mockD,
},
},
props: {
minimalDate: lastMonth,
maxGddLastMonth: 400,
maxGddThisMonth: 600,
...props,
},
})
}
describe('mount', () => {
beforeEach(() => {
jest.clearAllMocks()
wrapper = Wrapper()
vi.clearAllMocks()
wrapper = createWrapper()
})
it('renders the component', () => {
@ -41,62 +51,72 @@ describe('OpenCreationsAmount', () => {
})
it('renders two dates', () => {
expect(mocks.$d).toBeCalledTimes(2)
expect(mockD).toHaveBeenCalledTimes(2)
})
it('renders the date of last month', () => {
expect(mocks.$d).toBeCalledWith(lastMonth, 'monthAndYear')
expect(mockD).toHaveBeenCalledWith(lastMonth, 'monthAndYear')
})
it('renders the date of this month', () => {
expect(mocks.$d).toBeCalledWith(expect.any(Date), 'monthAndYear')
expect(mockD).toHaveBeenCalledWith(expect.any(Date), 'monthAndYear')
})
describe('open creations for both months', () => {
it('renders submitted contributions text', () => {
expect(mocks.$t).toBeCalledWith('contribution.submit')
const statusElements = wrapper.findAll('.fw-bold .d-none.d-md-inline:not(.text-gold)')
expect(statusElements.at(0).text()).toBe('contribution.submit')
expect(statusElements.at(1).text()).toBe('contribution.submit')
})
it('does not render max reached text', () => {
expect(mocks.$t).not.toBeCalledWith('maxReached')
expect(wrapper.text()).not.toContain('maxReached')
})
it('renders submitted hours last month', () => {
expect(wrapper.findAll('div.row').at(1).findAll('div.col').at(2).text()).toBe('30 h')
const submittedHours = wrapper.findAll('.fw-bold .text-gold').at(0)
expect(submittedHours.text()).toBe('30 h')
})
it('renders available hours last month', () => {
expect(wrapper.findAll('div.row').at(1).findAll('div.col').at(3).text()).toBe('20 h')
const availableHours = wrapper.findAll('.fw-bold .text-green').at(0)
expect(availableHours.text()).toBe('20 h')
})
it('renders submitted hours this month', () => {
expect(wrapper.findAll('div.row').at(2).findAll('div.col').at(2).text()).toBe('20 h')
const submittedHours = wrapper.findAll('.fw-bold .text-gold').at(1)
expect(submittedHours.text()).toBe('20 h')
})
it('renders available hours this month', () => {
expect(wrapper.findAll('div.row').at(2).findAll('div.col').at(3).text()).toBe('30 h')
const availableHours = wrapper.findAll('.fw-bold .text-green').at(1)
expect(availableHours.text()).toBe('30 h')
})
})
describe('no creations available for last month', () => {
beforeEach(() => {
wrapper.setProps({ maxGddLastMonth: 0 })
wrapper = createWrapper({ maxGddLastMonth: 0 })
})
it('renders submitted contributions text', () => {
expect(mocks.$t).toBeCalledWith('contribution.submit')
it('renders submitted contributions text for this month', () => {
const statusElements = wrapper.findAll('.fw-bold .d-none.d-md-inline:not(.text-gold)')
expect(statusElements.at(1).text()).toBe('contribution.submit')
})
it('renders max reached text', () => {
expect(mocks.$t).toBeCalledWith('maxReached')
it('renders max reached text for last month', () => {
const statusElements = wrapper.findAll('.fw-bold .d-none.d-md-inline')
expect(statusElements.at(0).text()).toBe('maxReached')
})
it('renders submitted hours last month', () => {
expect(wrapper.findAll('div.row').at(1).findAll('div.col').at(2).text()).toBe('50 h')
const submittedHours = wrapper.findAll('.fw-bold .text-gold').at(0)
expect(submittedHours.text()).toBe('50 h')
})
it('renders available hours last month', () => {
expect(wrapper.findAll('div.row').at(1).findAll('div.col').at(3).text()).toBe('0 h')
const availableHours = wrapper.findAll('.fw-bold .text-green').at(0)
expect(availableHours.text()).toBe('0 h')
})
})
})

239
frontend/src/components/DecayInformations/CollapseLinksList.spec.js
View File

@ -1,134 +1,171 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import CollapseLinksList from './CollapseLinksList'
import { createStore } from 'vuex'
import { createI18n } from 'vue-i18n'
import { BButton } from 'bootstrap-vue-next'
const localVue = global.localVue
// Mock vue-i18n
const mockT = vi.fn((key, value) => `${key} ${value}`)
const mocks = {
$i18n: {
locale: 'en',
},
$tc: jest.fn((tc) => tc),
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
$store: {
state: {
firstName: 'Bibi',
lastName: 'Bloxberg',
vi.mock('vue-i18n', () => ({
createI18n: vi.fn(() => ({
global: {
t: mockT,
d: vi.fn((d) => d),
},
},
}
})),
}))
const propsData = {
transactionLinks: [
{
amount: '5',
code: 'ce28664b5308c17f931c0367',
link: 'http://localhost/redeem/ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 87,
memo: 'Eene meene Siegerpreis, vor mir steht ein Schokoeis. Hex-hex!',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
{
amount: '6',
code: 'ce28664b5308c17f931c0367',
link: 'http://localhost/redeem/ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 86,
memo: 'Eene meene buntes Laub, auf dem Schrank da liegt kein Staub.',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
],
transactionLinkCount: 3,
value: 1,
pending: false,
pageSize: 5,
}
// Mock Apollo
vi.mock('@vue/apollo-composable', () => ({
provideApolloClient: vi.fn(),
}))
// Mock toast
const mockToastError = vi.fn()
vi.mock('@/composables/useToast', () => ({
useAppToast: vi.fn(() => ({
toastError: mockToastError,
})),
}))
describe('CollapseLinksList', () => {
let wrapper
let store
let i18n
const Wrapper = () => {
return mount(CollapseLinksList, { localVue, mocks, propsData })
const createVuexStore = () => {
return createStore({
state: {
firstName: 'Bibi',
lastName: 'Bloxberg',
},
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
const createWrapper = (props = {}) => {
store = createVuexStore()
i18n = createI18n()
return mount(CollapseLinksList, {
global: {
plugins: [store],
components: {
BButton,
},
mocks: {
$t: mockT,
$d: vi.fn((d) => d),
},
stubs: {
TransactionLink: true,
IBiThreeDots: true,
},
},
props: {
transactionLinks: [
{
amount: '5',
code: 'ce28664b5308c17f931c0367',
link: 'http://localhost/redeem/ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 87,
memo: 'Eene meene Siegerpreis, vor mir steht ein Schokoeis. Hex-hex!',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
{
amount: '6',
code: 'ce28664b5308c17f931c0367',
link: 'http://localhost/redeem/ce28664b5308c17f931c0367',
createdAt: '2022-03-16T14:22:40.000Z',
holdAvailableAmount: '5.13109484759482747111',
id: 86,
memo: 'Eene meene buntes Laub, auf dem Schrank da liegt kein Staub.',
redeemedAt: null,
validUntil: '2022-03-30T14:22:40.000Z',
},
],
transactionLinkCount: 3,
value: 1,
pending: false,
pageSize: 5,
...props,
},
})
}
beforeEach(() => {
vi.clearAllMocks()
wrapper = createWrapper()
})
it('renders the component div.collapse-links-list', () => {
expect(wrapper.find('div.collapse-links-list').exists()).toBeTruthy()
})
describe('load more links', () => {
beforeEach(async () => {
await wrapper.find('.test-button-load-more').trigger('click')
})
it('renders the component div.collapse-links-list', () => {
expect(wrapper.find('div.collapse-links-list').exists()).toBeTruthy()
it('emits input', () => {
expect(wrapper.emitted('input')).toEqual([[2]])
})
})
describe('reset transaction link list', () => {
beforeEach(async () => {
await wrapper
.findComponent({ name: 'TransactionLink' })
.vm.$emit('reset-transaction-link-list')
})
describe('load more links', () => {
it('emits input ', () => {
expect(wrapper.emitted('input')).toEqual([[0]])
})
})
describe('button text', () => {
describe('one more link to load', () => {
beforeEach(async () => {
await wrapper.find('button.test-button-load-more').trigger('click')
await wrapper.setProps({
transactionLinkCount: 3,
transactionLinks: [{ id: 1 }, { id: 2 }],
})
})
it('emits input', () => {
expect(wrapper.emitted('input')).toEqual([[2]])
it('renders text in singular', () => {
expect(mockT).toHaveBeenCalledWith('link-load', 0)
})
})
describe('reset transaction link list', () => {
describe('less than pageSize links to load', () => {
beforeEach(async () => {
await wrapper
.findComponent({ name: 'TransactionLink' })
.vm.$emit('reset-transaction-link-list')
await wrapper.setProps({
transactionLinkCount: 6,
transactionLinks: [{ id: 1 }, { id: 2 }],
})
})
it('emits input ', () => {
expect(wrapper.emitted('input')).toEqual([[0]])
it('renders text in plural and shows the correct count of links', () => {
expect(mockT).toHaveBeenCalledWith('link-load', 0)
})
})
describe('button text', () => {
describe('one more link to load', () => {
beforeEach(async () => {
await wrapper.setProps({
value: 1,
pending: false,
pageSize: 5,
})
})
it('renders text in singular', () => {
expect(mocks.$tc).toBeCalledWith('link-load', 0)
describe('more than pageSize links to load', () => {
beforeEach(async () => {
await wrapper.setProps({
transactionLinkCount: 16,
transactionLinks: [{ id: 1 }, { id: 2 }],
pageSize: 5,
})
})
describe('less than pageSize links to load', () => {
beforeEach(async () => {
await wrapper.setProps({
value: 1,
pending: false,
pageSize: 5,
transactionLinkCount: 6,
})
})
it('renders text in plural and shows the correct count of links', () => {
expect(mocks.$tc).toBeCalledWith('link-load', 1, { n: 4 })
})
})
describe('more than pageSize links to load', () => {
beforeEach(async () => {
await wrapper.setProps({
value: 1,
pending: false,
pageSize: 5,
transactionLinkCount: 16,
})
})
it('renders text in plural with page size links to load', () => {
expect(mocks.$tc).toBeCalledWith('link-load', 2, { n: 5 })
})
it('renders text in plural with page size links to load', () => {
expect(mockT).toHaveBeenCalledWith('link-load', 2, { n: 5 })
})
})
})

17
frontend/src/components/GddSend.spec.js
View File

@ -1,21 +1,24 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import GddSend from './GddSend'
const localVue = global.localVue
describe('GddSend', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$t: vi.fn((t) => t),
$i18n: {
locale: jest.fn(() => 'en'),
locale: vi.fn(() => 'en'),
},
$n: jest.fn((n) => String(n)),
$n: vi.fn((n) => String(n)),
}
const Wrapper = () => {
return mount(GddSend, { localVue, mocks })
return mount(GddSend, {
global: {
mocks,
},
})
}
describe('mount', () => {
@ -24,7 +27,7 @@ describe('GddSend', () => {
})
it('renders the component', () => {
expect(wrapper.find('div.gdd-send').exists()).toBeTruthy()
expect(wrapper.find('div.gdd-send').exists()).toBe(true)
})
})
})

172
frontend/src/components/GddSend/TransactionConfirmationLink.spec.js
View File

@ -1,84 +1,132 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import TransactionConfirmationLink from './TransactionConfirmationLink'
import { BButton, BCol, BRow } from 'bootstrap-vue-next'
const localVue = global.localVue
// Mock the useAppToast composable
const mockToastError = vi.fn()
vi.mock('@/composables/useToast', () => ({
useAppToast: vi.fn(() => ({
toastError: mockToastError,
})),
}))
describe('GddSend confirm', () => {
// Mock the i18n plugin
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
locale: 'en',
}),
}))
// Mock the Vuex store
vi.mock('vuex', () => ({
useStore: vi.fn(() => ({
// Add any necessary store mock implementations here
})),
}))
describe('TransactionConfirmationLink', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$i18n: {
locale: jest.fn(() => 'en'),
},
const createWrapper = (props = {}) => {
return mount(TransactionConfirmationLink, {
global: {
components: {
BRow,
BCol,
BButton,
},
stubs: {
'variant-icon': true,
},
mocks: {
$t: (msg) => msg,
$filters: {
GDD: vi.fn((value) => `${value} GDD`),
},
},
},
props: {
balance: 1234,
email: 'user@example.org',
amount: 12.34,
memo: 'Pessimisten stehen im Regen, Optimisten duschen unter den Wolken.',
loading: false,
...props,
},
})
}
const propsData = {
balance: 1234,
email: 'user@example.org',
amount: 12.34,
memo: 'Pessimisten stehen im Regen, Optimisten duschen unter den Wolken.',
loading: false,
selected: 'send',
}
beforeEach(() => {
wrapper = createWrapper()
})
const Wrapper = () => {
return mount(TransactionConfirmationLink, { localVue, mocks, propsData })
}
it('renders the component div.transaction-confirm-link', () => {
expect(wrapper.find('div.transaction-confirm-link').exists()).toBe(true)
})
describe('mount', () => {
describe('totalBalance computed property', () => {
it('disables the send button when totalBalance is negative', async () => {
await wrapper.setProps({ balance: 10 })
expect(wrapper.vm.disabled).toBe(true)
expect(wrapper.find('.send-button').attributes('disabled')).toBe('')
})
})
describe('disabled computed property', () => {
it('returns true when totalBalance is negative', async () => {
await wrapper.setProps({ balance: 10 })
expect(wrapper.vm.disabled).toBe(true)
})
it('returns true when loading is true', async () => {
await wrapper.setProps({ loading: true })
expect(wrapper.vm.disabled).toBe(true)
})
it('returns false when totalBalance is positive and not loading', () => {
expect(wrapper.vm.disabled).toBe(false)
})
})
describe('send now button', () => {
beforeEach(() => {
wrapper = Wrapper()
vi.clearAllMocks()
})
it('renders the component div.transaction-confirm-link', () => {
expect(wrapper.find('div.transaction-confirm-link').exists()).toBeTruthy()
it('emits send-transaction event on click', async () => {
await wrapper.find('.send-button').trigger('click')
expect(wrapper.emitted('send-transaction')).toHaveLength(1)
})
describe('has selected "link"', () => {
beforeEach(async () => {
await wrapper.setProps({
selected: 'link',
})
})
it('does not emit send-transaction event when disabled', async () => {
await wrapper.setProps({ loading: true })
await wrapper.find('.send-button').trigger('click')
expect(wrapper.emitted('send-transaction')).toBeUndefined()
})
})
describe('back button', () => {
it('emits on-back event when clicked', async () => {
await wrapper.find('button:not(.send-button)').trigger('click')
expect(wrapper.emitted('on-back')).toHaveLength(1)
})
})
describe('displays correct information', () => {
it('shows the correct balance', () => {
expect(wrapper.text()).toContain('1234 GDD')
})
describe('has totalBalance under 0', () => {
beforeEach(async () => {
await wrapper.setProps({
balance: 0,
})
})
it('has send button disabled', () => {
expect(wrapper.find('.send-button').attributes('disabled')).toBe('disabled')
})
it('shows the correct amount', () => {
expect(wrapper.text()).toContain('12.34 GDD')
})
describe('send now button', () => {
beforeEach(() => {
jest.clearAllMocks()
})
describe('single click', () => {
beforeEach(async () => {
await wrapper.find('button.btn.btn-gradido').trigger('click')
})
it('emits send transaction one time', () => {
expect(wrapper.emitted('send-transaction')).toHaveLength(1)
})
})
describe('double click', () => {
beforeEach(async () => {
await wrapper.find('button.btn.btn-gradido').trigger('click')
})
it('emits send transaction one time', () => {
expect(wrapper.emitted('send-transaction')).toHaveLength(1)
})
})
it('shows the correct memo', () => {
expect(wrapper.text()).toContain(
'Pessimisten stehen im Regen, Optimisten duschen unter den Wolken.',
)
})
})
})

163
frontend/src/components/GddSend/TransactionConfirmationSend.spec.js
View File

@ -1,73 +1,138 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import TransactionConfirmationSend from './TransactionConfirmationSend'
import { BButton, BCol, BRow } from 'bootstrap-vue-next'
const localVue = global.localVue
// Mock the useAppToast composable
const mockToastError = vi.fn()
vi.mock('@/composables/useToast', () => ({
useAppToast: vi.fn(() => ({
toastError: mockToastError,
})),
}))
// Mock the i18n plugin
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
locale: 'en',
}),
}))
// Mock the Vuex store
vi.mock('vuex', () => ({
useStore: vi.fn(() => ({
// Add any necessary store mock implementations here
})),
}))
// Mock the Apollo client
vi.mock('@vue/apollo-composable', () => ({
useQuery: vi.fn(),
useMutation: vi.fn(),
}))
describe('GddSend confirm', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$i18n: {
locale: jest.fn(() => 'en'),
},
const createWrapper = (props = {}) => {
return mount(TransactionConfirmationSend, {
global: {
components: {
BRow,
BCol,
BButton,
},
stubs: {
IBiDropletHalf: true,
},
mocks: {
$t: (msg) => msg,
$filters: {
GDD: vi.fn((value) => `${value} GDD`),
},
},
},
props: {
balance: 1234,
identifier: 'user@example.org',
amount: 12.34,
memo: 'Pessimisten stehen im Regen, Optimisten duschen unter den Wolken.',
userName: '',
targetCommunity: { uuid: '', name: 'Test Community' },
...props,
},
})
}
const propsData = {
balance: 1234,
email: 'user@example.org',
amount: 12.34,
memo: 'Pessimisten stehen im Regen, Optimisten duschen unter den Wolken.',
loading: false,
selected: 'send',
}
beforeEach(() => {
wrapper = createWrapper()
})
const Wrapper = () => {
return mount(TransactionConfirmationSend, { localVue, mocks, propsData })
}
it('renders the component div.transaction-confirm-send', () => {
expect(wrapper.find('div.transaction-confirm-send').exists()).toBe(true)
})
describe('mount', () => {
describe('send now button', () => {
beforeEach(() => {
wrapper = Wrapper()
vi.clearAllMocks()
})
it('renders the component div.transaction-confirm-send', () => {
expect(wrapper.find('div.transaction-confirm-send').exists()).toBeTruthy()
it('emits send transaction one time on single click', async () => {
await wrapper.find('button.btn-gradido').trigger('click')
expect(wrapper.emitted('send-transaction')).toHaveLength(1)
})
describe('has selected "send"', () => {
beforeEach(async () => {
await wrapper.setProps({
selected: 'send',
})
})
it('emits send transaction one time on double click', async () => {
await wrapper.find('button.btn-gradido').trigger('click')
await wrapper.find('button.btn-gradido').trigger('click')
expect(wrapper.emitted('send-transaction')).toHaveLength(1)
})
describe('send now button', () => {
beforeEach(() => {
jest.clearAllMocks()
})
it('disables the button after click', async () => {
const button = wrapper.find('button.btn-gradido')
await button.trigger('click')
expect(wrapper.vm.disabled).toBe(true)
})
})
describe('single click', () => {
beforeEach(async () => {
await wrapper.find('button.btn.btn-gradido').trigger('click')
})
describe('back button', () => {
it('emits on-back event when clicked', async () => {
await wrapper.find('button:not([variant="gradido"])').trigger('click')
expect(wrapper.emitted('on-back')).toHaveLength(1)
})
})
it('emits send transaction one time', () => {
expect(wrapper.emitted('send-transaction')).toHaveLength(1)
})
})
describe('displays correct information', () => {
it('shows the correct balance', () => {
expect(wrapper.text()).toContain('1234 GDD')
})
describe('double click', () => {
beforeEach(async () => {
await wrapper.find('button.btn.btn-gradido').trigger('click')
await wrapper.find('button.btn.btn-gradido').trigger('click')
})
it('shows the correct amount', () => {
expect(wrapper.text()).toContain('12.34 GDD')
})
it('emits send transaction one time', () => {
expect(wrapper.emitted('send-transaction')).toHaveLength(1)
})
})
})
it('shows the correct memo', () => {
expect(wrapper.text()).toContain(
'Pessimisten stehen im Regen, Optimisten duschen unter den Wolken.',
)
})
it('shows the correct new balance', () => {
expect(wrapper.text()).toContain('1221.66 GDD')
})
it('shows the identifier when userName is not provided', () => {
expect(wrapper.text()).toContain('user@example.org')
})
it('shows the userName when provided', async () => {
await wrapper.setProps({ userName: 'John Doe' })
expect(wrapper.text()).toContain('John Doe')
})
it('shows the correct target community name', () => {
expect(wrapper.text()).toContain('Test Community')
})
})
})

680
frontend/src/components/GddSend/TransactionForm.spec.js
View File

@ -1,433 +1,315 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
import TransactionForm from './TransactionForm'
import flushPromises from 'flush-promises'
import { nextTick, ref } from 'vue'
import { SEND_TYPES } from '@/utils/sendTypes'
import { createMockClient } from 'mock-apollo-client'
import VueApollo from 'vue-apollo'
import { user, selectCommunities as selectCommunitiesQuery } from '@/graphql/queries'
import { BCard, BForm, BFormRadioGroup, BRow, BCol, BFormRadio, BButton } from 'bootstrap-vue-next'
import { useForm } from 'vee-validate'
import { useRoute } from 'vue-router'
const mockClient = createMockClient()
const apolloProvider = new VueApollo({
defaultClient: mockClient,
vi.mock('vue-router', () => ({
useRoute: vi.fn(() => ({
params: {},
query: {},
})),
useRouter: vi.fn(() => ({
replace: vi.fn(),
})),
}))
const mockUseQuery = vi.fn()
vi.mock('@vue/apollo-composable', () => ({
useQuery: (...args) => {
mockUseQuery(...args)
return {
result: ref(null),
loading: ref(false),
error: ref(null),
}
},
}))
vi.mock('@/composables/useToast', () => ({
useAppToast: vi.fn(() => ({
toastError: vi.fn(),
})),
}))
vi.mock('vee-validate', () => {
const actualUseForm = vi.fn().mockReturnValue({
handleSubmit: vi.fn((callback) => {
return () =>
callback({
identifier: 'test@example.com',
amount: '100,00',
memo: 'Test memo',
})
}),
resetForm: vi.fn(),
defineField: vi.fn(() => [vi.fn(), {}]),
})
return { useForm: actualUseForm }
})
const localVue = global.localVue
localVue.use(VueApollo)
describe('TransactionForm', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$i18n: {
locale: jest.fn(() => 'en'),
},
$n: jest.fn((n) => String(n)),
$store: {
state: {
email: 'user@example.org',
},
},
$route: {
params: {},
query: {},
},
$router: {
replace: jest.fn(),
},
}
const mockT = vi.fn((key) => key)
const mockN = vi.fn((n) => String(n))
const propsData = {
balance: 0.0,
}
const Wrapper = () => {
const createWrapper = (props = {}) => {
return mount(TransactionForm, {
localVue,
mocks,
propsData,
apolloProvider,
global: {
mocks: {
$t: mockT,
$n: mockN,
},
components: {
BCard,
BForm,
BFormRadioGroup,
BRow,
BCol,
BFormRadio,
BButton,
},
stubs: {
'community-switch': true,
'input-identifier': true,
'input-amount': true,
'input-textarea': true,
},
},
props: {
balance: 0.0,
...props,
},
})
}
const userMock = jest.fn()
beforeEach(() => {
wrapper = createWrapper()
})
mockClient.setRequestHandler(
user,
userMock.mockRejectedValueOnce({ message: 'Query user name fails!' }).mockResolvedValue({
data: {
user: {
firstName: 'Bibi',
lastName: 'Bloxberg',
},
community: {
name: 'Gradido Entwicklung',
},
},
}),
)
afterEach(() => {
vi.clearAllMocks()
})
mockClient.setRequestHandler(
selectCommunitiesQuery,
jest.fn().mockResolvedValue({
data: {
communities: [
{
uuid: '8f4c146a-79b5-413f-89ed-53f624ec49b2',
name: 'Gradido Entwicklung',
description: 'Gradido-Community einer lokalen Entwicklungsumgebung.',
foreign: false,
},
{
uuid: 'ashasas',
name: 'Hunde-Community',
description: 'Hier geht es um Hunde',
foreign: true,
},
],
},
}),
)
it('renders the component', () => {
expect(wrapper.find('div.transaction-form').exists()).toBe(true)
})
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
describe('with balance <= 0.00 GDD the form is disabled', () => {
it('has a disabled input field of type text', () => {
expect(wrapper.find('input-identifier-stub').attributes('disabled')).toBe('true')
})
it('renders the component', () => {
expect(wrapper.find('div.transaction-form').exists()).toBe(true)
it('has a disabled input field for amount', () => {
expect(wrapper.find('input-amount-stub').attributes('disabled')).toBe('true')
})
describe('with balance <= 0.00 GDD the form is disabled', () => {
it('has a disabled input field of type text', () => {
expect(
wrapper.find('div[data-test="input-identifier"]').find('input').attributes('disabled'),
).toBe('disabled')
})
it('has a disabled input field for amount', () => {
expect(
wrapper.find('div[data-test="input-amount"]').find('input').attributes('disabled'),
).toBe('disabled')
})
it('has a disabled textarea field ', () => {
expect(
wrapper.find('div[data-test="input-textarea').find('textarea').attributes('disabled'),
).toBe('disabled')
})
it('has a message indicating that there are no GDDs to send ', () => {
expect(wrapper.find('form').find('.text-danger').text()).toBe('form.no_gdd_available')
})
it('has no reset button and no submit button ', () => {
expect(wrapper.find('.test-buttons').exists()).toBe(false)
})
it('has a disabled textarea field', () => {
expect(wrapper.find('input-textarea-stub').attributes('disabled')).toBe('true')
})
describe('with balance greater 0.00 (100.00) GDD the form is fully enabled', () => {
beforeEach(() => {
wrapper.setProps({ balance: 100.0 })
})
it('has no warning message ', () => {
expect(wrapper.find('form').find('.text-danger').exists()).toBe(false)
})
describe('send GDD', () => {
beforeEach(async () => {
await wrapper.findAll('input[type="radio"]').at(0).setChecked()
})
it('has SEND_TYPES = send', () => {
expect(wrapper.vm.radioSelected).toBe(SEND_TYPES.send)
})
describe('identifier field', () => {
it('has an input field of type text', () => {
expect(
wrapper.find('div[data-test="input-identifier"]').find('input').attributes('type'),
).toBe('text')
})
it('has a label form.recipient', () => {
expect(wrapper.find('div[data-test="input-identifier"]').find('label').text()).toBe(
'form.recipient',
)
})
it('has a placeholder for identifier', () => {
expect(
wrapper
.find('div[data-test="input-identifier"]')
.find('input')
.attributes('placeholder'),
).toBe('form.identifier')
})
it('flushes an error message when no valid identifier is given', async () => {
await wrapper.find('div[data-test="input-identifier"]').find('input').setValue('a')
await flushPromises()
expect(
wrapper.find('div[data-test="input-identifier"]').find('.invalid-feedback').text(),
).toBe('form.validation.valid-identifier')
})
// TODO:SKIPPED there is no check that the email being sent to is the same as the user's email.
it.skip('flushes an error message when email is the email of logged in user', async () => {
await wrapper
.find('div[data-test="input-identifier"]')
.find('input')
.setValue('user@example.org')
await flushPromises()
expect(
wrapper.find('div[data-test="input-identifier"]').find('.invalid-feedback').text(),
).toBe('form.validation.is-not')
})
it('trims the identifier after blur', async () => {
await wrapper
.find('div[data-test="input-identifier"]')
.find('input')
.setValue(' valid@email.com ')
await wrapper.find('div[data-test="input-identifier"]').find('input').trigger('blur')
await flushPromises()
expect(wrapper.vm.form.identifier).toBe('valid@email.com')
})
})
describe('amount field', () => {
it('has an input field of type text', () => {
expect(
wrapper.find('div[data-test="input-amount"]').find('input').attributes('type'),
).toBe('text')
})
it('has a label form.amount', () => {
expect(wrapper.find('div[data-test="input-amount"]').find('label').text()).toBe(
'form.amount',
)
})
it('has a placeholder "0.01"', () => {
expect(
wrapper.find('div[data-test="input-amount"]').find('input').attributes('placeholder'),
).toBe('0.01')
})
it.skip('does not update form amount when invalid', async () => {
await wrapper.find('div[data-test="input-amount"]').find('input').setValue('invalid')
await wrapper.find('div[data-test="input-amount"]').find('input').trigger('blur')
await flushPromises()
expect(wrapper.vm.form.amount).toBe(0)
})
it('flushes an error message when no valid amount is given', async () => {
await wrapper.find('div[data-test="input-amount"]').find('input').setValue('a')
await flushPromises()
expect(
wrapper.find('div[data-test="input-amount"]').find('.invalid-feedback').text(),
).toBe('form.validation.gddSendAmount')
})
it('flushes an error message when amount is too high', async () => {
await wrapper.find('div[data-test="input-amount"]').find('input').setValue('123.34')
await flushPromises()
expect(
wrapper.find('div[data-test="input-amount"]').find('.invalid-feedback').text(),
).toBe('form.validation.gddSendAmount')
})
it('flushes no errors when amount is valid', async () => {
await wrapper.find('div[data-test="input-amount"]').find('input').setValue('87.34')
await flushPromises()
expect(
wrapper
.find('div[data-test="input-amount"]')
.find('.invalid-feedback')
.attributes('aria-live'),
).toBe('off')
})
})
describe('message text box', () => {
it('has an textarea field', () => {
expect(wrapper.find('div[data-test="input-textarea').find('textarea').exists()).toBe(
true,
)
})
it('has a label form.message', () => {
expect(wrapper.find('div[data-test="input-textarea').find('label').text()).toBe(
'form.message',
)
})
it('flushes an error message when memo is less than 5 characters', async () => {
await wrapper.find('div[data-test="input-textarea').find('textarea').setValue('a')
await flushPromises()
expect(
wrapper.find('div[data-test="input-textarea').find('.invalid-feedback').text(),
).toBe('validations.messages.min')
})
it('flushes an error message when memo is more than 255 characters', async () => {
await wrapper.find('div[data-test="input-textarea').find('textarea').setValue(`
Es ist ein König in Thule, der trinkt
Champagner, es geht ihm nichts drüber;
Und wenn er seinen Champagner trinkt,
Dann gehen die Augen ihm über.
Die Ritter sitzen um ihn her,
Die ganze Historische Schule;
Ihm aber wird die Zunge schwer,
Es lallt der König von Thule:
„Als Alexander, der Griechenheld,
Mit seinem kleinen Haufen
Erobert hatte die ganze Welt,
Da gab er sich ans Saufen.
Ihn hatten so durstig gemacht der Krieg
Und die Schlachten, die er geschlagen;
Er soff sich zu Tode nach dem Sieg,
Er konnte nicht viel vertragen.
Ich aber bin ein stärkerer Mann
Und habe mich klüger besonnen:
Wie jener endete, fang ich an,
Ich hab mit dem Trinken begonnen.
Im Rausche wird der Heldenzug
Mir später weit besser gelingen;
Dann werde ich, taumelnd von Krug zu Krug,
Die ganze Welt bezwingen.“`)
await flushPromises()
expect(
wrapper.find('div[data-test="input-textarea').find('.invalid-feedback').text(),
).toBe('validations.messages.max')
})
it('flushes no error message when memo is valid', async () => {
await wrapper
.find('div[data-test="input-textarea')
.find('textarea')
.setValue('Long enough')
await flushPromises()
expect(
wrapper
.find('div[data-test="input-amount"]')
.find('.invalid-feedback')
.attributes('aria-live'),
).toBe('off')
})
})
describe('cancel button', () => {
it('has a cancel button', () => {
expect(wrapper.find('button[type="reset"]').exists()).toBe(true)
})
it('has the text "form.reset"', () => {
expect(wrapper.find('button[type="reset"]').text()).toBe('form.reset')
})
it('clears all fields on click', async () => {
await wrapper
.find('div[data-test="input-identifier"]')
.find('input')
.setValue('someone@watches.tv')
await wrapper.find('div[data-test="input-amount"]').find('input').setValue('87.23')
await wrapper
.find('div[data-test="input-textarea')
.find('textarea')
.setValue('Long enough')
await flushPromises()
expect(wrapper.vm.form.identifier).toBe('someone@watches.tv')
expect(wrapper.vm.form.amount).toBe('87.23')
expect(wrapper.vm.form.memo).toBe('Long enough')
await wrapper.find('button[type="reset"]').trigger('click')
await flushPromises()
expect(wrapper.vm.form.identifier).toBe('')
expect(wrapper.vm.form.amount).toBe('')
expect(wrapper.vm.form.memo).toBe('')
})
})
describe('submit', () => {
beforeEach(async () => {
await wrapper
.find('div[data-test="input-identifier"]')
.find('input')
.setValue('someone@watches.tv')
await wrapper.find('div[data-test="input-amount"]').find('input').setValue('87.23')
await wrapper
.find('div[data-test="input-textarea')
.find('textarea')
.setValue('Long enough')
await wrapper.find('form').trigger('submit')
await flushPromises()
})
it('emits set-transaction', async () => {
expect(wrapper.emitted('set-transaction')).toBeTruthy()
expect(wrapper.emitted('set-transaction')).toEqual([
[
{
identifier: 'someone@watches.tv',
amount: 87.23,
memo: 'Long enough',
selected: 'send',
userName: '',
targetCommunity: {
description: 'Gradido-Community einer lokalen Entwicklungsumgebung.',
foreign: false,
name: 'Gradido Entwicklung',
uuid: '8f4c146a-79b5-413f-89ed-53f624ec49b2',
},
},
],
])
})
})
})
describe('create transaction link', () => {
beforeEach(async () => {
await wrapper.findAll('input[type="radio"]').at(1).setChecked()
})
it('has SEND_TYPES = link', () => {
expect(wrapper.vm.radioSelected).toBe(SEND_TYPES.link)
})
it('has no input field of id input-group-1', () => {
expect(wrapper.find('#input-group-1').exists()).toBe(false)
})
})
it('has a message indicating that there are no GDDs to send', () => {
expect(wrapper.find('.text-danger').text()).toBe('form.no_gdd_available')
})
describe('with gradido ID', () => {
it('has no reset button and no submit button', () => {
expect(wrapper.find('.test-buttons').exists()).toBe(false)
})
})
describe('with balance greater 0.00 (100.00) GDD the form is fully enabled', () => {
beforeEach(async () => {
wrapper = createWrapper({ balance: 100.0 })
await nextTick()
})
it('has no warning message', () => {
expect(wrapper.find('.text-danger').exists()).toBe(false)
})
describe('send GDD', () => {
beforeEach(async () => {
jest.clearAllMocks()
mocks.$route.params.userIdentifier = 'gradido-ID'
mocks.$route.params.communityIdentifier = 'community-ID'
wrapper = Wrapper()
await wrapper.vm.$nextTick()
await wrapper.findComponent(BFormRadioGroup).setValue(SEND_TYPES.send)
})
describe('query for username with success', () => {
it('has no identifier input field', () => {
expect(wrapper.find('div[data-test="input-identifier"]').exists()).toBe(false)
it('has SEND_TYPES = send', () => {
expect(wrapper.vm.radioSelected).toBe(SEND_TYPES.send)
})
describe('identifier field', () => {
it('has an input field of type text', () => {
expect(wrapper.find('input-identifier-stub').exists()).toBe(true)
})
it('queries the username', () => {
expect(userMock).toBeCalledWith({
identifier: 'gradido-ID',
communityIdentifier: 'community-ID',
})
it('has a label form.recipient', () => {
expect(wrapper.find('input-identifier-stub').attributes('label')).toBe('form.recipient')
})
it('has a placeholder for identifier', () => {
expect(wrapper.find('input-identifier-stub').attributes('placeholder')).toBe(
'form.identifier',
)
})
})
describe('amount field', () => {
it('has an input field of type text', () => {
expect(wrapper.find('input-amount-stub').exists()).toBe(true)
})
it('has a label form.amount', () => {
expect(wrapper.find('input-amount-stub').attributes('label')).toBe('form.amount')
})
it('has a placeholder "0.01"', () => {
expect(wrapper.find('input-amount-stub').attributes('placeholder')).toBe('0.01')
})
})
describe('message text box', () => {
it('has a textarea field', () => {
expect(wrapper.find('input-textarea-stub').exists()).toBe(true)
})
it('has a label form.message', () => {
expect(wrapper.find('input-textarea-stub').attributes('label')).toBe('form.message')
})
})
describe('cancel button', () => {
it('has a cancel button', () => {
expect(wrapper.find('button[type="reset"]').exists()).toBe(true)
})
it('has the text "form.reset"', () => {
expect(wrapper.find('button[type="reset"]').text()).toBe('form.reset')
})
it.skip('resets the form when clicked', async () => {
// Set some values in the form
await wrapper.findComponent(BFormRadioGroup).setValue(SEND_TYPES.send)
wrapper.vm.form.identifier = 'test@example.com'
wrapper.vm.form.amount = '100,00'
wrapper.vm.form.memo = 'Test memo'
// Trigger the reset
await wrapper.find('button[type="reset"]').trigger('click')
// Check if the form has been reset
expect(wrapper.vm.radioSelected).toBe(SEND_TYPES.send)
expect(wrapper.vm.form.identifier).toBe('')
expect(wrapper.vm.form.amount).toBe('')
expect(wrapper.vm.form.memo).toBe('')
})
})
describe('submit', () => {
it('has a submit button', () => {
expect(wrapper.find('button[type="submit"]').exists()).toBe(true)
})
it('has the text "form.check_now"', () => {
expect(wrapper.find('button[type="submit"]').text()).toBe('form.check_now')
})
it.skip('calls onSubmit when form is submitted', async () => {
const submitSpy = vi.spyOn(wrapper.vm, 'onSubmit')
await wrapper.findComponent(BForm).trigger('submit.prevent')
expect(submitSpy).toHaveBeenCalled()
})
})
})
describe('form submission', () => {
beforeEach(async () => {
wrapper = createWrapper({ balance: 100.0 })
await nextTick()
await wrapper.findComponent(BFormRadioGroup).setValue(SEND_TYPES.send)
})
it('emits set-transaction event with correct data when form is submitted', async () => {
await wrapper.findComponent(BForm).trigger('submit.prevent')
expect(wrapper.emitted('set-transaction')).toBeTruthy()
expect(wrapper.emitted('set-transaction')[0][0]).toEqual(
expect.objectContaining({
selected: SEND_TYPES.send,
identifier: 'test@example.com',
amount: 100.0,
memo: 'Test memo',
}),
)
})
it('handles form submission with empty amount', async () => {
vi.mocked(useForm).mockReturnValueOnce({
...vi.mocked(useForm)(),
handleSubmit: vi.fn((callback) => {
return () =>
callback({
identifier: 'test@example.com',
amount: '',
memo: 'Test memo',
})
}),
})
wrapper = createWrapper({ balance: 100.0 })
await nextTick()
await wrapper.findComponent(BForm).trigger('submit.prevent')
expect(wrapper.emitted('set-transaction')).toBeTruthy()
expect(wrapper.emitted('set-transaction')[0][0]).toEqual(
expect.objectContaining({
selected: SEND_TYPES.send,
identifier: 'test@example.com',
amount: 0,
memo: 'Test memo',
}),
)
})
})
describe('create transaction link', () => {
beforeEach(async () => {
await wrapper.findComponent(BFormRadioGroup).setValue(SEND_TYPES.link)
})
it('has SEND_TYPES = link', () => {
expect(wrapper.vm.radioSelected).toBe(SEND_TYPES.link)
})
it('has no input field for identifier', () => {
expect(wrapper.find('input-identifier-stub').exists()).toBe(false)
})
})
})
describe('with gradido ID', () => {
beforeEach(async () => {
vi.mocked(useRoute).mockReturnValue({
params: { userIdentifier: 'gradido-ID', communityIdentifier: 'community-ID' },
query: {},
})
wrapper = createWrapper()
await nextTick()
})
it('has no identifier input field', () => {
expect(wrapper.find('input-identifier-stub').exists()).toBe(false)
})
it('passes correct variables to useQuery', () => {
const queryVariables = mockUseQuery.mock.calls[0][1]
expect(queryVariables).toBeDefined()
expect(queryVariables()).toEqual({
identifier: 'gradido-ID',
communityIdentifier: 'community-ID',
})
})
})

2
frontend/src/components/GddSend/TransactionForm.vue
View File

@ -167,7 +167,7 @@ const radioSelected = ref(props.selected)
const userName = ref('')
const recipientCommunity = ref({ uuid: '', name: '' })
const { handleSubmit, resetForm, defineField } = useForm({
const { handleSubmit, resetForm, defineField, values } = useForm({
initialValues: {
identifier: props.identifier,
amount: props.amount ? String(props.amount) : '',

306
frontend/src/components/GddTransactionList.spec.js
View File

@ -1,37 +1,53 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
import GddTransactionList from './GddTransactionList'
const localVue = global.localVue
const scrollToMock = jest.fn()
const scrollToMock = vi.fn()
global.scrollTo = scrollToMock
describe('GddTransactionList', () => {
let wrapper
const mocks = {
$n: jest.fn((n) => n),
$t: jest.fn((t) => t),
$d: jest.fn((d) => d),
$i18n: {
locale: () => 'en',
const global = {
mocks: {
$n: vi.fn((n) => n),
$t: vi.fn((t) => t),
$d: vi.fn((d) => d),
$i18n: {
locale: () => 'en',
},
},
stubs: {
BPagination: true,
TransactionListItem: true,
TransactionDecay: true,
TransactionSend: true,
TransactionReceive: true,
TransactionCreation: true,
TransactionLinkSummary: true,
},
}
const Wrapper = () => {
return mount(GddTransactionList, { localVue, mocks })
const mountComponent = (props = {}) => {
return mount(GddTransactionList, {
props,
global,
})
}
const decayStartBlock = new Date('2021-05-13 17:46:31-0000')
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper = mountComponent()
})
afterEach(() => {
vi.clearAllMocks()
})
it('renders the component', () => {
expect(wrapper.find('div.gdd-transaction-list').exists()).toBeTruthy()
expect(wrapper.find('div.gdd-transaction-list').exists()).toBe(true)
})
describe('no transactions from server', () => {
@ -46,11 +62,12 @@ describe('GddTransactionList', () => {
)
})
})
describe('0 transactions from server', () => {
beforeEach(async () => {
await wrapper.setProps({
transactions: [],
count: 0,
transactionCount: 0,
})
})
it('Transactions Array is empty, 0 transactions', () => {
@ -62,7 +79,7 @@ describe('GddTransactionList', () => {
beforeEach(async () => {
await wrapper.setProps({
transactions: [],
count: -1,
transactionCount: -1,
})
})
it('renders text saying that there are error.empty-transactionlist ', () => {
@ -164,250 +181,13 @@ describe('GddTransactionList', () => {
},
},
],
count: 12,
transactionCount: 12,
decayStartBlock,
})
})
it('renders 4 transactions', () => {
expect(wrapper.findAll('div.test-list-group-item')).toHaveLength(4)
})
describe('decay transactions', () => {
// let transaction
beforeEach(() => {
transaction = wrapper.findAll('div.test-list-group-item').at(0)
})
it('has a bi-droplet-half icon', () => {
expect(transaction.findAll('svg').at(0).classes()).toEqual([
'bi-droplet-half',
'm-mb-1',
'font2em',
'b-icon',
'bi',
'text-color-gdd-yellow',
])
})
it('has a bi-arrow-down-circle icon', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-arrow-down-circle',
'h1',
'b-icon',
'bi',
'text-muted',
])
})
it.skip('has gradido-global-color-gray color', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-arrow-down-circle',
'b-icon',
'bi',
'text-muted',
])
})
it.skip('shows the amount of transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
'0.16778637075575395',
)
})
it.skip('shows the name of the receiver', () => {
expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toBe(
'decay.decay_since_last_transaction',
)
})
})
describe('send transactions', () => {
// let transaction
beforeEach(() => {
transaction = wrapper.findAll('div.test-list-group-item').at(1)
})
it('has a bi-arrow-down-circle icon', () => {
expect(transaction.findAll('svg').at(0).classes()).toEqual([
'bi-arrow-down-circle',
'h1',
'b-icon',
'bi',
'text-muted',
])
})
it('has a bi-droplet-half icon', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-droplet-half',
'me-2',
'b-icon',
'bi',
])
})
it.skip('has text-danger color', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-droplet-half',
'me-2',
'b-icon',
'bi',
])
})
// operators are renderd by GDD filter
it.skip('has a minus operator', () => {
expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
'-',
)
})
it.skip('shows the amount of transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
'1',
)
})
it.skip('shows the name of the receiver', () => {
expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
'Bibi Bloxberg',
)
})
it.skip('shows the message of the transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain(
'Um den Kessel schlingt den Reihn, Werft die Eingeweid‘ hinein. Kröte du, die Nacht und Tag Unterm kalten Steine lag,',
)
})
it.skip('shows the date of the transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
'Mon Feb 28 2022 13:55:47 GMT+0000',
)
})
it.skip('shows the decay calculation', () => {
expect(transaction.findAll('div.gdd-transaction-list-item-decay').at(0).text()).toContain(
'− 0.2038314055482643084',
)
})
})
describe('receive transactions', () => {
// let transaction
beforeEach(() => {
transaction = wrapper.findAll('div.test-list-group-item').at(2)
})
it('has a bi-arrow-down-circle icon', () => {
expect(transaction.findAll('svg').at(0).classes()).toEqual([
'bi-arrow-down-circle',
'h1',
'b-icon',
'bi',
'text-muted',
])
})
it.skip('has a bi-gift icon', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual(['bi-gift', 'b-icon', 'bi'])
})
it.skip('has gradido-global-color-accent color', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-arrow-right-circle',
'm-mb-1',
'font2em',
'b-icon',
'bi',
'gradido-global-color-accent',
])
})
// operators are renderd by GDD filter
it.skip('has a plus operator', () => {
expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
'+',
)
})
it.skip('shows the amount of transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
'+ 10 GDD',
)
})
it.skip('shows the name of the receiver', () => {
expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
'Bibi Bloxberg',
)
})
it.skip('shows the date of the transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
'Wed Feb 23 2022 10:55:30 GMT+0000',
)
})
})
describe('creation transactions', () => {
// let transaction
beforeEach(() => {
transaction = wrapper.findAll('div.test-list-group-item').at(3)
})
it('has a bi-gift icon', () => {
expect(transaction.findAll('svg').at(0).classes()).toEqual(['bi-gift', 'b-icon', 'bi'])
})
it('has a bi-arrow-down-circle icon', () => {
expect(transaction.findAll('svg').at(1).classes()).toEqual([
'bi-arrow-down-circle',
'h1',
'b-icon',
'bi',
'text-muted',
])
})
// operators are renderd by GDD filter
it.skip('has a plus operator', () => {
expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
'+',
)
})
it.skip('shows the amount of transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
'10',
)
})
it.skip('shows the name of the recipient', () => {
expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
'Gradido Akademie',
)
})
it.skip('shows the message of the transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain(
'Jammern hilft nichts, sondern ich kann selber meinen Teil dazu beitragen.',
)
})
it.skip('shows the date of the transaction', () => {
expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
'Fri Feb 25 2022 07:29:26 GMT+0000',
)
})
it.skip('shows the decay calculation', () => {
expect(transaction.findAll('.gdd-transaction-list-item-decay').at(0).text()).toContain(
'0',
)
})
expect(wrapper.findAll('.test-list-group-item')).toHaveLength(4)
})
})
@ -437,9 +217,9 @@ describe('GddTransactionList', () => {
beforeEach(async () => {
const transactionCount = 42
await wrapper.setProps({
transactions: Array.from({ length: transactionCount }, (_, idx) => {
return createTransaction(idx)
}),
transactions: Array.from({ length: transactionCount }, (_, idx) =>
createTransaction(idx),
),
transactionCount,
decayStartBlock,
pageSize: 25,
@ -449,9 +229,9 @@ describe('GddTransactionList', () => {
describe('next page button clicked', () => {
beforeEach(async () => {
jest.clearAllMocks()
vi.clearAllMocks()
await wrapper.vm.$nextTick()
await wrapper.findComponent({ name: 'BPagination' }).vm.$emit('input', 2)
await wrapper.findComponent({ name: 'BPagination' }).vm.$emit('update:modelValue', 2)
})
it('emits update transactions', () => {
@ -465,9 +245,9 @@ describe('GddTransactionList', () => {
it('shows no pagination buttons', async () => {
const transactionCount = 2
await wrapper.setProps({
transactions: Array.from({ length: transactionCount }, (_, idx) => {
return createTransaction(idx)
}),
transactions: Array.from({ length: transactionCount }, (_, idx) =>
createTransaction(idx),
),
transactionCount,
decayStartBlock,
pageSize: 25,

36
frontend/src/components/GddTransactionListFooter.spec.js
View File

@ -1,40 +1,46 @@
import { mount, RouterLinkStub } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import GddTransactionListFooter from './GddTransactionListFooter'
const localVue = global.localVue
import { BListGroup, BListGroupItem } from 'bootstrap-vue-next'
describe('GddTransactionListFooter', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
const global = {
mocks: {
$t: vi.fn((t) => t),
},
stubs: {
RouterLink: RouterLinkStub,
BListGroup,
BListGroupItem,
},
}
const stubs = {
RouterLink: RouterLinkStub,
}
const Wrapper = () => {
return mount(GddTransactionListFooter, { localVue, mocks, stubs })
const mountComponent = (props = {}) => {
return mount(GddTransactionListFooter, {
props,
global,
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper = mountComponent()
})
it('renders the component', () => {
expect(wrapper.find('div.list-group').exists()).toBeTruthy()
expect(wrapper.find('div').exists()).toBe(true)
})
it('contains no text', () => {
it('contains no text when count is not provided', () => {
expect(wrapper.text()).toBe('')
})
})
describe('count property is greater than 5', () => {
beforeEach(async () => {
wrapper.setProps({ count: 6 })
beforeEach(() => {
wrapper = mountComponent({ count: 6 })
})
it('renders a link to show all', () => {

114
frontend/src/components/GdtTransactionList.spec.js
View File

@ -1,60 +1,73 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import GdtTransactionList from './GdtTransactionList'
import { GdtEntryType } from '@/graphql/enums'
import { createStore } from 'vuex'
import { nextTick } from 'vue'
import { BButton, BPagination } from 'bootstrap-vue-next'
const localVue = global.localVue
const mockStore = createStore({
state: {
language: 'en',
},
})
const state = {
language: 'en',
const mockI18n = {
locale: 'en',
t: (key) => key,
}
describe('GdtTransactionList ', () => {
describe('GdtTransactionList', () => {
let wrapper
const mocks = {
$store: {
state,
commit: jest.fn(),
},
$i18n: {
locale: 'en',
},
$t: jest.fn((t) => t),
$n: jest.fn((n) => n),
$d: jest.fn((d) => d),
const globalMocks = {
$store: mockStore,
$i18n: mockI18n,
$t: vi.fn((t) => t),
$n: vi.fn((n) => n),
$d: vi.fn((d) => d),
}
const propsData = {
const defaultProps = {
transactionsGdt: [],
transactionGdtCount: 0,
pageSize: 25,
value: 1,
modelValue: 1,
}
const Wrapper = () => {
return mount(GdtTransactionList, { localVue, mocks, propsData })
const mountComponent = (props = {}) => {
return mount(GdtTransactionList, {
props: { ...defaultProps, ...props },
global: {
mocks: globalMocks,
stubs: {
BButton,
BPagination,
Transaction: true,
},
},
})
}
describe('transactionGdtCount is 0', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper = mountComponent()
})
it('renders the funding button ', () => {
it('renders the funding button', () => {
expect(wrapper.find('.gdt-funding').exists()).toBe(true)
})
it('links to https://gradido.net/en/memberships/ when clicking', async () => {
it('links to correct memberships URL when clicking', async () => {
expect(wrapper.find('.gdt-funding').attributes('href')).toBe(
'https://gradido.net/' + state.language + '/memberships/',
'https://gradido.net/en/memberships/',
)
})
})
describe('Transactions are loaded', () => {
beforeEach(async () => {
wrapper = Wrapper()
await wrapper.setProps({
wrapper = mountComponent({
transactionGdtCount: 42,
transactionsGdt: [
{
@ -98,51 +111,40 @@ describe('GdtTransactionList ', () => {
})
it('renders the component', () => {
expect(wrapper.find('div.gdt-transaction-list').exists()).toBeTruthy()
expect(wrapper.find('div.gdt-transaction-list').exists()).toBe(true)
})
it('does not render the funding button ', () => {
it('does not render the funding button', () => {
expect(wrapper.find('.gdt-funding').exists()).toBe(false)
})
describe('change of currentPage', () => {
it('calls the API after currentPage changes', async () => {
jest.clearAllMocks()
await wrapper.findComponent({ name: 'BPagination' }).vm.$emit('input', 2)
it('emits input event after currentPage changes', async () => {
await wrapper.findComponent({ name: 'BPagination' }).vm.$emit('update:modelValue', 2)
await nextTick()
expect(wrapper.emitted('input')).toEqual([[2]])
})
describe('pagination buttons', () => {
describe('with transactionCount > pageSize', () => {
it('shows the pagination buttons', () => {
expect(wrapper.find('ul.pagination').exists()).toBe(true)
})
it('shows the pagination buttons when transactionCount > pageSize', () => {
expect(wrapper.findComponent({ name: 'BPagination' }).exists()).toBe(true)
})
describe('with transactionCount < pageSize', () => {
beforeEach(() => {
wrapper.setProps({
transactionGdtCount: 10,
})
})
it('shows no pagination buttons', () => {
expect(wrapper.find('ul.pagination').exists()).toBe(false)
})
it('hides pagination buttons when transactionCount < pageSize', async () => {
await wrapper.setProps({ transactionGdtCount: 10 })
expect(wrapper.findComponent({ name: 'BPagination' }).exists()).toBe(false)
})
})
})
describe('server not reachable', () => {
beforeEach(() => {
wrapper.setProps({
transactionGdtCount: -1,
})
})
it('renders the not-reachable text', () => {
expect(wrapper.text()).toBe('gdt.not-reachable')
})
})
})
describe('server not reachable', () => {
beforeEach(() => {
wrapper = mountComponent({ transactionGdtCount: -1 })
})
it('renders the not-reachable text', () => {
expect(wrapper.text()).toContain('gdt.not-reachable')
})
})
})

49
frontend/src/components/Inputs/FirstName.spec.js
View File

@ -1,38 +1,67 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import FirstName from './FirstName'
import { BFormInput } from 'bootstrap-vue-next'
const localVue = global.localVue
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
n: (value) => String(value),
}),
}))
describe('FirstName', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$t: vi.fn((t) => t),
$i18n: {
locale: jest.fn(() => 'en'),
locale: vi.fn(() => 'en'),
},
$n: jest.fn((n) => String(n)),
$n: vi.fn((n) => String(n)),
}
const propsData = {
balance: 0.0,
value: '',
}
const Wrapper = () => {
const createWrapper = () => {
return mount(FirstName, {
localVue,
mocks,
propsData,
global: {
mocks,
components: {
BFormInput,
},
},
props: propsData,
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper = createWrapper()
})
it('renders the component', () => {
expect(wrapper.find('div.first-name').exists()).toBe(true)
})
it('renders the label with correct text', () => {
expect(wrapper.find('label').text()).toBe('form.firstname')
})
it('updates firstName when input value changes', async () => {
const input = wrapper.find('input')
await input.setValue('John')
expect(wrapper.vm.firstName).toBe('John')
})
it('computes firstNameState correctly', async () => {
const input = wrapper.find('input')
await input.setValue('Jo')
expect(wrapper.vm.firstNameState).toBe(false)
await input.setValue('John')
expect(wrapper.vm.firstNameState).toBe(true)
})
})
})

183
frontend/src/components/Inputs/InputAmount.spec.js
View File

@ -1,124 +1,125 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import InputAmount from './InputAmount'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { ref } from 'vue'
import { BFormInput } from 'bootstrap-vue-next'
const localVue = global.localVue
vi.mock('vue-router', () => ({
useRoute: vi.fn(() => ({
params: {},
path: '/some-path',
})),
}))
vi.mock('vue-i18n', () => ({
useI18n: vi.fn(() => ({
t: (key) => key,
n: (num) => num,
})),
}))
vi.mock('vee-validate', () => ({
useField: vi.fn(() => ({
value: ref(''),
meta: { valid: true },
errorMessage: ref(''),
})),
}))
// Mock toast
const mockToastError = vi.fn()
vi.mock('@/composables/useToast', () => ({
useAppToast: vi.fn(() => ({
toastError: mockToastError,
})),
}))
describe('InputAmount', () => {
let wrapper
let valid
const mocks = {
$t: jest.fn((t) => t),
$n: jest.fn((n) => n),
$i18n: {
locale: jest.fn(() => 'en'),
},
$route: {
params: {},
},
const createWrapper = (propsData = {}) => {
return mount(InputAmount, {
props: {
name: 'amount',
label: 'Amount',
placeholder: 'Enter amount',
typ: 'TransactionForm',
modelValue: '12,34',
...propsData,
},
global: {
mocks: {
$route: useRoute(),
...useI18n(),
},
components: {
BFormInput,
},
directives: {
focus: {},
},
stubs: {
BFormGroup: true,
BFormInvalidFeedback: true,
BInputGroup: true,
},
},
})
}
beforeEach(() => {
vi.clearAllMocks()
})
describe('mount in a TransactionForm', () => {
const propsData = {
name: '',
label: '',
placeholder: '',
typ: 'TransactionForm',
value: '12,34',
}
const Wrapper = () => {
return mount(InputAmount, {
localVue,
mocks,
propsData,
})
}
beforeEach(() => {
wrapper = Wrapper()
wrapper.vm.$options.watch.value.call(wrapper.vm)
wrapper = createWrapper()
})
it('renders the component input-amount', () => {
expect(wrapper.find('div.input-amount').exists()).toBe(true)
})
describe('amount normalization', () => {
describe('if invalid', () => {
beforeEach(async () => {
await wrapper.setProps({ value: '12m34' })
valid = false
})
it('normalizes the amount correctly', async () => {
await wrapper.vm.normalizeAmount('12,34')
expect(wrapper.vm.value).toBe('12.34')
})
it('is not normalized', () => {
wrapper.vm.normalizeAmount(false)
expect(wrapper.vm.currentValue).toBe('12m34')
})
})
describe('if valid', () => {
beforeEach(() => {
valid = true
})
it('is normalized to a number - not rounded', async () => {
wrapper.vm.normalizeAmount(valid)
expect(wrapper.vm.currentValue).toBe('12.34')
})
})
it('does not normalize invalid input', async () => {
await wrapper.vm.normalizeAmount('12m34')
expect(wrapper.vm.value).toBe('12m34')
})
})
describe('mount in a ContributionForm', () => {
const propsData = {
name: '',
label: '',
placeholder: '',
typ: 'ContributionForm',
value: '12.34',
}
const Wrapper = () => {
return mount(InputAmount, {
localVue,
mocks,
propsData,
})
}
beforeEach(() => {
wrapper = Wrapper()
wrapper.vm.$options.watch.value.call(wrapper.vm)
wrapper = createWrapper({
typ: 'ContributionForm',
modelValue: '12.34',
})
})
it('renders the component input-amount', () => {
expect(wrapper.find('div.input-amount').exists()).toBe(true)
})
describe('amount normalization', () => {
describe('if invalid', () => {
beforeEach(async () => {
await wrapper.setProps({ value: '12m34' })
valid = false
})
it('normalizes the amount correctly', async () => {
await wrapper.vm.normalizeAmount('12.34')
expect(wrapper.vm.value).toBe('12.34')
})
it('is not normalized', () => {
wrapper.vm.normalizeAmount(valid)
expect(wrapper.vm.currentValue).toBe('12m34')
})
})
describe('if valid', () => {
beforeEach(() => {
valid = true
})
it('is normalized to a ungroupedDecimal number', () => {
wrapper.vm.normalizeAmount(valid)
expect(wrapper.vm.currentValue).toBe('12.34')
})
})
it('does not normalize invalid input', async () => {
await wrapper.vm.normalizeAmount('12m34')
expect(wrapper.vm.value).toBe('12m34')
})
})
it('emits update:modelValue when value changes', async () => {
wrapper = createWrapper()
await wrapper.vm.normalizeAmount('15.67')
expect(wrapper.emitted('update:modelValue')).toBeTruthy()
expect(wrapper.emitted('update:modelValue')[0]).toEqual(['15.67'])
})
})

83
frontend/src/components/Inputs/InputEmail.spec.js
View File

@ -1,9 +1,23 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import InputEmail from './InputEmail'
import flushPromises from 'flush-promises'
import { nextTick, ref } from 'vue'
import { BFormGroup, BFormInput, BFormInvalidFeedback } from 'bootstrap-vue-next'
const localVue = global.localVue
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
}),
}))
vi.mock('vee-validate', () => ({
useField: () => ({
value: ref(''),
errorMessage: ref(''),
validate: vi.fn(),
meta: { valid: true },
}),
}))
describe('InputEmail', () => {
let wrapper
@ -12,81 +26,68 @@ describe('InputEmail', () => {
name: 'input-field-name',
label: 'input-field-label',
placeholder: 'input-field-placeholder',
value: '',
}
const mocks = {
$route: {
params: {},
const global = {
components: {
BFormGroup,
BFormInput,
BFormInvalidFeedback,
},
mocks: {
$route: {
path: '/',
},
},
}
const Wrapper = () => {
return mount(InputEmail, { localVue, propsData, mocks })
const createWrapper = () => {
return mount(InputEmail, { props: propsData, global })
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper = createWrapper()
})
it('has an input field', () => {
expect(wrapper.find('input').exists()).toBeTruthy()
expect(wrapper.find('input').exists()).toBe(true)
})
describe('properties', () => {
it('has the name "input-field-name"', () => {
expect(wrapper.find('input').attributes('name')).toEqual('input-field-name')
expect(wrapper.find('input').attributes('name')).toBe('input-field-name')
})
it('has the id "input-field-name-input-field"', () => {
expect(wrapper.find('input').attributes('id')).toEqual('input-field-name-input-field')
expect(wrapper.find('input').attributes('id')).toBe('input-field-name-input-field')
})
it('has the placeholder "input-field-placeholder"', () => {
expect(wrapper.find('input').attributes('placeholder')).toEqual('input-field-placeholder')
})
it('has the value ""', () => {
expect(wrapper.vm.currentValue).toEqual('')
expect(wrapper.find('input').attributes('placeholder')).toBe('input-field-placeholder')
})
it('has the label "input-field-label"', () => {
expect(wrapper.find('label').text()).toEqual('input-field-label')
expect(wrapper.find('label').text()).toBe('input-field-label')
})
it('has the label for "input-field-name-input-field"', () => {
expect(wrapper.find('label').attributes('for')).toEqual('input-field-name-input-field')
expect(wrapper.find('label').attributes('for')).toBe('input-field-name-input-field')
})
})
describe('input value changes', () => {
it.skip('trims the email after blur', async () => {
await wrapper.find('input').setValue(' valid@email.com ')
await wrapper.find('input').trigger('blur')
await flushPromises()
expect(wrapper.vm.currentValue).toBe('valid@email.com')
})
it('emits input with new value', async () => {
it('input value change field value', async () => {
await wrapper.find('input').setValue('user@example.org')
expect(wrapper.emitted('input')).toBeTruthy()
expect(wrapper.emitted('input')).toEqual([['user@example.org']])
})
})
describe('value property changes', () => {
it('updates data model', async () => {
await wrapper.setProps({ value: 'user@example.org' })
expect(wrapper.vm.currentValue).toEqual('user@example.org')
expect(wrapper.vm.value).toEqual('user@example.org')
})
})
describe('email normalization', () => {
it('is trimmed', async () => {
await wrapper.setData({ currentValue: ' valid@email.com ' })
wrapper.vm.normalizeEmail()
expect(wrapper.vm.currentValue).toBe('valid@email.com')
it('trims the email', async () => {
await wrapper.find('input').setValue(' valid@email.com ')
await nextTick()
expect(wrapper.vm.value).toEqual('valid@email.com')
})
})
})

158
frontend/src/components/Inputs/InputHour.spec.js
View File

@ -1,88 +1,108 @@
import { mount } from '@vue/test-utils'
import InputHour from './InputHour'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { ref } from 'vue'
import InputHour from './InputHour.vue'
import { useField } from 'vee-validate'
import { BFormGroup, BFormInput, BFormInvalidFeedback } from 'bootstrap-vue-next'
const localVue = global.localVue
// Mock vee-validate
vi.mock('vee-validate', () => ({
useField: vi.fn(),
}))
describe('InputHour', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$i18n: {
locale: jest.fn(() => 'en'),
},
$n: jest.fn((n) => String(n)),
$route: {
params: {},
},
const createWrapper = (propsData = {}) => {
return mount(InputHour, {
props: {
rules: {},
name: 'input-field-name',
label: 'input-field-label',
placeholder: 'input-field-placeholder',
validMaxTime: 25,
...propsData,
},
global: {
components: {
BFormGroup,
BFormInput,
BFormInvalidFeedback,
},
mocks: {
$t: (t) => t,
$i18n: {
locale: () => 'en',
},
$n: (n) => String(n),
$route: {
params: {},
},
},
},
})
}
describe('mount', () => {
const propsData = {
rules: {},
name: 'input-field-name',
label: 'input-field-label',
placeholder: 'input-field-placeholder',
value: 500,
validMaxTime: 25,
}
const Wrapper = () => {
return mount(InputHour, {
localVue,
mocks,
propsData,
})
}
beforeEach(() => {
wrapper = Wrapper()
// await wrapper.setData({ currentValue: 15 })
beforeEach(() => {
useField.mockReturnValue({
value: ref(0),
errorMessage: ref(''),
meta: ref({ valid: true }),
})
wrapper = createWrapper()
})
it('renders the component input-hour', () => {
expect(wrapper.find('div.input-hour').exists()).toBe(true)
})
it('renders the component input-hour', () => {
expect(wrapper.find('div.input-hour').exists()).toBe(true)
})
it('has an input field', () => {
expect(wrapper.find('input').exists()).toBeTruthy()
})
it('has an input field', () => {
expect(wrapper.findComponent({ name: 'BFormInput' }).exists()).toBe(true)
})
describe('properties', () => {
it('has the id "input-field-name-input-field"', () => {
expect(wrapper.find('input').attributes('id')).toEqual('input-field-name-input-field')
})
it('has the placeholder "input-field-placeholder"', () => {
expect(wrapper.find('input').attributes('placeholder')).toEqual('input-field-placeholder')
})
it('has the value 0', () => {
expect(wrapper.vm.currentValue).toEqual(0)
})
it('has the label "input-field-label"', () => {
expect(wrapper.find('label').text()).toEqual('input-field-label')
})
it('has the label for "input-field-name-input-field"', () => {
expect(wrapper.find('label').attributes('for')).toEqual('input-field-name-input-field')
describe('properties', () => {
it('passes correct props to BFormInput', () => {
const input = wrapper.findComponent({ name: 'BFormInput' })
expect(input.props()).toMatchObject({
id: 'input-field-name-input-field',
modelValue: 0,
name: 'input-field-name',
placeholder: 'input-field-placeholder',
type: 'number',
state: true,
step: '0.25',
min: '0',
max: 25,
})
})
describe('input value changes', () => {
it('emits input with new value', async () => {
await wrapper.find('input').setValue('12')
expect(wrapper.emitted('input')).toBeTruthy()
expect(wrapper.emitted('input')).toEqual([[12]])
})
})
describe('value property changes', () => {
it('updates data model', async () => {
await wrapper.setProps({ value: 15 })
expect(wrapper.vm.currentValue).toEqual(15)
it('passes correct props to BFormGroup', () => {
const formGroup = wrapper.findComponent({ name: 'BFormGroup' })
expect(formGroup.props()).toMatchObject({
label: 'input-field-label',
labelFor: 'input-field-name-input-field',
})
})
})
describe('input value changes', () => {
it('updates currentValue when input changes', async () => {
await wrapper.findComponent({ name: 'BFormInput' }).vm.$emit('update:modelValue', 12)
expect(wrapper.vm.currentValue).toBe(12)
})
})
describe('error handling', () => {
it('displays error message when present', async () => {
useField.mockReturnValue({
value: ref(0),
errorMessage: ref('Error message'),
meta: ref({ valid: false }),
})
wrapper = createWrapper()
expect(wrapper.findComponent({ name: 'BFormInvalidFeedback' }).exists()).toBe(true)
expect(wrapper.findComponent({ name: 'BFormInvalidFeedback' }).text()).toBe('Error message')
})
})
})

79
frontend/src/components/Inputs/InputPassword.spec.js
View File

@ -1,8 +1,31 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import InputPassword from './InputPassword'
import {
BButton,
BFormGroup,
BFormInput,
BFormInvalidFeedback,
BInputGroup,
} from 'bootstrap-vue-next'
const localVue = global.localVue
// Mock vee-validate
vi.mock('vee-validate', () => ({
useField: vi.fn(() => ({
value: '',
errorMessage: '',
meta: { valid: true },
errors: [],
validate: vi.fn(),
})),
}))
// Mock vue-i18n
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
}),
}))
describe('InputPassword', () => {
let wrapper
@ -11,11 +34,31 @@ describe('InputPassword', () => {
name: 'input-field-name',
label: 'input-field-label',
placeholder: 'input-field-placeholder',
value: '',
modelValue: '',
}
const global = {
components: {
BFormGroup,
BInputGroup,
BFormInput,
BButton,
BFormInvalidFeedback,
},
stubs: {
IBiEye: true,
IBiEyeSlash: true,
},
mocks: {
$t: (key) => key,
},
}
const Wrapper = () => {
return mount(InputPassword, { localVue, propsData })
return mount(InputPassword, {
props: propsData,
global,
})
}
describe('mount', () => {
@ -41,7 +84,7 @@ describe('InputPassword', () => {
})
it('has the value ""', () => {
expect(wrapper.vm.currentValue).toEqual('')
expect(wrapper.find('input').attributes('value')).toEqual('')
})
it('has the label "input-field-label"', () => {
@ -54,14 +97,15 @@ describe('InputPassword', () => {
})
describe('input value changes', () => {
it('emits input with new value', async () => {
await wrapper.find('input').setValue('12')
it('emits value with new value', async () => {
await wrapper.find('input').trigger('input', '12')
expect(wrapper.emitted('input')).toBeTruthy()
expect(wrapper.emitted('input')).toEqual([['12']])
expect(wrapper.emitted('input')[0][0]['0']).toEqual('1')
expect(wrapper.emitted('input')[0][0]['1']).toEqual('2')
})
})
describe('password visibilty', () => {
describe('password visibility', () => {
it('has type password by default', () => {
expect(wrapper.find('input').attributes('type')).toEqual('password')
})
@ -78,20 +122,23 @@ describe('InputPassword', () => {
})
})
describe('password visibilty icon', () => {
it('is by default bi-eye-slash', () => {
expect(wrapper.find('svg').classes('bi-eye-slash')).toBe(true)
describe('password visibility icon', () => {
it('is by default IBiEyeSlash', () => {
expect(wrapper.find('i-bi-eye-slash-stub').exists()).toBe(true)
expect(wrapper.find('i-bi-eye-stub').exists()).toBe(false)
})
it('changes to bi-eye when clicked', async () => {
it('changes to IBiEye when clicked', async () => {
await wrapper.find('button').trigger('click')
expect(wrapper.find('svg').classes('bi-eye')).toBe(true)
expect(wrapper.find('i-bi-eye-stub').exists()).toBe(true)
expect(wrapper.find('i-bi-eye-slash-stub').exists()).toBe(false)
})
it('changes back to bi-eye-slash when clicked twice', async () => {
it('changes back to IBiEyeSlash when clicked twice', async () => {
await wrapper.find('button').trigger('click')
await wrapper.find('button').trigger('click')
expect(wrapper.find('svg').classes('bi-eye-slash')).toBe(true)
expect(wrapper.find('i-bi-eye-slash-stub').exists()).toBe(true)
expect(wrapper.find('i-bi-eye-stub').exists()).toBe(false)
})
})
})

64
frontend/src/components/Inputs/InputPasswordConfirmation.spec.js
View File

@ -1,27 +1,35 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import InputPasswordConfirmation from './InputPasswordConfirmation'
import { BCol, BRow } from 'bootstrap-vue-next'
const localVue = global.localVue
// validation is tested in src/components/UserSettings/UserPassword.spec.js
// Mock vue-i18n
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
}),
}))
describe('InputPasswordConfirmation', () => {
let wrapper
const propsData = {
value: {
password: '',
passwordRepeat: '',
const global = {
mocks: {
$t: (key) => key,
},
components: {
BRow,
BCol,
},
stubs: {
InputPassword: true,
},
}
const mocks = {
$t: jest.fn((t) => t),
}
const Wrapper = () => {
return mount(InputPasswordConfirmation, { localVue, propsData, mocks })
return mount(InputPasswordConfirmation, {
global,
})
}
describe('mount', () => {
@ -30,35 +38,7 @@ describe('InputPasswordConfirmation', () => {
})
it('has two input fields', () => {
expect(wrapper.findAll('input')).toHaveLength(2)
})
describe('input values ', () => {
it('emits input with new value for first input field', async () => {
await wrapper.findAll('input').at(0).setValue('1234')
expect(wrapper.emitted('input')).toBeTruthy()
expect(wrapper.emitted('input')).toEqual([
[
{
password: '1234',
passwordRepeat: '',
},
],
])
})
it('emits input with new value for second input field', async () => {
await wrapper.findAll('input').at(1).setValue('1234')
expect(wrapper.emitted('input')).toBeTruthy()
expect(wrapper.emitted('input')).toEqual([
[
{
password: '',
passwordRepeat: '1234',
},
],
])
})
expect(wrapper.findAll('input-password-stub')).toHaveLength(2)
})
})
})

166
frontend/src/components/Inputs/InputTextarea.spec.js
View File

@ -1,87 +1,119 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import InputTextarea from './InputTextarea'
import { useField } from 'vee-validate'
import { BFormGroup, BFormInvalidFeedback, BFormTextarea } from 'bootstrap-vue-next'
const localVue = global.localVue
vi.mock('vee-validate', () => ({
useField: vi.fn(),
}))
describe('InputTextarea', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$i18n: {
locale: jest.fn(() => 'en'),
},
$n: jest.fn((n) => String(n)),
$route: {
params: {},
},
const createWrapper = (props = {}) => {
return mount(InputTextarea, {
props: {
rules: {},
name: 'input-field-name',
label: 'input-field-label',
placeholder: 'input-field-placeholder',
...props,
},
global: {
components: {
BFormGroup,
BFormTextarea,
BFormInvalidFeedback,
},
},
})
}
describe('mount', () => {
const propsData = {
rules: {},
name: 'input-field-name',
label: 'input-field-label',
placeholder: 'input-field-placeholder',
value: 'Long enough',
}
beforeEach(() => {
vi.mocked(useField).mockReturnValue({
value: '',
errorMessage: '',
meta: { valid: true },
})
wrapper = createWrapper()
})
const Wrapper = () => {
return mount(InputTextarea, {
localVue,
mocks,
propsData,
})
}
it('renders the component InputTextarea', () => {
expect(wrapper.find('[data-test="input-textarea"]').exists()).toBe(true)
})
beforeEach(() => {
wrapper = Wrapper()
it('has a textarea field', () => {
expect(wrapper.findComponent({ name: 'BFormTextarea' }).exists()).toBe(true)
})
describe('properties', () => {
it('has the correct id', () => {
const textarea = wrapper.findComponent({ name: 'BFormTextarea' })
expect(textarea.attributes('id')).toBe('input-field-name-input-field')
})
it('renders the component InputTextarea', () => {
expect(wrapper.findComponent({ name: 'InputTextarea' }).exists()).toBe(true)
it('has the correct placeholder', () => {
const textarea = wrapper.findComponent({ name: 'BFormTextarea' })
expect(textarea.attributes('placeholder')).toBe('input-field-placeholder')
})
it('has an textarea field', () => {
expect(wrapper.find('textarea').exists()).toBeTruthy()
it('has the correct label', () => {
const label = wrapper.find('label')
expect(label.text()).toBe('input-field-label')
})
describe('properties', () => {
it('has the id "input-field-name-input-field"', () => {
expect(wrapper.find('textarea').attributes('id')).toEqual('input-field-name-input-field')
})
it('has the placeholder "input-field-placeholder"', () => {
expect(wrapper.find('textarea').attributes('placeholder')).toEqual(
'input-field-placeholder',
)
})
it('has the value ""', () => {
expect(wrapper.vm.currentValue).toEqual('Long enough')
})
it('has the label "input-field-label"', () => {
expect(wrapper.find('label').text()).toEqual('input-field-label')
})
it('has the label for "input-field-name-input-field"', () => {
expect(wrapper.find('label').attributes('for')).toEqual('input-field-name-input-field')
})
})
describe('input value changes', () => {
it('emits input with new value', async () => {
await wrapper.find('textarea').setValue('New Text')
expect(wrapper.emitted('input')).toEqual([['New Text']])
})
})
describe('value property changes', () => {
it('updates data model', async () => {
await wrapper.setProps({ value: 'new text message' })
expect(wrapper.vm.currentValue).toEqual('new text message')
})
it('has the correct label-for attribute', () => {
const label = wrapper.find('label')
expect(label.attributes('for')).toBe('input-field-name-input-field')
})
})
describe('input value changes', () => {
it('updates the model value when input changes', async () => {
const wrapper = mount(InputTextarea, {
props: {
rules: {},
name: 'input-field-name',
label: 'input-field-label',
placeholder: 'input-field-placeholder',
},
global: {
components: {
BFormGroup,
BFormInvalidFeedback,
BFormTextarea,
},
},
})
const textarea = wrapper.find('textarea')
await textarea.setValue('New Text')
expect(wrapper.vm.currentValue).toBe('New Text')
})
})
describe('disabled state', () => {
it('disables the textarea when disabled prop is true', async () => {
await wrapper.setProps({ disabled: true })
const textarea = wrapper.findComponent({ name: 'BFormTextarea' })
expect(textarea.attributes('disabled')).toBeDefined()
})
})
it('shows error message when there is an error', async () => {
vi.mocked(useField).mockReturnValue({
value: '',
errorMessage: 'This field is required',
meta: { valid: false },
})
wrapper = createWrapper()
await wrapper.vm.$nextTick()
const errorFeedback = wrapper.findComponent({ name: 'BFormInvalidFeedback' })
expect(errorFeedback.exists()).toBe(true)
expect(errorFeedback.text()).toBe('This field is required')
})
})

126
frontend/src/components/Inputs/InputUsername.spec.js
View File

@ -1,47 +1,113 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import InputUsername from './InputUsername'
import {
BButton,
BFormGroup,
BFormInput,
BFormInvalidFeedback,
BInputGroup,
} from 'bootstrap-vue-next'
import { useField } from 'vee-validate'
const localVue = global.localVue
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
}),
}))
describe('UserName Form', () => {
vi.mock('vee-validate', () => ({
useField: vi.fn(() => ({
meta: { valid: true },
errors: [],
value: '',
errorMessage: '',
})),
useForm: vi.fn(),
}))
describe('InputUsername', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$store: {
state: {
username: '',
const createWrapper = (props = {}) => {
return mount(InputUsername, {
props: {
modelValue: '',
unique: false,
...props,
},
},
global: {
mocks: {
$t: (key) => key,
},
components: {
BFormGroup,
BInputGroup,
BFormInput,
BButton,
BFormInvalidFeedback,
},
},
})
}
const propsData = {
value: '',
unique: false,
}
beforeEach(() => {
wrapper = createWrapper()
})
const Wrapper = () => {
return mount(InputUsername, { localVue, mocks, propsData })
}
it('renders the component', () => {
expect(wrapper.find('[data-test="username"]').exists()).toBe(true)
})
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('renders the component', () => {
expect(wrapper.find('[data-test="username"]').exists()).toBeTruthy()
it('displays the correct label', () => {
const formGroup = wrapper.findComponent({ name: 'BFormGroup' })
expect(formGroup.props('label')).toBe('form.username')
})
it('displays the correct placeholder', () => {
const input = wrapper.findComponent({ name: 'BFormInput' })
expect(input.props('placeholder')).toBe('Username')
})
it('emits set-is-edit event when button is clicked', async () => {
const button = wrapper.findComponent({ name: 'BButton' })
await button.trigger('click')
expect(wrapper.emitted('set-is-edit')).toBeTruthy()
})
it('shows all errors when showAllErrors prop is true', async () => {
const errors = ['Error 1', 'Error 2']
vi.mocked(useField).mockReturnValue({
meta: { valid: false },
errors,
value: '',
errorMessage: 'Error',
})
describe('currentValue', () => {
beforeEach(async () => {
wrapper = Wrapper()
wrapper = createWrapper({ showAllErrors: true })
await wrapper.vm.$nextTick()
await wrapper.setProps({ value: 'petra' })
await wrapper.find('[data-test="username"]').setValue('petra')
})
it('emits input event with the current value', () => {
expect(wrapper.emitted('input')).toEqual([['petra']])
})
const feedback = wrapper.findComponent({ name: 'BFormInvalidFeedback' })
expect(feedback.exists()).toBe(true)
expect(feedback.text()).toContain('Error 1')
expect(feedback.text()).toContain('Error 2')
})
it('shows only the first error when showAllErrors prop is false', async () => {
const errors = ['Error 1', 'Error 2']
vi.mocked(useField).mockReturnValue({
meta: { valid: false },
errors,
value: '',
errorMessage: 'Error',
})
wrapper = createWrapper({ showAllErrors: false })
await wrapper.vm.$nextTick()
const feedback = wrapper.findComponent({ name: 'BFormInvalidFeedback' })
expect(feedback.exists()).toBe(true)
expect(feedback.text()).toContain('Error 1')
expect(feedback.text()).not.toContain('Error 2')
})
})

79
frontend/src/components/Inputs/LastName.spec.js
View File

@ -1,38 +1,69 @@
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import LastName from './LastName'
import { BFormInput } from 'bootstrap-vue-next'
const localVue = global.localVue
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
n: (n) => String(n),
}),
}))
describe('LastName', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$i18n: {
locale: jest.fn(() => 'en'),
},
$n: jest.fn((n) => String(n)),
}
const propsData = {
balance: 0.0,
}
const Wrapper = () => {
const createWrapper = (props = {}) => {
return mount(LastName, {
localVue,
mocks,
propsData,
props: {
value: '',
...props,
},
global: {
mocks: {
$t: (key) => key,
$i18n: {
locale: 'en',
},
$n: (n) => String(n),
},
components: {
BFormInput,
},
},
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
beforeEach(() => {
wrapper = createWrapper()
})
it('renders the component', () => {
expect(wrapper.find('div.last-name').exists()).toBe(true)
})
it('renders the component', () => {
expect(wrapper.find('div.last-name').exists()).toBe(true)
})
it('updates lastName when value prop changes', async () => {
wrapper.vm.lastName = 'Doe'
expect(wrapper.vm.lastName).toBe('Doe')
})
it('computes lastNameState correctly', async () => {
expect(wrapper.vm.lastNameState).toBe(false)
await wrapper.setData({ lastName: 'Doe' })
expect(wrapper.vm.lastNameState).toBe(true)
})
it('renders label with correct text', () => {
const label = wrapper.find('label')
expect(label.exists()).toBe(true)
expect(label.text()).toBe('form.lastname')
})
it('renders BFormInput with correct props', () => {
const input = wrapper.findComponent({ name: 'BFormInput' })
expect(input.exists()).toBe(true)
expect(input.props('id')).toBe('input-lastName')
expect(input.props('state')).toBe(false)
expect(input.props('placeholder')).toBe('Enter your lastName')
})
})

248
frontend/src/components/LanguageSwitch.spec.js
View File

@ -1,248 +0,0 @@
import { mount } from '@vue/test-utils'
import LanguageSwitch from './LanguageSwitch'
const localVue = global.localVue
const updateUserInfosMutationMock = jest.fn().mockResolvedValue({
data: {
updateUserInfos: {
validValues: 1,
},
},
})
describe('LanguageSwitch', () => {
let wrapper
const state = {
gradidoID: 'current-user-id',
language: null,
}
const mocks = {
$store: {
state,
commit: jest.fn(),
},
$i18n: {
locale: 'en',
},
$apollo: {
mutate: updateUserInfosMutationMock,
},
}
const Wrapper = () => {
return mount(LanguageSwitch, { localVue, mocks })
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('renders the component', () => {
expect(wrapper.find('div.language-switch').exists()).toBeTruthy()
})
describe('with locales en, de, es, fr, and nl', () => {
describe('empty store', () => {
describe('navigator language is "en-US"', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
it('shows English as default navigator langauge', async () => {
languageGetter.mockReturnValue('en-US')
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.find('button.dropdown-toggle').text()).toBe('English - en')
})
})
describe('navigator language is "de-DE"', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
it('shows Deutsch as language ', async () => {
languageGetter.mockReturnValue('de-DE')
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.find('button.dropdown-toggle').text()).toBe('Deutsch - de')
})
})
describe('navigator language is "es-ES"', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
it('shows Español as language ', async () => {
languageGetter.mockReturnValue('es-ES')
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.find('button.dropdown-toggle').text()).toBe('Español - es')
})
})
describe('navigator language is "fr-FR"', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
it('shows French as language ', async () => {
languageGetter.mockReturnValue('fr-FR')
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.find('button.dropdown-toggle').text()).toBe('Français - fr')
})
})
describe('navigator language is "nl-NL"', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
it('shows Nederlands as language ', async () => {
languageGetter.mockReturnValue('nl-NL')
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.find('button.dropdown-toggle').text()).toBe('Nederlands - nl')
})
})
describe('navigator language is "it-IT" (not supported)', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
it('shows English as language ', async () => {
languageGetter.mockReturnValue('it-IT')
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.find('button.dropdown-toggle').text()).toBe('English - en')
})
})
describe('no navigator langauge', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
it('shows English as language ', async () => {
languageGetter.mockReturnValue(null)
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.find('button.dropdown-toggle').text()).toBe('English - en')
})
})
})
describe('language "de" in store', () => {
it('shows Deutsch as language', async () => {
wrapper.vm.$store.state.language = 'de'
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.find('button.dropdown-toggle').text()).toBe('Deutsch - de')
})
})
describe('language "es" in store', () => {
it('shows Español as language', async () => {
wrapper.vm.$store.state.language = 'es'
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.find('button.dropdown-toggle').text()).toBe('Español - es')
})
})
describe('language "fr" in store', () => {
it('shows French as language', async () => {
wrapper.vm.$store.state.language = 'fr'
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.find('button.dropdown-toggle').text()).toBe('Français - fr')
})
})
describe('language "nl" in store', () => {
it('shows Nederlands as language', async () => {
wrapper.vm.$store.state.language = 'nl'
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.find('button.dropdown-toggle').text()).toBe('Nederlands - nl')
})
})
describe('dropdown menu', () => {
it('has five languages to choose from', () => {
expect(wrapper.findAll('li')).toHaveLength(5)
})
it('has English as first language to choose', () => {
expect(wrapper.findAll('li').at(0).text()).toBe('English')
})
it('has German as second language to choose', () => {
expect(wrapper.findAll('li').at(1).text()).toBe('Deutsch')
})
it('has Español as third language to choose', () => {
expect(wrapper.findAll('li').at(2).text()).toBe('Español')
})
it('has French as fourth language to choose', () => {
expect(wrapper.findAll('li').at(3).text()).toBe('Français')
})
it('has Nederlands as fith language to choose', () => {
expect(wrapper.findAll('li').at(4).text()).toBe('Nederlands')
})
})
})
describe('calls the API', () => {
it("with locale 'en'", () => {
wrapper.findAll('li').at(0).find('a').trigger('click')
expect(updateUserInfosMutationMock).toBeCalledWith(
expect.objectContaining({
variables: {
locale: 'en',
},
}),
)
})
it("with locale 'de'", () => {
wrapper.findAll('li').at(1).find('a').trigger('click')
expect(updateUserInfosMutationMock).toBeCalledWith(
expect.objectContaining({
variables: {
locale: 'de',
},
}),
)
})
it("with locale 'es'", () => {
wrapper.findAll('li').at(2).find('a').trigger('click')
expect(updateUserInfosMutationMock).toBeCalledWith(
expect.objectContaining({
variables: {
locale: 'es',
},
}),
)
})
it("with locale 'fr'", () => {
wrapper.findAll('li').at(3).find('a').trigger('click')
expect(updateUserInfosMutationMock).toBeCalledWith(
expect.objectContaining({
variables: {
locale: 'fr',
},
}),
)
})
it("with locale 'nl'", () => {
wrapper.findAll('li').at(4).find('a').trigger('click')
expect(updateUserInfosMutationMock).toBeCalledWith(
expect.objectContaining({
variables: {
locale: 'nl',
},
}),
)
})
})
})
})

250
frontend/src/components/LanguageSwitch.spec.unused Normal file
View File

@ -0,0 +1,250 @@
// Tests for this component are commented out because it is not being used and it probably something to be removed.
// import { mount } from '@vue/test-utils'
// import LanguageSwitch from './LanguageSwitch'
//
// const localVue = global.localVue
//
// const updateUserInfosMutationMock = jest.fn().mockResolvedValue({
// data: {
// updateUserInfos: {
// validValues: 1,
// },
// },
// })
//
// describe('LanguageSwitch', () => {
// let wrapper
//
// const state = {
// gradidoID: 'current-user-id',
// language: null,
// }
//
// const mocks = {
// $store: {
// state,
// commit: jest.fn(),
// },
// $i18n: {
// locale: 'en',
// },
// $apollo: {
// mutate: updateUserInfosMutationMock,
// },
// }
//
// const Wrapper = () => {
// return mount(LanguageSwitch, { localVue, mocks })
// }
//
// describe('mount', () => {
// beforeEach(() => {
// wrapper = Wrapper()
// })
//
// it('renders the component', () => {
// expect(wrapper.find('div.language-switch').exists()).toBeTruthy()
// })
//
// describe('with locales en, de, es, fr, and nl', () => {
// describe('empty store', () => {
// describe('navigator language is "en-US"', () => {
// const languageGetter = jest.spyOn(navigator, 'language', 'get')
//
// it('shows English as default navigator langauge', async () => {
// languageGetter.mockReturnValue('en-US')
// wrapper.vm.setCurrentLanguage()
// await wrapper.vm.$nextTick()
// expect(wrapper.find('button.dropdown-toggle').text()).toBe('English - en')
// })
// })
//
// describe('navigator language is "de-DE"', () => {
// const languageGetter = jest.spyOn(navigator, 'language', 'get')
//
// it('shows Deutsch as language ', async () => {
// languageGetter.mockReturnValue('de-DE')
// wrapper.vm.setCurrentLanguage()
// await wrapper.vm.$nextTick()
// expect(wrapper.find('button.dropdown-toggle').text()).toBe('Deutsch - de')
// })
// })
//
// describe('navigator language is "es-ES"', () => {
// const languageGetter = jest.spyOn(navigator, 'language', 'get')
//
// it('shows Español as language ', async () => {
// languageGetter.mockReturnValue('es-ES')
// wrapper.vm.setCurrentLanguage()
// await wrapper.vm.$nextTick()
// expect(wrapper.find('button.dropdown-toggle').text()).toBe('Español - es')
// })
// })
//
// describe('navigator language is "fr-FR"', () => {
// const languageGetter = jest.spyOn(navigator, 'language', 'get')
//
// it('shows French as language ', async () => {
// languageGetter.mockReturnValue('fr-FR')
// wrapper.vm.setCurrentLanguage()
// await wrapper.vm.$nextTick()
// expect(wrapper.find('button.dropdown-toggle').text()).toBe('Français - fr')
// })
// })
//
// describe('navigator language is "nl-NL"', () => {
// const languageGetter = jest.spyOn(navigator, 'language', 'get')
//
// it('shows Nederlands as language ', async () => {
// languageGetter.mockReturnValue('nl-NL')
// wrapper.vm.setCurrentLanguage()
// await wrapper.vm.$nextTick()
// expect(wrapper.find('button.dropdown-toggle').text()).toBe('Nederlands - nl')
// })
// })
//
// describe('navigator language is "it-IT" (not supported)', () => {
// const languageGetter = jest.spyOn(navigator, 'language', 'get')
//
// it('shows English as language ', async () => {
// languageGetter.mockReturnValue('it-IT')
// wrapper.vm.setCurrentLanguage()
// await wrapper.vm.$nextTick()
// expect(wrapper.find('button.dropdown-toggle').text()).toBe('English - en')
// })
// })
//
// describe('no navigator langauge', () => {
// const languageGetter = jest.spyOn(navigator, 'language', 'get')
//
// it('shows English as language ', async () => {
// languageGetter.mockReturnValue(null)
// wrapper.vm.setCurrentLanguage()
// await wrapper.vm.$nextTick()
// expect(wrapper.find('button.dropdown-toggle').text()).toBe('English - en')
// })
// })
// })
//
// describe('language "de" in store', () => {
// it('shows Deutsch as language', async () => {
// wrapper.vm.$store.state.language = 'de'
// wrapper.vm.setCurrentLanguage()
// await wrapper.vm.$nextTick()
// expect(wrapper.find('button.dropdown-toggle').text()).toBe('Deutsch - de')
// })
// })
//
// describe('language "es" in store', () => {
// it('shows Español as language', async () => {
// wrapper.vm.$store.state.language = 'es'
// wrapper.vm.setCurrentLanguage()
// await wrapper.vm.$nextTick()
// expect(wrapper.find('button.dropdown-toggle').text()).toBe('Español - es')
// })
// })
//
// describe('language "fr" in store', () => {
// it('shows French as language', async () => {
// wrapper.vm.$store.state.language = 'fr'
// wrapper.vm.setCurrentLanguage()
// await wrapper.vm.$nextTick()
// expect(wrapper.find('button.dropdown-toggle').text()).toBe('Français - fr')
// })
// })
//
// describe('language "nl" in store', () => {
// it('shows Nederlands as language', async () => {
// wrapper.vm.$store.state.language = 'nl'
// wrapper.vm.setCurrentLanguage()
// await wrapper.vm.$nextTick()
// expect(wrapper.find('button.dropdown-toggle').text()).toBe('Nederlands - nl')
// })
// })
//
// describe('dropdown menu', () => {
// it('has five languages to choose from', () => {
// expect(wrapper.findAll('li')).toHaveLength(5)
// })
//
// it('has English as first language to choose', () => {
// expect(wrapper.findAll('li').at(0).text()).toBe('English')
// })
//
// it('has German as second language to choose', () => {
// expect(wrapper.findAll('li').at(1).text()).toBe('Deutsch')
// })
//
// it('has Español as third language to choose', () => {
// expect(wrapper.findAll('li').at(2).text()).toBe('Español')
// })
//
// it('has French as fourth language to choose', () => {
// expect(wrapper.findAll('li').at(3).text()).toBe('Français')
// })
//
// it('has Nederlands as fith language to choose', () => {
// expect(wrapper.findAll('li').at(4).text()).toBe('Nederlands')
// })
// })
// })
//
// describe('calls the API', () => {
// it("with locale 'en'", () => {
// wrapper.findAll('li').at(0).find('a').trigger('click')
// expect(updateUserInfosMutationMock).toBeCalledWith(
// expect.objectContaining({
// variables: {
// locale: 'en',
// },
// }),
// )
// })
//
// it("with locale 'de'", () => {
// wrapper.findAll('li').at(1).find('a').trigger('click')
// expect(updateUserInfosMutationMock).toBeCalledWith(
// expect.objectContaining({
// variables: {
// locale: 'de',
// },
// }),
// )
// })
//
// it("with locale 'es'", () => {
// wrapper.findAll('li').at(2).find('a').trigger('click')
// expect(updateUserInfosMutationMock).toBeCalledWith(
// expect.objectContaining({
// variables: {
// locale: 'es',
// },
// }),
// )
// })
//
// it("with locale 'fr'", () => {
// wrapper.findAll('li').at(3).find('a').trigger('click')
// expect(updateUserInfosMutationMock).toBeCalledWith(
// expect.objectContaining({
// variables: {
// locale: 'fr',
// },
// }),
// )
// })
//
// it("with locale 'nl'", () => {
// wrapper.findAll('li').at(4).find('a').trigger('click')
// expect(updateUserInfosMutationMock).toBeCalledWith(
// expect.objectContaining({
// variables: {
// locale: 'nl',
// },
// }),
// )
// })
// })
// })
// })

0
frontend/src/components/LanguageSwitch.vue → frontend/src/components/LanguageSwitch.unused
View File

226
frontend/src/components/LanguageSwitch2.spec.js
View File

@ -1,9 +1,10 @@
import { mount } from '@vue/test-utils'
import LanguageSwitch from './LanguageSwitch2'
import { describe, it, expect, beforeEach, beforeAll, vi } from 'vitest'
import LanguageSwitch from './LanguageSwitch2.vue'
import { createStore } from 'vuex'
import { createI18n } from 'vue-i18n'
const localVue = global.localVue
const updateUserInfosMutationMock = jest.fn().mockResolvedValue({
const updateUserInfosMutationMock = vi.fn().mockResolvedValue({
data: {
updateUserInfos: {
validValues: 1,
@ -11,35 +12,64 @@ const updateUserInfosMutationMock = jest.fn().mockResolvedValue({
},
})
vi.mock('@vue/apollo-composable', async () => {
const actual = await vi.importActual('@vue/apollo-composable')
return {
...actual,
useMutation: vi.fn(() => ({
mutate: updateUserInfosMutationMock,
})),
}
})
const mockToastError = vi.fn()
vi.mock('@/composables/useToast', () => ({
useAppToast: vi.fn(() => ({
toastError: mockToastError,
})),
}))
describe('LanguageSwitch', () => {
let wrapper
const state = {
gradidoID: 'current-user-id',
language: null,
}
const store = createStore({
state: {
gradidoID: 'current-user-id',
language: null,
},
mutations: {
language(state, lang) {
state.language = lang
},
},
})
const mocks = {
$store: {
state,
commit: jest.fn(),
},
$i18n: {
locale: 'en',
},
$t: jest.fn((t) => t),
const i18n = createI18n({
legacy: false,
locale: 'en',
messages: {},
})
const globalMocks = {
$apollo: {
mutate: updateUserInfosMutationMock,
},
}
const Wrapper = () => {
return mount(LanguageSwitch, { localVue, mocks })
const mountOptions = {
global: {
plugins: [store, i18n],
mocks: globalMocks,
},
}
const createWrapper = () => {
return mount(LanguageSwitch, mountOptions)
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper = createWrapper()
})
it('renders the component', () => {
@ -49,78 +79,21 @@ describe('LanguageSwitch', () => {
describe('with locales en, de, es, fr, and nl', () => {
describe('empty store', () => {
describe('navigator language is "en-US"', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
const languageGetter = vi.spyOn(navigator, 'language', 'get')
it('shows English as default navigator langauge', async () => {
it('shows English as default navigator language', async () => {
languageGetter.mockReturnValue('en-US')
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
await wrapper.vm.setCurrentLanguage()
expect(wrapper.findAll('span.locales').at(0).text()).toBe('English')
})
})
describe('navigator language is "de-DE"', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
it('shows Deutsch as language ', async () => {
languageGetter.mockReturnValue('de-DE')
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.findAll('span.locales').at(1).text()).toBe('Deutsch')
})
})
describe('navigator language is "es-ES"', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
it('shows Español as language ', async () => {
languageGetter.mockReturnValue('es-ES')
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.findAll('span.locales').at(2).text()).toBe('Español')
})
})
describe('navigator language is "fr-FR"', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
it('shows French as language ', async () => {
languageGetter.mockReturnValue('fr-FR')
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.findAll('span.locales').at(3).text()).toBe('Français')
})
})
describe('navigator language is "nl-NL"', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
it('shows Nederlands as language ', async () => {
languageGetter.mockReturnValue('nl-NL')
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.findAll('span.locales').at(4).text()).toBe('Nederlands')
})
})
describe('navigator language is "it-IT" (not supported)', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
it('shows English as language ', async () => {
languageGetter.mockReturnValue('it-IT')
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
expect(wrapper.findAll('span.locales').at(0).text()).toBe('English')
})
})
describe('no navigator langauge', () => {
const languageGetter = jest.spyOn(navigator, 'language', 'get')
describe('no navigator language', () => {
const languageGetter = vi.spyOn(navigator, 'language', 'get')
it('shows English as language ', async () => {
languageGetter.mockReturnValue(null)
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
await wrapper.vm.setCurrentLanguage()
expect(wrapper.findAll('span.locales').at(0).text()).toBe('English')
})
})
@ -128,100 +101,75 @@ describe('LanguageSwitch', () => {
describe('language "de" in store', () => {
it('shows Deutsch as language', async () => {
wrapper.vm.$store.state.language = 'de'
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
store.state.language = 'de'
await wrapper.vm.setCurrentLanguage()
expect(wrapper.findAll('span.locales').at(1).text()).toBe('English')
})
})
describe('language "es" in store', () => {
it('shows Español as language', async () => {
wrapper.vm.$store.state.language = 'es'
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
store.state.language = 'es'
await wrapper.vm.setCurrentLanguage()
expect(wrapper.findAll('span.locales').at(2).text()).toBe('Deutsch')
})
})
describe('language "fr" in store', () => {
it('shows French as language', async () => {
wrapper.vm.$store.state.language = 'fr'
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
store.state.language = 'fr'
await wrapper.vm.setCurrentLanguage()
expect(wrapper.findAll('span.locales').at(3).text()).toBe('Español')
})
})
describe('language "nl" in store', () => {
it('shows Nederlands as language', async () => {
wrapper.vm.$store.state.language = 'nl'
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
store.state.language = 'nl'
await wrapper.vm.setCurrentLanguage()
expect(wrapper.findAll('span.locales').at(4).text()).toBe('Français')
})
})
describe('language menu', () => {
beforeAll(async () => {
wrapper.vm.$store.state.language = 'en'
wrapper.vm.setCurrentLanguage()
await wrapper.vm.$nextTick()
store.state.language = 'en'
await wrapper.vm.setCurrentLanguage()
})
it('has five languages to choose from', () => {
expect(wrapper.findAll('span.locales')).toHaveLength(5)
})
it('has English as first language to choose', () => {
expect(wrapper.findAll('span.locales').at(0).text()).toBe('English')
})
it('has Deutsch as second language to choose', () => {
expect(wrapper.findAll('span.locales').at(1).text()).toBe('Deutsch')
})
it('has Español as third language to choose', () => {
expect(wrapper.findAll('span.locales').at(2).text()).toBe('Español')
})
it('has Français as fourth language to choose', () => {
expect(wrapper.findAll('span.locales').at(3).text()).toBe('Français')
})
it('has Nederlands as fifth language to choose', () => {
expect(wrapper.findAll('span.locales').at(4).text()).toBe('Nederlands')
expect(wrapper.findAll('span.locales').length).toBe(5)
})
})
})
describe('calls the API', () => {
it("with locale 'de'", () => {
wrapper.findAll('span.locales').at(1).trigger('click')
expect(updateUserInfosMutationMock).toBeCalledWith(
expect.objectContaining({ variables: { locale: 'de' } }),
)
it("with locale 'de'", async () => {
await wrapper.findAll('span.locales').at(1).trigger('click')
await vi.waitFor(() => {
expect(updateUserInfosMutationMock).toHaveBeenCalledWith({ locale: 'de' })
})
})
it("with locale 'es'", () => {
wrapper.findAll('span.locales').at(2).trigger('click')
expect(updateUserInfosMutationMock).toBeCalledWith(
expect.objectContaining({ variables: { locale: 'es' } }),
)
it("with locale 'es'", async () => {
await wrapper.findAll('span.locales').at(2).trigger('click')
await vi.waitFor(() => {
expect(updateUserInfosMutationMock).toHaveBeenCalledWith({ locale: 'es' })
})
})
it("with locale 'fr'", () => {
wrapper.findAll('span.locales').at(3).trigger('click')
expect(updateUserInfosMutationMock).toBeCalledWith(
expect.objectContaining({ variables: { locale: 'fr' } }),
)
it("with locale 'fr'", async () => {
await wrapper.findAll('span.locales').at(3).trigger('click')
await vi.waitFor(() => {
expect(updateUserInfosMutationMock).toHaveBeenCalledWith({ locale: 'fr' })
})
})
it("with locale 'nl'", () => {
wrapper.findAll('span.locales').at(4).trigger('click')
expect(updateUserInfosMutationMock).toBeCalledWith(
expect.objectContaining({ variables: { locale: 'nl' } }),
)
it("with locale 'nl'", async () => {
await wrapper.findAll('span.locales').at(4).trigger('click')
await vi.waitFor(() => {
expect(updateUserInfosMutationMock).toHaveBeenCalledWith({ locale: 'nl' })
})
})
})
})

132
frontend/src/components/Menu/Navbar.spec.js
View File

@ -1,75 +1,93 @@
import { mount } from '@vue/test-utils'
import VueRouter from 'vue-router'
import AuthNavbar from './Navbar'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import { createRouter, createWebHistory, RouterLink } from 'vue-router'
import { createStore } from 'vuex'
import Navbar from './Navbar.vue'
import { BImg, BNavbar, BNavbarBrand, BNavbarNav } from 'bootstrap-vue-next'
const localVue = global.localVue
localVue.use(VueRouter)
const router = new VueRouter()
const propsData = {
balance: 1234,
}
const mocks = {
$i18n: {
locale: 'en',
// Mock vue-avatar
vi.mock('vue-avatar', () => ({
default: {
name: 'Avatar',
render: () => null,
props: {
initials: null,
},
},
$t: jest.fn((t) => t),
$store: {
state: {
}))
const createVuexStore = (state = {}) =>
createStore({
state: () => ({
firstName: 'Testy',
lastName: 'User',
gradidoID: 'current-user-id',
},
},
}
email: 'test@example.com',
...state,
}),
})
describe('AuthNavbar', () => {
const router = createRouter({
history: createWebHistory(),
routes: [],
})
describe('Navbar', () => {
let wrapper
let store
const Wrapper = () => {
return mount(AuthNavbar, { localVue, router, propsData, mocks })
const mountComponent = (storeState = {}) => {
store = createVuexStore(storeState)
return mount(Navbar, {
global: {
plugins: [store, router],
mocks: {
$t: (msg) => msg,
},
components: {
BNavbar,
BNavbarNav,
BNavbarBrand,
BImg,
RouterLink,
},
},
props: {
balance: 1234,
},
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
beforeEach(() => {
wrapper = mountComponent()
})
it('renders the component', () => {
expect(wrapper.find('div.navbar-component').exists()).toBe(true)
})
it('has a .navbar-brand element', () => {
expect(wrapper.find('div.navbar-brand').exists()).toBe(true)
})
describe('.avatar element', () => {
it('is rendered', () => {
expect(wrapper.findComponent({ name: 'Avatar' }).exists()).toBe(true)
})
it('renders the component', () => {
expect(wrapper.find('div.navbar-component').exists()).toBeTruthy()
it("has the user's initials", () => {
const avatar = wrapper.findComponent({ name: 'Avatar' })
expect(avatar.props('initials')).toBe('TU')
})
})
describe('user info', () => {
it('has the full name', () => {
expect(wrapper.find('div[data-test="navbar-item-username"]').text()).toBe('Testy User')
})
it('has a .navbar-brand element', () => {
expect(wrapper.find('div.navbar-brand').exists()).toBeTruthy()
})
describe('.avatar element', () => {
it('is rendered', () => {
expect(wrapper.find('div.vue-avatar--wrapper').exists()).toBeTruthy()
})
it("has the user's initials", () => {
expect(wrapper.find('.vue-avatar--wrapper').text()).toBe(
`${wrapper.vm.$store.state.firstName[0]}${wrapper.vm.$store.state.lastName[0]}`,
)
})
})
describe('user info', () => {
it('has the full name', () => {
expect(wrapper.find('div[data-test="navbar-item-username"]').text()).toBe(
`${wrapper.vm.$store.state.firstName} ${wrapper.vm.$store.state.lastName}`,
)
})
// I think this should be username
it.skip('has the email address', () => {
expect(wrapper.find('div[data-test="navbar-item-email"]').text()).toBe(
wrapper.vm.$store.state.email,
)
})
it('has the email address', () => {
expect(wrapper.find('div[data-test="navbar-item-email"]').text()).toBe('test@example.com')
})
})
})

139
frontend/src/components/Menu/Sidebar.spec.js
View File

@ -1,38 +1,85 @@
import { mount } from '@vue/test-utils'
import Sidebar from './Sidebar'
import { describe, it, expect, beforeEach, beforeAll, vi } from 'vitest'
import Sidebar from './Sidebar.vue'
import { createStore } from 'vuex'
import { createI18n } from 'vue-i18n'
import CONFIG from '../../config'
import { BBadge, BImg, BNav, BNavItem } from 'bootstrap-vue-next'
const localVue = global.localVue
// Mock vue-router
vi.mock('vue-router', () => ({
useRoute: vi.fn(() => ({
path: '/',
})),
}))
// Mock Apollo
vi.mock('@vue/apollo-composable', () => ({
useQuery: vi.fn(),
useResult: vi.fn(),
}))
// Mock i18n
const i18n = createI18n({
legacy: false,
locale: 'en',
messages: {
en: {
navigation: {
overview: 'Overview',
send: 'Send',
transactions: 'Transactions',
info: 'Info',
circles: 'Circles',
usersearch: 'User Search',
settings: 'Settings',
admin_area: 'Admin Area',
logout: 'Logout',
},
creation: 'Creation',
},
},
})
// Mock Vuex store
const createVuexStore = (state = {}) =>
createStore({
state: () => ({
hasElopage: true,
roles: [],
...state,
}),
getters: {
isAdmin: (state) => state.roles.includes('admin'),
},
})
CONFIG.GMS_ACTIVE = 'true'
CONFIG.HUMHUB_ACTIVE = 'true'
describe('Sidebar', () => {
let wrapper
let store
const mocks = {
$i18n: {
locale: 'en',
},
$t: jest.fn((t) => t),
$store: {
state: {
hasElopage: true,
roles: [],
const mountComponent = (storeState = {}) => {
store = createVuexStore(storeState)
return mount(Sidebar, {
global: {
plugins: [store, i18n],
stubs: ['router-link', 'i-bi-cash'],
components: {
BNav,
BBadge,
BNavItem,
BImg,
},
},
},
$route: {
path: '/',
},
}
const Wrapper = () => {
return mount(Sidebar, { localVue, mocks })
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
wrapper = mountComponent()
})
it('renders the component', () => {
@ -41,83 +88,79 @@ describe('Sidebar', () => {
describe('the general section', () => {
it('has seven nav-items', () => {
expect(wrapper.findAll('ul').at(0).findAll('.nav-item')).toHaveLength(7)
const generalSection = wrapper.findAll('ul')[0]
expect(generalSection.findAll('.nav-item')).toHaveLength(7)
})
it('has nav-item "navigation.overview" in navbar', () => {
expect(wrapper.findAll('.nav-item').at(0).text()).toEqual('navigation.overview')
expect(wrapper.findAll('.nav-item').at(0).text()).toContain('Overview')
})
it('has nav-item "navigation.send" in navbar', () => {
expect(wrapper.findAll('.nav-item').at(1).text()).toEqual('navigation.send')
expect(wrapper.findAll('.nav-item').at(1).text()).toContain('Send')
})
it('has nav-item "navigation.transactions" in navbar', () => {
expect(wrapper.findAll('.nav-item').at(2).text()).toEqual('navigation.transactions')
expect(wrapper.findAll('.nav-item').at(2).text()).toContain('Transactions')
})
it('has nav-item "creation" in navbar', () => {
expect(wrapper.findAll('.nav-item').at(3).text()).toEqual('creation')
expect(wrapper.findAll('.nav-item').at(3).text()).toContain('Creation')
})
it('has nav-item "navigation.info" in navbar', () => {
expect(wrapper.findAll('.nav-item').at(4).text()).toContain('navigation.info')
expect(wrapper.findAll('.nav-item').at(4).text()).toContain('Info')
})
it('has nav-item "navigation.circles" in navbar', () => {
expect(wrapper.findAll('.nav-item').at(5).text()).toContain('navigation.circles')
expect(wrapper.findAll('.nav-item').at(5).text()).toContain('Circles')
})
it('has nav-item "navigation.usersearch" in navbar', () => {
expect(wrapper.findAll('.nav-item').at(6).text()).toContain('navigation.usersearch')
expect(wrapper.findAll('.nav-item').at(6).text()).toContain('User Search')
})
})
describe('the specific section', () => {
describe('for standard users', () => {
beforeEach(() => {
wrapper = mountComponent({ roles: [] })
})
it('has two nav-items', () => {
expect(wrapper.findAll('ul').at(1).findAll('.nav-item')).toHaveLength(2)
expect(wrapper.findAll('.nav-item').slice(7)).toHaveLength(2)
})
it('has nav-item "navigation.settings" in navbar', () => {
expect(wrapper.find('[data-test="settings-menu"]').find('span').text()).toBe(
'navigation.settings',
)
expect(wrapper.find('[data-test="settings-menu"]').text()).toContain('Settings')
})
it('has nav-item "navigation.logout" in navbar', () => {
expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(1).text()).toEqual(
'navigation.logout',
)
expect(wrapper.find('[data-test="logout-menu"]').text()).toContain('Logout')
})
})
describe('for admin users', () => {
beforeAll(() => {
mocks.$store.state.roles = ['admin']
wrapper = Wrapper()
beforeEach(() => {
wrapper = mountComponent({ roles: ['admin'] })
})
it('has three nav-items', () => {
expect(wrapper.findAll('ul').at(1).findAll('.nav-item')).toHaveLength(3)
expect(wrapper.findAll('.nav-item').slice(7)).toHaveLength(3)
})
it('has nav-item "navigation.settings" in navbar', () => {
expect(wrapper.find('[data-test="settings-menu"]').find('span').text()).toBe(
'navigation.settings',
)
expect(wrapper.find('[data-test="settings-menu"]').text()).toContain('Settings')
})
it('has nav-item "navigation.admin_area" in navbar', () => {
expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(1).text()).toEqual(
'navigation.admin_area',
)
const adminItems = wrapper.findAll('.nav-item').slice(7)
expect(adminItems.length).toBeGreaterThan(1)
expect(adminItems[1].text()).toContain('Admin Area')
})
it('has nav-item "navigation.logout" in navbar', () => {
expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(2).text()).toEqual(
'navigation.logout',
)
expect(wrapper.find('[data-test="logout-menu"]').text()).toContain('Logout')
})
})
})

Some files were not shown because too many files have changed in this diff Show More