IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

merge with master and fix store and tests in store

Browse Source
This commit is contained in:
Moriz Wahl 2021-10-07 14:15:39 +02:00
commit 6d3fd9cc75
41 changed files with 845 additions and 120 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/test.yml vendored
View File

@ -344,7 +344,7 @@ jobs:
report_name: Coverage Frontend
type: lcov
result_path: ./coverage/lcov.info
min_coverage: 73
min_coverage: 75
token: ${{ github.token }}
##############################################################################

6
backend/.env.dist
View File

@ -14,4 +14,8 @@ DB_DATABASE=gradido_community
#KLICKTIPP_PASSWORD=
#KLICKTIPP_APIKEY_DE=
#KLICKTIPP_APIKEY_EN=
#KLICKTIPP=true
#KLICKTIPP=true
COMMUNITY_NAME=
COMMUNITY_URL=
COMMUNITY_REGISTER_URL=
COMMUNITY_DESCRIPTION=

10
backend/src/config/index.ts
View File

@ -30,9 +30,17 @@ const klicktipp = {
KLICKTIPP_APIKEY_EN: process.env.KLICKTIPP_APIKEY_EN || 'SomeFakeKeyEN',
}
const community = {
COMMUNITY_NAME: process.env.COMMUNITY_NAME || 'Gradido Entwicklung',
COMMUNITY_URL: process.env.COMMUNITY_URL || 'http://localhost/vue/',
COMMUNITY_REGISTER_URL: process.env.COMMUNITY_REGISTER_URL || 'http://localhost/vue/register',
COMMUNITY_DESCRIPTION:
process.env.COMMUNITY_DESCRIPTION || 'Die lokale Entwicklungsumgebung von Gradido.',
}
// This is needed by graphql-directive-auth
process.env.APP_SECRET = server.JWT_SECRET
const CONFIG = { ...server, ...database, ...klicktipp }
const CONFIG = { ...server, ...database, ...klicktipp, ...community }
export default CONFIG

31
backend/src/graphql/model/Community.ts Normal file
View File

@ -0,0 +1,31 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { ObjectType, Field } from 'type-graphql'
@ObjectType()
export class Community {
constructor(json?: any) {
if (json) {
this.id = Number(json.id)
this.name = json.name
this.url = json.url
this.description = json.description
this.registerUrl = json.registerUrl
}
}
@Field(() => Number)
id: number
@Field(() => String)
name: string
@Field(() => String)
url: string
@Field(() => String)
description: string
@Field(() => String)
registerUrl: string
}

49
backend/src/graphql/resolver/CommunityResolver.ts Normal file
View File

@ -0,0 +1,49 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
import { Resolver, Query } from 'type-graphql'
import CONFIG from '../../config'
import { Community } from '../model/Community'
@Resolver()
export class CommunityResolver {
@Query(() => Community)
async getCommunityInfo(): Promise<Community> {
return new Community({
name: CONFIG.COMMUNITY_NAME,
description: CONFIG.COMMUNITY_DESCRIPTION,
url: CONFIG.COMMUNITY_URL,
registerUrl: CONFIG.COMMUNITY_REGISTER_URL,
})
}
@Query(() => [Community])
async communities(): Promise<Community[]> {
const communities: Community[] = []
communities.push(
new Community({
id: 1,
name: 'Gradido Entwicklung',
description: 'Die lokale Entwicklungsumgebung von Gradido.',
url: 'http://localhost/vue/',
registerUrl: 'http://localhost/vue/register-community',
}),
new Community({
id: 2,
name: 'Gradido Staging',
description: 'Der Testserver der Gradido-Akademie.',
url: 'https://stage1.gradido.net/vue/',
registerUrl: 'https://stage1.gradido.net/vue/register-community',
}),
new Community({
id: 3,
name: 'Gradido-Akademie',
description: 'Freies Institut für Wirtschaftsbionik.',
url: 'https://gradido.net',
registerUrl: 'https://gdd1.gradido.com/vue/register-community',
}),
)
return communities
}
}

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

