mirror of
https://github.com/IT4Change/gradido.git
synced 2026-02-06 09:56:05 +00:00
test for settings
This commit is contained in:
ogerly
parent
d5146de3ff
commit
b165b226ac
@ -68,10 +68,10 @@ export default {
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
// toast success message
|
||||
this.toastSuccess(this.$t('settings.language.success'))
|
||||
})
|
||||
.catch(() => {
|
||||
// toast error message
|
||||
this.toastSuccess(this.$t('error'))
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
@ -1,16 +1,67 @@
|
||||
import { shallowMount } from '@vue/test-utils'
|
||||
import { shallowMount, mount } from '@vue/test-utils'
|
||||
import Settings from './Settings'
|
||||
import { toastSuccessSpy } from '../../test/testSetup'
|
||||
// import { updateUserInfos, subscribeNewsletter, unsubscribeNewsletter } from '@/graphql/mutations'
|
||||
import VueApollo from 'vue-apollo'
|
||||
import { createMockClient } from 'mock-apollo-client'
|
||||
|
||||
const mockClient = createMockClient()
|
||||
const apolloProvider = new VueApollo({
|
||||
defaultClient: mockClient,
|
||||
})
|
||||
|
||||
const localVue = global.localVue
|
||||
|
||||
describe('Settings', () => {
|
||||
let Wrapper
|
||||
let wrapper
|
||||
|
||||
const storeCommitMock = jest.fn()
|
||||
const mockToastSuccess = jest.fn()
|
||||
|
||||
const mocks = {
|
||||
$t: jest.fn((t) => t),
|
||||
$store: {
|
||||
state: {
|
||||
darkMode: true,
|
||||
firstName: 'John',
|
||||
lastName: 'Doe',
|
||||
email: 'john.doe@test.com',
|
||||
language: 'en',
|
||||
newsletterState: false,
|
||||
},
|
||||
commit: storeCommitMock,
|
||||
},
|
||||
}
|
||||
|
||||
const Wrapper = () => {
|
||||
Wrapper = () => {
|
||||
return mount(Settings, { localVue, mocks, apolloProvider })
|
||||
}
|
||||
|
||||
describe('mount', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
describe.skip('watch - darkMode', () => {
|
||||
it('commits correct value to store and calls toastSuccess with the appropriate text for dark mode', () => {
|
||||
wrapper.vm.darkMode = true
|
||||
|
||||
expect(storeCommitMock).toHaveBeenCalledWith('setDarkMode', true)
|
||||
// expect(mockToastSuccess).toHaveBeenCalledWith('Style changed to dark mode')
|
||||
expect(toastSuccessSpy).toBeCalledWith('Style changed to dark mode')
|
||||
})
|
||||
|
||||
it('commits correct value to store and calls toastSuccess with the appropriate text for light mode', () => {
|
||||
wrapper.vm.darkMode = false
|
||||
|
||||
expect(storeCommitMock).toHaveBeenCalledWith('setDarkMode', false)
|
||||
expect(mockToastSuccess).toHaveBeenCalledWith('Style changed to light mode')
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
Wrapper = () => {
|
||||
return shallowMount(Settings, { localVue, mocks })
|
||||
}
|
||||
|
||||
@ -19,24 +70,52 @@ describe('Settings', () => {
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('has a user card', () => {
|
||||
expect(wrapper.findComponent({ name: 'UserCard' }).exists()).toBeTruthy()
|
||||
})
|
||||
it('data function returns correct data object', () => {
|
||||
expect(wrapper.vm.darkMode).toBe(true)
|
||||
|
||||
it('has a user first and last name form', () => {
|
||||
expect(wrapper.findComponent({ name: 'UserData' }).exists()).toBeTruthy()
|
||||
expect(wrapper.vm.username).toBe('')
|
||||
|
||||
expect(wrapper.vm.firstName).toBe('John')
|
||||
|
||||
expect(wrapper.vm.lastName).toBe('Doe')
|
||||
|
||||
expect(wrapper.vm.email).toBe('john.doe@test.com')
|
||||
|
||||
expect(wrapper.vm.selected).toBe('en')
|
||||
|
||||
expect(wrapper.vm.newsletterState).toBe(false)
|
||||
|
||||
expect(wrapper.vm.mutation).toBe('')
|
||||
|
||||
expect(wrapper.vm.variables).toEqual({})
|
||||
})
|
||||
|
||||
it('has a user change language form', () => {
|
||||
expect(wrapper.findComponent({ name: 'UserLanguage' }).exists()).toBeTruthy()
|
||||
expect(wrapper.findComponent({ name: 'LanguageSwitch' }).exists()).toBeTruthy()
|
||||
})
|
||||
|
||||
it('has a user change password form', () => {
|
||||
expect(wrapper.findComponent({ name: 'UserPassword' }).exists()).toBeTruthy()
|
||||
})
|
||||
|
||||
it('has a user change newsletter form', () => {
|
||||
expect(wrapper.findComponent({ name: 'UserNewsletter' }).exists()).toBeTruthy()
|
||||
describe('isDisabled', () => {
|
||||
it('returns false when firstName and lastName match the state', () => {
|
||||
wrapper.vm.firstName = 'John'
|
||||
wrapper.vm.lastName = 'Doe'
|
||||
|
||||
const result = wrapper.vm.isDisabled
|
||||
|
||||
expect(result).toBe(true)
|
||||
})
|
||||
|
||||
it('returns true when either firstName or lastName do not match the state', () => {
|
||||
wrapper.vm.firstName = 'Jane'
|
||||
wrapper.vm.lastName = 'Doe'
|
||||
|
||||
const result = wrapper.vm.isDisabled
|
||||
|
||||
expect(result).toBe(false)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -1,91 +1,66 @@
|
||||
<template>
|
||||
<div class="card bg-white gradido-border-radius appBoxShadow p-4 mt--3">
|
||||
<b-form @submit="onSubmit('personalDetails')" @change="disabled = !disabled">
|
||||
<div class="h2">{{ $t('PersonalDetails') }}</div>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6" lg="6">
|
||||
<div role="group">
|
||||
<label for="input-live0">{{ $t('form.username') }}</label>
|
||||
<b-form-input
|
||||
id="input-live0"
|
||||
v-model="username"
|
||||
placeholder="Enter your username"
|
||||
trim
|
||||
readonly
|
||||
></b-form-input>
|
||||
</div>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6" lg="6">
|
||||
<div role="group">
|
||||
<label for="input-live0">{{ $t('form.email') }}</label>
|
||||
<b-form-input id="input-live0" v-model="email" trim readonly></b-form-input>
|
||||
</div>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<div class="text-small mt-3">
|
||||
Dein Nutzername und E-Mail können momentan nicht geändert werden.
|
||||
</div>
|
||||
<hr />
|
||||
<div class="h2">{{ $t('PersonalDetails') }}</div>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6" lg="6">
|
||||
<b-form-group :label="$t('form.username')" description="kann nicht geändert werden">
|
||||
<b-form-input v-model="username" readonly></b-form-input>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6" lg="6">
|
||||
<b-form-group :label="$t('form.email')" description="kann nicht geändert werden">
|
||||
<b-form-input v-model="email" readonly></b-form-input>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<hr />
|
||||
<b-form @submit="onSubmit('personalDetails')">
|
||||
<b-row class="mt-3">
|
||||
<b-col cols="12" md="6" lg="6">
|
||||
<div role="group">
|
||||
<label for="input-live1">{{ $t('form.firstname') }}</label>
|
||||
<b-form-input
|
||||
id="input-live1"
|
||||
v-model="firstName"
|
||||
placeholder="Enter your firstname"
|
||||
trim
|
||||
></b-form-input>
|
||||
</div>
|
||||
<label>{{ $t('form.firstname') }}</label>
|
||||
<b-form-input v-model="firstName" placeholder="Enter your firstname" trim></b-form-input>
|
||||
</b-col>
|
||||
<b-col cols="12" md="6" lg="6">
|
||||
<div role="group">
|
||||
<label for="input-live2">{{ $t('form.lastname') }}</label>
|
||||
<b-form-input
|
||||
id="input-live2"
|
||||
v-model="lastName"
|
||||
placeholder="Enter your lastname"
|
||||
trim
|
||||
></b-form-input>
|
||||
</div>
|
||||
<label>{{ $t('form.lastname') }}</label>
|
||||
<b-form-input v-model="lastName" placeholder="Enter your lastname" trim></b-form-input>
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<div v-if="!disabled" class="mt-4 pt-4 text-center">
|
||||
<b-button type="submit" variant="primary" :disabled="disabled">
|
||||
{{ isDisabled }}
|
||||
<div v-if="!isDisabled" class="mt-4 pt-4 text-center">
|
||||
<b-button type="submit" variant="primary">
|
||||
{{ $t('form.save') }}
|
||||
</b-button>
|
||||
</div>
|
||||
<hr />
|
||||
<b-row>
|
||||
<b-col cols="12" md="6" lg="6">{{ $t('language') }}</b-col>
|
||||
<b-col cols="12" md="6" lg="6" class="text-right">
|
||||
<user-language />
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<hr />
|
||||
<div class="h3 mt-5">{{ $t('form.password') }}</div>
|
||||
<user-password />
|
||||
<hr />
|
||||
<b-row class="mb-5">
|
||||
<b-col cols="12" md="6" lg="6">{{ $t('settings.newsletter.newsletter') }}</b-col>
|
||||
<b-col cols="12" md="6" lg="6" class="text-right">
|
||||
<b-form-checkbox
|
||||
v-model="newsletterState"
|
||||
name="check-button"
|
||||
switch
|
||||
@change="onSubmit('newsletters')"
|
||||
></b-form-checkbox>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6" lg="6">Dark - light mode</b-col>
|
||||
<b-col cols="12" md="6" lg="6" class="text-right">
|
||||
<b-form-checkbox v-model="darkMode" name="dark-mode" switch></b-form-checkbox>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-form>
|
||||
<hr />
|
||||
<b-row>
|
||||
<b-col cols="12" md="6" lg="6">{{ $t('language') }}</b-col>
|
||||
<b-col cols="12" md="6" lg="6" class="text-right">
|
||||
<user-language />
|
||||
</b-col>
|
||||
</b-row>
|
||||
|
||||
<hr />
|
||||
<div class="h3 mt-5">{{ $t('form.password') }}</div>
|
||||
<user-password />
|
||||
<hr />
|
||||
<b-row class="mb-5">
|
||||
<b-col cols="12" md="6" lg="6">{{ $t('settings.newsletter.newsletter') }}</b-col>
|
||||
<b-col cols="12" md="6" lg="6" class="text-right">
|
||||
<b-form-checkbox
|
||||
v-model="newsletterState"
|
||||
name="check-button"
|
||||
switch
|
||||
@change="onSubmit('newsletters')"
|
||||
></b-form-checkbox>
|
||||
</b-col>
|
||||
</b-row>
|
||||
<b-row>
|
||||
<b-col cols="12" md="6" lg="6">Dark - light mode</b-col>
|
||||
<b-col cols="12" md="6" lg="6" class="text-right">
|
||||
<b-form-checkbox v-model="darkMode" name="dark-mode" switch aligne></b-form-checkbox>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -103,23 +78,37 @@ export default {
|
||||
balance: { type: Number, default: 0 },
|
||||
transactionCount: { type: Number, default: 0 },
|
||||
},
|
||||
|
||||
data() {
|
||||
const { state } = this.$store
|
||||
const { darkMode, firstName, lastName, email, language, newsletterState } = state
|
||||
|
||||
return {
|
||||
darkMode: this.$store.state.darkMode,
|
||||
darkMode,
|
||||
username: '',
|
||||
firstName: this.$store.state.firstName,
|
||||
lastName: this.$store.state.lastName,
|
||||
email: this.$store.state.email,
|
||||
selected: this.$store.state.language,
|
||||
newsletterState: this.$store.state.newsletterState,
|
||||
firstName,
|
||||
lastName,
|
||||
email,
|
||||
selected: language,
|
||||
newsletterState,
|
||||
mutation: '',
|
||||
variables: {},
|
||||
disabled: true,
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
isDisabled() {
|
||||
const { firstName, lastName } = this.$store.state
|
||||
return firstName === this.firstName && lastName === this.lastName
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
darkMode(val) {
|
||||
const text = this.darkMode
|
||||
? this.$t('Style changed to dark mode')
|
||||
: this.$t('Style changed to light mode')
|
||||
this.$store.commit('setDarkMode', this.darkMode)
|
||||
this.toastSuccess(text)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
@ -131,55 +120,39 @@ export default {
|
||||
firstName: this.firstName,
|
||||
lastName: this.lastName,
|
||||
}
|
||||
this.$store.commit('firstName', this.firstName)
|
||||
this.$store.commit('lastName', this.form.lastName)
|
||||
this.showUserData = true
|
||||
this.toastSuccess(this.$t('settings.name.change-success'))
|
||||
break
|
||||
case 'newsletters':
|
||||
this.mutation = this.newsletterState ? subscribeNewsletter : unsubscribeNewsletter
|
||||
this.$store.commit('newsletterState', this.newsletterState)
|
||||
this.toastSuccess(
|
||||
this.newsletterState
|
||||
? this.$t('settings.newsletter.newsletterTrue')
|
||||
: this.$t('settings.newsletter.newsletterFalse'),
|
||||
)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
this.$apollo
|
||||
.mutate({
|
||||
try {
|
||||
await this.$apollo.mutate({
|
||||
mutation: this.mutation,
|
||||
variables: this.variables,
|
||||
})
|
||||
.then(() => {
|
||||
switch (key) {
|
||||
case 'personalDetails':
|
||||
this.$store.commit('firstName', this.firstName)
|
||||
this.$store.commit('lastName', this.form.lastName)
|
||||
this.showUserData = true
|
||||
this.toastSuccess(this.$t('settings.name.change-success'))
|
||||
break
|
||||
case 'newsletters':
|
||||
this.$store.commit('newsletterState', this.newsletterState)
|
||||
this.toastSuccess(
|
||||
this.newsletterState
|
||||
? this.$t('settings.newsletter.newsletterTrue')
|
||||
: this.$t('settings.newsletter.newsletterFalse'),
|
||||
)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
switch (key) {
|
||||
case 'newsletters':
|
||||
this.newsletterState = this.$store.state.newsletterState
|
||||
this.toastError(error.message)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
})
|
||||
} catch (error) {
|
||||
switch (key) {
|
||||
case 'newsletters':
|
||||
this.newsletterState = this.$store.state.newsletterState
|
||||
this.toastError(error.message)
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
},
|
||||
updateTransactions(pagination) {
|
||||
this.$emit('update-transactions', pagination)
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.updateTransactions(0)
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user