Merge bd0f414 into a1fa7b0

package.json

@@ -28,8 +28,7 @@
   "husky": {
     "hooks": {
       "pre-commit": "lint-staged",
-      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
-      "pre-push": "yarn test:unit"
+      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
     }
   },
   "lint-staged": {
@@ -59,7 +58,7 @@
     "execa": "^4.0.0",
     "faker": "^4.1.0",
     "fs-extra": "^8.1.0",
-    "husky": "^3.1.0",
+    "husky": "^4.0.6",
     "jest": "^24.9.0",
     "lerna": "^3.19.0",
     "lint-staged": "^9.5.0",

packages/composables/__tests__/useCategoryFilters.spec.ts

@@ -86,5 +86,74 @@ describe("Composables - useCategoryFilters", () => {
         expect(activeFilters.value).toHaveProperty("price");
       });
     });
+
+    describe("availableSorting", () => {
+      it("should return empty array if there is no page loaded", () => {
+        const { availableSorting } = useCategoryFilters();
+        expect(availableSorting.value).toBeTruthy();
+        expect(availableSorting.value).toHaveLength(0);
+      });
+
+      it("should return proper sorting if any loaded", () => {
+        const listingConfiguration = {
+          listingConfiguration: {
+            availableSortings: {
+              "name-asc": {
+                key: "name-asc",
+                active: true
+              },
+              "name-desc": {
+                key: "name-desc",
+                active: false
+              }
+            }
+          }
+        };
+
+        statePage.value = listingConfiguration;
+
+        const { availableSorting } = useCategoryFilters();
+        expect(availableSorting.value).toBeTruthy();
+        expect(availableSorting.value).toHaveLength(2);
+        expect(availableSorting.value).toStrictEqual([
+          { active: true, field: "name", name: "name-asc", order: "asc" },
+          { active: false, field: "name", name: "name-desc", order: "desc" }
+        ]);
+      });
+    });
+
+    describe("activeSorting", () => {
+      it("should return no sorting when any is active", () => {
+        const { activeSorting } = useCategoryFilters();
+        expect(activeSorting.value).toBeFalsy();
+      });
+
+      it("should return active sortings", () => {
+        const listingConfiguration = {
+          listingConfiguration: {
+            availableSortings: {
+              "name-asc": {
+                key: "name-asc",
+                active: true
+              },
+              "name-desc": {
+                key: "name-desc",
+                active: false
+              }
+            }
+          }
+        };
+
+        statePage.value = listingConfiguration;
+
+        const { activeSorting } = useCategoryFilters();
+        expect(activeSorting.value).toEqual({
+          name: "name-asc",
+          field: "name",
+          order: "asc",
+          active: true
+        });
+      });
+    });
   });
 });

packages/composables/__tests__/useCms.spec.ts

@@ -52,4 +52,14 @@ describe("Shopware composables", () => {
     expect(error.value).toBeTruthy();
     expect(error.value).toEqual("Something went wrong...");
   });
+
+  it("should performs search request with no or empty configuration for SearchCriteria", async () => {
+    const { search, page, error } = useCms();
+    mockedGetPage.getPage.mockRejectedValueOnce("Something went wrong...");
+    expect(page.value).toEqual(null);
+    await search("", { configuration: { associations: [] } });
+    expect(page.value).toEqual(null);
+    expect(error.value).toBeTruthy();
+    expect(error.value).toEqual("Something went wrong...");
+  });
 });

packages/composables/__tests__/useProductListing.spec.ts

