Skip to content

Commit

Permalink
Add editable headline, description and overline for extra-large-promo… (
Browse files Browse the repository at this point in the history 
#2255)

* Add editable headline, description and overline for extra-large-promo-block

* updated tests

* updated tests

---------

Co-authored-by: Blake Anderson <[email protected]>
Co-authored-by: blakeganderson <[email protected]>
  • Loading branch information
@Gripholder @blakeganderson
3 people authored Nov 1, 2024
1 parent 026e20b commit 7bf9d27
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 19 deletions.
37 changes: 33 additions & 4 deletions blocks/extra-large-promo-block/features/extra-large-promo/default.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,9 +39,12 @@ const getType = (type, content) => (content?.type === type ? content : undefined

export const ExtraLargePromoPresentation = ({
hasOverline,
editableOverline,
contentHeading,
editableHeading,
showImage,
contentDescription,
editableDescription,
hasDate,
shouldLazyLoad,
overlineUrl,
Expand All @@ -61,7 +64,11 @@ export const ExtraLargePromoPresentation = ({
hasOverline || contentHeading || showImage || contentDescription || contentAuthors || hasDate ? (
<LazyLoad enabled={shouldLazyLoad}>
<article className={BLOCK_CLASS_NAME}>
{hasOverline ? <Overline href={overlineUrl}>{overlineText}</Overline> : null}
{hasOverline ? (
<Overline href={overlineUrl} suppressContentEditableWarning {...editableOverline}>
{overlineText}
</Overline>
) : null}
{contentHeading ||
showImage ||
contentDescription ||
Expand All @@ -71,7 +78,7 @@ export const ExtraLargePromoPresentation = ({
<Stack>
{contentHeading ? (
<HeadingSection>
<Heading>
<Heading suppressContentEditableWarning {...editableHeading}>
<Conditional component={Link} condition={contentUrl} href={contentUrl}>
{contentHeading}
</Conditional>
Expand Down Expand Up @@ -112,7 +119,11 @@ export const ExtraLargePromoPresentation = ({
)}
</MediaItem>
) : null}
{contentDescription ? <Paragraph>{contentDescription}</Paragraph> : null}
{contentDescription ? (
<Paragraph suppressContentEditableWarning {...editableDescription}>
{contentDescription}
</Paragraph>
) : null}
{contentAuthors || hasDate ? (
<Attribution>
<Join separator={Separator}>
Expand All @@ -136,7 +147,7 @@ export const ExtraLargePromoPresentation = ({

const ExtraLargePromo = ({ customFields }) => {
const { arcSite, isAdmin } = useFusionContext();
const { searchableField } = useEditableContent();
const { editableContent, searchableField } = useEditableContent();
const {
dateLocalization: { language, timeZone, dateTimeFormat } = {
language: "en",
Expand Down Expand Up @@ -290,17 +301,32 @@ const ExtraLargePromo = ({ customFields }) => {

// Default to websites object data
let [overlineText, overlineUrl] = [sectionText, sectionUrl];
let editableOverline = content?.websites?.[arcSite]?.website_section?.name
? editableContent(content, `websites.${[arcSite]}.website_section.name`)
: {};

if (content?.owner?.sponsored) {
overlineText = content?.label?.basic?.text || phrases.t("global.sponsored-content");
overlineUrl = null;
editableOverline = content?.label?.basic?.text
? editableContent(content, "label.basic.text")
: {};
} else if (shouldUseLabel) {
[overlineText, overlineUrl] = [labelText, labelUrl];
editableOverline = content?.label?.basic?.text
? editableContent(content, "label.basic.text")
: {};
}

const hasOverline = showOverline && overlineText;
const contentDescription = showDescription ? content?.description?.basic : null;
const editableDescription = content?.description
? editableContent(content, "description.basic")
: {};
const contentHeading = showHeadline ? content?.headlines?.basic : null;
const editableHeading = content?.headlines?.basic
? editableContent(content, "headlines.basic")
: {};
const contentUrl = content?.websites?.[arcSite]?.website_url;
const embedMarkup = playVideoInPlace && getVideoFromANS(content);
const contentAuthors =
Expand Down Expand Up @@ -351,9 +377,12 @@ const ExtraLargePromo = ({ customFields }) => {
return (
<ExtraLargePromoPresentation
hasOverline={hasOverline}
editableOverline={editableOverline}
contentHeading={contentHeading}
editableHeading={editableHeading}
showImage={showImage}
contentDescription={contentDescription}
editableDescription={editableDescription}
hasDate={hasDate}
shouldLazyLoad={shouldLazyLoad}
overlineUrl={overlineUrl}
Expand Down
74 changes: 59 additions & 15 deletions blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import { useContent } from "fusion:content";

Expand Down Expand Up @@ -27,30 +28,71 @@ describe("the extra large promo feature", () => {
const config = {
lazyLoad: true,
};
const { container } = render(<ExtraLargePromo customFields={config} />);
expect(container.firstChild).toBe(null);
render(<ExtraLargePromo customFields={config} />);
expect(screen.queryByTestId("extra-large-promo")).toBeNull();
});

it("should return null if no show flag is true", () => {
const config = {};
const { container } = render(<ExtraLargePromo customFields={config} />);
expect(container.firstChild).toBeNull();
render(<ExtraLargePromo customFields={config} />);
expect(screen.queryByTestId("extra-large-promo")).toBeNull();
});

it("should return an overline if showOverline is true", () => {
const config = {
showOverline: true,
};
render(<ExtraLargePromo customFields={config} />);
expect(screen.queryByRole("link", { name: "Premium" })).not.toBeNull();
expect(screen.getByRole("link", { name: "Premium" })).not.toBeNull();
});

it("should overline text be an editable field", () => {
const arcSite = "dagen"; // using default website

const config = {
showOverline: true,
};
render(<ExtraLargePromo customFields={config} />);

let overline = mockData?.websites[arcSite]?.website_section?.name;

if (mockData.owner?.sponsored) {
overline = mockData.label.basic.text;
} else if (mockData?.label?.basic?.display) {
overline = mockData?.label?.basic?.text;
}

if (overline) {
expect(screen.getByText(overline)).toHaveAttribute("contenteditable", "true");
}
});

it("should return a headline if showHeadline is true", () => {
const config = {
showHeadline: true,
};
render(<ExtraLargePromo customFields={config} />);
expect(screen.queryByRole("heading", { name: config.headline })).not.toBeNull();
expect(screen.getByRole("heading", { name: config.headline })).not.toBeNull();
});

it("should headline be an editable field", () => {
const config = {
showHeadline: true,
};
render(<ExtraLargePromo customFields={config} />);

expect(screen.getByRole("heading", { name: mockData.headlines.basic })).toHaveAttribute(
"contenteditable",
);
});

it("should description be an editable field", () => {
const config = {
showDescription: true,
};
render(<ExtraLargePromo customFields={config} />);

expect(screen.getByText(mockData.description.basic)).toHaveAttribute("contenteditable");
});

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

it("should return a fallback image if showImage is true and imageUrl is not valid", () => {
Expand All @@ -74,7 +116,7 @@ describe("the extra large promo feature", () => {
showImage: true,
};
render(<ExtraLargePromo 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 @@ -125,26 +167,28 @@ describe("the extra large promo feature", () => {
};
render(<ExtraLargePromo customFields={config} />);
expect(
screen.queryByText("Why does August seem hotter? Maybe it comes from weariness."),
screen.getByText("Why does August seem hotter? Maybe it comes from weariness."),
).not.toBeNull();
});

it("should return a byline if showByline is true", () => {
const config = {
showByline: true,
};
const { getByText } = render(<ExtraLargePromo customFields={config} />);
render(<ExtraLargePromo customFields={config} />);
expect(
getByText("global.by-text Example Author1, Example Author2, global.and-text Example Author3"),
).not.toBeNull();
screen.getByText(
"global.by-text Example Author1, Example Author2, global.and-text Example Author3",
),
).toBeInTheDocument();
});

it("should return a byline if showDate is true", () => {
const config = {
showDate: true,
};
render(<ExtraLargePromo customFields={config} />);
expect(screen.queryByText("January 30, 2020", { exact: false })).not.toBeNull();
expect(screen.getByText("January 30, 2020", { exact: false })).not.toBeNull();
});

it("should returned a sponsored overline if it's sponsored content", () => {
Expand All @@ -153,7 +197,7 @@ describe("the extra large promo feature", () => {
showOverline: true,
};
render(<ExtraLargePromo customFields={config} />);
expect(screen.queryByText("Sponsored")).not.toBeNull();
expect(screen.getByText("Sponsored")).not.toBeNull();
});

it("should return a video if playVideoInPlace is true and video content available", () => {
Expand All @@ -163,6 +207,6 @@ describe("the extra large promo feature", () => {
showImage: true,
};
render(<ExtraLargePromo customFields={config} />);
expect(screen.queryByText("video embed")).not.toBeNull();
expect(screen.getByText("video embed")).not.toBeNull();
});
});

0 comments on commit 7bf9d27

Please sign in to comment.