@shopbite-de/storefront 1.5.3 → 1.6.1

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.",
+    );
+  });
+});

package/test/nuxt/registrationSchema.test.ts

@@ -0,0 +1,242 @@
+import { describe, it, expect } from "vitest";
+import { createRegistrationSchema } from "~/validation/registrationSchema";
+
+describe("registrationSchema", () => {
+  const baseState = {
+    accountType: "private",
+    guest: false,
+    isShippingAddressDifferent: false,
+    password: "password123",
+  };
+
+  const validAddress = {
+    street: "Musterstraße 1",
+    city: "Musterstadt",
+    countryId: "country-id",
+    phoneNumber: "123456789",
+    zipcode: "12345",
+  };
+
+  const validData = {
+    accountType: "private",
+    email: "test@example.com",
+    firstName: "John",
+    lastName: "Doe",
+    guest: false,
+    acceptedDataProtection: true,
+    password: "password123",
+    passwordConfirm: "password123",
+    billingAddress: validAddress,
+  };
+
+  it("should validate a valid private account", () => {
+    const schema = createRegistrationSchema(baseState);
+    const result = schema.safeParse(validData);
+    expect(result.success).toBe(true);
+  });
+
+  it("should fail if company is missing for business account", () => {
+    const businessState = { ...baseState, accountType: "business" };
+    const businessData = {
+      ...validData,
+      accountType: "business",
+      billingAddress: { ...validAddress },
+    };
+    const schema = createRegistrationSchema(businessState);
+    const result = schema.safeParse(businessData);
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.issues[0].message).toBe(
+        "Als Geschäftskunde ist der Firmenname ein Pflichtfeld.",
+      );
+      expect(result.error.issues[0].path).toContain("billingAddress");
+      expect(result.error.issues[0].path).toContain("company");
+    }
+  });
+
+  it("should validate a valid business account", () => {
+    const businessState = { ...baseState, accountType: "business" };
+    const businessData = {
+      ...validData,
+      accountType: "business",
+      billingAddress: { ...validAddress, company: "Test Corp" },
+    };
+    const schema = createRegistrationSchema(businessState);
+    const result = schema.safeParse(businessData);
+    expect(result.success).toBe(true);
+  });
+
+  it("should require shipping address fields if different from billing address", () => {
+    const shippingState = { ...baseState, isShippingAddressDifferent: true };
+    const shippingData = {
+      ...validData,
+      isShippingAddressDifferent: true,
+      shippingAddress: {
+        firstName: "",
+        lastName: "",
+        street: "",
+        city: "",
+        phoneNumber: "",
+        company: "",
+      },
+    };
+    const schema = createRegistrationSchema(shippingState);
+    const result = schema.safeParse(shippingData);
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const messages = result.error.issues.map((i) => i.message);
+      expect(messages).toContain(
+        "Bitte geben Sie den Vornamen für die Lieferadresse an.",
+      );
+      expect(messages).toContain(
+        "Bitte geben Sie den Nachnamen für die Lieferadresse an.",
+      );
+      expect(messages).toContain(
+        "Bitte geben Sie die Straße für die Lieferadresse an.",
+      );
+      expect(messages).toContain(
+        "Bitte geben Sie den Ort für die Lieferadresse an.",
+      );
+    }
+  });
+
+  it("should require company in shipping address for business account if different", () => {
+    const shippingState = {
+      ...baseState,
+      accountType: "business",
+      isShippingAddressDifferent: true,
+    };
+    const shippingData = {
+      ...validData,
+      accountType: "business",
+      isShippingAddressDifferent: true,
+      billingAddress: { ...validAddress, company: "Billing Corp" },
+      shippingAddress: {
+        firstName: "Jane",
+        lastName: "Doe",
+        street: "Shipping St 1",
+        city: "ShipCity",
+        phoneNumber: "987654321",
+        company: "",
+      },
+    };
+    const schema = createRegistrationSchema(shippingState);
+    const result = schema.safeParse(shippingData);
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const messages = result.error.issues.map((i) => i.message);
+      expect(messages).toContain(
+        "Bitte geben Sie den Firmennamen für die Lieferadresse an.",
+      );
+    }
+  });
+
+  it("should validate different shipping address for business", () => {
+    const shippingState = {
+      ...baseState,
+      accountType: "business",
+      isShippingAddressDifferent: true,
+    };
+    const shippingData = {
+      ...validData,
+      accountType: "business",
+      isShippingAddressDifferent: true,
+      billingAddress: { ...validAddress, company: "Billing Corp" },
+      shippingAddress: {
+        firstName: "Jane",
+        lastName: "Doe",
+        street: "Shipping St 1",
+        city: "ShipCity",
+        phoneNumber: "987654321",
+        company: "Shipping Corp",
+        zipcode: "54321",
+        countryId: "country-id",
+      },
+    };
+    const schema = createRegistrationSchema(shippingState);
+    const result = schema.safeParse(shippingData);
+    expect(result.success).toBe(true);
+  });
+
+  it("should not require password for guest", () => {
+    const guestState = { ...baseState, guest: true };
+    const guestData = {
+      ...validData,
+      guest: true,
+      password: "",
+      passwordConfirm: "",
+    };
+    const schema = createRegistrationSchema(guestState);
+    const result = schema.safeParse(guestData);
+    expect(result.success).toBe(true);
+  });
+
+  it("should require password for non-guest", () => {
+    const schema = createRegistrationSchema(baseState);
+    const result = schema.safeParse({
+      ...validData,
+      password: "",
+      passwordConfirm: "",
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it("should fail if data protection is not accepted", () => {
+    const schema = createRegistrationSchema(baseState);
+    const result = schema.safeParse({
+      ...validData,
+      acceptedDataProtection: false,
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.issues[0].message).toBe(
+        "Bitte akzeptieren Sie die Datenschutzbestimmungen.",
+      );
+      expect(result.error.issues[0].path).toContain("acceptedDataProtection");
+    }
+  });
+
+  it("should fail if street does not contain a house number", () => {
+    const schema = createRegistrationSchema(baseState);
+    const result = schema.safeParse({
+      ...validData,
+      billingAddress: {
+        ...validAddress,
+        street: "Musterstraße",
+      },
+    });
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      expect(result.error.issues[0].message).toBe(
+        "Bitte geben Sie Ihre Straße und Hausnummer an.",
+      );
+      expect(result.error.issues[0].path).toContain("billingAddress");
+      expect(result.error.issues[0].path).toContain("street");
+    }
+  });
+
+  it("should fail if shipping street does not contain a house number when different", () => {
+    const shippingState = { ...baseState, isShippingAddressDifferent: true };
+    const shippingData = {
+      ...validData,
+      isShippingAddressDifferent: true,
+      shippingAddress: {
+        ...validAddress,
+        street: "Shipping Street",
+      },
+    };
+    const schema = createRegistrationSchema(shippingState);
+    const result = schema.safeParse(shippingData);
+    expect(result.success).toBe(false);
+    if (!result.success) {
+      const messages = result.error.issues.map((i) => i.message);
+      expect(messages).toContain(
+        "Bitte geben Sie Ihre Straße und Hausnummer an.",
+      );
+      const streetIssue = result.error.issues.find((i) =>
+        i.path.includes("street"),
+      );
+      expect(streetIssue?.path).toContain("shippingAddress");
+    }
+  });
+});

package/test/nuxt/useAddressAutocomplete.test.ts

@@ -0,0 +1,161 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { mockNuxtImport } from "@nuxt/test-utils/runtime";
+import { useAddressAutocomplete } from "~/composables/useAddressAutocomplete";
+import { ref } from "vue";
+
+// Mock useFetch
+const { mockUseFetch } = vi.hoisted(() => ({
+  mockUseFetch: vi.fn(),
+}));
+mockNuxtImport("useFetch", () => mockUseFetch);
+
+// Mock useRuntimeConfig
+mockNuxtImport("useRuntimeConfig", () => () => ({
+  geoapifyApiKey: "test-api-key",
+}));
+
+// Mock useValidCitiesForDelivery
+const { mockBoundingBoxCoordinates } = vi.hoisted(() => ({
+  mockBoundingBoxCoordinates: {
+    value: "8.822251,50.055026,8.899077,50.104327",
+  },
+}));
+mockNuxtImport("useValidCitiesForDelivery", () => () => ({
+  validCities: ref(["Obertshausen", "Lämmerspiel", "Hausen"]),
+  boundingBoxCoordinates: mockBoundingBoxCoordinates,
+}));
+
+describe("useAddressAutocomplete", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it("should return empty suggestions for short input", async () => {
+    const { getSuggestions } = useAddressAutocomplete();
+    const suggestions = await getSuggestions("ab");
+    expect(suggestions).toEqual([]);
+    expect(mockUseFetch).not.toHaveBeenCalled();
+  });
+
+  it("should fetch suggestions from Geoapify", async () => {
+    const mockResponse = {
+      features: [
+        {
+          properties: {
+            street: "Main St",
+            housenumber: "1",
+            city: "Obertshausen",
+            postcode: "63179",
+            formatted: "Main St 1, 63179 Obertshausen, Germany",
+          },
+        },
+      ],
+    };
+
+    mockUseFetch.mockResolvedValue({
+      data: ref(mockResponse),
+    });
+
+    const { getSuggestions } = useAddressAutocomplete();
+    const suggestions = await getSuggestions("Main St 1");
+
+    expect(mockUseFetch).toHaveBeenCalledWith(
+      "/api/address/autocomplete",
+      expect.objectContaining({
+        query: expect.objectContaining({
+          text: "Main St 1",
+          lang: "de",
+          limit: 5,
+          filter: "rect:8.822251,50.055026,8.899077,50.104327",
+        }),
+      }),
+      expect.any(String),
+    );
+    expect(suggestions).toHaveLength(1);
+    expect(suggestions[0]).toEqual({
+      street: "Main St 1",
+      city: "Obertshausen",
+      zipcode: "63179",
+      label: "Main St 1, 63179 Obertshausen, Germany",
+    });
+  });
+
+  it("should handle missing features in API response", async () => {
+    mockUseFetch.mockResolvedValue({
+      data: ref({}),
+    });
+
+    const { getSuggestions } = useAddressAutocomplete();
+    const suggestions = await getSuggestions("Some address");
+    expect(suggestions).toEqual([]);
+  });
+
+  it("should handle fetch error", async () => {
+    mockUseFetch.mockRejectedValue(new Error("Network error"));
+    const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+    const { getSuggestions } = useAddressAutocomplete();
+    const suggestions = await getSuggestions("Some address");
+
+    expect(suggestions).toEqual([]);
+    expect(consoleSpy).toHaveBeenCalled();
+    consoleSpy.mockRestore();
+  });
+  it("should filter suggestions based on valid cities", async () => {
+    const mockResponse = {
+      features: [
+        {
+          properties: {
+            street: "Main St",
+            housenumber: "1",
+            city: "Obertshausen",
+            postcode: "63179",
+            formatted: "Main St 1, 63179 Obertshausen, Germany",
+          },
+        },
+        {
+          properties: {
+            street: "Other St",
+            housenumber: "2",
+            city: "Berlin",
+            postcode: "10115",
+            formatted: "Other St 2, 10115 Berlin, Germany",
+          },
+        },
+      ],
+    };
+
+    mockUseFetch.mockResolvedValue({
+      data: ref(mockResponse),
+    });
+
+    const { getSuggestions } = useAddressAutocomplete();
+    const suggestions = await getSuggestions("Main St 1");
+
+    expect(suggestions).toHaveLength(1);
+    expect(suggestions[0]?.city).toBe("Obertshausen");
+  });
+
+  it("should not include filter when boundingBoxCoordinates is empty", async () => {
+    mockBoundingBoxCoordinates.value = "";
+    mockUseFetch.mockResolvedValue({
+      data: ref({ features: [] }),
+    });
+
+    const { getSuggestions } = useAddressAutocomplete();
+    await getSuggestions("Main St 1");
+
+    expect(mockUseFetch).toHaveBeenCalledWith(
+      "/api/address/autocomplete",
+      expect.objectContaining({
+        query: expect.not.objectContaining({
+          filter: expect.anything(),
+        }),
+      }),
+      expect.any(String),
+    );
+
+    // Reset for other tests
+    mockBoundingBoxCoordinates.value = "8.822251,50.055026,8.899077,50.104327";
+  });
+});