Merge branch '57-test-for-create-components' into 'master'

Resolve "test for economy components and create form components"

Closes #48 and #57

See merge request !59

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)
+
+    const emittedEvents = wrapper.emitted()
+    expect(emittedEvents).toBeTruthy()
+
+    const updateModelValueEvents = emittedEvents['update:modelValue'] as any[]
+    expect(updateModelValueEvents).toBeTruthy()
+
+    const newValueEmitted = updateModelValueEvents[0][0]
+    expect(newValueEmitted).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)
+
+    const emittedEvents = wrapper.emitted()
+    expect(emittedEvents).toBeTruthy()
+
+    const updateModelValueEvents = emittedEvents['update:modelValue'] as any[]
+    expect(updateModelValueEvents).toBeTruthy()
+
+    const newValueEmitted = updateModelValueEvents[0][0]
+    expect(newValueEmitted).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) as any
+    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) as any
+    // Simulate clicking the toggle button
+    await wrapper.find('input[type="checkbox"]').trigger('change')
+    const emittedEvents = wrapper.emitted()
+    expect(emittedEvents).toBeTruthy()
+    const toggleChartEmit = emittedEvents['toggle-chart'] as any[] // Type assertion to any[]
+    expect(toggleChartEmit).toBeTruthy()
+    expect(wrapper.vm.chartVisible).toBe(true)
+
+    await wrapper.find('input[type="checkbox"]').trigger('change')
+
+
+    expect(wrapper.emitted('toggle-chart')).toBeTruthy()
+    expect(toggleChartEmit[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
+    const titleElement = wrapper.find('.component-title')
+    if (titleElement.exists()) {
+      expect(titleElement.text()).toContain(title)
+    } else {
+      throw new Error('Title element not found');
+    }
+
+    // Find all component-right-field elements
+    const rightFieldElements = wrapper.findAll('.component-right-field')
+
+    // Check if elements exist and have expected text content
+    if (rightFieldElements.length >= 3) {
+      // date rendering
+      const dateElement = rightFieldElements.at(0)
+      if (dateElement) {
+        expect(dateElement.text()).toContain(date)
+      } else {
+        throw new Error('Date element not found');
+      }
+
+      // amount rendering
+      const amountElement = rightFieldElements.at(1)
+      if (amountElement) {
+        expect(amountElement.text()).toContain(`${amount}kr`)
+      } else {
+        throw new Error('Amount element not found');
+      }
+
+      // category rendering
+      const categoryElement = rightFieldElements.at(2)
+      if (categoryElement) {
+        expect(categoryElement.text()).toContain(category)
+      } else {
+        throw new Error('Category element not found');
+      }
+    } else {
+      throw new Error('Expected elements not found');
+    }
+  })
+
+})

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 as HTMLElement
+    expect(buttonElement.style?.backgroundColor).toBe(buttonColor)
+  })
+})