Skip to content

Commit

Permalink
refactor(YoutubeAtom): no reliance on elementId
Browse files Browse the repository at this point in the history 
the uniqueId only needs to be truly unique on the client-side
which can be simply achieved with an increasing integer

update tests to use regular expression matching
  • Loading branch information
@mxdvl
mxdvl committed Jan 16, 2024
1 parent 023c41c commit b8e4bcf
Show file tree
Hide file tree
Showing 7 changed files with 23 additions and 68 deletions.
3 changes: 0 additions & 3 deletions dotcom-rendering/src/components/Card/Card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -474,9 +474,6 @@ export const Card = ({
>
<YoutubeBlockComponent
id={media.mainMedia.elementId}
elementId={
media.mainMedia.elementId
}
assetId={
media.mainMedia.videoId
}
Expand Down
28 changes: 0 additions & 28 deletions dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ export const NoConsent = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -83,7 +82,6 @@ export const NoOverlay = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -118,7 +116,6 @@ export const WithOverrideImage = (): JSX.Element => {
<div style={containerStyle}>
<OverlayAutoplayExplainer />
<YoutubeAtom
elementId="xyz"
videoId="3jpXAMwRSu4"
alt="Microscopic image of COVID"
eventEmitters={[
Expand Down Expand Up @@ -150,7 +147,6 @@ export const WithPosterImage = (): JSX.Element => {
<div style={containerStyle}>
<OverlayAutoplayExplainer />
<YoutubeAtom
elementId="xyz"
videoId="N9Cgy-ke5-s"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -185,7 +181,6 @@ export const WithOverlayAndPosterImage = (): JSX.Element => {
<div style={containerStyle}>
<OverlayAutoplayExplainer />
<YoutubeAtom
elementId="xyz"
videoId="N9Cgy-ke5-s"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -224,7 +219,6 @@ export const GiveConsent = (): JSX.Element => {
<button onClick={() => setConsented(true)}>Give consent</button>
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
videoId="3jpXAMwRSu4"
alt="Microscopic image of COVID"
eventEmitters={[
Expand Down Expand Up @@ -258,7 +252,6 @@ export const Sticky = (): JSX.Element => {
<div>Scroll down...</div>
<div style={{ height: '1000px' }}></div>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -292,7 +285,6 @@ export const StickyMainMedia = (): JSX.Element => {
<div>Scroll down...</div>
<div style={{ height: '1000px' }}></div>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -328,7 +320,6 @@ export const DuplicateVideos = (): JSX.Element => {
return (
<div style={containerStyleSmall}>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand All @@ -350,7 +341,6 @@ export const DuplicateVideos = (): JSX.Element => {
/>
<br />
<YoutubeAtom
elementId="xyz2"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -388,7 +378,6 @@ export const MultipleStickyVideos = (): JSX.Element => {
return (
<div style={{ width: '500px', height: '5000px' }}>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand All @@ -411,7 +400,6 @@ export const MultipleStickyVideos = (): JSX.Element => {
adTargeting={adTargeting}
/>
<YoutubeAtom
elementId="xyz-2"
videoId="pcMiS6PW8aQ"
alt=""
eventEmitters={[
Expand All @@ -434,7 +422,6 @@ export const MultipleStickyVideos = (): JSX.Element => {
adTargeting={adTargeting}
/>
<YoutubeAtom
elementId="xyu"
videoId="3jpXAMwRSu4"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -469,7 +456,6 @@ export const PausesOffscreen = (): JSX.Element => {
<div>
<div>Scroll down...</div>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -506,7 +492,6 @@ export const NoConsentWithIma = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -534,7 +519,6 @@ export const AdFreeWithIma = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -563,7 +547,6 @@ export const NoOverlayWithIma = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -593,7 +576,6 @@ export const WithOverrideImageWithIma = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
videoId="3jpXAMwRSu4"
alt="Microscopic image of COVID"
eventEmitters={[
Expand Down Expand Up @@ -622,7 +604,6 @@ export const WithPosterImageWithIma = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
videoId="N9Cgy-ke5-s"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -653,7 +634,6 @@ export const WithOverlayAndPosterImageWithIma = (): JSX.Element => {
return (
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
videoId="N9Cgy-ke5-s"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -688,7 +668,6 @@ export const GiveConsentWithIma = (): JSX.Element => {
<button onClick={() => setConsented(true)}>Give consent</button>
<div style={containerStyle}>
<YoutubeAtom
elementId="xyz"
videoId="3jpXAMwRSu4"
alt="Microscopic image of COVID"
eventEmitters={[
Expand Down Expand Up @@ -722,7 +701,6 @@ export const StickyWithIma = (): JSX.Element => {
<div style={{ fontSize: '36px' }}>⬇️</div>
<div style={{ height: '1000px' }}></div>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -755,7 +733,6 @@ export const StickyMainMediaWithIma = (): JSX.Element => {
<div style={{ fontSize: '36px' }}>⬇️</div>
<div style={{ height: '1000px' }}></div>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -786,7 +763,6 @@ export const DuplicateVideosWithIma = (): JSX.Element => {
return (
<div style={containerStyleSmall}>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand All @@ -808,7 +784,6 @@ export const DuplicateVideosWithIma = (): JSX.Element => {
/>
<br />
<YoutubeAtom
elementId="xyz2"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand Down Expand Up @@ -840,7 +815,6 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
return (
<div style={{ width: '500px', height: '5000px' }}>
<YoutubeAtom
elementId="xyz"
videoId="-ZCvZmYlQD8"
alt=""
eventEmitters={[
Expand All @@ -863,7 +837,6 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
abTestParticipations={{}}
/>
<YoutubeAtom
elementId="xyz-2"
videoId="pcMiS6PW8aQ"
alt=""
eventEmitters={[
Expand All @@ -886,7 +859,6 @@ export const MultipleStickyVideosWithIma = (): JSX.Element => {
abTestParticipations={{}}
/>
<YoutubeAtom
elementId="xyu"
videoId="3jpXAMwRSu4"
alt=""
eventEmitters={[
Expand Down
35 changes: 13 additions & 22 deletions dotcom-rendering/src/components/YoutubeAtom/YoutubeAtom.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ describe('YoutubeAtom', () => {
value={{ renderingTarget: 'Web', darkModeAvailable: false }}
>
<YoutubeAtom
elementId="xyz"
title="My Youtube video!"
videoId="ZCvZmYlQD8"
alt=""
Expand All @@ -48,7 +47,7 @@ describe('YoutubeAtom', () => {
</ConfigProvider>
);
const { getByTestId } = render(atom);
const playerDiv = getByTestId('youtube-video-ZCvZmYlQD8-xyz');
const playerDiv = getByTestId(/^youtube-video-ZCvZmYlQD8-\d+$/);
expect(playerDiv).toBeInTheDocument();
});

Expand All @@ -58,7 +57,6 @@ describe('YoutubeAtom', () => {
value={{ renderingTarget: 'Web', darkModeAvailable: false }}
>
<YoutubeAtom
elementId="xyz"
title="My Youtube video!"
videoId="ZCvZmYlQD8"
alt=""
Expand All @@ -79,13 +77,13 @@ describe('YoutubeAtom', () => {
</ConfigProvider>
);
const { getByTestId } = render(atom);
const overlay = getByTestId('youtube-overlay-ZCvZmYlQD8-xyz');
const overlay = getByTestId(/^youtube-overlay-ZCvZmYlQD8-\d+$/);
expect(overlay).toBeInTheDocument();

fireEvent.click(getByTestId('youtube-overlay-ZCvZmYlQD8-xyz'));
fireEvent.click(getByTestId(/^youtube-overlay-ZCvZmYlQD8-\d+$/));
expect(overlay).not.toBeInTheDocument();

const playerDiv = getByTestId('youtube-video-ZCvZmYlQD8-xyz');
const playerDiv = getByTestId(/^youtube-video-ZCvZmYlQD8-\d+$/);
expect(playerDiv).toBeInTheDocument();
});

Expand All @@ -97,7 +95,6 @@ describe('YoutubeAtom', () => {
value={{ renderingTarget: 'Web', darkModeAvailable: false }}
>
<YoutubeAtom
elementId="xyz"
title="My Youtube video!"
videoId="ZCvZmYlQD8"
alt=""
Expand All @@ -117,7 +114,7 @@ describe('YoutubeAtom', () => {
</ConfigProvider>
);
const { getByTestId } = render(atom);
const playerDiv = getByTestId('youtube-video-ZCvZmYlQD8-xyz');
const playerDiv = getByTestId(/^youtube-video-ZCvZmYlQD8-\d+$/);
expect(playerDiv.title).toBe(title);
});

Expand All @@ -128,7 +125,6 @@ describe('YoutubeAtom', () => {
value={{ renderingTarget: 'Web', darkModeAvailable: false }}
>
<YoutubeAtom
elementId="xyz"
title="My Youtube video!"
videoId="ZCvZmYlQD8"
alt=""
Expand All @@ -149,7 +145,7 @@ describe('YoutubeAtom', () => {
</ConfigProvider>
);
const { getByTestId } = render(atom);
const overlay = getByTestId('youtube-overlay-ZCvZmYlQD8-xyz');
const overlay = getByTestId(/^youtube-overlay-ZCvZmYlQD8-\d+$/);
const ariaLabel = overlay.getAttribute('aria-label');

expect(ariaLabel).toBe(`Play video: ${title}`);
Expand All @@ -161,7 +157,6 @@ describe('YoutubeAtom', () => {
value={{ renderingTarget: 'Web', darkModeAvailable: false }}
>
<YoutubeAtom
elementId="xyz"
title="My Youtube video!"
videoId="ZCvZmYlQD8"
alt=""
Expand All @@ -180,7 +175,7 @@ describe('YoutubeAtom', () => {
</ConfigProvider>
);
const { getByTestId } = render(atom);
const placeholder = getByTestId('youtube-placeholder-ZCvZmYlQD8-xyz');
const placeholder = getByTestId(/^youtube-placeholder-ZCvZmYlQD8-\d+$/);
expect(placeholder).toBeInTheDocument();
});

Expand All @@ -190,7 +185,6 @@ describe('YoutubeAtom', () => {
value={{ renderingTarget: 'Web', darkModeAvailable: false }}
>
<YoutubeAtom
elementId="xyz"
title="My Youtube video!"
videoId="ZCvZmYlQD8"
alt=""
Expand All @@ -210,7 +204,7 @@ describe('YoutubeAtom', () => {
</ConfigProvider>
);
const { getByTestId } = render(atom);
const overlay = getByTestId('youtube-overlay-ZCvZmYlQD8-xyz');
const overlay = getByTestId(/^youtube-overlay-ZCvZmYlQD8-\d+$/);
expect(overlay).toBeInTheDocument();
});

Expand All @@ -220,7 +214,6 @@ describe('YoutubeAtom', () => {
value={{ renderingTarget: 'Web', darkModeAvailable: false }}
>
<YoutubeAtom
elementId="xyz"
title="My Youtube video!"
videoId="ZCvZmYlQD8"
alt=""
Expand All @@ -240,10 +233,10 @@ describe('YoutubeAtom', () => {
</ConfigProvider>
);
const { getByTestId } = render(atom);
const overlay = getByTestId('youtube-overlay-ZCvZmYlQD8-xyz');
const overlay = getByTestId(/^youtube-overlay-ZCvZmYlQD8-\d+$/);
expect(overlay).toBeInTheDocument();

fireEvent.click(getByTestId('youtube-overlay-ZCvZmYlQD8-xyz'));
fireEvent.click(getByTestId(/^youtube-overlay-ZCvZmYlQD8-\d+$/));
expect(overlay).not.toBeInTheDocument();
});

Expand All @@ -254,7 +247,6 @@ describe('YoutubeAtom', () => {
value={{ renderingTarget: 'Web', darkModeAvailable: false }}
>
<YoutubeAtom
elementId="xyz"
title="My Youtube video!"
videoId="ZCvZmYlQD8"
alt=""
Expand All @@ -272,7 +264,6 @@ describe('YoutubeAtom', () => {
abTestParticipations={{}}
/>
<YoutubeAtom
elementId="xyz"
title="My Youtube video 2!"
videoId="ZCvZmYlQD8_2"
alt=""
Expand All @@ -293,13 +284,13 @@ describe('YoutubeAtom', () => {
</>
);
const { getByTestId } = render(atom);
const overlay1 = getByTestId('youtube-overlay-ZCvZmYlQD8-xyz');
const overlay1 = getByTestId(/^youtube-overlay-ZCvZmYlQD8-\d+$/);
expect(overlay1).toBeInTheDocument();

fireEvent.click(getByTestId('youtube-overlay-ZCvZmYlQD8-xyz'));
fireEvent.click(getByTestId(/^youtube-overlay-ZCvZmYlQD8-\d+$/));
expect(overlay1).not.toBeInTheDocument();

const overlay2 = getByTestId(`youtube-overlay-ZCvZmYlQD8_2-xyz`);
const overlay2 = getByTestId(/^youtube-overlay-ZCvZmYlQD8_2-\d+$/);
expect(overlay2).toBeInTheDocument();
});
});
Loading

0 comments on commit b8e4bcf

Please sign in to comment.