added api

package.json

@@ -19,8 +19,10 @@
     "test:unit": "jest --coverage"
   },
   "dependencies": {
-    "axios": "^0.21.1",
+    "axios": "^0.21.4",
     "core-js": "^3.6.5",
+    "flush-promises": "^1.0.2",
+    "node-fetch": "^2.6.1",
     "vue": "^3.0.0",
     "vue-axios": "^3.2.5",
     "vue-star-rating": "^2.1.0"

src/App.vue

@@ -4,7 +4,7 @@
       <div class="justify-content-md-center row">
         <div class="col col-lg-8">
           <top-bar></top-bar>
-          <list-cart-items displaying="block" :test="test" @delete-cart-items='removeItem' @qty-dropdown='getQty'></list-cart-items>
+          <list-cart-items displaying="block" :test="test" :url="url" @delete-cart-items='removeItem' @qty-dropdown='getQty'></list-cart-items>
           <banner>
             <div
               class="card"
@@ -56,6 +56,8 @@ import Banner from "./components/Banner.vue";
 //import FrequentlyView from "./components/FrequentlyView.vue";
 import ListCartItems from "./components/ListCartItems.vue";
 import SuggestProduct from "./components/SuggestProduct.vue";
+var fetch = require("node-fetch");
+
 
 export default {
   name: "App",
@@ -66,8 +68,8 @@ export default {
     };
   },
   props: {
-    test: Array,
-    getTotal: Number
+    getTotal: Number,
+    url: String
   },
   components: {
     TopBar,
@@ -78,8 +80,9 @@ export default {
     ListCartItems,
     SuggestProduct,
   },
-  created() {
-    console.log("===dsaf===", this.test)
+  created(){
+    console.log("====", this.url)
+    //this.url = "https://xapi-mfe-poc.herokuapp.com/getCart"
   },
   methods: {
     removeItem(id){

src/__tests__/simpleTest.spec.js

-import { mount } from "@vue/test-utils";
+import { mount , shallowMount} from "@vue/test-utils";
+import  ListCartItems from '../components/ListCartItems.vue'
+import App from '../App.vue'
+import { test } from "@jest/globals";
 
-// The component to test
-const MessageComponent = {
-  template: "<p>{{ msg }}</p>",
-  props: ["msg"],
-};
-
-test("displays message", () => {
-  const wrapper = mount(MessageComponent, {
+const data = {
+  "id":1,
+  "title":"Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
+  "price":109.95,
+  "description":"Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday","category":"men's clothing",
+  "image":"https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
+  "qty": "3"
+}
+test("Testing qty dropdown", () => {
+  const wrapper = mount(ListCartItems, {
     props: {
-      msg: "Hello world",
-    },
+      test: [data],
+      displaying: 'block'
+    }
   });
 
-  // Assert the rendered text of the component
-  expect(wrapper.text()).toContain("Hello world");
+  wrapper.find("select").trigger('change');  
+  expect(wrapper.emitted('qty-dropdown')[0]).toEqual(["3", data])
+});
+
+test("Remove item from cart", () => {
+  const wrapper = mount(App, {
+    propsData: {
+      test: [data],
+      getTotal: 0
+    }
+
+  })
+  wrapper.find(".remove-item").trigger('click');
+  expect(wrapper.emitted('delete-cart-items')[0]).toBeTruthy()
+})
+
+describe("cart component render properly", () => {
+  it("should render cart component", () => {
+    const wrapper = shallowMount(<App />);
+    expect(wrapper.vm).toBeTruthy()
+  });
 });

src/components/ListCartItems.vue

 <template>
   <div>
     <div class="card" v-if="loading">loading.....</div>
-    <div class="card" v-else-if="test == undefined"><p>No item into cart </p></div>
+    <div class="card" v-else-if="list == undefined"><p>No item into cart </p></div>
     <div
       v-else
       class="overflow-hidden mb-2 card"
-      v-for="item in test"
+      v-for="item in list"
       v-bind:key="item.id"
     >
       <div class="card-body">
@@ -26,12 +26,12 @@
             </div>
           </div>
           <div class="col col-lg-2">
-            <select v-model="item.qty" @change="switchSelect($event, item)">
-            <option value="1">1</option>
-             <option value="2">2</option>
-             <option value="3">3</option>
-             <option value="4">4</option>
-             <option value="5">5</option>
+            <select v-model="item.qty" id="qty-select " @change="switchSelect($event, item)">
+              <option value="1">1</option>
+              <option value="2">2</option>
+              <option value="3">3</option>
+              <option value="4">4</option>
+              <option value="5">5</option>
               <option value="6">5</option>
             </select>
           </div>
@@ -53,16 +53,17 @@
           <div class="links">
             <a href="">Save For later </a>
             <a href="">Move to List </a>
-            <a href="#" @click="$emit('delete-cart-items', item.id)">Remove </a>
+            <a href="#" class="remove-item" @click="$emit('delete-cart-items', item.id)">Remove </a>
           </div>
         </div>
       </div>
-    </div>
-    
+    </div>  
   </div>
 </template>
 
 <script>
+import axios from 'axios';
+
 export default {
   name: "ListCartItems",
   data() {
@@ -73,23 +74,28 @@ export default {
     };
   },
   props: {
-    test: Array,
-    displaying: String
+    displaying: String,
+    url: String
   },
   methods: {
     switchSelect(e, item){
       this.$emit('qty-dropdown', e.target.value, item)
     }
   },
-  mounted() {
-    this.loading = true; //the loading begin
-    fetch("https://fakestoreapi.com/products?limit=5")
-      .then((res) => res.json())
-      .then((res) => {
-        this.list = res;
+  created(){
+    console.log("this.url ",this.url);
+    axios.get(this.url)
+      .then(response => {
+        this.list = response.data;
+        this.loading = false;
+      })
+      .catch(error => {
+        console.log(error);
+        this.error = "Something went wrong. Please try again later.";
+        this.loading = false;
       })
-      .finally(() => (this.loading = false)); // set loading to false when request finish
   },
+
 };
 </script>
 

src/components/Promo.vue

@@ -4,7 +4,7 @@
         <p>Enter Promo code. Limit of 1 offer per order </p>
         <div class="input-group">
             <input type="text" v-model="code" @change="getPromo"/>
-            <div class="input-group-append"><button @click="getCode" class="black">Apply</button></div>
+            <div class="input-group-append"><button class="black">Apply</button></div>
                         <p v-if="error" class="error">{{ error[0]}}</p>
 
         </div>
@@ -21,16 +21,16 @@ export default {
         }
     },
     methods: {
-        getCode() {
-            if(this.code === "") {
-                this.error.push("Please enter propmo code")
-            } else {
-                this.error = []
-            }
-        },
-        getPromo(e) {
-            this.code = e.target.value
-        }
+        // getCode() {
+        //     if(this.code === "") {
+        //         this.error.push("Please enter propmo code")
+        //     } else {
+        //         this.error = []
+        //     }
+        // },
+        // getPromo(e) {
+        //     this.code = e.target.value
+        // }
     }
 }
 </script>