@shopbite-de/storefront 1.2.8 → 1.3.0

package/test/nuxt/useAddToCart.test.ts

@@ -0,0 +1,162 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+
+import { useAddToCart } from "../../app/composables/useAddToCart";
+import { nextTick } from "vue";
+
+// Use vi.hoisted for variables used in mocks
+const {
+  mockAddProducts,
+  mockRefreshCart,
+  mockToastAdd,
+  mockTriggerProductAdded,
+  mockTrackEvent
+} = vi.hoisted(() => ({
+  mockAddProducts: vi.fn(),
+  mockRefreshCart: vi.fn(),
+  mockToastAdd: vi.fn(),
+  mockTriggerProductAdded: vi.fn(),
+  mockTrackEvent: vi.fn(),
+}));
+
+mockNuxtImport("useCart", () => {
+  return () => ({
+    addProducts: mockAddProducts,
+    refreshCart: mockRefreshCart,
+  });
+});
+
+mockNuxtImport("useToast", () => {
+  return () => ({
+    add: mockToastAdd,
+  });
+});
+
+mockNuxtImport("useProductEvents", () => {
+  return () => ({
+    triggerProductAdded: mockTriggerProductAdded,
+  });
+});
+
+mockNuxtImport("useTrackEvent", () => {
+  return mockTrackEvent;
+});
+
+// Provide the mocks globally or in a way that they are picked up
+vi.stubGlobal('useCart', () => ({
+  addProducts: mockAddProducts,
+  refreshCart: mockRefreshCart,
+}));
+vi.stubGlobal('useToast', () => ({
+  add: mockToastAdd,
+}));
+vi.stubGlobal('useProductEvents', () => ({
+  triggerProductAdded: mockTriggerProductAdded,
+}));
+vi.stubGlobal('useTrackEvent', mockTrackEvent);
+
+describe("useAddToCart", () => {
+  const mockProduct = {
+    id: "product-123",
+    productNumber: "SW10123",
+    translated: {
+      name: "Test Pizza",
+    },
+  } as any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should initialize with default values", () => {
+    const {
+      selectedProduct,
+      selectedExtras,
+      deselectedIngredients,
+      selectedQuantity,
+      isLoading,
+    } = useAddToCart();
+
+    expect(selectedProduct.value).toBeNull();
+    expect(selectedExtras.value).toEqual([]);
+    expect(deselectedIngredients.value).toEqual([]);
+    expect(selectedQuantity.value).toBe(1);
+    expect(isLoading.value).toBe(false);
+  });
+
+  it("should set selected product", () => {
+    const { setSelectedProduct, selectedProduct } = useAddToCart();
+    setSelectedProduct(mockProduct);
+    expect(selectedProduct.value).toEqual(mockProduct);
+  });
+
+  it("should generate correct cartItemLabel for simple product", async () => {
+    const { setSelectedProduct, cartItemLabel } = useAddToCart();
+    setSelectedProduct(mockProduct);
+    await nextTick();
+    expect(cartItemLabel.value).toBe("Test Pizza");
+  });
+
+  it("should generate correct cartItemLabel with extras and deselected ingredients", async () => {
+    const {
+      setSelectedProduct,
+      setSelectedExtras,
+      setDeselectedIngredients,
+      cartItemLabel,
+    } = useAddToCart();
+    setSelectedProduct(mockProduct);
+    setSelectedExtras([{ label: "Extra Cheese", value: "cheese" }] as any);
+    setDeselectedIngredients(["Onions"]);
+    await nextTick();
+    expect(cartItemLabel.value).toBe("Test Pizza +Extra Cheese -Onions");
+  });
+
+  it("should add simple product to cart", async () => {
+    const { setSelectedProduct, addToCart, isLoading } = useAddToCart();
+    setSelectedProduct(mockProduct);
+    
+    mockAddProducts.mockResolvedValue({ id: "cart-123" });
+    mockRefreshCart.mockResolvedValue({});
+
+    await addToCart();
+
+    expect(isLoading.value).toBe(false);
+    expect(mockAddProducts).toHaveBeenCalledWith([
+      {
+        id: "product-123",
+        quantity: 1,
+        type: "product",
+      },
+    ]);
+    expect(mockRefreshCart).toHaveBeenCalled();
+    expect(mockToastAdd).toHaveBeenCalled();
+    expect(mockTriggerProductAdded).toHaveBeenCalled();
+    expect(mockTrackEvent).toHaveBeenCalledWith("add_to_cart", expect.any(Object));
+  });
+
+  it("should add product with extras to cart as container", async () => {
+    const { setSelectedProduct, setSelectedExtras, addToCart } = useAddToCart();
+    setSelectedProduct(mockProduct);
+    setSelectedExtras([{ label: "Extra Cheese", value: "cheese" }] as any);
+
+    mockAddProducts.mockResolvedValue({ id: "cart-123" });
+
+    await addToCart();
+
+    expect(mockAddProducts).toHaveBeenCalledWith([
+      expect.objectContaining({
+        type: "container",
+        children: expect.arrayContaining([
+          expect.objectContaining({
+            type: "product",
+            referencedId: "product-123",
+          }),
+          expect.objectContaining({
+            type: "product",
+            id: "cheese",
+          }),
+        ]),
+      }),
+    ]);
+  });
+});

