From 33da2593c14a3e8f498dade2310bfc63f9df85a3 Mon Sep 17 00:00:00 2001
From: Zara Mudassar <zara.1310@hotmail.com>
Date: Mon, 25 Apr 2022 14:55:44 +0200
Subject: [PATCH] ItemCard converted from vuetify to tailwind and tests for
ItemCard added
---
src/components/ItemCard.vue | 32 ++++++++++++++++++--------------
tests/unit/item-card.spec.js | 20 ++++++++++++++++++++
2 files changed, 38 insertions(+), 14 deletions(-)
create mode 100644 tests/unit/item-card.spec.js
diff --git a/src/components/ItemCard.vue b/src/components/ItemCard.vue
index e660962..b120d82 100644
--- a/src/components/ItemCard.vue
+++ b/src/components/ItemCard.vue
@@ -1,18 +1,22 @@
<template>
- <v-card max-width="40%" class="text-left ma-5 pa-2">
- <v-img
- class="rounded-5"
- :src="item.img || require('../assets/default-product.png')"
- ></v-img>
-
- <v-card-subtitle>{{ item.adresse }}</v-card-subtitle>
-
- <v-card-text class="font-weight-bold mb-n3 mt-n3">
- {{ item.title }}
- </v-card-text>
-
- <v-card-subtitle>{{ item.price }}</v-card-subtitle>
- </v-card>
+ <div class="flex justify-center mt-5">
+ <div class="w-2/5 rounded overflow-hidden bg-gray-100">
+ <img
+ class="w-full"
+ :src="item.img || require('../assets/default-product.png')"
+ alt="Item image"
+ />
+ <div class="p-1 m-1">
+ <p class="text-gray-700 text-xs" id="adress">
+ {{ item.adresse }}
+ </p>
+ <p class="font-bold text-sm" id="title">{{ item.title }}</p>
+ <p class="text-gray-700 text-xs" id="price">
+ {{ item.price }}
+ </p>
+ </div>
+ </div>
+ </div>
</template>
<script>
diff --git a/tests/unit/item-card.spec.js b/tests/unit/item-card.spec.js
new file mode 100644
index 0000000..e8fc9c9
--- /dev/null
+++ b/tests/unit/item-card.spec.js
@@ -0,0 +1,20 @@
+import { shallowMount } from "@vue/test-utils";
+import ItemCard from "@/components/ItemCard.vue";
+
+describe("ItemCard elements rendering", () => {
+ it("renders all paragraphs", async() => {
+ const wrapper = shallowMount(ItemCard);
+
+ await wrapper.setData({
+ item : {
+ title : 'Dyson',
+ adresse: 'Trondheim',
+ price : '500'
+ }
+ })
+
+ expect(wrapper.find("#title").text()).toBe("Dyson");
+ expect(wrapper.find("#adress").text()).toBe("Trondheim");
+ expect(wrapper.find("#price").text()).toBe("500");
+ });
+});
--
GitLab