@shopbite-de/storefront 1.5.2 → 1.6.0

package/test/nuxt/Header.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+import Header from "~/components/Header.vue";
+import { ref, reactive, toRefs } from "vue";
+
+const mocks = vi.hoisted(() => ({
+  state: {
+    isLoggedIn: false,
+    isGuestSession: false,
+    user: null as any,
+  },
+  logout: vi.fn(),
+}));
+
+const reactiveState = reactive(mocks.state);
+
+mockNuxtImport("useUser", () => () => ({
+  ...toRefs(reactiveState),
+  logout: mocks.logout,
+}));
+
+mockNuxtImport("useShopBiteConfig", () => () => ({
+  isCheckoutEnabled: ref(true),
+}));
+
+mockNuxtImport("useCart", () => () => ({
+  count: ref(0),
+}));
+
+mockNuxtImport("useRuntimeConfig", () => () => ({
+  app: {
+    baseURL: "/",
+  },
+  public: {
+    site: {
+      name: "ShopBite",
+    },
+    shopware: {
+      devStorefrontUrl: "http://localhost:3000",
+    },
+  },
+}));
+
+// Mock Nuxt Content queryCollection
+mockNuxtImport("queryCollection", () => (collection: string) => ({
+  first: () =>
+    Promise.resolve({
+      main: [],
+      account: {
+        loggedIn: [
+          [{ label: "Mein Konto", type: "label" }],
+          [
+            { label: "Konto", icon: "i-lucide-user", to: "/konto" },
+            {
+              label: "Bestellungen",
+              icon: "i-lucide-pizza",
+              to: "/konto/bestellungen",
+            },
+          ],
+          [{ label: "Abmelden", icon: "i-lucide-log-out", action: "logout" }],
+        ],
+        loggedOut: [
+          [{ label: "Jetzt anmelden", type: "label" }],
+          [{ label: "Zur Anmeldung", icon: "i-lucide-user", to: "/anmelden" }],
+        ],
+      },
+    }),
+}));
+
+describe("Header", () => {
+  beforeEach(() => {
+    reactiveState.isLoggedIn = false;
+    reactiveState.isGuestSession = false;
+    reactiveState.user = null;
+    vi.clearAllMocks();
+  });
+
+  it("renders correctly when logged out", async () => {
+    const component = await mountSuspended(Header);
+    // Should show user icon
+    expect(component.html()).toContain("i-lucide:user");
+    // Should NOT show checkmark chip
+    expect(component.html()).not.toContain("✓");
+  });
+
+  it("renders correctly when logged in", async () => {
+    reactiveState.isLoggedIn = true;
+    reactiveState.user = { firstName: "John", lastName: "Doe" };
+    const component = await mountSuspended(Header);
+
+    // Should show checkmark chip
+    expect(component.html()).toContain("✓");
+  });
+
+  it("renders correctly for guest session", async () => {
+    reactiveState.isGuestSession = true;
+    reactiveState.user = { firstName: "Guest", lastName: "User" };
+    const component = await mountSuspended(Header);
+
+    // Should show checkmark chip for guest session too
+    expect(component.html()).toContain("✓");
+  });
+
+  it("filters menu items for guest session", async () => {
+    reactiveState.isGuestSession = true;
+    reactiveState.user = { firstName: "Guest", lastName: "User" };
+    const component = await mountSuspended(Header);
+
+    // Find the dropdown menu
+    const dropdown = component.findComponent({ name: "UDropdownMenu" });
+    expect(dropdown.exists()).toBe(true);
+
+    const items = dropdown.props("items");
+
+    // Group 0 should have the user label
+    // Group 1 should be gone (filtered out because it only contained links)
+    // Group 2 (now index 1) should have logout
+    expect(items.length).toBe(2);
+    expect(items[0][0].label).toBe("Guest User");
+    expect(items[1][0].label).toBe("Abmelden");
+    expect(items[1][0].onSelect).toBeDefined();
+  });
+});

package/test/nuxt/LoginForm.test.ts

