Updated unit tests and add new ones and added a comment for button hover

Author: deedeeh

dotcom-rendering/src/components/CallToActionAtom.stories.tsx

@@ -25,7 +25,7 @@ export const WithAccentColour = () => {
 			backgroundImage="https://media.guim.co.uk/2c2ad59a167c43496ff709d0d9a83e8d46c30674/0_0_1300_375/1300.jpg"
 			text="Proactive security starts here"
 			buttonText="Explore more"
-			accentColour="#d71920"
+			accentColor="#d71920"
 		/>
 	);
 };

dotcom-rendering/src/components/CallToActionAtom.test.tsx

@@ -3,21 +3,31 @@ import '@testing-library/jest-dom';
 import { CallToActionAtom } from './CallToActionAtom';
 
 describe('CallToActionAtom', () => {
-	it('should render with url and button text', () => {
+	it('should render with url and a default button text when not provided', () => {
 		const { getByRole } = render(
 			<CallToActionAtom
 				linkUrl="https://example.com"
 				backgroundImage="https://example.com/image.jpg"
-				buttonText="Click here"
 			/>,
 		);
 
-		const link = getByRole('link');
+		const link = getByRole('link', { name: 'Learn more' });
 		expect(link).toBeInTheDocument();
 		expect(link).toHaveAttribute('href', 'https://example.com');
+	});
+
+	it('should display custom button text when provided', () => {
+		const { getByRole } = render(
+			<CallToActionAtom
+				linkUrl="https://example.com"
+				backgroundImage="https://example.com/image.jpg"
+				buttonText="Click here"
+			/>,
+		);
 
-		const button = getByRole('button', { name: 'Click here' });
-		expect(button).toBeInTheDocument();
+		const link = getByRole('link', { name: 'Click here' });
+		expect(link).toBeInTheDocument();
+		expect(link).toHaveAttribute('href', 'https://example.com');
 	});
 
 	it('should display the label when provided', () => {
@@ -47,21 +57,34 @@ describe('CallToActionAtom', () => {
 		expect(heading).not.toBeInTheDocument();
 	});
 
-	it('should have correct link wrapping the entire component', () => {
+	it('should apply the accent colour to the button when provided', () => {
 		const { getByRole } = render(
 			<CallToActionAtom
 				linkUrl="https://example.com"
-				buttonText="Learn more"
-				text="Important Info"
 				backgroundImage="https://example.com/image.jpg"
+				buttonText="Click here"
+				accentColor="#d71920"
 			/>,
 		);
 
-		const link = getByRole('link');
-		expect(link).toHaveAttribute('href', 'https://example.com');
+		const link = getByRole('link', { name: 'Click here' });
+		const computedStyle = window.getComputedStyle(link);
+		expect(computedStyle.color).toBe('rgb(255, 255, 255)');
+		expect(computedStyle.backgroundColor).toBe('rgb(215, 25, 32)');
+	});
+
+	it('should apply the default theme to the button when no accent colour is provided', () => {
+		const { getByRole } = render(
+			<CallToActionAtom
+				linkUrl="https://example.com"
+				backgroundImage="https://example.com/image.jpg"
+				buttonText="Click here"
+			/>,
+		);
 
-		// Check that the button is within the link
-		const button = getByRole('button', { name: 'Learn more' });
-		expect(link).toContainElement(button);
+		const link = getByRole('link', { name: 'Click here' });
+		const computedStyle = window.getComputedStyle(link);
+		expect(computedStyle.color).toBe('rgb(0, 0, 0)');
+		expect(computedStyle.backgroundColor).toBe('rgb(255, 255, 255)');
 	});
 });

dotcom-rendering/src/components/CallToActionAtom.tsx

@@ -14,7 +14,7 @@ type CallToActionProps = {
 	backgroundImage?: string;
 	text?: string;
 	buttonText?: string;
-	accentColour?: string;
+	accentColor?: string;
 };
 
 const overlayMaskGradientStyles = (angle: string, startPosition: number) => {
@@ -117,7 +117,7 @@ export const CallToActionAtom = ({
 	backgroundImage,
 	text,
 	buttonText,
-	accentColour,
+	accentColor,
 }: CallToActionProps) => {
 	return (
 		<picture
@@ -151,18 +151,18 @@ export const CallToActionAtom = ({
 					icon={<SvgExternal />}
 					theme={{
 						// We also still need to implement the dark mode based on the provided designs which should be the same as not providing an accent colour.
-						textPrimary: accentColour
+						textPrimary: accentColor
 							? sourcePalette.neutral[100]
 							: sourcePalette.neutral[0],
 						backgroundPrimary:
-							accentColour ?? sourcePalette.neutral[100],
-						backgroundPrimaryHover: transparentColour(
-							accentColour ?? sourcePalette.neutral[100],
-							0.8,
-						),
+							accentColor ?? sourcePalette.neutral[100],
+						// This should be changed with `calculateHoverColour()` once we have the function available as DCR needs to upgrade Source to 12.1.0 to use it.
+						// Check https://github.com/guardian/csnx/blob/857116cf826dc700742f14c5a5f005bd6d39f1be/libs/%40guardian/source/CHANGELOG.md?plain=1#L20
+						backgroundPrimaryHover:
+							accentColor ?? sourcePalette.neutral[100],
 					}}
 				>
-					{buttonText}
+					{buttonText ?? 'Learn more'}
 				</LinkButton>
 			</div>
 		</picture>

dotcom-rendering/src/layouts/HostedArticleLayout.tsx

@@ -350,9 +350,7 @@ export const HostedArticleLayout = (props: WebProps | AppProps) => {
 									backgroundImage={cta.image}
 									text={cta.label}
 									buttonText={cta.btnText}
-									accentColour={
-										branding?.hostedCampaignColour
-									}
+									accentColor={branding?.hostedCampaignColour}
 								/>
 							</div>
 						)}