Skip to content

Commit

Permalink
Manual promo blocks now respect focal point (#1996)
Browse files Browse the repository at this point in the history 
* add focal point code and tests

* fix eslint errors

* fix formatting

* fix formatting p2
  • Loading branch information
@annasherman
annasherman authored Apr 2, 2024
1 parent 3dbf188 commit 34b1c78
Show file tree
Hide file tree
Showing 9 changed files with 361 additions and 204 deletions.
46 changes: 27 additions & 19 deletions blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useComponentContext, useFusionContext } from "fusion:context";
import { useContent, useEditableContent } from "fusion:content";
import getProperties from "fusion:properties";
import {
getFocalFromANS,
Conditional,
formatURL,
Heading,
Expand All @@ -28,6 +29,7 @@ const ExtraLargeManualPromo = ({ customFields }) => {
imageAuth,
imageURL,
imageId,
imageFocalPoint,
imageRatio,
lazyLoad,
linkURL,
Expand All @@ -51,9 +53,9 @@ const ExtraLargeManualPromo = ({ customFields }) => {
resizedImage || !imageURL
? {}
: {
source: "signing-service",
query: { id: imageURL },
}
source: "signing-service",
query: { id: imageURL },
}
);
if (imageAuth && !resizedAuth) {
resizedAuth = JSON.parse(imageAuth);
Expand All @@ -66,27 +68,29 @@ const ExtraLargeManualPromo = ({ customFields }) => {
return null;
}

const ansImage = {
_id: resizedImage ? imageId : "",
url: imageURL,
auth: resizedAuth,
focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined
}
const alt = headline || description || null;
const imageParams =
imageURL && resizedAuth
? {
ansImage: {
_id: resizedImage ? imageId : "",
url: imageURL,
auth: resizedAuth,
},
alt,
aspectRatio: imageRatio,
resizedOptions: {
smart: true,
},
responsiveImages: [200, 400, 600, 800, 1200],
width: 600,
}
ansImage,
alt,
aspectRatio: imageRatio,
resizedOptions: {
...getFocalFromANS(ansImage)
},
responsiveImages: [200, 400, 600, 800, 1200],
width: 600,
}
: {
src: fallbackImage,
alt,
};
src: fallbackImage,
alt,
};

