Created tests for create form, economy-overview and milestone-button components

src/components/__tests__/create-form/BaseInput.spec.ts

+import { mount } from '@vue/test-utils'
+import BaseInput from '@/components/create-form/BaseInput.vue'
+import { describe, it, expect } from 'vitest'
+
+describe('BaseInput', () => {
+  it('renders correctly with props', async () => {
+    const label = 'Your Label'
+    const placeHolder = 'Your Placeholder'
+    const type = 'text'
+    const modelValue = 'Initial Value'
+
+    const wrapper = mount(BaseInput, {
+      props: {
+        label,
+        placeHolder,
+        type,
+        modelValue
+      }
+    })
+
+    expect(wrapper.find('label').text()).toBe(label)
+
+    const input = wrapper.find('input')
+    expect(input.attributes('placeholder')).toBe(placeHolder)
+    expect(input.attributes('type')).toBe(type)
+    expect(input.element.value).toBe(modelValue)
+
+    // Simulate input
+    const newValue = 'New Value'
+    await input.setValue(newValue)
+
+    // Assert emitted event
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy()
+    expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(newValue)
+  })
+})

src/components/__tests__/create-form/BaseTextArea.spec.ts

+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import BaseTextArea from '@/components/create-form/BaseTextArea.vue'
+
+describe('BaseTextArea', () => {
+  it('renders correctly with props', async () => {
+    const label = 'Your Label'
+    const placeHolder = 'Your Placeholder'
+    const modelValue = 'Initial Value'
+
+    const wrapper = mount(BaseTextArea, {
+      props: {
+        label,
+        placeHolder,
+        modelValue
+      }
+    })
+
+    expect(wrapper.find('label').text()).toBe(label)
+
+    const textarea = wrapper.find('textarea')
+    expect(textarea.attributes('placeholder')).toBe(placeHolder)
+    expect(textarea.element.value).toBe(modelValue)
+
+    const newValue = 'New Value'
+    await textarea.setValue(newValue)
+
+    expect(wrapper.emitted()['update:modelValue']).toBeTruthy()
+    expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(newValue)
+  })
+})

src/components/__tests__/economy/ToggleButton.spec.ts

+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ToggleButton from '@/components/economy/ToggleButton.vue'
+
+describe('ToggleButton', () => {
+  it('toggles chart visibility when clicked', async () => {
+    const wrapper = mount(ToggleButton)
+    expect(wrapper.vm.chartVisible).toBe(false)
+    await wrapper.find('input[type="checkbox"]').trigger('change')
+    expect(wrapper.vm.chartVisible).toBe(true)
+
+  })
+
+  it('emits toggle-chart event when clicked', async () => {
+    const wrapper = mount(ToggleButton)
+
+    // Simulate clicking the toggle button
+    await wrapper.find('input[type="checkbox"]').trigger('change')
+
+    expect(wrapper.emitted('toggle-chart')).toBeTruthy()
+    expect(wrapper.vm.chartVisible).toBe(true)
+
+    await wrapper.find('input[type="checkbox"]').trigger('change')
+
+    expect(wrapper.emitted('toggle-chart')).toBeTruthy()
+    expect(wrapper.emitted('toggle-chart')[1][0]).toBe(false)
+  })
+})

src/components/__tests__/economy/TransactionComponent.spec.ts

+import { mount } from '@vue/test-utils'
+import TransactionComponent from '@/components/economy/TransactionComponent.vue'
+import { describe, it, expect } from 'vitest'
+describe('TransactionComponent', () => {
+  it('renders correctly with props', async () => {
+    // Define props for testing
+    const title = 'Test Title'
+    const date = '2024-04-29'
+    const amount = 100
+    const category = 'Test Category'
+
+    // Mount the component with props
+    const wrapper = mount(TransactionComponent, {
+      props: {
+        title,
+        date,
+        amount,
+        category
+      }
+    })
+
+    // title rendering
+    expect(wrapper.find('.component-title').text()).toContain(title)
+
+    // date rendering
+    expect(wrapper.findAll('.component-right-field').at(0).text()).toContain(date)
+
+    // amount rendering
+    expect(wrapper.findAll('.component-right-field').at(1).text()).toContain(`${amount}kr`)
+
+    // category rendering
+    expect(wrapper.findAll('.component-right-field').at(2).text()).toContain(category)
+  })
+
+})

src/components/__tests__/milestonePath/MilestoneButton.spec.ts

+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import MilestoneButton from '@/components/MilestonePath/MilestoneButton.vue'
+
+describe('MilestoneButton', () => {
+  it('renders correctly with props', async () => {
+    const label = 'Save'
+    const buttonColor = 'blue'
+
+    const wrapper = mount(MilestoneButton, {
+      props: {
+        label,
+        buttonColor
+      }
+    })
+    // label rendering
+    expect(wrapper.text()).toContain(label)
+    expect(wrapper.text()).toBe('Save')
+
+    // button color
+    const buttonElement = wrapper.find('.save-button').element
+    expect(buttonElement.style.backgroundColor).toBe(buttonColor)
+  })
+})