diff --git a/src/components/FridgeItem.vue b/src/components/FridgeItem.vue index f755967ffc425fba16437f3fe182537aa19fa5c6..2478410625b91236a1a7d1108d54d150bcaa3ba3 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 0000000000000000000000000000000000000000..5a7b241b63107426dc1f3aad53e793c412764e74 --- /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(); + + }) +})