Fix puzzles header tests

Author: gustavo-olmedo

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

@@ -6,14 +6,9 @@ import type {
 	PuzzleItem,
 	PuzzlesLayoutType,
 } from '../types/puzzlesPage';
-import { getPuzzleUrl, PuzzlesDirectory } from './PuzzlesDirectory';
 import { Island } from './Island';
+import { getPuzzleUrl, PuzzlesDirectory } from './PuzzlesDirectory';
 
-jest.mock('./AdSlot.web', () => ({
-	AdSlot: ({ index }: { index: number }) => (
-		<div data-testid={`ad-${index}`} />
-	),
-}));
 jest.mock('./Island', () => ({
 	Island: jest.fn(({ children }: { children: ReactNode }) => children),
 }));
@@ -394,8 +389,12 @@ describe('PuzzlesDirectory', () => {
 		expect(document.querySelector('img')).not.toBeInTheDocument();
 		expect(document.querySelector('.js-ad-slot')).not.toBeInTheDocument();
 		rerender(<PuzzlesDirectory layout={layout} renderAds={true} />);
-		// Desktop and mobile placements share the configured slot index.
-		expect(screen.getAllByTestId('ad-2')).toHaveLength(2);
+		expect(
+			document.getElementById('dfp-ad--fronts-banner-2'),
+		).toHaveAttribute('data-name', 'fronts-banner-2');
+		expect(
+			document.getElementById('dfp-ad--inline2--mobile'),
+		).toHaveAttribute('data-name', 'inline2');
 	});
 
 	it('renders the archive dropdown and closes it with Escape or an outside click', async () => {

dotcom-rendering/src/layouts/PuzzlesLayout.test.tsx

@@ -36,7 +36,10 @@ describe('PuzzlesLayout', () => {
 	it('renders one branded page title without category filters', () => {
 		render(<PuzzlesLayout NAV={nav} puzzlesPage={page() as never} />);
 		expect(
-			screen.getByRole('heading', { level: 1, name: 'Puzzles & Games' }),
+			screen.getByRole('heading', {
+				level: 1,
+				name: 'Puzzles and Games',
+			}),
 		).toBeInTheDocument();
 		expect(screen.getAllByRole('heading', { level: 1 })).toHaveLength(1);
 		expect(
@@ -66,7 +69,7 @@ describe('PuzzlesLayout', () => {
 		const header = screen
 			.getByRole('heading', {
 				level: 1,
-				name: 'Puzzles & Games',
+				name: 'Puzzles and Games',
 			})
 			.closest('header')!;
 		expect(header).toHaveStyle({ height: '230px' });
@@ -78,7 +81,7 @@ describe('PuzzlesLayout', () => {
 			[1300, 'header-wide-1440px', 1440],
 			[1140, 'header-leftcol-1280px', 1280],
 			[980, 'header-desktop-1024px', 1024],
-			[768, 'header-tablet-979px', 979],
+			[740, 'header-tablet-768px', 768],
 			[660, 'header-mobile-phablet-669px', 669],
 			[480, 'header-mobile-landscape-480px', 480],
 			[375, 'header-mobile-medium-393px', 393],

dotcom-rendering/src/layouts/PuzzlesLayout.tsx

@@ -146,7 +146,7 @@ export const PuzzlesLayout = ({
 							/>
 						))}
 						<img
-							alt=""
+							alt="An owl carrying a crossword grid beside an octopus reading a puzzle"
 							css={brandImageStyles}
 							src={headerArtwork('header-mobile-360px')}
 						/>