Merge branch 'ProfileComponentsUnitTests' into 'master'

Profile components unit tests

See merge request !67

src/components/__tests__/BadgeInfo.spec.ts

+import { mount } from '@vue/test-utils';
+import BadgeInfo from '@/components/profile/BadgeInfo.vue';
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { createPinia, setActivePinia } from 'pinia';
+
+describe('Component', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('renders badges with correct data', async () => {
+    const wrapper = mount(BadgeInfo, {
+      props: { title: 'Test Title' }
+    });
+
+    await wrapper.vm.$nextTick();
+
+    const badges = wrapper.findAll('.badge');
+
+    badges.forEach((badge, index) => {
+      const achievement = (wrapper.vm as any).achievements[index];
+      const img = badge.find('.badge-img');
+      const title = badge.find('.badge-title');
+
+      expect(img.attributes('src')).toBe(achievement.img);
+      expect(img.attributes('alt')).toBe(achievement.title);
+      expect(title.text()).toBe(achievement.title);
+    });
+  });
+});

src/components/__tests__/BankAccountInfo.spec.ts

+// Import necessary dependencies
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import BankAccountInfo from '@/components/profile/BankAccountInfo.vue';
+import { createPinia, setActivePinia } from 'pinia'
+
+describe('AccountInfo.vue', () => {
+  let wrapper:any
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+    wrapper = mount(BankAccountInfo)
+  })
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('renders correctly', () => {
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+})

src/components/__tests__/IncomeInfo.spec.ts

+import { mount } from '@vue/test-utils';
+import IncomeInfo from '@/components/profile/IncomeInfo.vue'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+
+describe('IncomeInfo', () => {
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('renders correctly', async () => {
+    const wrapper = mount(IncomeInfo);
+
+    expect(wrapper.exists()).toBe(true);
+
+    expect(wrapper.findAll('.input-field')).toHaveLength(3);
+
+    expect(wrapper.find('.save-button').exists()).toBe(true);
+  });
+});

src/components/__tests__/PasswordInfo.spec.ts

+import { mount } from '@vue/test-utils'
+import PasswordInfo from '@/components/profile/PasswordInfo.vue'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { createPinia, setActivePinia } from 'pinia'
+
+describe('PasswordComponent', () => {
+
+  beforeEach(() => {
+    setActivePinia(createPinia());
+  });
+
+  it('renders correctly', async () => {
+    const wrapper = mount(PasswordInfo)
+
+    expect(wrapper.exists()).toBe(true)
+
+    expect(wrapper.find('.title').text()).toBe('Passord')
+
+    expect(wrapper.find('.save-button').exists()).toBe(true)
+
+    expect(wrapper.find('[data-testid="current-password-input"]').exists()).toBe(true)
+
+    expect(wrapper.find('[data-testid="new-password-input"]').exists()).toBe(true)
+  })
+})

src/components/__tests__/UserInfo.spec.ts

+import { mount } from '@vue/test-utils'
+import UserInfo from '@/components/profile/UserInfo.vue'
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { updateUserInfo } from '../../utils/profileutils'
+
+// Mocking getUserInfo and updateUserInfo functions
+vi.mock('@/utils/profileutils', () => ({
+  getUserInfo: vi.fn(),
+  updateUserInfo: vi.fn()
+}))
+
+// Mocking useTokenStore
+vi.mock('@/stores/token', () => ({
+  useTokenStore: vi.fn(() => ({ jwtToken: 'mockedToken' }))
+}))
+
+describe('UserInfo', () => {
+  let wrapper:any
+
+  beforeEach(() => {
+    wrapper = mount(UserInfo)
+  })
+
+  afterEach(() => {
+    wrapper.unmount()
+  })
+
+  it('saves user info when save button is clicked', async () => {
+    wrapper.vm.email = 'newemail@example.com'
+    wrapper.vm.profilePictureBase64 = 'newBase64String'
+
+    await wrapper.find('.save-button').trigger('click')
+
+    expect(updateUserInfo).toHaveBeenCalledWith(
+      'mockedToken',
+      'newemail@example.com',
+      'newBase64String'
+    )
+  })
+})

src/components/__tests__/__snapshots__/BankAccountInfo.spec.ts.snap

+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AccountInfo.vue > renders correctly 1`] = `
+"<div data-v-d2243dda="" class="account-info">
+  <div data-v-d2243dda="" class="header">
+    <h3 data-v-d2243dda="" class="title">Konto opplysninger</h3><button data-v-d2243dda="" class="save-button">
+      <h3 data-v-d2243dda="" class="save-button-title">Lagre</h3>
+    </button>
+  </div>
+  <div data-v-d2243dda="" class="input-fields">
+    <div data-v-d2243dda="" class="input-collection">
+      <h4 data-v-d2243dda="">Forbrukskonto: </h4><select data-v-d2243dda="" class="accounts"></select>
+    </div>
+    <div data-v-d2243dda="" class="input-collection">
+      <h4 data-v-d2243dda="">Sparekonto: </h4><select data-v-d2243dda="" class="accounts"></select>
+    </div>
+    <div data-v-d2243dda="" class="alert-box">
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+</div>"
+`;

src/components/profile/PasswordInfo.vue

@@ -73,7 +73,8 @@ const clearInput = () => {
         <input class="input"
                :class="{'error': currentPasswordError}"
                type="password"
-               v-model="currentPassword">
+               v-model="currentPassword"
+               data-testid="current-password-input">
         <div class="alert-box">
           <h4 v-if="currentPasswordError" class="error-message">{{currentPasswordError}}</h4>
         </div>
@@ -84,7 +85,8 @@ const clearInput = () => {
         <input class="input"
                :class="{'error': newPasswordError}"
                type="password"
-               v-model="newPassword">
+               v-model="newPassword"
+               data-testid="new-password-input">
         <div class="alert-box">
           <h4 v-if="newPasswordError" class="error-message">{{newPasswordError}}</h4>
           <h4 v-if="passwordError" class="error-message">{{passwordError}}</h4>