package/test/nuxt/useDeliveryTime.test.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { ref } from "vue";
+import { useDeliveryTime } from "../../app/composables/useDeliveryTime";
+
+const { mockDeliveryTime } = vi.hoisted(() => ({
+  mockDeliveryTime: { value: 45 }, // Use object to keep reference
+}));
+
+mockNuxtImport("usePizzaToppings", () => () => ({
+  deliveryTime: mockDeliveryTime,
+}));
+
+describe("useDeliveryTime", () => {
+  const now = ref(new Date("2023-10-27T12:00:00")); // A Friday
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should calculate earliest selectable time", () => {
+    mockDeliveryTime.value = 30;
+    const { earliest } = useDeliveryTime(now);
+    // 12:00 + 30 mins = 12:30
+    expect(earliest.value.getHours()).toBe(12);
+    expect(earliest.value.getMinutes()).toBe(30);
+  });
+
+  it("should identify if closed today (e.g., Tuesday)", () => {
+    const tuesday = ref(new Date("2023-10-24T12:00:00"));
+    const { isClosedToday, helperText } = useDeliveryTime(tuesday);
+    expect(isClosedToday.value).toBe(true);
+    expect(helperText.value).toContain("Dienstag");
+  });
+
+  it("should validate valid time", () => {
+    const { validate, minTime, maxTime } = useDeliveryTime(now);
+    if (minTime.value && maxTime.value) {
+      expect(validate(minTime.value)).toBeNull();
+    }
+  });
+
+  it("should return error for invalid format", () => {
+    const { validate } = useDeliveryTime(now);
+    expect(validate("invalid")).toBe("Bitte eine gültige Uhrzeit im Format HH:MM eingeben.");
+  });
+
+  it("should return error for time before minTime", () => {
+    const { validate, minTime } = useDeliveryTime(now);
+    if (minTime.value) {
+      // Assuming minTime is something like "12:30"
+      const [hours, mins] = minTime.value.split(":").map(Number);
+      const earlyTime = new Date(now.value);
+      earlyTime.setHours(hours as number);
+      earlyTime.setMinutes(mins as number - 5);
+      const earlyTimeStr = earlyTime.getHours().toString().padStart(2, '0') + ":" + earlyTime.getMinutes().toString().padStart(2, '0');
+      
+      expect(validate(earlyTimeStr)).toContain("vor dem frühestmöglichen Zeitpunkt");
+    }
+  });
+});

package/test/nuxt/useInterval.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { useInterval } from "../../app/composables/useInterval";
+import { mount } from "@vue/test-utils";
+import { defineComponent } from "vue";
+
+describe("useInterval", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+    vi.useRealTimers();
+  });
+
+  it("should start interval on mount and call callback", async () => {
+    const callback = vi.fn();
+    const TestComponent = defineComponent({
+      setup() {
+        useInterval(callback, 1000);
+        return {};
+      },
+      template: "<div></div>",
+    });
+
+    const wrapper = mount(TestComponent);
+
+    expect(callback).not.toHaveBeenCalled();
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(2);
+
+    wrapper.unmount();
+  });
+
+  it("should clear interval on unmount", () => {
+    const callback = vi.fn();
+    const TestComponent = defineComponent({
+      setup() {
+        useInterval(callback, 1000);
+        return {};
+      },
+      template: "<div></div>",
+    });
+
+    const wrapper = mount(TestComponent);
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(1);
+
+    wrapper.unmount();
+
+    vi.advanceTimersByTime(1000);
+    expect(callback).toHaveBeenCalledTimes(1); // Should not have increased
+  });
+});

