From 4e549c7fba67ede670922c87fc305e0ec980645e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Valdemar=20=C3=85storp=20Beere?= <valdemb@stud.ntnu.no>
Date: Sun, 21 Apr 2024 14:06:17 +0200
Subject: [PATCH] test(component):
Created vitest for InteractiveSpare component
---
.../__tests__/InteractiveSpareTest.spec.ts | 58 +++++++++++++++++++
1 file changed, 58 insertions(+)
create mode 100644 src/components/__tests__/InteractiveSpareTest.spec.ts
diff --git a/src/components/__tests__/InteractiveSpareTest.spec.ts b/src/components/__tests__/InteractiveSpareTest.spec.ts
new file mode 100644
index 0000000..288954a
--- /dev/null
+++ b/src/components/__tests__/InteractiveSpareTest.spec.ts
@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import SpeechBubbleComponent from '@/components/InteractiveSpare.vue'; // Adjust the import path as needed.
+
+describe('SpeechBubbleComponent', () => {
+ it('renders correctly with default props', () => {
+ const wrapper = mount(SpeechBubbleComponent, {
+ props: {
+ direction: 'left',
+ speech: ['Hello', 'World']
+ }
+ });
+ expect(wrapper.exists()).toBeTruthy();
+ });
+
+ it('applies dynamic classes based on direction prop', () => {
+ const wrapper = mount(SpeechBubbleComponent, {
+ props: {
+ direction: 'right',
+ speech: ['Hello', 'World']
+ }
+ });
+ expect(wrapper.find('div').classes()).toContain('flex-row');
+ const wrapperReverse = mount(SpeechBubbleComponent, {
+ props: {
+ direction: 'left',
+ speech: ['Hello', 'World']
+ }
+ });
+ expect(wrapperReverse.find('div').classes()).toContain('flex-row-reverse');
+ });
+
+ it('image class is computed based on direction', () => {
+ const wrapper = mount(SpeechBubbleComponent, {
+ props: {
+ direction: 'right',
+ speech: ['Hello', 'World']
+ }
+ });
+ expect(wrapper.find('img').classes()).toContain('scale-x-[-1]');
+ });
+
+ it('updates speech text on image click', async () => {
+ const wrapper = mount(SpeechBubbleComponent, {
+ props: {
+ direction: 'left',
+ speech: ['First speech', 'Second speech']
+ }
+ });
+ expect(wrapper.find('span').text()).toBe('First speech');
+ await wrapper.find('img').trigger('click');
+ expect(wrapper.find('span').text()).toBe('Second speech');
+ // Test wrap-around
+ await wrapper.find('img').trigger('click');
+ expect(wrapper.find('span').text()).toBe('First speech');
+ });
+});
+
--
GitLab