From d10f7421565842a1ead05c5c078c13e54220ad8a Mon Sep 17 00:00:00 2001
From: Ingrid Martinsheimen Egge <ingrimeg@stud.ntnu.no>
Date: Mon, 1 May 2023 11:59:51 +0200
Subject: [PATCH] la inn tester for fridgeView og FridgeItemModal
---
package-lock.json | 40 +++++++++
package.json | 1 +
src/components/EatFridgeItemModal.vue | 2 +-
src/components/Navbar.vue | 1 +
.../__tests__/FridgeItemModal.spec.js | 88 +++++++++++++++++++
src/components/__tests__/ItemSearch.spec.js | 6 +-
src/components/__tests__/Navbar.spec.js | 2 +
src/views/FridgeView.vue | 3 -
src/views/__tests__/FridgeView.spec.js | 70 +++++++++++++++
9 files changed, 206 insertions(+), 7 deletions(-)
create mode 100644 src/components/__tests__/FridgeItemModal.spec.js
create mode 100644 src/views/__tests__/FridgeView.spec.js
diff --git a/package-lock.json b/package-lock.json
index 4f041b3..325009f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
"version": "0.0.0",
"dependencies": {
"@iconify/vue": "^4.1.1",
+ "@pinia/testing": "^0.0.16",
"jwt-decode": "^3.1.2",
"pinia": "^2.0.35",
"pinia-plugin-persistedstate": "^3.1.0",
@@ -683,6 +684,45 @@
"node": "^12.13.0 || ^14.15.0 || >=16.0.0"
}
},
+ "node_modules/@pinia/testing": {
+ "version": "0.0.16",
+ "resolved": "https://registry.npmjs.org/@pinia/testing/-/testing-0.0.16.tgz",
+ "integrity": "sha512-oa5kO82hzWekqMq1HTnS/b+ZM+ZKEcEApuuCTelvKK79jTxg7P026Qw8/2RbVn5eUGAvRWQu4ubObrshVqCRjQ==",
+ "dependencies": {
+ "vue-demi": "*"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/posva"
+ },
+ "peerDependencies": {
+ "pinia": ">=2.0.34"
+ }
+ },
+ "node_modules/@pinia/testing/node_modules/vue-demi": {
+ "version": "0.14.0",
+ "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
+ "integrity": "sha512-gt58r2ogsNQeVoQ3EhoUAvUsH9xviydl0dWJj7dabBC/2L4uBId7ujtCwDRD0JhkGsV1i0CtfLAeyYKBht9oWg==",
+ "hasInstallScript": true,
+ "bin": {
+ "vue-demi-fix": "bin/vue-demi-fix.js",
+ "vue-demi-switch": "bin/vue-demi-switch.js"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "funding": {
+ "url": "https://github.com/sponsors/antfu"
+ },
+ "peerDependencies": {
+ "@vue/composition-api": "^1.0.0-rc.1",
+ "vue": "^3.0.0-0 || ^2.6.0"
+ },
+ "peerDependenciesMeta": {
+ "@vue/composition-api": {
+ "optional": true
+ }
+ }
+ },
"node_modules/@sideway/address": {
"version": "4.1.4",
"resolved": "https://registry.npmjs.org/@sideway/address/-/address-4.1.4.tgz",
diff --git a/package.json b/package.json
index 61bff41..0eb0aa1 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
},
"dependencies": {
"@iconify/vue": "^4.1.1",
+ "@pinia/testing": "^0.0.16",
"jwt-decode": "^3.1.2",
"pinia": "^2.0.35",
"pinia-plugin-persistedstate": "^3.1.0",
diff --git a/src/components/EatFridgeItemModal.vue b/src/components/EatFridgeItemModal.vue
index f3e6150..2d33835 100644
--- a/src/components/EatFridgeItemModal.vue
+++ b/src/components/EatFridgeItemModal.vue
@@ -3,7 +3,7 @@
<div id="exitBtn" @click="close"><Icon icon="mdi:alpha-x-box" :color="redIconColor" :style="{ fontSize: redIconSize }" /></div>
<h2>{{ this.fridgeItem.item.name }}</h2>
- <p>{{sliderValue}} {{this.fridgeItem.amount.unit}}</p>
+ <p id="sliderDisplay">{{sliderValue}} {{this.fridgeItem.amount.unit}}</p>
<label for="slider">Mengde tatt av varen:</label>
<input type = "range" id = "slider" name = "slider" min="0" :max = "this.maxValue" v-model="sliderValue">
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index e597f86..788592a 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -34,6 +34,7 @@
<script>
import { Icon } from '@iconify/vue';
import Logo from "@/components/Logo.vue";
+import { RouterLink } from 'vue-router'
export default {
name: "Navbar",
diff --git a/src/components/__tests__/FridgeItemModal.spec.js b/src/components/__tests__/FridgeItemModal.spec.js
new file mode 100644
index 0000000..cc180e0
--- /dev/null
+++ b/src/components/__tests__/FridgeItemModal.spec.js
@@ -0,0 +1,88 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import EatFridgeItemModal from "@/components/EatFridgeItemModal.vue";
+
+const normalItem = {
+ "item":{
+ "id": "1",
+ "name":"purre",
+ "amount": {"quantity": "500","unit": "g"},
+ "image_url": "https://bilder.ngdata.no/7040512550818/meny/large.jpg"
+ },
+ "exp_date": "2222-02-22T00:00:00+00:00",
+ "amount": {"quantity": "500","unit": "g"}
+}
+
+const expiredItem = {
+ "item":{
+ "id": "1",
+ "name":"purre",
+ "amount": {"quantity": "500","unit": "g"},
+ "image_url": "https://bilder.ngdata.no/7040512550818/meny/large.jpg"
+ },
+ "exp_date": "2002-02-22T00:00:00+00:00",
+ "amount": {"quantity": "500","unit": "g"}
+}
+describe('Renders correctly', () => {
+ it('displays the name of the item', () => {
+ const wrapper = mount(EatFridgeItemModal, {
+ props: {
+ fridgeItem: normalItem,
+ },
+ });
+
+ const itemName = wrapper.find('h2')
+ expect(itemName.text()).toContain('purre')
+
+ });
+
+ it('displays the correct unit', () => {
+ const wrapper = mount(EatFridgeItemModal, {
+ props: {
+ fridgeItem: normalItem,
+ },
+ });
+
+ const sliderValueUnit = wrapper.find('#sliderDisplay')
+ expect(sliderValueUnit.text()).toContain('g')
+
+ });
+
+ it('Displays a message if item has expired', () => {
+ const wrapper = mount(EatFridgeItemModal, {
+ props: {
+ fridgeItem: expiredItem,
+ },
+ });
+
+ expect(wrapper.find('#itemHasExpiredMessage').exists()).toBe(true);
+ const expiredMsgBox = wrapper.find('#itemHasExpiredMessage')
+ expect(expiredMsgBox.isVisible()).toBe(true)
+
+ });
+
+ it('Does not display message if item has not expired', () => {
+ const wrapper = mount(EatFridgeItemModal, {
+ props: {
+ fridgeItem: normalItem,
+ },
+ });
+ expect(wrapper.find('#itemHasExpiredMessage').exists()).toBe(false);
+ });
+
+})
+
+describe('Behaves correctly', () => {
+ it('emits close when X is pressed', async () => {
+ const wrapper = mount(EatFridgeItemModal, {
+ props: {
+ fridgeItem: normalItem,
+ },
+ });
+
+ await wrapper.find('#exitBtn').trigger('click');
+ await wrapper.vm.$nextTick();
+ expect(wrapper.emitted().closeModal).toBeTruthy();
+
+ });
+})
\ No newline at end of file
diff --git a/src/components/__tests__/ItemSearch.spec.js b/src/components/__tests__/ItemSearch.spec.js
index 12d1120..49c6597 100644
--- a/src/components/__tests__/ItemSearch.spec.js
+++ b/src/components/__tests__/ItemSearch.spec.js
@@ -19,7 +19,7 @@ const SearchReturn = [
}];
describe('Behaves as expected', () => {
- it('shows correct number of results', async () => {
+ it('shows correct number of results', () => {
const wrapper = mount(ItemSearch, {
data() {
return {
@@ -34,7 +34,7 @@ describe('Behaves as expected', () => {
expect(wrapper.text()).toContain('(2)')
});
- it('When adding more items, the total ingredient amount is shown', async () => {
+ it('When adding more items, the total ingredient amount is shown', () => {
const wrapper = mount(ItemSearch, {
data() {
return {
@@ -51,7 +51,7 @@ describe('Behaves as expected', () => {
expect(totalItemCount.text()).toContain('stk')
});
- it('Selected contains all items ', async () => {
+ it('Select contains all items ', () => {
const wrapper = mount(ItemSearch, {
data() {
return {
diff --git a/src/components/__tests__/Navbar.spec.js b/src/components/__tests__/Navbar.spec.js
index a212573..86579bf 100644
--- a/src/components/__tests__/Navbar.spec.js
+++ b/src/components/__tests__/Navbar.spec.js
@@ -3,6 +3,8 @@ import { describe, it, expect } from 'vitest'
import { mount } from '@vue/test-utils'
import Navbar from "@/components/Navbar.vue";
import { Icon } from '@iconify/vue';
+import { RouterLink } from 'vue-router';
+
describe('Navbar', () => {
it('contains 5 links', () => {
const wrapper = mount(Navbar)
diff --git a/src/views/FridgeView.vue b/src/views/FridgeView.vue
index 958ffd6..1428ae7 100644
--- a/src/views/FridgeView.vue
+++ b/src/views/FridgeView.vue
@@ -135,7 +135,4 @@ h1 {
font-weight: bolder;
font-size: 1.2em;
}
-
-
-
</style>
\ No newline at end of file
diff --git a/src/views/__tests__/FridgeView.spec.js b/src/views/__tests__/FridgeView.spec.js
new file mode 100644
index 0000000..4790f4a
--- /dev/null
+++ b/src/views/__tests__/FridgeView.spec.js
@@ -0,0 +1,70 @@
+import { describe, it, expect, vi } from 'vitest'
+import { createTestingPinia } from '@pinia/testing'
+import { mount } from '@vue/test-utils'
+import FridgeView from "@/views/FridgeView.vue";
+
+
+const fridgeIngredients = [
+ {
+ "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"}
+ }];
+
+describe('Fridge', () => {
+ it('renders', () => {
+ const wrapper = mount(FridgeView, {
+ global: {
+ plugins: [createTestingPinia({
+ createSpy: vi.fn,
+ })],
+ },
+ })
+ expect(wrapper.text()).toContain('Kjøleskap')
+ });
+
+ it('pressing the plus button makes search visible', async () => {
+ const wrapper = mount(FridgeView, {
+ global: {
+ plugins: [createTestingPinia({
+ createSpy: vi.fn,
+ })],
+ },
+
+ })
+ expect(wrapper.find('ItemSearch').exists()).toBe(false);
+ await wrapper.find('#addItemBtn').trigger('click');
+
+ setTimeout(() => {
+ expect(wrapper.find('ItemSearch').exists()).toBe(true);
+ }, 1000);
+ });
+
+ it('when appleBtnEmit, the EatFridgeItemModal is displayed', () => {
+ const wrapper = mount(FridgeView, {
+ global: {
+ plugins: [createTestingPinia({
+ createSpy: vi.fn,
+ })],
+ },
+ data() {
+ return {
+ fridgeItems: fridgeIngredients,
+ };
+ },
+
+ })
+
+ expect(wrapper.find('eat-fridge-item-modal').exists()).toBe(false);
+
+ wrapper.find('#appleBtn').trigger('click');
+ setTimeout(() => {
+ expect(wrapper.find('eat-fridge-item-modal').exists()).toBe(true);
+ }, 1000);
+ })
+})
\ No newline at end of file
--
GitLab