From 1a986f6ad8a0cc78d17cf3418b6d77657cce3c31 Mon Sep 17 00:00:00 2001
From: Ingrid Martinsheimen Egge <ingrimeg@stud.ntnu.no>
Date: Mon, 1 May 2023 09:09:11 +0200
Subject: [PATCH] la inn tester for fridgeItem
---
src/components/FridgeItem.vue | 4 +-
src/components/__tests__/FridgeItem.spec.js | 83 +++++++++++++++++++++
2 files changed, 85 insertions(+), 2 deletions(-)
create mode 100644 src/components/__tests__/FridgeItem.spec.js
diff --git a/src/components/FridgeItem.vue b/src/components/FridgeItem.vue
index f755967..2478410 100644
--- a/src/components/FridgeItem.vue
+++ b/src/components/FridgeItem.vue
@@ -3,9 +3,9 @@
<img :src="getImage" alt="">
<div id="itemInfo">
<p id="fridgeItemName">{{this.actualItem.item.name }} {{ this.actualItem.amount.quantity }}{{this.actualItem.item.amount.unit}}</p>
- <p :style="{color:expirationTextColor}">{{expirationText}}</p>
+ <p class="expText" :style="{color:expirationTextColor}">{{expirationText}}</p>
</div>
- <div @click="appleBtnPressed">
+ <div id = "appleBtn" @click="appleBtnPressed">
<Icon icon="game-icons:apple-core" :color="iconColor" :style="{ fontSize: iconSize }" />
</div>
diff --git a/src/components/__tests__/FridgeItem.spec.js b/src/components/__tests__/FridgeItem.spec.js
new file mode 100644
index 0000000..5a7b241
--- /dev/null
+++ b/src/components/__tests__/FridgeItem.spec.js
@@ -0,0 +1,83 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import FridgeItem from "@/components/FridgeItem.vue";
+
+const normalItem = {
+ "item":{
+ "id": "1",
+ "name":"eple",
+ "amount": {"quantity": "4","unit": "stk"},
+ "image_url": "https://bilder.ngdata.no/7040512550818/meny/large.jpg"
+ },
+ "exp_date": "2222-02-22T00:00:00+00:00",
+ "amount": {"quantity": "6","unit": "stk"}
+}
+
+const expiredItem = {
+ "item":{
+ "id": "1",
+ "name":"eple",
+ "amount": {"quantity": "4","unit": "stk"},
+ "image_url": "https://bilder.ngdata.no/7040512550818/meny/large.jpg"
+ },
+ "exp_date": "2002-02-22T00:00:00+00:00",
+ "amount": {"quantity": "6","unit": "stk"}
+}
+describe('Fridge items render correctly', () => {
+
+ it('displays the name of the item', () => {
+ const wrapper = mount(FridgeItem, {
+ props: {
+ actualItem: normalItem,
+ },
+ });
+ expect(wrapper.text()).toContain('eple');
+ });
+
+ it('displays the amount of the item in the fridge' , () => {
+ const wrapper = mount(FridgeItem, {
+ props: {
+ actualItem: normalItem,
+ },
+ });
+ expect(wrapper.text()).toContain('6');
+ expect(wrapper.text()).toContain('stk');
+ });
+
+ it('displays item image', () => {
+ const wrapper = mount(FridgeItem, {props: {
+ actualItem: normalItem,
+ },
+ });
+ const itemImage = wrapper.find('img');
+ expect(itemImage.exists()).toBe(true);
+ expect(itemImage.element.getAttribute('src')).not.toBe('');
+ expect(itemImage.element.getAttribute('src')).toBe('https://bilder.ngdata.no/7040512550818/meny/large.jpg');
+ });
+
+ it('displays text of different color when item has expired', () => {
+ const wrapper = mount(FridgeItem, {
+ props: {
+ actualItem: expiredItem,
+ },
+ });
+
+ const expiration = wrapper.find('.expText');
+ expect(expiration.element.style.color).not.toBe('black');
+ });
+
+})
+describe('Behaves as expected', () => {
+ it('emits when the apple button is pressed', async () => {
+ const wrapper = mount(FridgeItem, {
+ props: {
+ actualItem: normalItem,
+ },
+ });
+
+ await wrapper.find('#appleBtn').trigger('click');
+ await wrapper.vm.$nextTick();
+ expect(wrapper.emitted().appleBtnPressed).toBeTruthy();
+
+ })
+})
--
GitLab