const availableDescription = showDescription ? description : null;
const availableHeadline = showHeadline ? headline : null;
Expand Down Expand Up @@ -120,6 +124,7 @@ const ExtraLargeManualPromo = ({ customFields }) => {
imageURL: "url",
imageId: "_id",
imageAuth: "auth",
imageFocalPoint: "focal_point"
})}
suppressContentEditableWarning
>
Expand Down Expand Up @@ -173,6 +178,9 @@ ExtraLargeManualPromo.propTypes = {
imageId: PropTypes.string.tag({
hidden: true,
}),
imageFocalPoint: PropTypes.string.tag({
hidden: true,
}),
linkURL: PropTypes.string.tag({
label: "Link URL",
group: "Configure Content",
Expand Down
46 changes: 34 additions & 12 deletions blocks/extra-large-manual-promo-block/features/extra-large-manual-promo/default.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,34 @@
import React from "react";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import { useContent } from "fusion:content";
import { getFocalFromANS } from "@wpmedia/arc-themes-components";
import ExtraLargeManualPromo from "./default";

jest.mock("@wpmedia/arc-themes-components", () => ({
...jest.requireActual("@wpmedia/arc-themes-components"),
getFocalFromANS: jest.fn(() => { }),
isServerSide: jest.fn(() => true),
LazyLoad: ({ children }) => children,
}));

jest.mock("fusion:content", () => ({
useContent: jest.fn(() => ({})),
useEditableContent: jest.fn(() => ({
searchableField: () => {},
searchableField: () => { },
})),
}));

describe("the extra large promo feature", () => {
afterEach(() => {
getFocalFromANS.mockClear();
});
it("should return null if lazyLoad on the server and not in the admin", () => {
const config = {
lazyLoad: true,
};
const { container } = render(<ExtraLargeManualPromo customFields={config} />);
expect(container.firstChild).toBeNull();
expect(container).toBeEmptyDOMElement();
});

it("should return null if no show flag is true", () => {
Expand All @@ -33,7 +39,7 @@ describe("the extra large promo feature", () => {
showOverline: false,
};
const { container } = render(<ExtraLargeManualPromo customFields={config} />);
expect(container.firstChild).toBeNull();
expect(container).toBeEmptyDOMElement();
});

it("should render all items", () => {
Expand All @@ -48,9 +54,9 @@ describe("the extra large promo feature", () => {
};
render(<ExtraLargeManualPromo customFields={config} />);

expect(screen.queryByRole("heading", { name: config.headline })).not.toBeNull();
expect(screen.queryByText(config.description)).not.toBeNull();
expect(screen.queryByText(config.overline)).not.toBeNull();
expect(screen.getByRole("heading", { name: config.headline })).not.toBeNull();
expect(screen.getByText(config.description)).not.toBeNull();
expect(screen.getByText(config.overline)).not.toBeNull();
});

it("should return an overline if showOverline is true", () => {
Expand All @@ -59,7 +65,7 @@ describe("the extra large promo feature", () => {
showOverline: true,
};
render(<ExtraLargeManualPromo customFields={config} />);
expect(screen.queryByText(config.overline)).not.toBeNull();
expect(screen.getByText(config.overline)).not.toBeNull();
});

it("should return a headline if showHeadline is true", () => {
Expand All @@ -68,7 +74,7 @@ describe("the extra large promo feature", () => {
showHeadline: true,
};
render(<ExtraLargeManualPromo customFields={config} />);
expect(screen.queryByRole("heading", { name: config.headline })).not.toBeNull();
expect(screen.getByRole("heading", { name: config.headline })).not.toBeNull();
});

it("should return a image if showImage is true", () => {
Expand All @@ -81,7 +87,7 @@ describe("the extra large promo feature", () => {
showImage: true,
};
render(<ExtraLargeManualPromo customFields={config} />);
expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();
expect(screen.getByRole("img", { name: config.headline })).not.toBeNull();
});

it("should use content source to get image auth", () => {
Expand All @@ -95,7 +101,7 @@ describe("the extra large promo feature", () => {
};
render(<ExtraLargeManualPromo customFields={config} />);
expect(useContent).toHaveBeenCalled();
expect(screen.queryByRole("img", { hidden: true })).not.toBeNull();
expect(screen.getByRole("img", { hidden: true })).not.toBeNull();
});

it("should return a fallback image if showImage is true and imageUrl is not valid", () => {
Expand All @@ -105,7 +111,7 @@ describe("the extra large promo feature", () => {
showImage: true,
};
render(<ExtraLargeManualPromo customFields={config} />);
expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();
expect(screen.getByRole("img", { name: config.headline })).not.toBeNull();
});

it("should make a blank call to the signing-service if the image is from PhotoCenter and has an Auth value", () => {
Expand Down Expand Up @@ -156,6 +162,22 @@ describe("the extra large promo feature", () => {
showDescription: true,
};
render(<ExtraLargeManualPromo customFields={config} />);
expect(screen.queryByText(config.description)).not.toBeNull();
expect(screen.getByText(config.description)).not.toBeNull();
});
it("should respect focal point if one is set", () => {
const config = {
imageAuth: "",
imageURL: "test_id=123",
imageId: "123",
imageFocalPoint: JSON.stringify({ x: 1234, y: 2345 }),
imageRatio: "4:3",
showImage: true,
};
render(<ExtraLargeManualPromo customFields={config} />);
expect(getFocalFromANS).toHaveBeenCalledWith(
expect.objectContaining({
focal_point: JSON.parse(config.imageFocalPoint)
})
);
})
});
68 changes: 38 additions & 30 deletions blocks/large-manual-promo-block/features/large-manual-promo/default.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useComponentContext, useFusionContext } from "fusion:context";
import { useContent, useEditableContent } from "fusion:content";
import getProperties from "fusion:properties";
import {
getFocalFromANS,
Conditional,
Image,
isServerSide,
Expand All @@ -22,13 +23,24 @@ import {

const BLOCK_CLASS_NAME = "b-large-manual-promo";

const PromoOverline = ({ showOverline, overline, overlineURL }) => {
if (showOverline && overline) {
if (overlineURL) {
return <Overline href={overlineURL}>{overline}</Overline>;
}
return <Overline>{overline}</Overline>;
}
return null;
};

const LargeManualPromo = ({ customFields }) => {
const {
description,
headline,
imageAuth,
imageURL,
imageId,
imageFocalPoint,
imageRatio,
lazyLoad,
linkURL,
Expand All @@ -52,9 +64,9 @@ const LargeManualPromo = ({ customFields }) => {
resizedImage || !imageURL
? {}
: {
source: "signing-service",
query: { id: imageURL },
}
source: "signing-service",
query: { id: imageURL },
}
);
if (imageAuth && !resizedAuth) {
resizedAuth = JSON.parse(imageAuth);
Expand All @@ -66,38 +78,30 @@ const LargeManualPromo = ({ customFields }) => {
if (shouldLazyLoad && isServerSide()) {
return null;
}
const ansImage = {
_id: resizedImage ? imageId : "",
url: imageURL,
auth: resizedAuth,
focal_point: imageFocalPoint ? JSON.parse(imageFocalPoint) : undefined
}

const alt = headline || description || null;
const imageParams =
imageURL && resizedAuth
? {
ansImage: {
_id: resizedImage ? imageId : "",
url: imageURL,
auth: resizedAuth,
},
alt,
aspectRatio: imageRatio,
resizedOptions: {
smart: true,
},
responsiveImages: [200, 400, 600, 800, 1200],
width: 600,
}
: {
src: fallbackImage,
alt,
};

const PromoOverline = () => {
if (showOverline && overline) {
if (overlineURL) {
return <Overline href={overlineURL}>{overline}</Overline>;
ansImage,
alt,
aspectRatio: imageRatio,
resizedOptions: {
...getFocalFromANS(ansImage)
},
responsiveImages: [200, 400, 600, 800, 1200],
width: 600,
}
return <Overline>{overline}</Overline>;
}
return null;
};
: {
src: fallbackImage,
alt,
};

return (
<LazyLoad enabled={shouldLazyLoad}>
Expand All @@ -109,6 +113,7 @@ const LargeManualPromo = ({ customFields }) => {
imageURL: "url",
imageId: "_id",
imageAuth: "auth",
imageFocalPoint: "focal_point",
})}
suppressContentEditableWarning
>
Expand All @@ -126,7 +131,7 @@ const LargeManualPromo = ({ customFields }) => {
</MediaItem>
) : null}
<Stack className={`${BLOCK_CLASS_NAME}__text`}>
<PromoOverline />
<PromoOverline showOverline={showOverline} overline={overline} overlineURL={overlineURL} />
{showDescription || showHeadline ? (
<Stack>
{showHeadline && headline ? (
Expand Down Expand Up @@ -181,6 +186,9 @@ LargeManualPromo.propTypes = {
imageId: PropTypes.string.tag({
hidden: true,
}),
imageFocalPoint: PropTypes.string.tag({
hidden: true,
}),
linkURL: PropTypes.string.tag({
label: "Link URL",
group: "Configure Content",
Expand Down
Loading

0 comments on commit 34b1c78

Please sign in to comment.