@@ -0,0 +1,206 @@
+import Vue from "vue";
+import VueCompositionApi, {
+  reactive,
+  ref,
+  computed,
+  Ref
+} from "@vue/composition-api";
+Vue.use(VueCompositionApi);
+import { useProductListing, setStore } from "@shopware-pwa/composables";
+
+jest.mock("@shopware-pwa/shopware-6-client");
+import * as shopwareClient from "@shopware-pwa/shopware-6-client";
+import {
+  SearchFilterType,
+  EqualsFilter,
+  EqualsAnyFilter
+} from "@shopware-pwa/shopware-6-client/src/interfaces/search/SearchFilter";
+
+const mockedGetPage = shopwareClient as jest.Mocked<typeof shopwareClient>;
+
+describe("Composables - useProductListing", () => {
+  const statePage: Ref<Object | null> = ref(null);
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    statePage.value = null;
+    setStore({
+      getters: reactive({ getPage: computed(() => statePage.value) }),
+      commit: (name: string, value: any) => {
+        statePage.value = value;
+      }
+    });
+  });
+  describe("no reference to the products collection", () => {
+    it("should have no value if search wasn't performed", async () => {
+      const { products } = useProductListing();
+      expect(products.value).toHaveLength(0);
+    });
+    it("should have empty array if no products passed", async () => {
+      const { products } = useProductListing([]);
+      expect(products.value).toHaveLength(0);
+    });
+  });
+
+  describe("toggleFilter", () => {
+    it("selectedFilters should not contain any filter on init", async () => {
+      const { selectedFilters } = useProductListing();
+      expect(selectedFilters.value).toStrictEqual({});
+    });
+
+    it("selectedFilters should be filled with passed one", async () => {
+      const { selectedFilters, toggleFilter } = useProductListing();
+      toggleFilter({
+        type: SearchFilterType.EQUALS,
+        value: "white",
+        field: "color"
+      } as EqualsFilter);
+
+      expect(selectedFilters.value).toHaveProperty("color");
+    });
+
+    it("selectedFilters should append the existing one", async () => {
+      const {
+        selectedFilters,
+        toggleFilter,
+        resetFilters
+      } = useProductListing();
+      resetFilters();
+
+      toggleFilter({
+        type: SearchFilterType.EQUALS_ANY,
+        value: ["white", "black"],
+        field: "color"
+      } as EqualsAnyFilter);
+
+      expect(selectedFilters.value).toHaveProperty("color");
+    });
+
+    it("selectedFilters should remove the existing one if toggled", async () => {
+      const {
+        selectedFilters,
+        toggleFilter,
+        resetFilters
+      } = useProductListing();
+      resetFilters();
+
+      toggleFilter({
+        type: SearchFilterType.EQUALS,
+        value: "white",
+        field: "color"
+      } as EqualsFilter);
+
+      toggleFilter({
+        type: SearchFilterType.EQUALS,
+        value: "white",
+        field: "color"
+      } as EqualsFilter);
+
+      expect(selectedFilters.value).toHaveProperty("color");
+      expect(selectedFilters.value.color).toStrictEqual([]);
+    });
+  });
+
+  describe("search", () => {
+    it("should reset search criteria on category change event", async () => {
+      const { products, selectedFilters } = useProductListing([
+        { product: "1" } as any
+      ]);
+      expect(selectedFilters.value).toStrictEqual({ categoryTree: [] });
+
+      expect(products.value).toHaveLength(1);
+    });
+
+    it("should set loading property to false when search is done", async () => {
+      const { loading, search } = useProductListing([{ product: "1" } as any]);
+      await search();
+      expect(loading.value).toBe(false);
+    });
+
+    //
+    it("should return default total and empty product listing when page resolver fails", async () => {
+      mockedGetPage.getProducts.mockResolvedValueOnce({} as any);
+
+      const { pagination, products, search } = useProductListing();
+      await search();
+      expect(pagination.value).toStrictEqual({
+        currentPage: 1,
+        perPage: 10,
+        total: 0
+      });
+      expect(products.value).toStrictEqual([]);
+    });
+
+    it("should return products if exist", async () => {
+      mockedGetPage.getProducts.mockResolvedValueOnce({
+        data: [
+          {
+            id: "123456"
+          }
+        ]
+      } as any);
+
+      const { products, search } = useProductListing();
+      await search();
+      expect(products.value).toStrictEqual([{ id: "123456" }]);
+    });
+
+    it("should search with no categoryId passed by page resolver", async () => {
+      statePage.value = {
+        resourceIdentifier: "123456"
+      };
+      const { categoryId } = useProductListing();
+
+      expect(categoryId.value).toStrictEqual("123456");
+    });
+  });
+
+  describe("changeSorting", () => {
+    it("should perform no search if no sorting provided", async () => {
+      const { changeSorting, selectedSorting } = useProductListing();
+      await changeSorting({
+        field: "price",
+        desc: false
+      });
+      await changeSorting(undefined as any);
+
+      expect(selectedSorting.value).toStrictEqual({
+        desc: false,
+        field: "price"
+      });
+    });
+  });
+
+  describe("changePagination", () => {
+    it("should perform no search and leave default pagination if no change performed", async () => {
+      const { pagination, changePagination } = useProductListing();
+
+      changePagination(undefined as any);
+      expect(pagination.value).toStrictEqual({
+        currentPage: 1,
+        perPage: 10,
+        total: 0
+      });
+    });
+
+    it("should perform change the shared pagination object if change succeeds", async () => {
+      const { pagination, changePagination } = useProductListing();
+
+      changePagination(10);
+      expect(pagination.value).toStrictEqual({
+        currentPage: 10,
+        perPage: 10,
+        total: 0
+      });
+    });
+  });
+
+  describe("computed", () => {
+    describe("productsTotal", () => {
+      it("should return 0 by default", () => {
+        const { productsTotal } = useProductListing();
+        expect(productsTotal.value).toBeFalsy();
+      });
+    });
+  });
+});

packages/composables/package.json

@@ -33,6 +33,7 @@
     "vue": "^2.6.11"
   },
   "dependencies": {
+    "query-string": "^6.9.0",
     "@shopware-pwa/shopware-6-client": "^0.1.0-prealpha.0"
   }
 }

packages/composables/src/hooks/useCategoryFilters/index.ts

@@ -2,7 +2,10 @@ import { computed } from "@vue/composition-api";
 import { useCms } from "@shopware-pwa/composables";
 import {
   getCategoryAvailableFilters,
-  UiCategoryFilter
+  getCategoryAvailableSorting,
+  UiCategoryFilter,
+  UiCategorySorting,
+  SwSorting
 } from "@shopware-pwa/helpers";
 
 export const useCategoryFilters = (): any => {
@@ -26,8 +29,25 @@ export const useCategoryFilters = (): any => {
     });
   });
 
+  const availableSorting = computed((): UiCategorySorting[] | any => {
+    if (!page || !page.value || !page.value.listingConfiguration) {
+      return [];
+    }
+
+    return getCategoryAvailableSorting({
+      sorting: page.value.listingConfiguration.availableSortings
+    });
+  });
+
+  const activeSorting = computed(
+    (): SwSorting =>
+      availableSorting.value.find((sorting: SwSorting) => sorting.active)
+  );
+
   return {
     availableFilters,
-    activeFilters
+    activeFilters,
+    availableSorting,
+    activeSorting
   };
 };