fix test for Settings.spec.js

frontend/src/pages/Settings.spec.js

@@ -2,6 +2,7 @@ import { mount } from '@vue/test-utils'
 import Settings from './Settings'
 import flushPromises from 'flush-promises'
 import { toastSuccessSpy } from '@test/testSetup'
+import Vue from 'vue'
 
 const localVue = global.localVue
 
@@ -69,8 +70,8 @@ describe('Settings', () => {
 
     describe('successfull submit', () => {
       beforeEach(async () => {
-        wrapper.vm.firstName = 'Janer'
-        wrapper.vm.lastName = 'Does'
+        wrapper.find('[data-test="firstname"]').setValue('Janer')
+        wrapper.find('[data-test="lastname"]').setValue('Does')
 
         mockAPIcall.mockResolvedValue({
           data: {
@@ -82,9 +83,6 @@ describe('Settings', () => {
       })
 
       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()
 
@@ -116,7 +114,7 @@ describe('Settings', () => {
         expect(wrapper.vm.darkMode).toBe(true)
       })
 
-      describe('sets dark mode ', () => {
+      describe('dark mode is false', () => {
         beforeEach(() => {
           wrapper.vm.darkMode = false
         })
@@ -127,6 +125,16 @@ describe('Settings', () => {
         it('toasts a success message', () => {
           expect(toastSuccessSpy).toBeCalledWith('settings.modeLight')
         })
+
+        describe('set dark mode is true', () => {
+          beforeEach(() => {
+            wrapper.vm.darkMode = true
+          })
+          // Test case 1: Test setting dark mode
+          test('darkMode sets the dark mode', () => {
+            expect(storeCommitMock).toBeCalledWith('setDarkMode', true)
+          })
+        })
       })
     })
   })

frontend/src/pages/Settings.vue

@@ -24,7 +24,7 @@
           <b-form-input
             v-model="firstName"
             :placeholder="$t('settings.name.enterFirstname')"
-            data-test="test-firstname"
+            data-test="firstname"
             trim
           ></b-form-input>
         </b-col>
@@ -33,17 +33,17 @@
           <b-form-input
             v-model="lastName"
             :placeholder="$t('settings.name.enterLastname')"
-            data-test="test-lastname"
+            data-test="lastname"
             trim
           ></b-form-input>
         </b-col>
       </b-row>
       <div v-if="!isDisabled" class="mt-4 pt-4 text-center">
         <b-button
-          data-test="submit-userdata"
           type="submit"
           variant="primary"
           @click.prevent="onSubmit"
+          data-test="submit-userdata"
         >
           {{ $t('form.save') }}
         </b-button>