Skip to content

Commit

Permalink
[Themes 2014] Inline Editing | Large Promo Block (#2204)
Browse files Browse the repository at this point in the history 
* Added editableContent to heading

* Fixed tests

* Removed editable

* Added editingContent to overline

* updated overline

---------

Co-authored-by: Blake Anderson <[email protected]>
Co-authored-by: blakeganderson <[email protected]>
  • Loading branch information
@malavikakoppula @blakeganderson
3 people authored Nov 1, 2024
1 parent 047a17e commit 026e20b
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 33 deletions.
35 changes: 33 additions & 2 deletions blocks/large-promo-block/features/large-promo/default.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,8 @@ export const LargePromoPresentation = ({
contentUrl,
displayDate,
editableDescription,
editableHeading,
editableOverline,
embedMarkup,
labelIconName,
labelIconText,
Expand Down Expand Up @@ -111,12 +113,18 @@ export const LargePromoPresentation = ({
contentDate ? (
<Stack className={`${BLOCK_CLASS_NAME}__text`}>
{contentOverline ? (
<Overline href={contentOverlineURL}>{contentOverline}</Overline>
<Overline
href={contentOverlineURL}
{...editableOverline}
suppressContentEditableWarning
>
{contentOverline}
</Overline>
) : null}
{contentHeading || contentDescription || contentAuthors || contentDate ? (
<Stack>
{contentHeading ? (
<Heading>
<Heading {...editableHeading} suppressContentEditableWarning>
<Conditional
component={Link}
condition={contentUrl}
Expand Down Expand Up @@ -298,6 +306,8 @@ const LargePromoItem = ({ customFields, arcSite }) => {
: "";
const phrases = usePhrases();

const editableHeading = content?.headlines ? editableContent(content, "headlines.basic") : {};

const editableDescription = content?.description
? editableContent(content, "description.basic")
: {};
Expand Down Expand Up @@ -328,6 +338,25 @@ const LargePromoItem = ({ customFields, arcSite }) => {
content?.websites?.[arcSite]?.website_section || {};

let [overlineText, overlineURL] = [sectionText, sectionUrl];
const shouldUseLabel = !!labelDisplay;

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")
: {};
}

if (content?.owner?.sponsored) {
overlineText = content?.label?.basic?.text || phrases.t("global.sponsored-content");
overlineURL = null;
Expand Down Expand Up @@ -380,6 +409,8 @@ const LargePromoItem = ({ customFields, arcSite }) => {
contentUrl={contentUrl}
displayDate={displayDate}
editableDescription={editableDescription}
editableHeading={editableHeading}
editableOverline={editableOverline}
embedMarkup={embedMarkup}
labelIconName={labelIconName}
labelIconText={labelIconText}
Expand Down
63 changes: 32 additions & 31 deletions blocks/large-promo-block/features/large-promo/default.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ describe("Large Promo", () => {
};
isServerSide.mockReturnValue(true);
const { container } = render(<LargePromo customFields={updatedConfig} />);
expect(container.firstChild).toBe(null);
expect(container.innerHTML).toBe('');
});

it("should render complete promo", () => {
Expand All @@ -130,11 +130,11 @@ describe("Large Promo", () => {
/>,
);

expect(screen.queryByText(largePromoMock.label.basic.text)).not.toBeNull();
expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull();
expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull();
expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull();
expect(screen.queryByRole("img")).not.toBeNull();
expect(screen.getByText(largePromoMock.label.basic.text)).not.toBeNull();
expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull();
expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull();
expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull();
expect(screen.getByAltText("Baby panda born at the zoo")).not.toBeNull();
});

it("should not render overline", () => {
Expand All @@ -152,10 +152,10 @@ describe("Large Promo", () => {
/>,
);
expect(screen.queryByText(largePromoMock.label.basic.text)).toBeNull();
expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull();
expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull();
expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull();
expect(screen.queryByRole("img")).not.toBeNull();
expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull();
expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull();
expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull();
expect(screen.getByRole("img")).not.toBeNull();
});

it("should not render date when disabled", () => {
Expand All @@ -173,10 +173,10 @@ describe("Large Promo", () => {
/>,
);
expect(screen.queryByText(largePromoMock.label.basic.text)).toBeNull();
expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull();
expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull();
expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull();
expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull();
expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).toBeNull();
expect(screen.queryByRole("img")).not.toBeNull();
expect(screen.getByRole("img")).not.toBeNull();
});

it("should not render date when null", () => {
Expand Down Expand Up @@ -218,11 +218,11 @@ describe("Large Promo", () => {
}}
/>,
);
expect(screen.queryByText(largePromoMock.label.basic.text)).not.toBeNull();
expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull();
expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull();
expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull();
expect(screen.queryByRole("img")).not.toBeNull();
expect(screen.getByText(largePromoMock.label.basic.text)).not.toBeNull();
expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull();
expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull();
expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull();
expect(screen.getByRole("img")).not.toBeNull();
});

it("should not render headline", () => {
Expand All @@ -239,11 +239,11 @@ describe("Large Promo", () => {
}}
/>,
);
expect(screen.queryByText(largePromoMock.label.basic.text)).not.toBeNull();
expect(screen.getByText(largePromoMock.label.basic.text)).not.toBeNull();
expect(screen.queryByText(largePromoMock.headlines.basic)).toBeNull();
expect(screen.queryByText(largePromoMock.description.basic)).not.toBeNull();
expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull();
expect(screen.queryByRole("img")).not.toBeNull();
expect(screen.getByText(largePromoMock.description.basic)).not.toBeNull();
expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull();
expect(screen.getByRole("img")).not.toBeNull();
});

it("should not render description", () => {
Expand All @@ -260,11 +260,11 @@ describe("Large Promo", () => {
}}
/>,
);
expect(screen.queryByText(largePromoMock.label.basic.text)).not.toBeNull();
expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull();
expect(screen.getByText(largePromoMock.label.basic.text)).not.toBeNull();
expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull();
expect(screen.queryByText(largePromoMock.description.basic)).toBeNull();
expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull();
expect(screen.queryByRole("img")).not.toBeNull();
expect(screen.getByText("December 02, 2019 at 6:58PM UTC")).not.toBeNull();
expect(screen.getByRole("img")).not.toBeNull();
});

it("should only render Image", () => {
Expand All @@ -281,7 +281,7 @@ describe("Large Promo", () => {
expect(screen.queryByText(largePromoMock.headlines.basic)).toBeNull();
expect(screen.queryByText(largePromoMock.description.basic)).toBeNull();
expect(screen.queryByText("December 02, 2019 at 6:58PM UTC")).toBeNull();
expect(screen.queryByRole("img")).not.toBeNull();
expect(screen.getByRole("img")).not.toBeNull();
});

it('should not render Image if "showImage" is false', () => {
Expand Down Expand Up @@ -366,15 +366,15 @@ describe("Large Promo", () => {
/>,
);
expect(screen.queryByText(largePromoMock.label.basic.text)).toBeNull();
expect(screen.queryByText("global.sponsored-content")).not.toBeNull();
expect(screen.queryByText(largePromoMock.headlines.basic)).not.toBeNull();
expect(screen.getByText("global.sponsored-content")).not.toBeNull();
expect(screen.getByText(largePromoMock.headlines.basic)).not.toBeNull();
expect(screen.queryByText(largePromoMock.description.basic)).toBeNull();
});

it("should render image icon label", () => {
useContent.mockReturnValueOnce(largePromoMock);

const { container } = render(
render(
<LargePromo
customFields={{
showImage: true,
Expand All @@ -384,7 +384,8 @@ describe("Large Promo", () => {
}}
/>,
);
expect(container.querySelector(".b-large-promo__icon_label")).not.toBeNull();
const img = screen.getByAltText("Baby panda born at the zoo");
expect(img).not.toBeNull();
});

// it("should render video player media when 'playVideoInPlace' prop is passed", () => {
Expand Down

0 comments on commit 026e20b

Please sign in to comment.