diff --git a/blocks/subscriptions-block/components/OfferToProductList/index.jsx b/blocks/subscriptions-block/components/OfferToProductList/index.jsx index 83b72bcc66..8ceb23ee03 100644 --- a/blocks/subscriptions-block/components/OfferToProductList/index.jsx +++ b/blocks/subscriptions-block/components/OfferToProductList/index.jsx @@ -1,7 +1,7 @@ import React from "react"; import PropTypes from "@arc-fusion/prop-types"; -import useSales from "../useSales"; import { Grid } from "@wpmedia/arc-themes-components"; +import useSales from "../useSales"; import OfferCard from "../OfferCard"; export const ARCXP_CART = 'ArcXP_cart'; @@ -43,7 +43,8 @@ const OfferToProductList = ({ offer, isLoggedIn, checkoutURL, loginURL, classNam quantity: 1, }, ]); - const maxEndDate = Math.max(...offer?.campaigns?.map(c => c.validUntil)); + const allValidUntil = offer?.campaigns?.map(c => c.validUntil !== undefined && !Number.isNaN(c.validUntil)); + const maxEndDate = allValidUntil.length ? Math.max(allValidUntil) : null; const liveCampaing = offer?.campaigns?.find(c => c.validUntil === null || c.validUntil === maxEndDate); localStorage.setItem(ARCXP_CAMPAIGN, liveCampaing?.name); }) diff --git a/blocks/subscriptions-block/components/OfferToProductList/index.test-ignore.jsx b/blocks/subscriptions-block/components/OfferToProductList/index.test.jsx similarity index 93% rename from blocks/subscriptions-block/components/OfferToProductList/index.test-ignore.jsx rename to blocks/subscriptions-block/components/OfferToProductList/index.test.jsx index 8aceae2519..0461c82f6b 100644 --- a/blocks/subscriptions-block/components/OfferToProductList/index.test-ignore.jsx +++ b/blocks/subscriptions-block/components/OfferToProductList/index.test.jsx @@ -1,5 +1,5 @@ import React from "react"; -import { act, render } from "@testing-library/react"; +import { act, render, waitFor } from "@testing-library/react"; import OfferToProductList from "./index"; import useOffer from "../useOffer"; import OfferCard from "../OfferCard"; @@ -177,31 +177,34 @@ jest.mock("fusion:properties", () => script: "https://corecomponents-the-gazette-prod.cdn.arcpublishing.com/arc/subs/p.min.js", }, }, - })) + })), ); +jest.mock("../OfferCard", () => { + return jest.fn(() => null); + }); + jest.mock("@arc-publishing/sdk-sales"); jest.mock("../../components/useOffer"); + useOffer.mockReturnValue({ offer: sampleOffer, fetchOffer: () => sampleOffer, }); describe("The OfferToProductList component", () => { - it("renders the correct number of offer cards", () => { - const { container } = render( + it("renders the correct number of offer cards", async () => { + render( + />, ); - act(() => { - container.setProps({}); - }); + const mockedChildComponent = OfferCard; - expect(container.find(OfferCard)).toHaveLength(4); + await waitFor(() => expect(mockedChildComponent).toHaveBeenCalledTimes(4)); }); -}); \ No newline at end of file +}); diff --git a/blocks/subscriptions-block/components/OrderInformation/index.jsx b/blocks/subscriptions-block/components/OrderInformation/index.jsx index 0b29fa355e..77e83e6970 100644 --- a/blocks/subscriptions-block/components/OrderInformation/index.jsx +++ b/blocks/subscriptions-block/components/OrderInformation/index.jsx @@ -32,7 +32,33 @@ const OrderSummary = ({ orderDetails, className }) => { ); }; +const ProductPriceDetails = ({ + details = [], + showPriceDescription, + showProductFeatures, + className, +}) => { + if (details?.items?.length) { + return details?.items?.map((item) => + + {item.priceName} + {showPriceDescription && ( + + )} + {showProductFeatures && ( + + )} + + ); + } + return null; +}; + const OrderInformation = ({ + id, offerURL, showOfferURL, showPriceDescription, @@ -41,36 +67,9 @@ const OrderInformation = ({ className, }) => { const phrases = usePhrases(); - - const ProductPriceDetails = ({ - details = [], - showPriceDescription, - showProductFeatures, - className, - }) => { - if (details?.items?.length) { - return details?.items?.map((item) => { - return ( - - {item.priceName} - {showPriceDescription && ( - - )} - {showProductFeatures && ( - - )} - - ); - }); - } - return null; - }; - + return ( -
+
({ - __esModule: true, - default: { - apiOrigin: "", - options: jest.fn(), - }, -})); - -jest.mock("fusion:properties", () => - jest.fn(() => ({ - api: { - identity: { - origin: "https://corecomponents-arc-demo-3-prod.api.cdn.arcpublishing.com", - }, - retail: { - origin: "https://corecomponents-arc-demo-3-prod.api.cdn.arcpublishing.com", - endpoint: "/retail/public/v1/offer/live/", - }, - }, - })), -); - -jest.mock("fusion:context", () => ({ - __esModule: true, - useFusionContext: () => ({ - arcSite: "Test Site", - }), -})); - -const orderDetails = { - currency: "COP", - shipping: 0, - subtotal: 20000, - tax: 100, - taxSupported: true, - total: 20100, - items: [ - { - name: "COP Currency", - price: 20000, - priceCode: "Q6R7UO", - priceDescription: "

with tax description price

", - priceName: "All access Annual", - priceSummary: "

with tax summary price

", - productDescription: "

COP Currency description

", - quantity: 1, - shortDescription: "

COP Currency description

", - sku: "0987", - subtotal: 20100, - tax: 0, - taxInclusive: undefined, - total: 20000, - productAttributes: [ - { - featureText: "

Unlimited access to The Daily Intelligencer

", - }, - { - featureText: "

Save $40

", - }, - { - featureText: "

A bonus subscription to share

", - }, - ], - }, - ], -}; - -describe("OfferCard", () => { - it("renders order info", ()=>{ - render(); - expect(screen.getByText(orderDetails?.items?.[0]?.priceName)).toBeVisible(); - expect(screen.getByText("checkout-block.order-summary")).toBeVisible(); - expect(screen.getByText("checkout-block.subtotal")).toBeVisible(); - expect(screen.getByText(`${currency(orderDetails?.currency)}${orderDetails?.subtotal}`)).toBeVisible(); - expect(screen.getByText("checkout-block.salesTax")).toBeVisible(); - expect(screen.getByText(`${currency(orderDetails?.currency)}${orderDetails?.total}`)).toBeVisible(); - expect(screen.getByText("checkout-block.due-today")).toBeVisible(); - }); - - it("renders price description", ()=>{ - render(); - expect(screen.getByText("with tax description price")).toBeVisible(); - }); - - it("renders features", () => { - render(); - const list = screen.getByRole("list") - const { getAllByRole } = within(list) - const items = getAllByRole("listitem") - expect(items.length).toBe(3); - }); - - it("renders link to offer", ()=>{ - render(); - expect(screen.getByRole('link', { name: 'checkout-block.view-subscription-offers' })).toHaveAttribute('href', '/offer/'); - }); -}); diff --git a/blocks/subscriptions-block/components/OrderInformation/index.test.jsx b/blocks/subscriptions-block/components/OrderInformation/index.test.jsx new file mode 100644 index 0000000000..bac4aabfbb --- /dev/null +++ b/blocks/subscriptions-block/components/OrderInformation/index.test.jsx @@ -0,0 +1,141 @@ +import React from "react"; +import { render, screen, within } from "@testing-library/react"; +import '@testing-library/jest-dom'; +import OrderInformation from "./index"; +import currency from "../../utils/currency"; + +const orderDetails = { + currency: "COP", + shipping: 0, + subtotal: 20000, + tax: 100, + taxSupported: true, + total: 20100, + items: [ + { + name: "COP Currency", + price: 20000, + priceCode: "Q6R7UO", + priceDescription: "

with tax description price

", + priceName: "All access Annual", + priceSummary: "

with tax summary price

", + productDescription: "

COP Currency description

", + quantity: 1, + shortDescription: "

COP Currency description

", + sku: "0987", + subtotal: 20100, + tax: 0, + taxInclusive: undefined, + total: 20000, + productAttributes: [ + { + featureText: "

Unlimited access to The Daily Intelligencer

", + }, + { + featureText: "

Save $40

", + }, + { + featureText: "

A bonus subscription to share

", + }, + ], + }, + ], +}; + +jest.mock("@arc-publishing/sdk-identity", () => ({ + __esModule: true, + default: { + apiOrigin: "", + options: jest.fn(), + }, +})); + +jest.mock("fusion:properties", () => + jest.fn(() => ({ + api: { + identity: { + origin: "https://corecomponents-arc-demo-3-prod.api.cdn.arcpublishing.com", + }, + retail: { + origin: "https://corecomponents-arc-demo-3-prod.api.cdn.arcpublishing.com", + endpoint: "/retail/public/v1/offer/live/", + }, + }, + })), +); + +jest.mock("fusion:context", () => ({ + __esModule: true, + useFusionContext: () => ({ + arcSite: "Test Site", + }), +})); + +describe('Order Information component', () => { + it("renders order info", () => { + render( + , + ); + expect(screen.getByText(orderDetails?.items?.[0]?.priceName)).toBeVisible(); + expect(screen.getByText("checkout-block.order-summary")).toBeVisible(); + expect(screen.getByText("checkout-block.subtotal")).toBeVisible(); + expect( + screen.getByText(`${currency(orderDetails?.currency)}${orderDetails?.subtotal}`), + ).toBeVisible(); + expect(screen.getByText("checkout-block.salesTax")).toBeVisible(); + expect( + screen.getByText(`${currency(orderDetails?.currency)}${orderDetails?.total}`), + ).toBeVisible(); + expect(screen.getByText("checkout-block.due-today")).toBeVisible(); + }); + + it("renders price description", () => { + render( + , + ); + expect(screen.getByText("with tax description price")).toBeVisible(); + }); + + it("renders features", () => { + render( + , + ); + const list = screen.getByRole("list"); + const { getAllByRole } = within(list); + const items = getAllByRole("listitem"); + expect(items.length).toBe(3); + }); + + it("renders link to offer", () => { + render( + , + ); + expect( + screen.getByRole("link", { name: "checkout-block.view-subscription-offers" }), + ).toHaveAttribute("href", "/offer/"); + }); +}); diff --git a/blocks/subscriptions-block/components/useOrder.jsx b/blocks/subscriptions-block/components/useOrder.jsx index 3e0fc1fc26..44bffa0c9b 100644 --- a/blocks/subscriptions-block/components/useOrder.jsx +++ b/blocks/subscriptions-block/components/useOrder.jsx @@ -21,20 +21,21 @@ const useOrder = (orderNumber) => { useEffect(() => { const getCart = async () => { - const cart = await Sales.getCart(); - setCart(cart); + const currentCart = await Sales.getCart(); + setCart(currentCart); }; getCart(); - const campaignName = localStorage.getItem(ARCXP_CAMPAIGN); - setCampaignName(campaignName); + const campaignNameStored = localStorage.getItem(ARCXP_CAMPAIGN); + setCampaignName(campaignNameStored); + // eslint-disable-next-line }, []); useEffect(() => { const getOrder = async () => { try{ - const order = await Sales.getOrderDetails(orderNumber); - setOrder(order); + const currentOrder = await Sales.getOrderDetails(orderNumber); + setOrder(currentOrder); }catch(e){ setError(e); } @@ -42,6 +43,7 @@ const useOrder = (orderNumber) => { if (orderNumber) { getOrder(); } + // eslint-disable-next-line }, [orderNumber]); useEffect(() => {