CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Run prettier
CI Pipeline / test (20) (pull_request) Successful in 8m20s
Details
CI Pipeline / test (18) (pull_request) Successful in 8m41s
Details
CI Pipeline / e2e (chromium) (pull_request) Successful in 3m26s
Details
CI Pipeline / e2e (firefox) (pull_request) Successful in 4m36s
Details
CI Pipeline / e2e (webkit) (pull_request) Successful in 3m39s
Details
CI Pipeline / performance (pull_request) Successful in 2m43s
Details
CI Pipeline / visual-regression (pull_request) Successful in 6m5s
Details
CI Pipeline / storybook (pull_request) Successful in 1m25s
Details
CI Pipeline / lint (pull_request) Successful in 1m25s
Details
CI Pipeline / build (pull_request) Successful in 1m48s
Details

Browse Source
This commit is contained in:
adilallo
2025-09-30 17:49:01 -06:00
parent f48fdff716
commit 74b09eaf09
21 changed files with 67891 additions and 789 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/unit/ContentBanner.test.jsx
+19 -19
View File
@@ -45,7 +45,7 @@ describe("ContentBanner", () => {
// Check that the banner container exists - it's the first div with the specific classes
const banner = document.querySelector(
"div[class*='pt-[var(--measures-spacing-016)]']"
"div[class*='pt-[var(--measures-spacing-016)]']",
);
expect(banner).toBeInTheDocument();
expect(banner).toHaveClass(
@@ -60,7 +60,7 @@ describe("ContentBanner", () => {
"xl:h-[504px]",
"relative",
"w-full",
"sm:overflow-hidden"
"sm:overflow-hidden",
);
});
@@ -69,7 +69,7 @@ describe("ContentBanner", () => {
// Check for background div with correct styling
const backgroundDiv = document.querySelector(
"div[style*='background-image']"
"div[style*='background-image']",
);
expect(backgroundDiv).toBeInTheDocument();
expect(backgroundDiv).toHaveClass(
@@ -79,7 +79,7 @@ describe("ContentBanner", () => {
"h-full",
"bg-cover",
"bg-no-repeat",
"aspect-[320/225.5]"
"aspect-[320/225.5]",
);
});
@@ -88,7 +88,7 @@ describe("ContentBanner", () => {
// Check for the md+ background div with banner image
const mdBackgroundDiv = document.querySelector(
"div[style*='test-article-banner.svg']"
"div[style*='test-article-banner.svg']",
);
expect(mdBackgroundDiv).toBeInTheDocument();
expect(mdBackgroundDiv).toHaveClass("hidden", "md:block");
@@ -104,7 +104,7 @@ describe("ContentBanner", () => {
render(<ContentBanner post={mockPost} />);
expect(
screen.getByText("This is a test article description")
screen.getByText("This is a test article description"),
).toBeInTheDocument();
});
@@ -120,7 +120,7 @@ describe("ContentBanner", () => {
// Check the content container div
const contentContainer = document.querySelector(
"div[class*='relative z-10']"
"div[class*='relative z-10']",
);
expect(contentContainer).toBeInTheDocument();
expect(contentContainer).toHaveClass(
@@ -128,7 +128,7 @@ describe("ContentBanner", () => {
"z-10",
"h-full",
"flex",
"flex-col"
"flex-col",
);
});
@@ -141,7 +141,7 @@ describe("ContentBanner", () => {
"font-medium",
"text-[18px]",
"leading-[120%]",
"text-[var(--color-content-inverse-brand-royal)]"
"text-[var(--color-content-inverse-brand-royal)]",
);
const description = screen.getByText("This is a test article description");
@@ -150,7 +150,7 @@ describe("ContentBanner", () => {
"font-normal",
"text-[12px]",
"leading-[16px]",
"text-[var(--color-content-inverse-brand-royal)]"
"text-[var(--color-content-inverse-brand-royal)]",
);
});
@@ -163,7 +163,7 @@ describe("ContentBanner", () => {
"font-normal",
"text-[10px]",
"leading-[14px]",
"text-[var(--color-content-inverse-brand-royal)]"
"text-[var(--color-content-inverse-brand-royal)]",
);
const date = screen.getByText("April 2025");
@@ -172,7 +172,7 @@ describe("ContentBanner", () => {
"font-normal",
"text-[10px]",
"leading-[14px]",
"text-[var(--color-content-inverse-brand-royal)]"
"text-[var(--color-content-inverse-brand-royal)]",
);
});
@@ -181,7 +181,7 @@ describe("ContentBanner", () => {
// Check the ContentContainer spacing
const contentContainer = document.querySelector(
"div[class*='relative z-20']"
"div[class*='relative z-20']",
);
expect(contentContainer).toHaveClass("gap-[var(--measures-spacing-012)]");
});
@@ -190,13 +190,13 @@ describe("ContentBanner", () => {
render(<ContentBanner post={mockPost} />);
const outerContainer = document.querySelector(
"div[class*='pt-[var(--measures-spacing-016)]']"
"div[class*='pt-[var(--measures-spacing-016)]']",
);
expect(outerContainer).toHaveClass(
"pt-[var(--measures-spacing-016)]",
"md:pt-[var(--measures-spacing-008)]",
"lg:pt-[50px]",
"xl:pt-[112px]"
"xl:pt-[112px]",
);
});
@@ -227,7 +227,7 @@ describe("ContentBanner", () => {
// Should use thumbnail.horizontal for md+ breakpoint
const mdBackgroundDiv = document.querySelector(
"div[style*='test-article-horizontal.svg'][class*='md:block']"
"div[style*='test-article-horizontal.svg'][class*='md:block']",
);
expect(mdBackgroundDiv).toBeInTheDocument();
expect(mdBackgroundDiv).toHaveClass("hidden", "md:block");
@@ -247,7 +247,7 @@ describe("ContentBanner", () => {
// Should use default banner for md+ breakpoint
const mdBackgroundDiv = document.querySelector(
"div[style*='Content_Banner_2.svg']"
"div[style*='Content_Banner_2.svg']",
);
expect(mdBackgroundDiv).toBeInTheDocument();
expect(mdBackgroundDiv).toHaveClass("hidden", "md:block");
@@ -261,7 +261,7 @@ describe("ContentBanner", () => {
"sm:text-[24px]",
"md:text-[32px]",
"lg:text-[44px]",
"xl:text-[64px]"
"xl:text-[64px]",
);
const description = screen.getByText("This is a test article description");
@@ -269,7 +269,7 @@ describe("ContentBanner", () => {
"sm:text-[14px]",
"md:text-[14px]",
"lg:text-[18px]",
"xl:text-[24px]"
"xl:text-[24px]",
);
});