@@ -0,0 +1,141 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import LoginForm from "@/components/User/LoginForm.vue";
+import { useUser } from "@shopware/composables";
+import { ApiClientError } from "@shopware/api-client";
+
+vi.mock("@shopware/api-client", () => ({
+  ApiClientError: class extends Error {
+    details: any;
+    constructor(details: any) {
+      super("ApiClientError");
+      this.details = details;
+    }
+  },
+}));
+
+vi.mock("@shopware/composables", () => ({
+  useUser: vi.fn(),
+  useWishlist: vi.fn(() => ({
+    mergeWishlistProducts: vi.fn(),
+  })),
+}));
+
+const mockToastAdd = vi.fn();
+mockNuxtImport("useToast", () => {
+  return () => ({
+    add: mockToastAdd,
+  });
+});
+
+describe("LoginForm", () => {
+  let loginMock: any;
+  let userMock: any;
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    loginMock = vi.fn();
+    userMock = { value: { firstName: "John", lastName: "Doe" } };
+    (useUser as any).mockReturnValue({
+      isLoggedIn: { value: false },
+      login: loginMock,
+      user: userMock,
+    });
+  });
+
+  it("should show success toast on successful login", async () => {
+    loginMock.mockResolvedValueOnce({});
+    const wrapper = await mountSuspended(LoginForm);
+
+    // Call onSubmit directly if form trigger is not working in test
+    await (wrapper.vm as any).onSubmit({
+      data: {
+        email: "test@example.com",
+        password: "password123",
+      },
+    });
+
+    expect(loginMock).toHaveBeenCalledWith({
+      username: "test@example.com",
+      password: "password123",
+    });
+
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Hallo John Doe!",
+        color: "success",
+      }),
+    );
+  });
+
+  it("should show error toast on failed login", async () => {
+    loginMock.mockRejectedValueOnce(new Error("Invalid credentials"));
+    const wrapper = await mountSuspended(LoginForm);
+
+    // Call onSubmit directly if form trigger is not working in test
+    await (wrapper.vm as any).onSubmit({
+      data: {
+        email: "test@example.com",
+        password: "wrongpassword",
+      },
+    });
+
+    expect(loginMock).toHaveBeenCalled();
+
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Login fehlgeschlagen",
+        description: "Bitte überprüfen Sie Ihre Zugangsdaten.",
+        color: "error",
+      }),
+    );
+  });
+
+  it("should show detailed error toast on ApiClientError", async () => {
+    const apiClientError = new ApiClientError({
+      errors: [
+        {
+          detail: 'The email address "test@example.com" is already in use',
+        },
+      ],
+    });
+    loginMock.mockRejectedValueOnce(apiClientError);
+    const wrapper = await mountSuspended(LoginForm);
+
+    await (wrapper.vm as any).onSubmit({
+      data: {
+        email: "test@example.com",
+        password: "password123",
+      },
+    });
+
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Login fehlgeschlagen",
+        description: 'The email address "test@example.com" is already in use',
+        color: "error",
+      }),
+    );
+  });
+
+  it("should handle ApiClientError with missing errors gracefully", async () => {
+    const apiClientError = new ApiClientError({});
+    loginMock.mockRejectedValueOnce(apiClientError);
+    const wrapper = await mountSuspended(LoginForm);
+
+    await (wrapper.vm as any).onSubmit({
+      data: {
+        email: "test@example.com",
+        password: "password123",
+      },
+    });
+
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Login fehlgeschlagen",
+        description: "Bitte überprüfen Sie Ihre Zugangsdaten.",
+        color: "error",
+      }),
+    );
+  });
+});

package/test/nuxt/PaymentAndDelivery.test.ts

