Add interaction stories for Loop video

Author: domlander

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

@@ -1,9 +1,10 @@
 import { breakpoints } from '@guardian/source/foundations';
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, userEvent, within } from '@storybook/test';
 import { centreColumnDecorator } from '../../.storybook/decorators/gridDecorators';
 import { LoopVideo } from './LoopVideo.importable';
 
-export default {
+const meta = {
 	component: LoopVideo,
 	title: 'Components/LoopVideo',
 	decorators: [centreColumnDecorator],
@@ -15,7 +16,10 @@ export default {
 	},
 } satisfies Meta<typeof LoopVideo>;
 
-export const Default = {
+export default meta;
+type Story = StoryObj<typeof LoopVideo>;
+
+export const Default: Story = {
 	name: 'Default',
 	args: {
 		src: 'https://uploads.guim.co.uk/2025%2F06%2F20%2Ftesting+only%2C+please+ignore--3cb22b60-2c3f-48d6-8bce-38c956907cce-3.mp4',
@@ -26,14 +30,78 @@ export const Default = {
 		image: 'https://media.guim.co.uk/9bdb802e6da5d3fd249b5060f367b3a817965f0c/0_0_1800_1080/master/1800.jpg',
 		fallbackImage: '',
 	},
-} satisfies StoryObj<typeof LoopVideo>;
+};
 
-export const Without5to4Ratio = {
+export const Without5to4Ratio: Story = {
 	name: 'Without 5:4 aspect ratio',
 	args: {
 		...Default.args,
 		src: 'https://uploads.guim.co.uk/2024/10/01/241001HeleneLoop_2.mp4',
 		height: 1080,
 		width: 1920,
 	},
-} satisfies StoryObj<typeof LoopVideo>;
+};
+
+export const PausePlay: Story = {
+	...Default,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const videoEl = canvas.getByTestId('loop-video');
+
+		await userEvent.click(videoEl, {
+			delay: 300, // Allow video to start playing.
+		});
+		await canvas.findByTestId('play-icon');
+
+		const progressBar = await canvas.findByRole('progressbar');
+		await expect(Number(progressBar.ariaValueNow)).toBeGreaterThan(0);
+
+		// Play Video
+		await userEvent.click(videoEl);
+		await expect(canvas.queryByTestId('play-icon')).not.toBeInTheDocument();
+	},
+};
+
+export const UnmuteMute: Story = {
+	...Default,
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		await canvas.findByTestId('unmute-icon');
+
+		await userEvent.click(canvas.getByTestId('unmute-icon'));
+		await canvas.findByTestId('mute-icon');
+
+		await userEvent.click(canvas.getByTestId('mute-icon'));
+		await canvas.findByTestId('unmute-icon');
+	},
+};
+
+// Function to emulate pausing between interactions
+function sleep(ms: number) {
+	return new Promise((resolve) => setTimeout(resolve, ms));
+}
+
+export const InteractionObserver: Story = {
+	...Default,
+	render: (args) => (
+		<div data-testid="test-container">
+			<LoopVideo {...args} />
+			<div style={{ height: '500px' }}></div>
+			<p data-testid="page-end">End of page</p>
+		</div>
+	),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+
+		await sleep(300);
+		canvas.getByTestId('page-end').scrollIntoView();
+
+		const progressBar = await canvas.findByRole('progressbar');
+		const progress = Number(progressBar.ariaValueNow);
+
+		await sleep(300);
+		await expect(Number(progressBar.ariaValueNow)).toEqual(progress);
+		await expect(canvas.queryByTestId('play-icon')).not.toBeInTheDocument();
+	},
+};

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -137,8 +137,8 @@ export const LoopVideoPlayer = forwardRef(
 					id={loopVideoId}
 					css={videoStyles(width, height)}
 					ref={ref}
-					role="button"
 					tabIndex={0}
+					data-testid="loop-video"
 					height={height}
 					width={width}
 					data-link-name={`gu-video-loop-${
@@ -180,6 +180,7 @@ export const LoopVideoPlayer = forwardRef(
 								onClick={handlePlayPauseClick}
 								css={playIconStyles}
 								data-link-name={`gu-video-loop-play-${atomId}`}
+								data-testid="play-icon"
 							>
 								<PlayIcon iconWidth="narrow" />
 							</button>
@@ -199,7 +200,12 @@ export const LoopVideoPlayer = forwardRef(
 								isMuted ? 'unmute' : 'mute'
 							}-${atomId}`}
 						>
-							<div css={audioIconContainerStyles}>
+							<div
+								css={audioIconContainerStyles}
+								data-testId={`${
+									isMuted ? 'unmute' : 'mute'
+								}-icon`}
+							>
 								<AudioIcon
 									size="xsmall"
 									theme={{