@ -122,7 +122,6 @@ describe('LanguageSwitch', () => {
expect(updateUserInfosMutationMock).toBeCalledWith(
expect.objectContaining({
variables: {
email: 'he@ho.he',
locale: 'en',
},
}),
@ -134,7 +133,6 @@ describe('LanguageSwitch', () => {
expect(updateUserInfosMutationMock).toBeCalledWith(
expect.objectContaining({
variables: {
email: 'he@ho.he',
locale: 'de',
},
}),

1
frontend/src/components/LanguageSwitch.vue
View File

@ -39,7 +39,6 @@ export default {
.mutate({
mutation: updateUserInfos,
variables: {
email: this.$store.state.email,
locale: locale,
},
})

4
frontend/src/components/LanguageSwitchSelect.vue
View File

@ -14,8 +14,8 @@ export default {
return {
selected: null,
options: [
{ value: 'de', text: this.$t('languages.de') },
{ value: 'en', text: this.$t('languages.en') },
{ value: 'de', text: this.$t('settings.language.de') },
{ value: 'en', text: this.$t('settings.language.en') },
],
}
},

0
frontend/src/directives/click-ouside.js → frontend/src/directives/click-ouside.js.unused
View File

23
frontend/src/graphql/queries.js
View File

@ -105,3 +105,26 @@ export const checkEmailQuery = gql`
}
}
`
export const communityInfo = gql`
query {
getCommunityInfo {
name
description
registerUrl
url
}
}
`
export const communities = gql`
query {
communities {
id
name
url
description
registerUrl
}
}
`

27
frontend/src/locales/de.json
View File

@ -1,14 +1,22 @@
{
"back": "Zurück",
"community": "Gemeinschaft",
"communitys": {
"form": {
"date_period": "Datum / Zeitraum",
"hours": "Stunden",
"hours_report": "Stundenbericht",
"more_hours": "weitere Stunden",
"submit": "Einreichen"
}
"community": {
"choose-another-community": "Eine andere Gemeinschaft auswählen",
"communities": {
"form": {
"date_period": "Datum / Zeitraum",
"hours": "Stunden",
"hours_report": "Stundenbericht",
"more_hours": "weitere Stunden",
"submit": "Einreichen"
}
},
"community": "Gemeinschaft",
"continue-to-registration": "Weiter zur Registrierung",
"current-community": "Aktuelle Gemeinschaft",
"location": "Ort:",
"other-communities": "Weitere Gemeinschaften",
"switch-to-this-community": "zu dieser Gemeinschaft wechseln"
},
"decay": {
"calculation_decay": "Berechnung der Vergänglichkeit",
@ -19,7 +27,6 @@
"decayStart": " - Startblock für Vergänglichkeit am: ",
"decay_introduced": "Die Vergänglichkeit wurde Eingeführt am ",
"decay_since_last_transaction": "Vergänglichkeit seit der letzten Transaktion",
"fromCommunity": "Aus der Gemeinschaft",
"hours": "Stunden",
"last_transaction": "Letzte Transaktion",
"minutes": "Minuten",

27
frontend/src/locales/en.json
View File

@ -1,14 +1,22 @@
{
"back": "Back",
"community": "Community",
"communitys": {
"form": {
"date_period": "Date / Period",
"hours": "hours",
"hours_report": "Hourly report",
"more_hours": "more hours",
"submit": "submit"
}
"community": {
"choose-another-community": "Choose another community",
"communities": {
"form": {
"date_period": "Date / Period",
"hours": "hours",
"hours_report": "Hourly report",
"more_hours": "more hours",
"submit": "submit"
}
},
"community": "Community",
"continue-to-registration": "Continue to registration",
"current-community": "Current community",
"location": "Location:",
"other-communities": "Other communities",
"switch-to-this-community": "switch to this community"
},
"decay": {
"calculation_decay": "Calculation of Decay",
@ -19,7 +27,6 @@
"decayStart": " - Starting block for decay at: ",
"decay_introduced": "Decay was Introduced on",
"decay_since_last_transaction": "Decay since the last transaction",
"fromCommunity": "From the community",
"hours": "Hours",
"last_transaction": "Last transaction:",
"minutes": "Minutes",

4
frontend/src/plugins/globalDirectives.js
View File

@ -1,4 +1,4 @@
import clickOutside from '@/directives/click-ouside.js'
// import clickOutside from '@/directives/click-ouside.js'
import { focus } from 'vue-focus'
/**
@ -7,7 +7,7 @@ import { focus } from 'vue-focus'
const GlobalDirectives = {
install(Vue) {
Vue.directive('click-outside', clickOutside)
// Vue.directive('click-outside', clickOutside)
Vue.directive('focus', focus)
},
}

4
frontend/src/routes/router.test.js
View File

@ -55,8 +55,8 @@ describe('router', () => {
expect(routes.find((r) => r.path === '/').redirect()).toEqual({ path: '/login' })
})
it('has ten routes defined', () => {
expect(routes).toHaveLength(10)
it('has twelve routes defined', () => {
expect(routes).toHaveLength(12)
})
describe('overview', () => {

10
frontend/src/routes/routes.js
View File

@ -36,7 +36,7 @@ const routes = [
path: '/thx/:comingFrom',
component: () => import('../views/Pages/thx.vue'),
beforeEnter: (to, from, next) => {
const validFrom = ['password', 'reset', 'register']
const validFrom = ['password', 'reset', 'register', 'community']
if (!validFrom.includes(from.path.split('/')[1])) {
next({ path: '/login' })
} else {
@ -48,6 +48,14 @@ const routes = [
path: '/password',
component: () => import('../views/Pages/ForgotPassword.vue'),
},
{
path: '/register-community',
component: () => import('../views/Pages/RegisterCommunity.vue'),
},
{
path: '/select-community',
component: () => import('../views/Pages/RegisterSelectCommunity.vue'),
},
{
path: '/reset/:optin',
component: () => import('../views/Pages/ResetPassword.vue'),

9
frontend/src/store/store.js
View File

@ -32,6 +32,12 @@ export const mutations = {
publisherId: (state, publisherId) => {
state.publisherId = publisherId
},
community: (state, community) => {
state.community = community
},
coinanimation: (state, coinanimation) => {
state.coinanimation = coinanimation
},
}
export const actions = {
@ -42,6 +48,7 @@ export const actions = {
commit('firstName', data.firstName)
commit('lastName', data.lastName)
commit('description', data.description)
commit('coinanimation', data.coinanimation)
commit('newsletterState', data.klickTipp.newsletterState)
},
logout: ({ commit, state }) => {
@ -51,6 +58,7 @@ export const actions = {
commit('firstName', '')
commit('lastName', '')
commit('description', '')
commit('coinanimation', true)
commit('newsletterState', null)
localStorage.clear()
},
@ -72,6 +80,7 @@ export const store = new Vuex.Store({
token: null,
coinanimation: true,
newsletterState: null,
community: null,
},
getters: {},
// Syncronous mutation of the state

51
frontend/src/store/store.test.js
View File

@ -8,8 +8,10 @@ const {
firstName,
lastName,
description,
coinanimation,
newsletterState,
publisherId,
community,
} = mutations
const { login, logout } = actions
@ -71,6 +73,14 @@ describe('Vuex store', () => {
})
})
describe('coinanimation', () => {
it('sets the state of coinanimation', () => {
const state = { coinanimation: true }
coinanimation(state, false)
expect(state.coinanimation).toEqual(false)
})
})
describe('newsletterState', () => {
it('sets the state of newsletterState', () => {
const state = { newsletterState: null }
@ -86,6 +96,24 @@ describe('Vuex store', () => {
expect(state.publisherId).toEqual(42)
})
})
describe('community', () => {
it('sets the state of community', () => {
const state = {}
community(state, {
name: 'test12',
description: 'test community 12',
url: 'http://test12.test12/',
registerUrl: 'http://test12.test12/vue/register',
})
expect(state.community).toEqual({
name: 'test12',
description: 'test community 12',
url: 'http://test12.test12/',
registerUrl: 'http://test12.test12/vue/register',
})
})
})
})
describe('actions', () => {
@ -99,14 +127,15 @@ describe('Vuex store', () => {
firstName: 'Peter',
lastName: 'Lustig',
description: 'Nickelbrille',
coinanimation: false,
klickTipp: {
newsletterState: true,
},
}
it('calls seven commits', () => {
it('calls eight commits', () => {
login({ commit, state }, commitedData)
expect(commit).toHaveBeenCalledTimes(7)
expect(commit).toHaveBeenCalledTimes(8)
})
it('commits email', () => {
@ -139,9 +168,14 @@ describe('Vuex store', () => {
expect(commit).toHaveBeenNthCalledWith(6, 'description', 'Nickelbrille')
})
it('commits coinanimation', () => {
login({ commit, state }, commitedData)
expect(commit).toHaveBeenNthCalledWith(7, 'coinanimation', false)
})
it('commits newsletterState', () => {
login({ commit, state }, commitedData)
expect(commit).toHaveBeenNthCalledWith(7, 'newsletterState', true)
expect(commit).toHaveBeenNthCalledWith(8, 'newsletterState', true)
})
})
@ -149,9 +183,9 @@ describe('Vuex store', () => {
const commit = jest.fn()
const state = {}
it('calls six commits', () => {
it('calls eight commits', () => {
logout({ commit, state })
expect(commit).toHaveBeenCalledTimes(7)
expect(commit).toHaveBeenCalledTimes(8)
})
it('commits token', () => {
@ -184,9 +218,14 @@ describe('Vuex store', () => {
expect(commit).toHaveBeenNthCalledWith(6, 'description', '')
})
it('commits coinanimation', () => {
logout({ commit, state })
expect(commit).toHaveBeenNthCalledWith(7, 'coinanimation', true)
})
it('commits newsletterState', () => {
logout({ commit, state })
expect(commit).toHaveBeenNthCalledWith(7, 'newsletterState', null)
expect(commit).toHaveBeenNthCalledWith(8, 'newsletterState', null)
})
// how to get this working?

18
frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js
View File

@ -67,12 +67,13 @@ describe('GddSend', () => {
it('trims the email after blur', async () => {
await wrapper.find('#input-group-1').find('input').setValue(' valid@email.com ')
await wrapper.find('#input-group-1').find('input').trigger('blur')
await flushPromises()
expect(wrapper.vm.form.email).toBe('valid@email.com')
})
})
describe('ammount field', () => {
describe('amount field', () => {
it('has an input field of type text', () => {
expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('text')
})
@ -91,6 +92,13 @@ describe('GddSend', () => {
)
})
it('does not update form amount when invalid', async () => {
await wrapper.find('#input-group-2').find('input').setValue('invalid')
await wrapper.find('#input-group-2').find('input').trigger('blur')
await flushPromises()
expect(wrapper.vm.form.amountValue).toBe(0)
})
it('flushes an error message when no valid amount is given', async () => {
await wrapper.find('#input-group-2').find('input').setValue('a')
await flushPromises()
@ -150,11 +158,11 @@ describe('GddSend', () => {
it('clears all fields on click', async () => {
await wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv')
await wrapper.find('#input-group-2').find('input').setValue('87.23')
await wrapper.find('#input-group-3').find('textarea').setValue('Long enugh')
await wrapper.find('#input-group-3').find('textarea').setValue('Long enough')
await flushPromises()
expect(wrapper.vm.form.email).toBe('someone@watches.tv')
expect(wrapper.vm.form.amount).toBe('87.23')
expect(wrapper.vm.form.memo).toBe('Long enugh')
expect(wrapper.vm.form.memo).toBe('Long enough')
await wrapper.find('button[type="reset"]').trigger('click')
await flushPromises()
expect(wrapper.vm.form.email).toBe('')
@ -167,7 +175,7 @@ describe('GddSend', () => {
beforeEach(async () => {
await wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv')
await wrapper.find('#input-group-2').find('input').setValue('87.23')
await wrapper.find('#input-group-3').find('textarea').setValue('Long enugh')
await wrapper.find('#input-group-3').find('textarea').setValue('Long enough')
await wrapper.find('form').trigger('submit')
await flushPromises()
})
@ -179,7 +187,7 @@ describe('GddSend', () => {
{
email: 'someone@watches.tv',
amount: 87.23,
memo: 'Long enugh',
memo: 'Long enough',
},
],
])

72
frontend/src/views/Pages/Login.spec.js
View File

@ -4,14 +4,20 @@ import Login from './Login'
const localVue = global.localVue
const loginQueryMock = jest.fn().mockResolvedValue({
const apolloQueryMock = jest.fn().mockResolvedValue({
data: {
login: 'token',
getCommunityInfo: {
name: 'test12',
description: 'test community 12',
url: 'http://test12.test12/',
registerUrl: 'http://test12.test12/vue/register',
},
},
})
const toastErrorMock = jest.fn()
const mockStoreDispach = jest.fn()
const mockStoreCommit = jest.fn()
const mockRouterPush = jest.fn()
const spinnerHideMock = jest.fn()
const spinnerMock = jest.fn(() => {
@ -30,6 +36,15 @@ describe('Login', () => {
$t: jest.fn((t) => t),
$store: {
dispatch: mockStoreDispach,
commit: mockStoreCommit,
state: {
community: {
name: 'Gradido Entwicklung',
url: 'http://localhost/vue/',
registerUrl: 'http://localhost/vue/register',
description: 'Die lokale Entwicklungsumgebung von Gradido.',
},
},
},
$loading: {
show: spinnerMock,
@ -41,7 +56,7 @@ describe('Login', () => {
error: toastErrorMock,
},
$apollo: {
query: loginQueryMock,
query: apolloQueryMock,
},
}
@ -62,20 +77,54 @@ describe('Login', () => {
expect(wrapper.find('div.login-form').exists()).toBeTruthy()
})
it('commits the community info to the store', () => {
expect(mockStoreCommit).toBeCalledWith('community', {
name: 'test12',
description: 'test community 12',
url: 'http://test12.test12/',
registerUrl: 'http://test12.test12/vue/register',
})
})
describe('communities gives back error', () => {
beforeEach(() => {
apolloQueryMock.mockRejectedValue({
message: 'Failed to get communities',
})
wrapper = Wrapper()
})
it('toasts an error message', () => {
expect(toastErrorMock).toBeCalledWith('Failed to get communities')
})
})
describe('Login header', () => {
it('has a welcome message', () => {
expect(wrapper.find('div.header').text()).toBe('Gradido site.login.community')
})
})
describe('Community Data', () => {
it('has a Community name', () => {
expect(wrapper.find('.test-communitydata b').text()).toBe('Gradido Entwicklung')
})
it('has a Community description', () => {
expect(wrapper.find('.test-communitydata p').text()).toBe(
'Die lokale Entwicklungsumgebung von Gradido.',
)
})
})
describe('links', () => {
it('has a link "Forgot Password?"', () => {
it('has a link "Forgot Password"', () => {
expect(wrapper.findAllComponents(RouterLinkStub).at(0).text()).toEqual(
'settings.password.forgot_pwd',
)
})
it('links to /password when clicking "Forgot Password?"', () => {
it('links to /password when clicking "Forgot Password"', () => {
expect(wrapper.findAllComponents(RouterLinkStub).at(0).props().to).toBe('/password')
})
@ -86,7 +135,9 @@ describe('Login', () => {
})
it('links to /register when clicking "Create new account"', () => {
expect(wrapper.findAllComponents(RouterLinkStub).at(1).props().to).toBe('/register')
expect(wrapper.findAllComponents(RouterLinkStub).at(1).props().to).toBe(
'/register-community',
)
})
})
@ -135,10 +186,15 @@ describe('Login', () => {
await flushPromises()
await wrapper.find('form').trigger('submit')
await flushPromises()
apolloQueryMock.mockResolvedValue({
data: {
login: 'token',
},
})
})
it('calls the API with the given data', () => {
expect(loginQueryMock).toBeCalledWith(
expect(apolloQueryMock).toBeCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
@ -168,7 +224,7 @@ describe('Login', () => {
describe('login fails', () => {
beforeEach(() => {
loginQueryMock.mockRejectedValue({
apolloQueryMock.mockRejectedValue({
message: 'Ouch!',
})
})

38
frontend/src/views/Pages/Login.vue
View File

@ -18,9 +18,14 @@
<b-col lg="5" md="7">
<b-card no-body class="border-0 mb-0" style="background-color: #ebebeba3 !important">
<b-card-body class="p-4">
<div class="text-center text-muted mb-4">
<small>{{ $t('login') }}</small>
<div class="text-center text-muted mb-4 test-communitydata">
<b>{{ $store.state.community.name }}</b>
<p class="text-lead">
{{ $store.state.community.description }}
</p>
{{ $t('login') }}
</div>
<validation-observer ref="observer" v-slot="{ handleSubmit }">
<b-form @submit.stop.prevent="handleSubmit(onSubmit)">
<input-email v-model="form.email"></input-email>
@ -38,13 +43,17 @@
</b-card-body>
</b-card>
<b-row class="mt-3">
<b-col cols="6">
<router-link to="/password">
<b-col cols="6" class="text-center text-sm-left col-12 col-sm-6 pb-5">
<router-link to="/password" class="mt-3">
{{ $t('settings.password.forgot_pwd') }}
</router-link>
</b-col>
<b-col cols="6" class="text-right" v-show="allowRegister">
<router-link to="/register">
<b-col
cols="6"
class="text-center text-sm-right col-12 col-sm-6"
v-show="allowRegister"
>
<router-link to="/register-community" class="mt-3">
{{ $t('site.login.new_wallet') }}
</router-link>
</b-col>
@ -58,7 +67,7 @@
import CONFIG from '../../config'
import InputPassword from '../../components/Inputs/InputPassword'
import InputEmail from '../../components/Inputs/InputEmail'
import { login } from '../../graphql/queries'
import { login, communityInfo } from '../../graphql/queries'
export default {
name: 'login',
@ -103,6 +112,21 @@ export default {
this.$toasted.error(this.$t('error.no-account'))
})
},
async onCreated() {
this.$apollo
.query({
query: communityInfo,
})
.then((result) => {
this.$store.commit('community', result.data.getCommunityInfo)
})
.catch((error) => {
this.$toasted.error(error.message)
})
},
},
created() {
this.onCreated()
},
}
</script>

30
frontend/src/views/Pages/Register.spec.js
View File

@ -26,6 +26,12 @@ describe('Register', () => {
state: {
email: 'peter@lustig.de',
language: 'en',
community: {
name: 'Gradido Entwicklung',
url: 'http://localhost/vue/',
registerUrl: 'http://localhost/vue/register',
description: 'Die lokale Entwicklungsumgebung von Gradido.',
},
},
},
}
@ -53,6 +59,18 @@ describe('Register', () => {
})
})
describe('Community Data', () => {
it('has a Community name?', () => {
expect(wrapper.find('.test-communitydata b').text()).toBe('Gradido Entwicklung')
})
it('has a Community description?', () => {
expect(wrapper.find('.test-communitydata p').text()).toBe(
'Die lokale Entwicklungsumgebung von Gradido.',
)
})
})
describe('links', () => {
it('has a link "Back"', () => {
expect(wrapper.find('.test-button-back').text()).toEqual('back')
@ -127,6 +145,18 @@ describe('Register', () => {
})
})
describe('link Choose another community', () => {
it('has a link "Choose another community"', () => {
expect(wrapper.find('.test-button-another-community').text()).toEqual(
'community.choose-another-community',
)
})
it('links to /select-community when clicking "Choose another community"', () => {
expect(wrapper.find('.test-button-another-community').props().to).toBe('/select-community')
})
})
describe('API calls', () => {
beforeEach(() => {
wrapper.find('#registerFirstname').setValue('Max')

26
frontend/src/views/Pages/Register.vue
View File

@ -13,15 +13,21 @@
</div>
</b-container>
</div>
<!-- Page content -->
<b-container class="mt--8 p-1">
<!-- Table -->
<b-row class="justify-content-center">
<b-col lg="6" md="8">
<b-card no-body class="border-0" style="background-color: #ebebeba3 !important">
<b-card-body class="p-4">
<div class="text-center text-muted mb-4">
<small>{{ $t('signup') }}</small>
<div class="text-center text-muted mb-4 test-communitydata">
<b>{{ $store.state.community.name }}</b>
<p class="text-lead">
{{ $store.state.community.description }}
</p>
<div>{{ $t('signup') }}</div>
</div>
<validation-observer ref="observer" v-slot="{ handleSubmit }">
@ -118,12 +124,12 @@
<div class="text-center">
<div class="text-center">
<b-button class="ml-2 test-button-back" to="/login">
<b-button class="test-button-back" variant="outline-secondary" to="/login">
{{ $t('back') }}
</b-button>
<b-button
:disabled="!(namesFilled && emailFilled && form.agree && languageFilled)"
:disabled="!(namesFilled && emailFilled && form.agree && !!language)"
type="submit"
variant="primary"
>
@ -138,6 +144,15 @@
</b-col>
</b-row>
</b-container>
<div class="text-center pt-4">
<b-button
class="test-button-another-community"
variant="outline-secondary"
to="/select-community"
>
{{ $t('community.choose-another-community') }}
</b-button>
</div>
</div>
</template>
<script>
@ -224,9 +239,6 @@ export default {
emailFilled() {
return this.form.email !== ''
},
languageFilled() {
return !!this.language
},
},
}
</script>

78
frontend/src/views/Pages/RegisterCommunity.spec.js Normal file
View File

@ -0,0 +1,78 @@
import { mount } from '@vue/test-utils'
import RegisterCommunity from './RegisterCommunity'
const localVue = global.localVue
describe('RegisterCommunity', () => {
let wrapper
const mocks = {
$i18n: {
locale: 'en',
},
$t: jest.fn((t) => t),
$store: {
state: {
community: {
name: 'Gradido Entwicklung',
url: 'http://localhost/vue/',
registerUrl: 'http://localhost/vue/register',
description: 'Die lokale Entwicklungsumgebung von Gradido.',
},
},
},
}
const Wrapper = () => {
return mount(RegisterCommunity, { localVue, mocks })
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('renders the Div Element "#register-community"', () => {
expect(wrapper.find('div#register-community').exists()).toBeTruthy()
})
describe('Displaying the current community info', () => {
it('has a current community name', () => {
expect(wrapper.find('.header h1').text()).toBe('Gradido Entwicklung')
})
it('has a current community description', () => {
expect(wrapper.find('.header p').text()).toBe(
'Die lokale Entwicklungsumgebung von Gradido.',
)
})
it('has a current community location', () => {
expect(wrapper.find('.header p.community-location').text()).toBe('http://localhost/vue/')
})
})
describe('buttons and links', () => {
it('has a button "Continue to registration?"', () => {
expect(wrapper.findAll('a').at(0).text()).toEqual('community.continue-to-registration')
})
it('button links to /register when clicking "Continue to registration"', () => {
expect(wrapper.findAll('a').at(0).props().to).toBe('/register')
})
it('has a button "Choose another community?"', () => {
expect(wrapper.findAll('a').at(1).text()).toEqual('community.choose-another-community')
})
it('button links to /select-community when clicking "Choose another community"', () => {
expect(wrapper.findAll('a').at(1).props().to).toBe('/select-community')
})
it('has a button "Back to Login?"', () => {
expect(wrapper.findAll('a').at(2).text()).toEqual('back')
})
it('button links to /login when clicking "Back to Login"', () => {
expect(wrapper.findAll('a').at(2).props().to).toBe('/login')
})
})
})
})

54
frontend/src/views/Pages/RegisterCommunity.vue Normal file
View File

@ -0,0 +1,54 @@
<template>
<div id="register-community">
<!-- Header -->
<div class="p-3">
<b-container>
<div class="text-center mb-7 header">
<b-row class="justify-content-center">
<b-col xl="5" lg="6" md="8" class="px-2">
<h1>{{ $store.state.community.name }}</h1>
<p class="text-lead">
{{ $store.state.community.description }}
</p>
<p class="text-lead community-location">
{{ $store.state.community.url }}
</p>
</b-col>
</b-row>
<b-row>
<b-col class="text-center">
<b-button variant="outline-secondary" to="/register">
{{ $t('community.continue-to-registration') }}
</b-button>
</b-col>
</b-row>
<hr />
<b-row>
<b-col class="text-center">
<b-button variant="outline-secondary" to="/select-community">
{{ $t('community.choose-another-community') }}
</b-button>
</b-col>
</b-row>
<hr />
<b-row>
<b-col class="text-center">
<b-button variant="outline-secondary" to="/login">{{ $t('back') }}</b-button>
</b-col>
</b-row>
</div>
</b-container>
</div>
</div>
</template>
<script>
export default {
name: 'registerSelectCommunity',
data() {
return {}
},
methods: {},
}
</script>
<style></style>

81
frontend/src/views/Pages/RegisterSelectCommunity.spec.js Normal file
View File

@ -0,0 +1,81 @@
import { mount } from '@vue/test-utils'
import RegisterSelectCommunity from './RegisterSelectCommunity'
const localVue = global.localVue
const spinnerHideMock = jest.fn()
const spinnerMock = jest.fn(() => {
return {
hide: spinnerHideMock,
}
})
const apolloQueryMock = jest.fn().mockResolvedValue({
data: {
communities: [
{
name: 'test1',
description: 'description 1',
url: 'http://test.test/vue',
registerUrl: 'http://localhost/vue/register-community',
},
],
},
})
const toasterMock = jest.fn()
describe('RegisterSelectCommunity', () => {
let wrapper
const mocks = {
$i18n: {
locale: 'en',
},
$t: jest.fn((t) => t),
$store: {
state: {
community: {
name: 'Gradido Entwicklung',
url: 'http://localhost/vue/',
registerUrl: 'http://localhost/vue/register',
description: 'Die lokale Entwicklungsumgebung von Gradido.',
},
},
},
$apollo: {
query: apolloQueryMock,
},
$loading: {
show: spinnerMock,
},
$toasted: {
error: toasterMock,
},
}
const Wrapper = () => {
return mount(RegisterSelectCommunity, { localVue, mocks })
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('renders the Div Element "#register-select-community"', () => {
expect(wrapper.find('div#register-select-community').exists()).toBeTruthy()
})
describe('calls the apollo query', () => {
beforeEach(() => {
apolloQueryMock.mockRejectedValue({
message: 'Wrong thing',
})
wrapper = Wrapper()
})
it('toast an error', () => {
expect(toasterMock).toBeCalledWith('Wrong thing')
})
})
})
})

104
frontend/src/views/Pages/RegisterSelectCommunity.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<div id="register-select-community">
<b-container class="text-center">
<div class="pb-3">{{ $t('community.current-community') }}</div>
<div v-if="!pending">
<div v-for="community in communities" :key="community.name">
<b-card
v-if="community.name === $store.state.community.name"
class="border-0 mb-0"
bg-variant="primary"
>
<b>{{ community.name }}</b>
<br />
{{ $store.state.community.description }}
<br />
<b-button variant="outline-secondary" to="/register">
{{ $t('community.continue-to-registration') }}
</b-button>
</b-card>
</div>
<hr />
<div>{{ $t('community.other-communities') }}</div>
<div v-for="community in communities" :key="community.id" class="pb-3">
<b-card v-if="community.name != $store.state.community.name" bg-variant="secondary">
<b>{{ community.name }}</b>
<br />
{{ community.description }}
<br />
<b>
<small>
<b-link :href="community.url">{{ community.url }}</b-link>
</small>
</b>
<br />
<b-button variant="outline-secondary" :href="community.registerUrl">
{{ $t('community.switch-to-this-community') }}
</b-button>
</b-card>
</div>
</div>
<div class="text-center py-lg-4">
<b-button variant="outline-secondary" to="/login">{{ $t('back') }}</b-button>
</div>
</b-container>
</div>
</template>
<script>
import { communities } from '../../graphql/queries'
export default {
name: 'registerSelectCommunity',
data() {
return {
communities: [],
pending: true,
}
},
methods: {
async getCommunities() {
const loader = this.$loading.show({
container: this.$refs.header,
})
this.$apollo
.query({
query: communities,
fetchPolicy: 'network-only',
})
.then((response) => {
this.communities = response.data.communities
})
.catch((error) => {
this.$toasted.error(error.message)
})
loader.hide()
this.pending = false
},
},
created() {
this.getCommunities()
},
}
</script>
<style>
.alert-light {
color: #424543;
background-color: #bac1c84a;
border-color: #ffffff00;
}
.bg-primary {
background-color: #5e72e41f !important;
}
.bg-secondary {
background-color: #525f7f0f !important;
}
.card-footer {
background-color: #ffffff5e !important;
}
</style>

36
frontend/src/views/Pages/UserProfile/UserCard.spec.js Normal file
View File

@ -0,0 +1,36 @@
import { mount } from '@vue/test-utils'
import UserCard from './UserCard'
const localVue = global.localVue
describe('UserCard', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$n: jest.fn((n) => String(n)),
$store: {
state: {
email: 'user@example.org',
},
},
}
const Wrapper = () => {
return mount(UserCard, { localVue, mocks })
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('renders the Div Element ".userdata-card"', () => {
expect(wrapper.find('div.userdata-card').exists()).toBeTruthy()
})
it('renders the Div Element "vue-qrcode"', () => {
expect(wrapper.find('vue-qrcode'))
})
})
})

50
frontend/src/views/Pages/UserProfile/UserCard.vue
View File

@ -1,30 +1,32 @@
<template>
<b-card class="bg-transparent border-0">
<div class="w-100 text-center">
<vue-qrcode
v-if="$store.state.email"
:value="$store.state.email"
type="image/png"
></vue-qrcode>
</div>
<div class="userdata-card">
<b-card class="bg-transparent border-0">
<div class="w-100 text-center">
<vue-qrcode
v-if="$store.state.email"
:value="$store.state.email"
type="image/png"
></vue-qrcode>
</div>
<div class="card-profile-stats d-flex justify-content-center mt-md-5">
<div>
<span class="heading">
{{ $n(balance, 'decimal') }}
</span>
<span class="description">GDD</span>
<div class="card-profile-stats d-flex justify-content-center mt-md-5">
<div>
<span class="heading">
{{ $n(balance, 'decimal') }}
</span>
<span class="description">GDD</span>
</div>
<div>
<span class="heading">{{ transactionCount }}</span>
<span class="description">{{ $t('transactions') }}</span>
</div>
<div>
<span class="heading">--</span>
<span class="description">{{ $t('community.community') }}</span>
</div>
</div>
<div>
<span class="heading">{{ transactionCount }}</span>
<span class="description">{{ $t('transactions') }}</span>
</div>
<div>
<span class="heading">--</span>
<span class="description">{{ $t('community') }}</span>
</div>
</div>
</b-card>
</b-card>
</div>
</template>
<script>
import VueQrcode from 'vue-qrcode'

83
frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.spec.js
View File

@ -1,5 +1,6 @@
import { mount } from '@vue/test-utils'
import UserCardCoinAnimation from './UserCard_CoinAnimation'
import { updateUserInfos } from '../../../graphql/mutations'
const localVue = global.localVue
@ -17,6 +18,7 @@ describe('UserCard_CoinAnimation', () => {
$store: {
state: {
language: 'de',
coinanimation: true,
},
commit: storeCommitMock,
},
@ -25,7 +27,7 @@ describe('UserCard_CoinAnimation', () => {
error: toastErrorMock,
},
$apollo: {
query: mockAPIcall,
mutate: mockAPIcall,
},
}
@ -45,5 +47,84 @@ describe('UserCard_CoinAnimation', () => {
it('has an edit BFormCheckbox switch', () => {
expect(wrapper.find('.Test-BFormCheckbox').exists()).toBeTruthy()
})
describe('enable with success', () => {
beforeEach(async () => {
mocks.$store.state.coinanimation = false
mockAPIcall.mockResolvedValue({
data: {
updateUserInfos: {
validValues: 1,
},
},
})
await wrapper.find('input').trigger('change')
})
it('calls the updateUserInfos mutation', () => {
expect(mockAPIcall).toBeCalledWith({
mutation: updateUserInfos,
variables: {
coinanimation: true,
},
})
})
it('updates the store', () => {
expect(storeCommitMock).toBeCalledWith('coinanimation', true)
})
it('toasts a success message', () => {
expect(toastSuccessMock).toBeCalledWith('settings.coinanimation.True')
})
})
describe('disable with success', () => {
beforeEach(async () => {
mocks.$store.state.coinanimation = true
mockAPIcall.mockResolvedValue({
data: {
updateUserInfos: {
validValues: 1,
},
},
})
wrapper.find('input').trigger('change')
})
it('calls the subscribe mutation', () => {
expect(mockAPIcall).toBeCalledWith({
mutation: updateUserInfos,
variables: {
coinanimation: false,
},
})
})
it('updates the store', () => {
expect(storeCommitMock).toBeCalledWith('coinanimation', false)
})
it('toasts a success message', () => {
expect(toastSuccessMock).toBeCalledWith('settings.coinanimation.False')
})
})
describe('disable with server error', () => {
beforeEach(() => {
mockAPIcall.mockRejectedValue({
message: 'Ouch',
})
wrapper.find('input').trigger('change')
})
it('resets the CoinAnimationStatus', () => {
expect(wrapper.vm.CoinAnimationStatus).toBeTruthy()
})
it('toasts an error message', () => {
expect(toastErrorMock).toBeCalledWith('Ouch')
})
})
})
})

8
frontend/src/views/Pages/UserProfile/UserCard_CoinAnimation.vue
View File

@ -36,12 +36,9 @@ export default {
name: 'FormUserCoinAnimation',
data() {
return {
CoinAnimationStatus: true,
CoinAnimationStatus: this.$store.state.coinanimation,
}
},
created() {
this.CoinAnimationStatus = this.$store.state.coinanimation /* existiert noch nicht im store */
},
methods: {
async onSubmit() {
this.$apollo
@ -52,7 +49,7 @@ export default {
},
})
.then(() => {
this.$store.state.coinanimation = this.CoinAnimationStatus
this.$store.commit('coinanimation', this.CoinAnimationStatus)
this.$toasted.success(
this.CoinAnimationStatus
? this.$t('settings.coinanimation.True')
@ -60,6 +57,7 @@ export default {
)
})
.catch((error) => {
this.CoinAnimationStatus = this.$store.state.coinanimation
this.$toasted.error(error.message)
})
},

3
frontend/src/views/Pages/UserProfile/UserCard_FormUserData.spec.js
View File

@ -17,7 +17,6 @@ describe('UserCard_FormUserData', () => {
$t: jest.fn((t) => t),
$store: {
state: {
email: 'user@example.org',
firstName: 'Peter',
lastName: 'Lustig',
description: '',
@ -117,7 +116,6 @@ describe('UserCard_FormUserData', () => {
expect(mockAPIcall).toBeCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
firstName: 'Petra',
lastName: 'Lustiger',
description: 'Keine Nickelbrille',
@ -165,7 +163,6 @@ describe('UserCard_FormUserData', () => {
expect(mockAPIcall).toBeCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
firstName: 'Petra',
lastName: 'Lustiger',
description: 'Keine Nickelbrille',

1
frontend/src/views/Pages/UserProfile/UserCard_FormUserData.vue
View File

@ -111,7 +111,6 @@ export default {
.mutate({
mutation: updateUserInfos,
variables: {
email: this.$store.state.email,
firstName: this.form.firstName,
lastName: this.form.lastName,
description: this.form.description,

2
frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.spec.js
View File

@ -75,7 +75,6 @@ describe('UserCard_FormUserMail', () => {
expect(mockAPIcall).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
newEmail: 'test@example.org',
},
}),
@ -104,7 +103,6 @@ describe('UserCard_FormUserMail', () => {
expect(mockAPIcall).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
newEmail: 'test@example.org',
},
}),

1
frontend/src/views/Pages/UserProfile/UserCard_FormUserMail.vue
View File

@ -48,7 +48,6 @@ export default {
.mutate({
mutation: updateUserInfos,
variables: {
email: this.$store.state.email,
newEmail: this.newEmail,
},
})

6
frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.spec.js
View File

@ -15,11 +15,6 @@ describe('UserCard_FormUserPasswort', () => {
const mocks = {
$t: jest.fn((t) => t),
$store: {
state: {
email: 'user@example.org',
},
},
$toasted: {
success: toastSuccessMock,
error: toastErrorMock,
@ -191,7 +186,6 @@ describe('UserCard_FormUserPasswort', () => {
expect(changePasswordProfileMock).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
password: '1234',
passwordNew: 'Aa123456_',
},

1
frontend/src/views/Pages/UserProfile/UserCard_FormUserPasswort.vue
View File

@ -76,7 +76,6 @@ export default {
.mutate({
mutation: updateUserInfos,
variables: {
email: this.$store.state.email,
password: this.form.password,
passwordNew: this.form.newPassword.password,
},

3
frontend/src/views/Pages/UserProfile/UserCard_FormUsername.spec.js
View File

@ -25,7 +25,6 @@ describe('UserCard_FormUsername', () => {
$t: jest.fn((t) => t),
$store: {
state: {
email: 'user@example.org',
username: '',
},
commit: storeCommitMock,
@ -109,7 +108,6 @@ describe('UserCard_FormUsername', () => {
expect(mockAPIcall).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
username: 'username',
},
}),
@ -148,7 +146,6 @@ describe('UserCard_FormUsername', () => {
expect(mockAPIcall).toHaveBeenCalledWith(
expect.objectContaining({
variables: {
email: 'user@example.org',
username: 'username',
},
}),

1
frontend/src/views/Pages/UserProfile/UserCard_FormUsername.vue
View File

@ -90,7 +90,6 @@ export default {
.mutate({
mutation: updateUserInfos,
variables: {
email: this.$store.state.email,
username: this.form.username,
},
})

2
frontend/src/views/Pages/UserProfile/UserCard_Language.spec.js
View File

@ -23,7 +23,6 @@ describe('UserCard_Language', () => {
$store: {
state: {
language: 'de',
email: 'peter@lustig.de',
},
commit: storeCommitMock,
},
@ -127,7 +126,6 @@ describe('UserCard_Language', () => {
expect(mockAPIcall).toBeCalledWith(
expect.objectContaining({
variables: {
email: 'peter@lustig.de',
locale: 'en',
},
}),

3
frontend/src/views/Pages/UserProfile/UserCard_Language.vue
View File

@ -89,7 +89,6 @@ export default {
.mutate({
mutation: updateUserInfos,
variables: {
email: this.$store.state.email,
locale: this.language,
},
})
@ -106,7 +105,7 @@ export default {
})
},
buildTagFromLanguageString() {
return 'languages.' + this.$store.state.language
return 'settings.language.' + this.$store.state.language
},
},
}

4
frontend/test/testSetup.js
View File

@ -13,7 +13,7 @@ import VueQrcode from 'vue-qrcode'
import VueMoment from 'vue-moment'
import clickOutside from '@/directives/click-ouside.js'
// import clickOutside from '@/directives/click-ouside.js'
import { focus } from 'vue-focus'
import { loadAllRules } from '../src/validation-rules'
@ -46,7 +46,7 @@ global.localVue.use(VueQrcode)
global.localVue.use(VueMoment)
global.localVue.component('validation-provider', ValidationProvider)
global.localVue.component('validation-observer', ValidationObserver)
global.localVue.directive('click-outside', clickOutside)
// global.localVue.directive('click-outside', clickOutside)
global.localVue.directive('focus', focus)
// throw errors for vue warnings to force the programmers to take care about warnings