package/test/nuxt/usePizzaToppings.test.ts

@@ -0,0 +1,59 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { usePizzaToppings } from "../../app/composables/usePizzaToppings";
+
+const {
+  mockInvoke,
+  mockDeliveryTime,
+  mockIsCheckoutEnabled,
+} = vi.hoisted(() => ({
+  mockInvoke: vi.fn(),
+  mockDeliveryTime: { value: 0 },
+  mockIsCheckoutEnabled: { value: false },
+}));
+
+mockNuxtImport("useShopwareContext", () => () => ({
+  apiClient: {
+    invoke: mockInvoke,
+  },
+}));
+
+mockNuxtImport("useContext", () => (key: string) => {
+  if (key === "deliveryTime") return mockDeliveryTime;
+  if (key === "isCheckoutActive") return mockIsCheckoutEnabled;
+  return { value: null };
+});
+
+describe("usePizzaToppings", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockDeliveryTime.value = 0;
+    mockIsCheckoutEnabled.value = false;
+  });
+
+  it("should initialize with values from context", () => {
+    mockDeliveryTime.value = 30;
+    mockIsCheckoutEnabled.value = true;
+    const { deliveryTime, isCheckoutEnabled } = usePizzaToppings();
+    expect(deliveryTime.value).toBe(30);
+    expect(isCheckoutEnabled.value).toBe(true);
+  });
+
+  it("should refresh values from API", async () => {
+    mockInvoke.mockResolvedValue({
+      data: {
+        deliveryTime: 45,
+        isCheckoutEnabled: true
+      }
+    });
+
+    const { refresh, deliveryTime, isCheckoutEnabled } = usePizzaToppings();
+    await refresh();
+
+    expect(mockInvoke).toHaveBeenCalledWith("pizza-toppings.get get /pizza-toppings");
+    expect(deliveryTime.value).toBe(45);
+    expect(isCheckoutEnabled.value).toBe(true);
+    expect(mockDeliveryTime.value).toBe(45);
+    expect(mockIsCheckoutEnabled.value).toBe(true);
+  });
+});

package/test/nuxt/useProductConfigurator.test.ts

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useProductConfigurator } from "../../app/composables/useProductConfigurator";
+
+
+const {
+  mockInvoke,
+  mockConfigurator,
+  mockProduct,
+} = vi.hoisted(() => ({
+  mockInvoke: vi.fn(),
+  mockConfigurator: { value: [] },
+  mockProduct: { value: { id: "p1", optionIds: [], options: [] } },
+}));
+
+// Use vi.mock for explicit imports
+vi.mock("@shopware/composables", () => ({
+  useShopwareContext: () => ({
+    apiClient: {
+      invoke: mockInvoke,
+    },
+  }),
+  useProductConfigurator: () => ({
+    handleChange: vi.fn(),
+  }),
+  useProduct: () => ({
+    configurator: mockConfigurator,
+    product: mockProduct,
+  }),
+}));
+
+describe("useProductConfigurator", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockConfigurator.value = [];
+    mockProduct.value = {
+      id: "p1",
+      optionIds: [],
+      options: []
+    } as any;
+  });
+
+  it("should initialize with selected options from product", () => {
+    mockConfigurator.value = [
+      {
+        id: "g1",
+        name: "Size",
+        options: [{ id: "o1", name: "Small" }]
+      }
+    ] as any;
+    mockProduct.value = {
+      id: "p1-v1",
+      parentId: "p1",
+      optionIds: ["o1"],
+      options: [{ id: "o1" }]
+    } as any;
+
+    const { isLoadingOptions } = useProductConfigurator();
+    expect(isLoadingOptions.value).toBe(true);
+  });
+
+  it("should find variant for selected options", async () => {
+    mockProduct.value = { parentId: "parent-1" } as any;
+    mockInvoke.mockResolvedValue({
+      data: {
+        elements: [{ id: "variant-1" }]
+      }
+    });
+
+    const { findVariantForSelectedOptions } = useProductConfigurator();
+    const result = await findVariantForSelectedOptions({ "Size": "o1" });
+
+    expect(mockInvoke).toHaveBeenCalledWith("readProduct post /product", expect.any(Object));
+    expect(result).toEqual({ id: "variant-1" });
+  });
+
+  it("should return undefined on error in findVariantForSelectedOptions", async () => {
+    mockInvoke.mockRejectedValue(new Error("API Error"));
+    const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { findVariantForSelectedOptions } = useProductConfigurator();
+    const result = await findVariantForSelectedOptions({ "Size": "o1" });
+
+    expect(result).toBeUndefined();
+    expect(consoleSpy).toHaveBeenCalled();
+    consoleSpy.mockRestore();
+  });
+});

