[chore] Refactor mockStore util

jest-setup.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

jest.config.js

@@ -2,5 +2,6 @@ module.exports = {
   preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
   transform: {
     "^.+\\.vue$": "vue-jest"
-  }
+  },
+  setupFilesAfterEnv: ["<rootDir>/jest-setup.ts"]
 };

src/components/ProductList.vue

@@ -1,5 +1,5 @@
 <template>
-  <ul class="products-list" data-test="products-list">
+  <ul class="products-list" data-testid="products-list">
     <ProductItem
       v-for="(product, id) in products"
       :key="id"

tests/unit/components/ProductList.spec.ts

@@ -1,28 +1,13 @@
-import { shallowMount } from "@vue/test-utils";
+import { render } from "@testing-library/vue";
 import ProductList from "@/components/ProductList.vue";
-import ProductItem from "@/components/ProductItem.vue";
-import mockStore from "../mocks/mockStore";
-
-const store = mockStore();
+import store from "../mocks/mockStore2";
 
 describe("ProductList.vue", () => {
-  it("Must have a main container", () => {
-    const wrapper = shallowMount(ProductList, {
-      global: {
-        plugins: [store]
-      }
-    });
-
-    expect(wrapper.find('[data-test="products-list"]').exists()).toBeTruthy();
-  });
-
-  it("Must use ProductItem component", () => {
-    const wrapper = shallowMount(ProductList, {
-      global: {
-        plugins: [store]
-      }
-    });
+  it("Must render the products", () => {
+    const { getByText } = render(ProductList, { store });
 
-    expect(wrapper.findAllComponents(ProductItem).length).toBe(3);
+    expect(getByText("Cap")).toBeInTheDocument();
+    expect(getByText("Shirt")).toBeInTheDocument();
+    expect(getByText("Mug")).toBeInTheDocument();
   });
 });

tests/unit/mocks/mockStore2.ts

@@ -0,0 +1,58 @@
+import store from "@/store";
+
+function mockStore(): object {
+  return {
+    modules: {
+      shopping: {
+        ...store.modules.shopping,
+        state: {
+          products: [
+            {
+              id: "X3W2OPY",
+              code: "CAP",
+              name: "Cap",
+              price: 5,
+              discounts: ["TWO_X_ONE"],
+              currency: "€"
+            },
+            {
+              id: "X7R2OPX",
+              code: "TSHIRT",
+              name: "Shirt",
+              price: 20,
+              discounts: ["BULK"],
+              currency: "€"
+            },
+            {
+              id: "X2G2OPZ",
+              code: "MUG",
+              name: "Mug",
+              price: 7.5,
+              discounts: [],
+              currency: "€"
+            }
+          ],
+          summary: {
+            totalCost: 40,
+            totalItems: 5,
+            discountsApplied: [
+              {
+                code: "test code 1",
+                literal: "test literal 1",
+                total: 3
+              },
+              {
+                code: "test code 2",
+                literal: "test literal 2",
+                total: 9
+              }
+            ],
+            totalCostWithDiscounts: 23
+          }
+        }
+      }
+    }
+  };
+}
+
+export default mockStore();

tsconfig.json

@@ -33,7 +33,8 @@
     "src/**/*.tsx",
     "src/**/*.vue",
     "tests/**/*.ts",
-    "tests/**/*.tsx"
+    "tests/**/*.tsx",
+    "./jest-setup.ts"
   ],
   "exclude": [
     "node_modules"