@@ -0,0 +1,78 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import PaymentAndDelivery from "~/components/Checkout/PaymentAndDelivery.vue";
+import { ref } from "vue";
+
+const { mockSetPaymentMethod, mockSetShippingMethod, mockRefreshCart } =
+  vi.hoisted(() => ({
+    mockSetPaymentMethod: vi.fn(),
+    mockSetShippingMethod: vi.fn(),
+    mockRefreshCart: vi.fn(),
+  }));
+
+mockNuxtImport("useCheckout", () => () => ({
+  paymentMethods: ref([
+    { id: "pm1", distinguishableName: "Payment 1" },
+    { id: "pm2", distinguishableName: "Payment 2" },
+  ]),
+  shippingMethods: ref([
+    { id: "sm1", name: "Shipping 1" },
+    { id: "sm2", name: "Shipping 2" },
+  ]),
+  selectedPaymentMethod: ref({ id: "pm1", distinguishableName: "Payment 1" }),
+  selectedShippingMethod: ref({ id: "sm1", name: "Shipping 1" }),
+  setPaymentMethod: mockSetPaymentMethod,
+  setShippingMethod: mockSetShippingMethod,
+  getPaymentMethods: vi.fn(),
+  getShippingMethods: vi.fn(),
+}));
+
+mockNuxtImport("useCart", () => () => ({
+  refreshCart: mockRefreshCart,
+}));
+
+mockNuxtImport("useToast", () => () => ({
+  add: vi.fn(),
+}));
+
+describe("PaymentAndDelivery", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("renders correctly", async () => {
+    const wrapper = await mountSuspended(PaymentAndDelivery);
+    expect(wrapper.exists()).toBeTruthy();
+    expect(wrapper.text()).toContain("Zahlungsarten");
+    expect(wrapper.text()).toContain("Versandarten");
+  });
+
+  it("updates payment method when changed", async () => {
+    const wrapper = await mountSuspended(PaymentAndDelivery);
+
+    // @ts-ignore - access internal state
+    wrapper.vm.selectedPaymentMethodId = "pm2";
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(mockSetPaymentMethod).toHaveBeenCalledWith({ id: "pm2" });
+  });
+
+  it("updates shipping method and refreshes cart when changed", async () => {
+    const wrapper = await mountSuspended(PaymentAndDelivery);
+
+    // @ts-ignore - access internal state
+    wrapper.vm.selectedShippingMethodId = "sm2";
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    expect(mockSetShippingMethod).toHaveBeenCalledWith({ id: "sm2" });
+    expect(mockRefreshCart).toHaveBeenCalled();
+  });
+
+  it("renders help buttons with correct links", async () => {
+    const wrapper = await mountSuspended(PaymentAndDelivery);
+    const helpButtons = wrapper.findAll(
+      'a[href="/unternehmen/zahlung-und-versand"]',
+    );
+    expect(helpButtons.length).toBe(2);
+  });
+});

package/test/nuxt/RegistrationForm.test.ts

