From 91f3fbcbe3edc5652d0b8582cce9742c1e5da032 Mon Sep 17 00:00:00 2001 From: Ivan Kalachikov Date: Mon, 16 Dec 2024 12:10:03 +0100 Subject: [PATCH] feat: configurable product - save changed configuration --- .../components/product-configuration.vue | 7 +- .../useConfigurableProduct.test.ts | 110 +++++++++--------- client-app/shared/notification/types/index.ts | 1 - 3 files changed, 60 insertions(+), 58 deletions(-) diff --git a/client-app/shared/catalog/components/product-configuration.vue b/client-app/shared/catalog/components/product-configuration.vue index 389770826..e501db36d 100644 --- a/client-app/shared/catalog/components/product-configuration.vue +++ b/client-app/shared/catalog/components/product-configuration.vue @@ -120,11 +120,12 @@ const { isConfigurationChanged, changeCartConfiguredItem, } = useConfigurableProduct(configurableProductId.value); -const { openModal } = useModal(); +const { openModal } = useModal(); const notifications = useNotifications(); -watch(isConfigurationChanged, (newVal) => { - if (newVal && configurableLineItemId) { + +watch(isConfigurationChanged, (isChanged) => { + if (isChanged && configurableLineItemId) { notifications.info({ text: t("shared.catalog.product_details.product_configuration.changed_notification"), group: NOTIFICATIONS_GROUP, diff --git a/client-app/shared/catalog/composables/useConfigurableProduct.test.ts b/client-app/shared/catalog/composables/useConfigurableProduct.test.ts index 495c0b91e..cf8aebc4f 100644 --- a/client-app/shared/catalog/composables/useConfigurableProduct.test.ts +++ b/client-app/shared/catalog/composables/useConfigurableProduct.test.ts @@ -404,72 +404,74 @@ describe("useConfigurableProduct", () => { }); }); - it("should set isConfigurationChanged to true when selectedConfigurationInput changes", async () => { - const mockConfiguration = { - configurationSections: [createConfigurationSection(1), createConfigurationSection(2)], - }; - mocks.getProductConfiguration.mockResolvedValue(mockConfiguration); - - await composable.fetchProductConfiguration(); - await flushPromises(); - - expect(composable.isConfigurationChanged.value).toBe(false); - - composable.selectSectionValue({ - sectionId: "Section 1", - value: { - productId: "product-2", - quantity: 1, - }, + describe("isConfigurationChanged", () => { + it("should be set to true when selectedConfigurationInput changes", async () => { + const mockConfiguration = { + configurationSections: [createConfigurationSection(1), createConfigurationSection(2)], + }; + mocks.getProductConfiguration.mockResolvedValue(mockConfiguration); + + await composable.fetchProductConfiguration(); + await flushPromises(); + + expect(composable.isConfigurationChanged.value).toBe(false); + + composable.selectSectionValue({ + sectionId: "Section 1", + value: { + productId: "product-2", + quantity: 1, + }, + }); + + expect(composable.isConfigurationChanged.value).toBe(true); }); - expect(composable.isConfigurationChanged.value).toBe(true); - }); + it("should be set to false when return to initially selected configuration", async () => { + const mockConfiguration = { + configurationSections: [createConfigurationSection(1), createConfigurationSection(2)], + }; + mocks.getProductConfiguration.mockResolvedValue(mockConfiguration); - it("should set isConfigurationChanged to false when return to initially selected configuration", async () => { - const mockConfiguration = { - configurationSections: [createConfigurationSection(1), createConfigurationSection(2)], - }; - mocks.getProductConfiguration.mockResolvedValue(mockConfiguration); + await composable.fetchProductConfiguration(); + await flushPromises(); - await composable.fetchProductConfiguration(); - await flushPromises(); + expect(composable.isConfigurationChanged.value).toBe(false); - expect(composable.isConfigurationChanged.value).toBe(false); + // Change configuration + composable.selectSectionValue({ + sectionId: "Section 1", + value: { + productId: "product-2", + quantity: 1, + }, + }); - // Change configuration - composable.selectSectionValue({ - sectionId: "Section 1", - value: { - productId: "product-2", - quantity: 1, - }, - }); + expect(composable.isConfigurationChanged.value).toBe(true); - expect(composable.isConfigurationChanged.value).toBe(true); + // Return to initial configuration + composable.selectSectionValue({ + sectionId: "Section 1", + value: { + productId: "product-1", + quantity: 1, + }, + }); - // Return to initial configuration - composable.selectSectionValue({ - sectionId: "Section 1", - value: { - productId: "product-1", - quantity: 1, - }, + expect(composable.isConfigurationChanged.value).toBe(false); }); - expect(composable.isConfigurationChanged.value).toBe(false); - }); - - it("should not set isConfigurationChanged to true when nothing is selected", async () => { - const mockConfiguration = { - configurationSections: [createConfigurationSection(1, { isRequired: false }), createConfigurationSection(2)], - }; - mocks.getProductConfiguration.mockResolvedValue(mockConfiguration); + it("should remain false when nothing is selected", async () => { + const mockConfiguration = { + configurationSections: [createConfigurationSection(1, { isRequired: false }), createConfigurationSection(2)], + }; + mocks.getProductConfiguration.mockResolvedValue(mockConfiguration); - await composable.fetchProductConfiguration(); - await flushPromises(); + await composable.fetchProductConfiguration(); + await flushPromises(); - expect(composable.isConfigurationChanged.value).toBe(false); + expect(composable.isConfigurationChanged.value).toBe(false); + }); }); }); diff --git a/client-app/shared/notification/types/index.ts b/client-app/shared/notification/types/index.ts index 2d850ceeb..91e4b2d65 100644 --- a/client-app/shared/notification/types/index.ts +++ b/client-app/shared/notification/types/index.ts @@ -19,7 +19,6 @@ export interface INotification { classes?: string; group?: string; button?: NotificationCustomButtonType; - buttons?: NotificationCustomButtonType[]; component?: Component; props?: ComponentObjectPropsOptions;