package/{app/composables → test/nuxt}/useProductEvents.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import { useProductEvents } from "./useProductEvents";
+import { useProductEvents } from "../../app/composables/useProductEvents";
 import { nextTick } from "vue";
 
 /**

package/test/nuxt/useProductVariants.test.ts

@@ -0,0 +1,89 @@
+import { describe, it, expect } from "vitest";
+import { useProductVariants } from "../../app/composables/useProductVariants";
+import { ref } from "vue";
+
+describe("useProductVariants", () => {
+  it("should return empty object when no settings provided", () => {
+    const settings = ref([]);
+    const { variants } = useProductVariants(settings as any);
+    expect(variants.value).toEqual({});
+  });
+
+  it("should group options by group id", () => {
+    const settings = ref([
+      {
+        option: {
+          id: "opt-1",
+          name: "Small",
+          group: {
+            id: "group-size",
+            name: "Size",
+            translated: { name: "Größe" }
+          },
+          translated: { name: "Klein" }
+        }
+      },
+      {
+        option: {
+          id: "opt-2",
+          name: "Large",
+          group: {
+            id: "group-size",
+            name: "Size",
+            translated: { name: "Größe" }
+          },
+          translated: { name: "Groß" }
+        }
+      },
+      {
+        option: {
+          id: "opt-3",
+          name: "Red",
+          group: {
+            id: "group-color",
+            name: "Color",
+            translated: { name: "Farbe" }
+          },
+          translated: { name: "Rot" }
+        }
+      }
+    ]);
+
+    const { variants } = useProductVariants(settings as any);
+    
+    expect(variants.value["group-size"]).toBeDefined();
+    expect(variants.value["group-size"].name).toBe("Größe");
+    expect(variants.value["group-size"].options).toHaveLength(2);
+    expect(variants.value["group-size"].options[0]).toEqual({
+      label: "Klein",
+      value: "opt-1",
+      productId: "opt-1"
+    });
+
+    expect(variants.value["group-color"]).toBeDefined();
+    expect(variants.value["group-color"].name).toBe("Farbe");
+    expect(variants.value["group-color"].options).toHaveLength(1);
+  });
+
+  it("should avoid duplicate options", () => {
+    const settings = ref([
+      {
+        option: {
+          id: "opt-1",
+          name: "Small",
+          group: { id: "group-size", name: "Size" }
+        }
+      },
+      {
+        option: {
+          id: "opt-1",
+          name: "Small",
+          group: { id: "group-size", name: "Size" }
+        }
+      }
+    ]);
+
+    const { variants } = useProductVariants(settings as any);
+    expect(variants.value["group-size"].options).toHaveLength(1);
+  });
+});

package/test/nuxt/useProductVariantsZwei.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from "vitest";
+import { useProductVariantsZwei } from "../../app/composables/useProductVariantsZwei";
+import { ref } from "vue";
+
+describe("useProductVariantsZwei", () => {
+  it("should return empty object when no settings provided", () => {
+    const settings = ref([]);
+    const { variants } = useProductVariantsZwei(settings);
+    expect(variants.value).toEqual({});
+  });
+
+  it("should group options by group", () => {
+    const settings = ref([
+      {
+        id: "group-size",
+        name: "Size",
+        translated: { name: "Größe" },
+        options: [
+          { id: "opt-1", name: "Small", translated: { name: "Klein" } },
+          { id: "opt-2", name: "Large", translated: { name: "Groß" } }
+        ]
+      }
+    ]);
+
+    const { variants } = useProductVariantsZwei(settings);
+    
+    expect(variants.value["group-size"]).toBeDefined();
+    expect(variants.value["group-size"]?.name).toBe("Größe");
+    expect(variants.value["group-size"]?.options).toHaveLength(2);
+    expect(variants.value["group-size"]?.options[0]?.label).toBe("Klein");
+  });
+
+  it("should avoid duplicate options", () => {
+    const settings = ref([
+      {
+        id: "group-size",
+        name: "Size",
+        options: [
+          { id: "opt-1", name: "Small" },
+          { id: "opt-1", name: "Small" }
+        ]
+      }
+    ]);
+
+    const { variants } = useProductVariantsZwei(settings);
+    expect(variants.value["group-size"]?.options).toHaveLength(1);
+  });
+});

package/test/nuxt/useScrollAnimation.test.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { useScrollAnimation } from "../../app/composables/useScrollAnimation";
+import { mount } from "@vue/test-utils";
+import { defineComponent, nextTick } from "vue";
+
+describe("useScrollAnimation", () => {
+  let observeMock: any;
+  let unobserveMock: any;
+  let disconnectMock: any;
+  let intersectionCallback: any;
+
+  beforeEach(() => {
+    observeMock = vi.fn();
+    unobserveMock = vi.fn();
+    disconnectMock = vi.fn();
+
+    // Mock IntersectionObserver
+    global.IntersectionObserver = vi.fn().mockImplementation(function (callback) {
+      intersectionCallback = callback;
+      this.observe = observeMock;
+      this.unobserve = unobserveMock;
+      this.disconnect = disconnectMock;
+    }) as any;
+  });
+
+  it("should initialize with isVisible false", () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const { isVisible, elementRef } = useScrollAnimation();
+        return { isVisible, elementRef };
+      },
+      template: '<div ref="elementRef"></div>',
+    });
+
+    const wrapper = mount(TestComponent);
+    expect(wrapper.vm.isVisible).toBe(false);
+  });
+
+  it("should start observing on mount", async () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const { isVisible, elementRef } = useScrollAnimation();
+        return { isVisible, elementRef };
+      },
+      template: '<div ref="elementRef"></div>',
+    });
+
+    mount(TestComponent);
+    await nextTick();
+
+    expect(global.IntersectionObserver).toHaveBeenCalled();
+    expect(observeMock).toHaveBeenCalled();
+  });
+
+  it("should set isVisible to true when intersecting and stop observing", async () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const { isVisible, elementRef } = useScrollAnimation();
+        return { isVisible, elementRef };
+      },
+      template: '<div ref="elementRef"></div>',
+    });
+
+    const wrapper = mount(TestComponent);
+    await nextTick();
+
+    // Simulate intersection
+    const mockEntry = { isIntersecting: true, target: wrapper.element };
+    intersectionCallback([mockEntry]);
+
+    await nextTick();
+    expect(wrapper.vm.isVisible).toBe(true);
+    expect(unobserveMock).toHaveBeenCalledWith(wrapper.element);
+  });
+
+  it("should not set isVisible to true when not intersecting", async () => {
+    const TestComponent = defineComponent({
+      setup() {
+        const { isVisible, elementRef } = useScrollAnimation();
+        return { isVisible, elementRef };
+      },
+      template: '<div ref="elementRef"></div>',
+    });
+
+    const wrapper = mount(TestComponent);
+    await nextTick();
+
+    // Simulate non-intersection
+    const mockEntry = { isIntersecting: false, target: wrapper.element };
+    intersectionCallback([mockEntry]);
+
+    await nextTick();
+    expect(wrapper.vm.isVisible).toBe(false);
+    expect(unobserveMock).not.toHaveBeenCalled();
+  });
+});