@@ -0,0 +1,255 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { ref, nextTick } from "vue";
+import { mountSuspended, mockNuxtImport } from "@nuxt/test-utils/runtime";
+import RegistrationForm from "~/components/User/RegistrationForm.vue";
+import { ApiClientError } from "@shopware/api-client";
+
+vi.mock("@shopware/api-client", () => ({
+  ApiClientError: class extends Error {
+    details: any;
+    constructor(details: any) {
+      super("ApiClientError");
+      this.details = details;
+    }
+  },
+}));
+
+const { mockRegister, mockIsLoggedIn, mockGetSuggestions } = vi.hoisted(() => {
+  return {
+    mockRegister: vi.fn(),
+    mockIsLoggedIn: { value: false },
+    mockGetSuggestions: vi.fn().mockResolvedValue([]),
+  };
+});
+
+mockNuxtImport("useUser", () => () => ({
+  register: mockRegister,
+  isLoggedIn: ref(mockIsLoggedIn.value),
+}));
+
+mockNuxtImport("useAddressAutocomplete", () => () => ({
+  getSuggestions: mockGetSuggestions,
+}));
+
+const mockToastAdd = vi.fn();
+mockNuxtImport("useToast", () => () => ({
+  add: mockToastAdd,
+}));
+
+// Mock useRuntimeConfig
+mockNuxtImport("useRuntimeConfig", () => () => ({
+  public: {
+    shopware: {
+      devStorefrontUrl: "http://localhost:3000",
+    },
+    site: {
+      countryId: "default-country-id",
+    },
+  },
+}));
+
+describe("RegistrationForm", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockIsLoggedIn.value = false;
+  });
+
+  it("renders correctly", async () => {
+    const wrapper = await mountSuspended(RegistrationForm);
+    expect(wrapper.exists()).toBeTruthy();
+    expect(wrapper.find('input[name="email"]').exists()).toBe(true);
+  });
+
+  it("shows company field only for business account", async () => {
+    const wrapper = await mountSuspended(RegistrationForm);
+
+    // Initially private, so company field should NOT be in billing address
+    expect(wrapper.find('input[name="billingAddress.company"]').exists()).toBe(
+      false,
+    );
+
+    // Switch to business
+    // @ts-ignore
+    wrapper.vm.state.accountType = "business";
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    // Try to find by name again
+    expect(wrapper.find('input[name="billingAddress.company"]').exists()).toBe(
+      true,
+    );
+  });
+
+  it("shows shipping address fields when checkbox is checked", async () => {
+    const wrapper = await mountSuspended(RegistrationForm);
+
+    // Initial count of street inputs
+    const initialStreets = wrapper.findAll(
+      'input[name="billingAddress.street"]',
+    ).length;
+
+    // @ts-ignore
+    wrapper.vm.state.isShippingAddressDifferent = true;
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    // Should have more street inputs now (billing street + shipping street)
+    expect(wrapper.findAll('input[name$=".street"]').length).toBeGreaterThan(
+      initialStreets,
+    );
+  });
+
+  it("submits the form with correct data", async () => {
+    const wrapper = await mountSuspended(RegistrationForm);
+
+    // Fill required fields
+    await wrapper.find('input[name="firstName"]').setValue("John");
+    await wrapper.find('input[name="lastName"]').setValue("Doe");
+    await wrapper.find('input[name="email"]').setValue("john@example.com");
+
+    // Billing address fields (AddressFields component)
+    // Manually update state since USelectMenu is hard to interact with in simple tests
+    // @ts-ignore
+    wrapper.vm.state.billingAddress.street = "Musterstr 1";
+    // Set zipcode and city directly since fields are removed
+    // @ts-ignore
+    wrapper.vm.state.billingAddress.zipcode = "12345";
+    // @ts-ignore
+    wrapper.vm.state.billingAddress.city = "Musterstadt";
+
+    await wrapper
+      .find('input[name="billingAddress.phoneNumber"]')
+      .setValue("12345678");
+
+    // Accept data protection
+    const dpCheckbox = wrapper.find('input[name="acceptedDataProtection"]');
+    await dpCheckbox.trigger("click");
+    await new Promise((resolve) => setTimeout(resolve, 0));
+
+    // Submit
+    await wrapper.find("form").trigger("submit");
+
+    // Wait for async validation and submission
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(mockRegister).toHaveBeenCalled();
+    const calledData = mockRegister.mock.calls[0][0];
+    expect(calledData.email).toBe("john@example.com");
+    expect(calledData.billingAddress.street).toBe("Musterstr 1");
+    // Check if firstName/lastName were copied to billing address as per logic in onSubmit
+    expect(calledData.billingAddress.firstName).toBe("John");
+    expect(calledData.billingAddress.lastName).toBe("Doe");
+  });
+
+  it("shows detailed error toast on ApiClientError during registration", async () => {
+    const apiClientError = new ApiClientError({
+      errors: [
+        {
+          detail: 'The email address "lirim@veliu.net" is already in use',
+        },
+      ],
+    });
+    mockRegister.mockRejectedValueOnce(apiClientError);
+    const wrapper = await mountSuspended(RegistrationForm);
+
+    // Fill minimum required fields to trigger onSubmit
+    await wrapper.find('input[name="firstName"]').setValue("John");
+    await wrapper.find('input[name="lastName"]').setValue("Doe");
+    await wrapper.find('input[name="email"]').setValue("lirim@veliu.net");
+    // @ts-ignore
+    wrapper.vm.state.billingAddress.street = "Musterstr 1";
+    // @ts-ignore
+    wrapper.vm.state.billingAddress.city = "Musterstadt";
+    await wrapper
+      .find('input[name="billingAddress.phoneNumber"]')
+      .setValue("12345678");
+    await wrapper.find('input[name="acceptedDataProtection"]').trigger("click");
+
+    await wrapper.find("form").trigger("submit");
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Registrierung fehlgeschlagen",
+        description: 'The email address "lirim@veliu.net" is already in use',
+        color: "error",
+      }),
+    );
+  });
+
+  it("handles ApiClientError with missing errors gracefully", async () => {
+    const apiClientError = new ApiClientError({});
+    mockRegister.mockRejectedValueOnce(apiClientError);
+    const wrapper = await mountSuspended(RegistrationForm);
+
+    // Fill minimum required fields to trigger onSubmit
+    await wrapper.find('input[name="firstName"]').setValue("John");
+    await wrapper.find('input[name="lastName"]').setValue("Doe");
+    await wrapper.find('input[name="email"]').setValue("lirim@veliu.net");
+    // @ts-ignore
+    wrapper.vm.state.billingAddress.street = "Musterstr 1";
+    // @ts-ignore
+    wrapper.vm.state.billingAddress.city = "Musterstadt";
+    await wrapper
+      .find('input[name="billingAddress.phoneNumber"]')
+      .setValue("12345678");
+    await wrapper.find('input[name="acceptedDataProtection"]').trigger("click");
+
+    await wrapper.find("form").trigger("submit");
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Registrierung fehlgeschlagen",
+        description: "Bitte versuchen Sie es erneut.",
+        color: "error",
+      }),
+    );
+  });
+
+  it("shows correction suggestion and stops submission when address needs correction", async () => {
+    mockGetSuggestions.mockResolvedValueOnce([
+      {
+        street: "Corrected Street 123",
+        city: "Corrected City",
+        zipcode: "54321",
+        label: "Corrected Street 123, 54321 Corrected City",
+      },
+    ]);
+
+    const wrapper = await mountSuspended(RegistrationForm);
+
+    // Fill required fields
+    await wrapper.find('input[name="firstName"]').setValue("John");
+    await wrapper.find('input[name="lastName"]').setValue("Doe");
+    await wrapper.find('input[name="email"]').setValue("john@example.com");
+    // @ts-ignore
+    wrapper.vm.state.billingAddress.street = "Musterstr 1";
+    // @ts-ignore
+    wrapper.vm.state.billingAddress.zipcode = "12345";
+    // @ts-ignore
+    wrapper.vm.state.billingAddress.city = "Musterstadt";
+    await wrapper
+      .find('input[name="billingAddress.phoneNumber"]')
+      .setValue("12345678");
+    await wrapper.find('input[name="acceptedDataProtection"]').trigger("click");
+
+    await wrapper.find("form").trigger("submit");
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    // Should NOT have called register
+    expect(mockRegister).not.toHaveBeenCalled();
+
+    // Should have shown a toast
+    expect(mockToastAdd).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "Adresskorrektur vorgeschlagen",
+      }),
+    );
+
+    // Should show the correction alert in the form
+    expect(wrapper.text()).toContain(
+      "Meinten Sie: Corrected Street 123, 54321 Corrected City?",
+    );
+  });
+});

