la inn tester for editAccount

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

src/components/__tests__/EditAccount.spec.js

+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');
+
+    })
+
+})