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

fix test coverage

Browse Source
This commit is contained in:
ogerly 2023-06-12 08:41:00 +02:00
parent 43948da697
commit 38cba13f2c
12 changed files with 331 additions and 270 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
frontend/src/components/Inputs/InputUsername.spec.js Normal file
View File

@ -0,0 +1,41 @@
import { mount } from '@vue/test-utils'
import InputUsername from './InputUsername'
const localVue = global.localVue
describe('UserName Form', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
$store: {
state: {
username: '',
},
},
}
const Wrapper = () => {
return mount(InputUsername, { localVue, mocks })
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('renders the component', () => {
expect(wrapper.find('div.input-username').exists()).toBeTruthy()
})
describe('currentValue', () => {
beforeEach(async () => {
wrapper = Wrapper()
await wrapper.setProps({ value: 'petra' })
wrapper.vm.currentValue = 'petra swastiska'
})
it('emits input event with the current value', () => {
expect(wrapper.emitted('input')).toEqual([['petra swastiska']])
})
})
})
})

81
frontend/src/components/Inputs/InputUsername.vue
View File

@ -1,42 +1,57 @@
<template>
<validation-provider
tag="div"
:rules="rules"
:name="name"
:bails="!showAllErrors"
:immediate="immediate"
vid="username"
v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
>
<b-form-group :label-for="labelFor">
<b-form-input
v-model="currentValue"
v-bind="ariaInput"
:id="labelFor"
:name="name"
:placeholder="placeholder"
type="text"
:state="validated ? valid : false"
autocomplete="off"
></b-form-input>
<b-form-invalid-feedback v-bind="ariaMsg">
<div v-if="showAllErrors">
<span v-for="error in errors" :key="error">
{{ error }}
<br />
</span>
</div>
<div v-else>
{{ errors[0] }}
</div>
</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
<div class="input-username">
<validation-provider
tag="div"
:rules="rules"
:name="name"
:bails="!showAllErrors"
:immediate="immediate"
vid="username"
v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
>
<b-form-group :label="$t('form.username')">
<b-input-group>
<b-form-input
v-model="currentValue"
v-bind="ariaInput"
:id="labelFor"
:name="name"
:placeholder="placeholder"
type="text"
:state="validated ? valid : false"
autocomplete="off"
></b-form-input>
<b-input-group-append>
<b-button
size="lg"
text="Button"
variant="secondary"
@click="$emit('set-is-edit', false)"
>
{{ $t('x') }}
</b-button>
</b-input-group-append>
</b-input-group>
<b-form-invalid-feedback v-bind="ariaMsg">
<div v-if="showAllErrors">
<span v-for="error in errors" :key="error">
{{ error }}
<br />
</span>
</div>
<div v-else>
{{ errors[0] }}
</div>
</b-form-invalid-feedback>
</b-form-group>
</validation-provider>
</div>
</template>
<script>
export default {
name: 'InputUsername',
props: {
isEdit: { type: Boolean, default: false },
rules: {
default: () => {
return {

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

@ -69,7 +69,7 @@ describe('Sidebar', () => {
})
it('has nav-item "navigation.settings" in navbar', () => {
expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(0).text()).toEqual(
expect(wrapper.find('[data-test="settings-menu"]').find('span').text()).toBe(
'navigation.settings',
)
})
@ -92,7 +92,7 @@ describe('Sidebar', () => {
})
it('has nav-item "navigation.settings" in navbar', () => {
expect(wrapper.findAll('ul').at(1).findAll('.nav-item').at(0).text()).toEqual(
expect(wrapper.find('[data-test="settings-menu"]').find('span').text()).toBe(
'navigation.settings',
)
})

10
frontend/src/components/Menu/Sidebar.vue
View File

@ -35,9 +35,17 @@
</b-nav>
<hr class="m-3" />
<b-nav vertical class="w-100">
<b-nav-item to="/settings" class="mb-3" active-class="activeRoute">
<b-nav-item
to="/settings"
class="mb-3"
active-class="activeRoute"
data-test="settings-menu"
>
<b-img src="/img/svg/settings.svg" height="20" class="svg-icon" />
<span class="ml-2">{{ $t('navigation.settings') }}</span>
<b-badge v-if="!$store.state.username" variant="warning">
{{ $t('settings.newSettings') }}
</b-badge>
</b-nav-item>
<b-nav-item
class="mb-3 text-light"

83
frontend/src/components/UserSettings/UserName.spec.js
View File

@ -17,7 +17,7 @@ describe('UserName Form', () => {
$t: jest.fn((t) => t),
$store: {
state: {
username: 'peter',
username: '',
},
commit: storeCommitMock,
},
@ -39,41 +39,49 @@ describe('UserName Form', () => {
expect(wrapper.find('div#username_form').exists()).toBeTruthy()
})
it('has an edit icon', () => {
expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy()
describe('has no username', () => {
it('renders the username', () => {
expect(wrapper.find('[data-test="username-input-group"]')).toBeTruthy()
})
it('has no component username change ', () => {
expect(wrapper.findComponent({ name: 'InputUsername' }).exists()).toBeFalsy()
})
})
describe('change / edit username', () => {
beforeEach(async () => {
wrapper.vm.isEdit = true
})
it('has no the username', () => {
expect(wrapper.find('[data-test="username-input-group"]')).toBeTruthy()
})
it('has a component username change ', () => {
expect(wrapper.findComponent({ name: 'InputUsername' }).exists()).toBeTruthy()
})
})
it('renders the username', () => {
expect(wrapper.findAll('div.col').at(2).text()).toBe('peter')
})
// describe('has a username', () => {
// beforeEach(async () => {
// wrapper.$store.state.username = 'petra'
// })
// it('has no the username', () => {
// expect(wrapper.find('[data-test="username-input-group"]')).toBeTruthy()
// })
// it('has no component username change ', () => {
// expect(wrapper.findComponent({ name: 'InputUsername' }).exists()).toBeTruthy()
// })
// })
describe('edit username', () => {
beforeEach(async () => {
await wrapper.find('svg.bi-pencil').trigger('click')
})
it('shows an cancel icon', () => {
expect(wrapper.find('svg.bi-x-circle').exists()).toBeTruthy()
})
it('closes the input when cancel icon is clicked', async () => {
await wrapper.find('svg.bi-x-circle').trigger('click')
expect(wrapper.find('input').exists()).toBeFalsy()
})
it('does not change the username when cancel is clicked', async () => {
await wrapper.find('input').setValue('petra')
await wrapper.find('svg.bi-x-circle').trigger('click')
expect(wrapper.findAll('div.col').at(2).text()).toBe('peter')
wrapper.vm.username = 'petra'
})
it('has a submit button', () => {
expect(wrapper.find('button[type="submit"]').exists()).toBeTruthy()
})
it('does not enable submit button when data is not changed', async () => {
await wrapper.find('form').trigger('keyup')
expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe('disabled')
expect(wrapper.find('[data-test="submit-username-button"]').exists()).toBeTruthy()
})
describe('successfull submit', () => {
@ -88,7 +96,7 @@ describe('UserName Form', () => {
jest.clearAllMocks()
await wrapper.find('input').setValue('petra')
await wrapper.find('form').trigger('keyup')
await wrapper.find('button[type="submit"]').trigger('click')
await wrapper.find('[data-test="submit-username-button"]').trigger('click')
await flushPromises()
})
@ -109,10 +117,6 @@ describe('UserName Form', () => {
it('toasts a success message', () => {
expect(toastSuccessSpy).toBeCalledWith('settings.username.change-success')
})
it('has an edit button again', () => {
expect(wrapper.find('svg.bi-pencil').exists()).toBeTruthy()
})
})
describe('submit results in server error', () => {
@ -123,7 +127,7 @@ describe('UserName Form', () => {
jest.clearAllMocks()
await wrapper.find('input').setValue('petra')
await wrapper.find('form').trigger('keyup')
await wrapper.find('button[type="submit"]').trigger('click')
await wrapper.find('[data-test="submit-username-button"]').trigger('click')
await flushPromises()
})
@ -142,16 +146,5 @@ describe('UserName Form', () => {
})
})
})
describe('no username in store', () => {
beforeEach(() => {
mocks.$store.state.username = null
wrapper = Wrapper()
})
it('displays an information why to enter a username', () => {
expect(wrapper.findAll('div.col').at(2).text()).toBe('settings.username.no-username')
})
})
})
})

68
frontend/src/components/UserSettings/UserName.vue
View File

@ -1,38 +1,27 @@
<template>
<b-card id="username_form" class="card-border-radius card-background-gray">
<div>
<b-row class="mb-4 text-right">
<b-col class="text-right">
<a
class="cursor-pointer"
@click="showUserData ? (showUserData = !showUserData) : cancelEdit()"
<div id="username_form">
<div v-if="!isEdit && !newUsername">
<label>{{ $t('form.username') }}</label>
<b-input-group class="mb-3" data-test="username-input-group">
<b-form-input v-model="username" readonly></b-form-input>
<b-input-group-append>
<b-button
size="lg"
text="Button"
variant="secondary"
@click="isEdit = !isEdit"
data-test="BButton"
>
<span class="pointer mr-3">{{ $t('settings.username.change-username') }}</span>
<b-icon v-if="showUserData" class="pointer ml-3" icon="pencil"></b-icon>
<b-icon v-else icon="x-circle" class="pointer ml-3" variant="danger"></b-icon>
</a>
</b-col>
</b-row>
{{ $t('change') }}
</b-button>
</b-input-group-append>
</b-input-group>
</div>
<div>
<div v-else>
<validation-observer ref="usernameObserver" v-slot="{ handleSubmit, invalid }">
<b-form @submit.stop.prevent="handleSubmit(onSubmit)">
<b-row class="mb-3">
<b-col class="col-12">
<small>
<b>{{ $t('form.username') }}</b>
</small>
</b-col>
<b-col v-if="showUserData" class="col-12">
<span v-if="username">
{{ username }}
</span>
<div v-else class="alert">
{{ $t('settings.username.no-username') }}
</div>
</b-col>
<b-col v-else class="col-12">
<input-username
v-model="username"
:name="$t('form.username')"
@ -40,10 +29,17 @@
:showAllErrors="true"
:unique="true"
:rules="rules"
:isEdit="isEdit"
@set-is-edit="setIsEdit"
/>
</b-col>
<b-col class="col-12">
<div v-if="!username" class="alert" data-test="username-alert">
{{ $t('settings.username.no-username') }}
</div>
</b-col>
</b-row>
<b-row class="text-right" v-if="!showUserData">
<b-row class="text-right" v-if="newUsername">
<b-col>
<div class="text-right" ref="submitButton">
<b-button
@ -51,6 +47,7 @@
@click="onSubmit"
type="submit"
:disabled="disabled(invalid)"
data-test="submit-username-button"
>
{{ $t('form.save') }}
</b-button>
@ -60,7 +57,7 @@
</b-form>
</validation-observer>
</div>
</b-card>
</div>
</template>
<script>
import { updateUserInfos } from '@/graphql/mutations'
@ -73,7 +70,7 @@ export default {
},
data() {
return {
showUserData: true,
isEdit: false,
username: this.$store.state.username || '',
usernameUnique: false,
rules: {
@ -87,10 +84,6 @@ export default {
}
},
methods: {
cancelEdit() {
this.username = this.$store.state.username || ''
this.showUserData = true
},
async onSubmit(event) {
event.preventDefault()
this.$apollo
@ -102,7 +95,6 @@ export default {
})
.then(() => {
this.$store.commit('username', this.username)
this.showUserData = true
this.toastSuccess(this.$t('settings.username.change-success'))
})
.catch((error) => {
@ -112,6 +104,10 @@ export default {
disabled(invalid) {
return !this.newUsername || invalid
},
setIsEdit(bool) {
this.username = this.$store.state.username
this.isEdit = bool
},
},
computed: {
newUsername() {

8
frontend/src/components/UserSettings/UserNewsletter.spec.js
View File

@ -38,22 +38,22 @@ describe('UserCard_Newsletter', () => {
})
it('renders the component', () => {
expect(wrapper.find('div#formusernewsletter').exists()).toBeTruthy()
expect(wrapper.find('div.formusernewsletter').exists()).toBeTruthy()
})
it('has an edit BFormCheckbox switch', () => {
expect(wrapper.find('.Test-BFormCheckbox').exists()).toBeTruthy()
expect(wrapper.find('[test="BFormCheckbox"]').exists()).toBeTruthy()
})
describe('unsubscribe with success', () => {
beforeEach(async () => {
await wrapper.setData({ newsletterState: true })
wrapper.setData({ newsletterState: true })
mockAPIcall.mockResolvedValue({
data: {
unsubscribeNewsletter: true,
},
})
await wrapper.find('input').setChecked(false)
wrapper.find('input').setChecked(false)
})
it('calls the unsubscribe mutation', () => {

35
frontend/src/components/UserSettings/UserNewsletter.vue
View File

@ -1,30 +1,13 @@
<template>
<b-card id="formusernewsletter" class="card-border-radius card-background-gray">
<div>
<b-row class="mb-3">
<b-col class="mb-2 col-12">
<small>
<b>{{ $t('settings.newsletter.newsletter') }}</b>
</small>
</b-col>
<b-col class="col-12">
<b-form-checkbox
class="Test-BFormCheckbox"
v-model="newsletterState"
name="check-button"
switch
@change="onSubmit"
>
{{
newsletterState
? $t('settings.newsletter.newsletterTrue')
: $t('settings.newsletter.newsletterFalse')
}}
</b-form-checkbox>
</b-col>
</b-row>
</div>
</b-card>
<div class="formusernewsletter">
<b-form-checkbox
test="BFormCheckbox"
v-model="newsletterState"
name="check-button"
switch
@change="onSubmit"
></b-form-checkbox>
</div>
</template>
<script>
import { subscribeNewsletter, unsubscribeNewsletter } from '@/graphql/mutations'

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

@ -19,6 +19,7 @@
}
},
"back": "Zurück",
"change":"Ändern",
"community": {
"choose-another-community": "Eine andere Gemeinschaft auswählen",
"community": "Gemeinschaft",
@ -291,11 +292,14 @@
"warningText": "Bist du noch da?"
},
"settings": {
"info":"Es können GDD Überweisungen per Username oder E-Mail-Adresse getätigt werden. Deine E-Mail-Adresse wird nicht mehr durch diese Anwendung angezeigt.",
"emailInfo":"Wird nicht angezeigt, kann nicht geändert werden.",
"hideAmountGDD": "Dein GDD Betrag ist versteckt.",
"hideAmountGDT": "Dein GDT Betrag ist versteckt.",
"darkMode": "dunkel - hell Style",
"darkMode": "Dunkler Modus",
"modeDark": "Nachtmodus",
"modeLight": "Tagmodus",
"newSettings":"Neue Einstellungen",
"language": {
"changeLanguage": "Sprache ändern",
"de": "Deutsch",
@ -306,6 +310,9 @@
"success": "Deine Sprache wurde erfolgreich geändert."
},
"name": {
"enterFirstname":"Vorname eingeben",
"enterLastname":"Nachname eingeben",
"change-username": "Username ändern",
"change-name": "Name ändern",
"change-success": "Dein Name wurde erfolgreich geändert."
},

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

@ -19,6 +19,7 @@
}
},
"back": "Back",
"change":"Change",
"community": {
"choose-another-community": "Choose another community",
"community": "Community",
@ -291,11 +292,14 @@
"warningText": "Are you still there?"
},
"settings": {
"info":"GDD transfers can be made by username or email address. Your email address will no longer be displayed by this application.",
"emailInfo":"Not displayed, cannot be changed.",
"hideAmountGDD": "Your GDD amount is hidden.",
"hideAmountGDT": "Your GDT amount is hidden.",
"darkMode": "dark - light Style",
"darkMode": "Dark Mode",
"modeDark": "Style changed to dark mode",
"modeLight": "Style changed to light mode",
"newSettings":"New Settings",
"language": {
"changeLanguage": "Change language",
"de": "Deutsch",
@ -306,6 +310,9 @@
"success": "Your language has been successfully updated."
},
"name": {
"enterFirstname":"Enter your firstname",
"enterLastname":"Enter your lastname",
"change-username": "Change username",
"change-name": "Change name",
"change-success": "Your name has been successfully changed."
},

140
frontend/src/pages/Settings.spec.js
View File

@ -1,23 +1,16 @@
import { shallowMount, mount } from '@vue/test-utils'
import { 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,
})
import flushPromises from 'flush-promises'
import { toastSuccessSpy } from '@test/testSetup'
const localVue = global.localVue
describe('Settings', () => {
let Wrapper
let wrapper
const mockAPIcall = jest.fn()
const storeCommitMock = jest.fn()
const mockToastSuccess = jest.fn()
const storeCommitMock = jest.fn()
describe('Settings', () => {
let wrapper
const mocks = {
$t: jest.fn((t) => t),
@ -32,10 +25,13 @@ describe('Settings', () => {
},
commit: storeCommitMock,
},
$apollo: {
mutate: mockAPIcall,
},
}
Wrapper = () => {
return mount(Settings, { localVue, mocks, apolloProvider })
const Wrapper = () => {
return mount(Settings, { localVue, mocks })
}
describe('mount', () => {
@ -43,53 +39,6 @@ describe('Settings', () => {
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 })
}
describe('shallow Mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('data function returns correct data object', () => {
expect(wrapper.vm.darkMode).toBe(true)
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: 'LanguageSwitch' }).exists()).toBeTruthy()
})
@ -117,5 +66,68 @@ describe('Settings', () => {
expect(result).toBe(false)
})
})
describe('successfull submit', () => {
beforeEach(async () => {
wrapper.vm.firstName = 'Janer'
wrapper.vm.lastName = 'Does'
mockAPIcall.mockResolvedValue({
data: {
updateUserInfos: {
validValues: 3,
},
},
})
})
it('Cange first and lastname', async () => {
wrapper.find('[data-test="test-firstname"]')
wrapper.find('[data-test="lastname"]')
await wrapper.find('[data-test="submit-userdata"]').trigger('click')
await flushPromises()
expect(mockAPIcall).toBeCalledWith(
expect.objectContaining({
variables: {
firstName: 'Janer',
lastName: 'Does',
},
}),
)
})
it('commits firstname to store', () => {
expect(storeCommitMock).toBeCalledWith('firstName', 'Janer')
})
it('commits lastname to store', () => {
expect(storeCommitMock).toBeCalledWith('lastName', 'Does')
})
it('toasts a success message', () => {
expect(toastSuccessSpy).toBeCalledWith('settings.name.change-success')
})
})
describe('darkMode style', () => {
it('default darkMode is true', () => {
expect(wrapper.vm.darkMode).toBe(true)
})
describe('sets dark mode ', () => {
beforeEach(() => {
wrapper.vm.darkMode = false
})
it('commits darkMode to store', () => {
expect(storeCommitMock).toBeCalledWith('setDarkMode', false)
})
it('toasts a success message', () => {
expect(toastSuccessSpy).toBeCalledWith('settings.modeLight')
})
})
})
})
})

113
frontend/src/pages/Settings.vue
View File

@ -1,33 +1,50 @@
<template>
<div class="card bg-white gradido-border-radius appBoxShadow p-4 mt--3">
<div class="h2">{{ $t('PersonalDetails') }}</div>
<div class="m-4 text-small">
{{ $t('settings.info') }}
</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>
<user-name />
</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-group :label="$t('form.email')" :description="$t('settings.emailInfo')">
<b-form-input v-model="email" readonly></b-form-input>
</b-form-group>
</b-col>
</b-row>
<hr />
<b-form @submit="onSubmit('personalDetails')">
<b-form>
<b-row class="mt-3">
<b-col cols="12" md="6" lg="6">
<label>{{ $t('form.firstname') }}</label>
<b-form-input v-model="firstName" placeholder="Enter your firstname" trim></b-form-input>
<b-form-input
v-model="firstName"
:placeholder="$t('settings.name.enterFirstname')"
data-test="test-firstname"
trim
></b-form-input>
</b-col>
<b-col cols="12" md="6" lg="6">
<label>{{ $t('form.lastname') }}</label>
<b-form-input v-model="lastName" placeholder="Enter your lastname" trim></b-form-input>
<b-form-input
v-model="lastName"
:placeholder="$t('settings.name.enterLastname')"
data-test="test-lastname"
trim
></b-form-input>
</b-col>
</b-row>
{{ isDisabled }}
<div v-if="!isDisabled" class="mt-4 pt-4 text-center">
<b-button type="submit" variant="primary">
<b-button
data-test="submit-userdata"
type="submit"
variant="primary"
@click.prevent="onSubmit"
>
{{ $t('form.save') }}
</b-button>
</div>
@ -45,14 +62,18 @@
<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">
{{ $t('settings.newsletter.newsletter') }}
<div class="text-small">
{{
newsletterState
? $t('settings.newsletter.newsletterTrue')
: $t('settings.newsletter.newsletterFalse')
}}
</div>
</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>
<user-newsletter />
</b-col>
</b-row>
<b-row>
@ -64,15 +85,19 @@
</div>
</template>
<script>
import UserName from '@/components/UserSettings/UserName.vue'
import UserPassword from '@/components/UserSettings/UserPassword'
import UserLanguage from '@/components/LanguageSwitch2.vue'
import { updateUserInfos, subscribeNewsletter, unsubscribeNewsletter } from '@/graphql/mutations'
import UserNewsletter from '@/components/UserSettings/UserNewsletter.vue'
import { updateUserInfos } from '@/graphql/mutations'
export default {
name: 'Profile',
components: {
UserName,
UserPassword,
UserLanguage,
UserNewsletter,
},
props: {
balance: { type: Number, default: 0 },
@ -81,7 +106,7 @@ export default {
data() {
const { state } = this.$store
const { darkMode, firstName, lastName, email, language, newsletterState } = state
const { darkMode, firstName, lastName, email, newsletterState } = state
return {
darkMode,
@ -89,7 +114,6 @@ export default {
firstName,
lastName,
email,
selected: language,
newsletterState,
mutation: '',
variables: {},
@ -104,52 +128,27 @@ export default {
},
watch: {
darkMode(val) {
const text = this.darkMode ? this.$t('settings.modeDark') : this.$t('settings.modeLight')
this.$store.commit('setDarkMode', this.darkMode)
this.toastSuccess(text)
this.toastSuccess(
this.darkMode ? this.$t('settings.modeDark') : this.$t('settings.modeLight'),
)
},
},
methods: {
async onSubmit(key) {
switch (key) {
case 'personalDetails':
this.mutation = updateUserInfos
this.variables = {
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
}
try {
await this.$apollo.mutate({
mutation: this.mutation,
variables: this.variables,
mutation: updateUserInfos,
variables: {
firstName: this.firstName,
lastName: this.lastName,
},
})
} catch (error) {
switch (key) {
case 'newsletters':
this.newsletterState = this.$store.state.newsletterState
this.toastError(error.message)
break
default:
break
}
}
this.$store.commit('firstName', this.firstName)
this.$store.commit('lastName', this.lastName)
this.showUserData = true
this.toastSuccess(this.$t('settings.name.change-success'))
} catch (error) {}
},
},
}