package/test/nuxt/RegistrationValidation.test.ts

@@ -0,0 +1,39 @@
+import { describe, it, expect } from "vitest";
+import { mountSuspended } from "@nuxt/test-utils/runtime";
+import RegistrationForm from "~/components/User/RegistrationForm.vue";
+import { flushPromises } from "@vue/test-utils";
+
+describe("RegistrationForm Validation", () => {
+  it("shows error for street when empty and clears it when filled", async () => {
+    const wrapper = await mountSuspended(RegistrationForm);
+
+    const form = wrapper.find("form");
+    await form.trigger("submit");
+    await flushPromises();
+
+    // Check for street error message
+    expect(wrapper.text()).toContain(
+      "Bitte geben Sie Ihre Straße und Hausnummer an.",
+    );
+
+    // Find the street input and fill it
+    const streetInput = wrapper.find('input[name="billingAddress.street"]');
+    await streetInput.setValue("Hauptstraße 1");
+
+    // Fill other required fields to satisfy overall validation if needed
+    const zipInput = wrapper.find('input[name="billingAddress.zipcode"]');
+    await zipInput.setValue("60311");
+    const cityInput = wrapper.find('input[name="billingAddress.city"]');
+    await cityInput.setValue("Frankfurt");
+
+    await flushPromises();
+
+    // Trigger validation again or check if error disappeared
+    await form.trigger("submit");
+    await flushPromises();
+
+    expect(wrapper.text()).not.toContain(
+      "Bitte geben Sie Ihre Straße und Hausnummer an.",
+    );
+  });
+});