From 80f553315db16f439a6548b9c064a1f8897b02ea Mon Sep 17 00:00:00 2001
From: Tini Tran <tinit@stud.ntnu.no>
Date: Mon, 29 Apr 2024 15:00:58 +0200
Subject: [PATCH] Created tests for create form, economy-overview and
milestone-button components
---
.../__tests__/create-form/BaseInput.spec.ts | 36 +++++++++++++++++++
.../create-form/BaseTextArea.spec.ts | 31 ++++++++++++++++
.../__tests__/economy/ToggleButton.spec.ts | 28 +++++++++++++++
.../economy/TransactionComponent.spec.ts | 35 ++++++++++++++++++
.../milestonePath/MilestoneButton.spec.ts | 24 +++++++++++++
5 files changed, 154 insertions(+)
create mode 100644 src/components/__tests__/create-form/BaseInput.spec.ts
create mode 100644 src/components/__tests__/create-form/BaseTextArea.spec.ts
create mode 100644 src/components/__tests__/economy/ToggleButton.spec.ts
create mode 100644 src/components/__tests__/economy/TransactionComponent.spec.ts
create mode 100644 src/components/__tests__/milestonePath/MilestoneButton.spec.ts
diff --git a/src/components/__tests__/create-form/BaseInput.spec.ts b/src/components/__tests__/create-form/BaseInput.spec.ts
new file mode 100644
index 0000000..dbbe24e
--- /dev/null
+++ b/src/components/__tests__/create-form/BaseInput.spec.ts
@@ -0,0 +1,36 @@
+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)
+ })
+})
diff --git a/src/components/__tests__/create-form/BaseTextArea.spec.ts b/src/components/__tests__/create-form/BaseTextArea.spec.ts
new file mode 100644
index 0000000..fbead70
--- /dev/null
+++ b/src/components/__tests__/create-form/BaseTextArea.spec.ts
@@ -0,0 +1,31 @@
+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)
+ })
+})
diff --git a/src/components/__tests__/economy/ToggleButton.spec.ts b/src/components/__tests__/economy/ToggleButton.spec.ts
new file mode 100644
index 0000000..e2addb1
--- /dev/null
+++ b/src/components/__tests__/economy/ToggleButton.spec.ts
@@ -0,0 +1,28 @@
+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)
+ })
+})
diff --git a/src/components/__tests__/economy/TransactionComponent.spec.ts b/src/components/__tests__/economy/TransactionComponent.spec.ts
new file mode 100644
index 0000000..2e9b91b
--- /dev/null
+++ b/src/components/__tests__/economy/TransactionComponent.spec.ts
@@ -0,0 +1,35 @@
+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)
+ })
+
+})
diff --git a/src/components/__tests__/milestonePath/MilestoneButton.spec.ts b/src/components/__tests__/milestonePath/MilestoneButton.spec.ts
new file mode 100644
index 0000000..a8b488b
--- /dev/null
+++ b/src/components/__tests__/milestonePath/MilestoneButton.spec.ts
@@ -0,0 +1,24 @@
+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)
+ })
+})
--
GitLab