diff --git a/src/components/EditAccount.vue b/src/components/EditAccount.vue index 3cdb1dd9f02df73deeea82355e7e3ae8aad0fe5e..ede5681472842bc526086b3573af19f2a45bc4c8 100644 --- a/src/components/EditAccount.vue +++ b/src/components/EditAccount.vue @@ -4,7 +4,7 @@ <form @submit.prevent="submit"> <p class="infoText">OBS: Kontakt admin dersom du ønsker å oppdatere epost</p><br> - <p>Epost: {{this.account.email}}</p><br> + <p id="emailField">Epost: {{this.account.email}}</p><br> <label for="fname">Endre fornavn</label><br> <input type="text" id="fname" v-model="updatedAccount.upFirstname"><br> @@ -27,7 +27,7 @@ <p class="infoText">Ved å trykke på knappen nedenfor, vil du slette din SmartMat-konto</p> <input type="checkbox" id="deletionCheckbox" v-model="deletionConfirmation"> <label for="deletionCheckbox"> Jeg bekrefter jeg skjønner dette, og ønsker å slette kontoen min SmartMat-konto for alltid.</label><br> - <button class="delBtn" @click="deleteAccount">SLETT KONTO</button> + <button class="delBtn" id ="delAccount" @click="deleteAccount">SLETT KONTO</button> <p :style={color:alertMsgColor} id="alert">{{delAlertMsg}}</p> </form> @@ -149,82 +149,5 @@ export default { </script> <style scoped lang="scss"> -main { - background-color: white; - color:black; - display:flex; - justify-content: center; - align-items: center; - flex-direction: column; - width: 100%; - text-align: left; - left:0; -} -.infoText { - background-color: white; - padding: .5em; - margin: .4em; -} - -form { - background-color: base.$grey; - color: black; - align-content: end; - padding: 2em; - margin-top: 2em; - margin-bottom: 2em; -} - -input[type="text"], -input[type="password"]{ - width: 100%; - padding: .5em; -} - -button { - background-color: base.$red; - - color: black; - - border: 1px solid black; - - margin: 1em; -} -button:hover{ - background-color: #282828; - -} - -.saveBtn, .delBtn { - background-color: base.$green; - color: white; - font-weight: bold; - padding:.9em; - border:none; -} -.delBtn { - background-color: darkred; -} - -button:hover{ - background-color: base.$green-hover; -} - -.delBtn:hover { - background-color: base.$darkred-hover; -} - - -#dangerZone { - color: darkred; -} - -#alert { - display: flex; - width:100%; - justify-content: center; - color: base.$light-green; - font-weight: bold; -} </style> \ No newline at end of file diff --git a/src/components/__tests__/EditAccount.spec.js b/src/components/__tests__/EditAccount.spec.js new file mode 100644 index 0000000000000000000000000000000000000000..994d431aa651c86b61e34d0a430cf959a6ea0350 --- /dev/null +++ b/src/components/__tests__/EditAccount.spec.js @@ -0,0 +1,47 @@ +import {describe, it, expect, vi} from 'vitest' +import { mount } from '@vue/test-utils' +import EditAccount from "@/components/EditAccount.vue"; +import {createTestingPinia} from "@pinia/testing"; +import {useAuthStore} from "@/stores/authStore"; +describe('Behaves as expected', () => { + const wrapper = mount(EditAccount, { + global: { + plugins: [createTestingPinia({ + createSpy: vi.fn, + })], + }, + }); + + const store = useAuthStore() + + store.account = { + id: "1", + email:"epost@epost.no", + firstname:"Ola", + password: "Ola123", + fridge: {}, + } + + it('Has email field that contains the account email', async () => { + expect(wrapper.find('#emailField').text()).toContain('epost@epost.no'); + }) + + it('Has firstname field with current firstname', async () => { + expect(wrapper.vm.updatedAccount.upFirstname).to.equal('Ola'); + const fnameInput = wrapper.find('#fname'); + expect(fnameInput.element.value).to.equal('Ola'); + }) + + it('Password field is empty', async () => { + const passwordInput = wrapper.find('#password'); + expect(passwordInput.element.value).to.equal(''); + }) + + it('attempting to delete account without checking box results in error message', async () => { + await wrapper.find('#delAccount').trigger('click'); + const alertMsg = wrapper.vm.delAlertMsg; + expect(alertMsg).to.contain('boks'); + + }) + +})