Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add editable headline, description and overline for extra-large-promo… #2255

Merged
merged 4 commits into from
Nov 1, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -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,
@@ -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 ||
@@ -71,7 +78,7 @@ export const ExtraLargePromoPresentation = ({
<Stack>
{contentHeading ? (
<HeadingSection>
<Heading>
<Heading suppressContentEditableWarning {...editableHeading}>
<Conditional component={Link} condition={contentUrl} href={contentUrl}>
{contentHeading}
</Conditional>
@@ -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}>
@@ -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",
@@ -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 =
@@ -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}
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";

@@ -28,13 +29,13 @@
lazyLoad: true,
};
const { container } = render(<ExtraLargePromo customFields={config} />);
expect(container.firstChild).toBe(null);

Check warning on line 32 in blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

GitHub Actions / ensure_minimum_test_coverage_linting

Avoid direct Node access. Prefer using the methods from Testing Library
});

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

Check warning on line 38 in blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

GitHub Actions / ensure_minimum_test_coverage_linting

Avoid direct Node access. Prefer using the methods from Testing Library
});

it("should return an overline if showOverline is true", () => {
@@ -42,17 +43,56 @@
showOverline: true,
};
render(<ExtraLargePromo customFields={config} />);
expect(screen.queryByRole("link", { name: "Premium" })).not.toBeNull();

Check warning on line 46 in blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

GitHub Actions / ensure_minimum_test_coverage_linting

Use `getBy*` queries rather than `queryBy*` for checking element is present
});

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) {

Check failure on line 59 in blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

GitHub Actions / ensure_minimum_test_coverage_linting

Redundant double negation
overline = mockData.label.basic.text;
} else if (!!mockData?.label?.basic?.display) {

Check failure on line 61 in blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

GitHub Actions / ensure_minimum_test_coverage_linting

Redundant double negation
overline = mockData?.label?.basic?.text;
}

overline ? expect(screen.getByText(overline)).toHaveAttribute("contenteditable", "true") : null; // Bypass test if overline value doesn't exist (to be editable)

Check failure on line 65 in blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

GitHub Actions / ensure_minimum_test_coverage_linting

Expected an assignment or function call and instead saw an expression
});

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();

Check warning on line 73 in blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

GitHub Actions / ensure_minimum_test_coverage_linting

Use `getBy*` queries rather than `queryBy*` for checking element is present
});

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

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

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

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

it("should return a image if showImage is true", () => {
const config = {
imageOverrideURL: "#",
@@ -65,7 +105,7 @@
}),
};
render(<ExtraLargePromo customFields={config} />);
expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();

Check warning on line 108 in blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

GitHub Actions / ensure_minimum_test_coverage_linting

Use `getBy*` queries rather than `queryBy*` for checking element is present
});

it("should return a fallback image if showImage is true and imageUrl is not valid", () => {
@@ -74,7 +114,7 @@
showImage: true,
};
render(<ExtraLargePromo customFields={config} />);
expect(screen.queryByRole("img", { name: config.headline })).not.toBeNull();

Check warning on line 117 in blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

GitHub Actions / ensure_minimum_test_coverage_linting

Use `getBy*` queries rather than `queryBy*` for checking element is present
});

it("should make a blank call to the signing-service if the image is from PhotoCenter and has an Auth value", () => {
@@ -125,7 +165,7 @@
};
render(<ExtraLargePromo customFields={config} />);
expect(
screen.queryByText("Why does August seem hotter? Maybe it comes from weariness."),

Check warning on line 168 in blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

GitHub Actions / ensure_minimum_test_coverage_linting

Use `getBy*` queries rather than `queryBy*` for checking element is present
).not.toBeNull();
});

@@ -135,7 +175,7 @@
};
const { getByText } = render(<ExtraLargePromo customFields={config} />);
expect(
getByText("global.by-text Example Author1, Example Author2, global.and-text Example Author3"),

Check warning on line 178 in blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

GitHub Actions / ensure_minimum_test_coverage_linting

Avoid destructuring queries from `render` result, use `screen.getByText` instead
).not.toBeNull();
});

@@ -144,7 +184,7 @@
showDate: true,
};
render(<ExtraLargePromo customFields={config} />);
expect(screen.queryByText("January 30, 2020", { exact: false })).not.toBeNull();

Check warning on line 187 in blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

GitHub Actions / ensure_minimum_test_coverage_linting

Use `getBy*` queries rather than `queryBy*` for checking element is present
});

it("should returned a sponsored overline if it's sponsored content", () => {
@@ -153,7 +193,7 @@
showOverline: true,
};
render(<ExtraLargePromo customFields={config} />);
expect(screen.queryByText("Sponsored")).not.toBeNull();

Check warning on line 196 in blocks/extra-large-promo-block/features/extra-large-promo/default.test.jsx

GitHub Actions / ensure_minimum_test_coverage_linting

Use `getBy*` queries rather than `queryBy*` for checking element is present
});

it("should return a video if playVideoInPlace is true and video content available", () => {