@comicrelief/component-library 8.74.1 → 8.75.0

package/src/components/Molecules/DoubleCopy/DoubleCopy.test.js

@@ -37,9 +37,11 @@ it('renders correctly', () => {
 
 <section
   className="c0"
+  data-testid="DoubleCopySection"
 >
   <div
     className="c1"
+    data-testid="DoubleCopyLeftWrapper"
   >
     <div
       className="c2"
@@ -52,6 +54,7 @@ it('renders correctly', () => {
   </div>
   <div
     className="c1"
+    data-testid="DoubleCopyRightWrapper"
   >
     <div
       className="c2"

package/src/components/Molecules/EmailSignUp/EmailSignUp.js

@@ -17,14 +17,14 @@ const EmailSignUp = ({ formContext, ...rest }) => {
   const errorMsg = errors && errors.email && errors.email.message;
 
   return (
-    <EmailSignUpWrapper>
-      <LabelWrapper>
-        <StyledLabel>
+    <EmailSignUpWrapper data-testid="EmailSignUpWrapper">
+      <LabelWrapper data-testid="EmailSignUpLabelWrapper">
+        <StyledLabel data-testid="EmailSignUpLabel">
           Subscribe to our newsletter
         </StyledLabel>
       </LabelWrapper>
-      <FormWrapper $error={!!errorMsg}>
-        <InputWrapper>
+      <FormWrapper $error={!!errorMsg} data-testid="EmailSignUpFormWrapper">
+        <InputWrapper data-testid="EmailSignUpInputWrapper">
           <StyledEmailInput
             name="email"
             type="email"
@@ -36,10 +36,11 @@ const EmailSignUp = ({ formContext, ...rest }) => {
             optional
             {...register('email')}
             {...rest}
+            data-testid="EmailSignUpInput"
           />
         </InputWrapper>
-        <ButtonWrapper>
-          <StyledEmailSignUpButton type="submit" color="white">
+        <ButtonWrapper data-testid="EmailSignUpButtonWrapper">
+          <StyledEmailSignUpButton type="submit" color="white" data-testid="EmailSignUpButton">
             <span className="emailSignUpButtonContent">
               <span className="emailSignUpButtonLabel">Sign up</span>
               <span className="emailSignUpButtonArrow" aria-hidden="true">

package/src/components/Molecules/HeroBanner/__snapshots__/HeroBanner.test.js.snap

@@ -233,6 +233,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
     >
       <div
         className="c3 lazyload"
+        data-testid="PictureWrapper"
       >
         <img
           alt="Image alt text"
@@ -241,6 +242,7 @@ exports[`renders "Full Height Media" Hero Banner correctly 1`] = `
           data-sizes="auto"
           data-src="mock.asset"
           data-srcset="mock.asset"
+          data-testid="Picture"
           src="mock.asset"
           srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
         />
@@ -504,6 +506,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
     >
       <div
         className="c3 lazyload"
+        data-testid="PictureWrapper"
       >
         <img
           alt="Image alt text"
@@ -512,6 +515,7 @@ exports[`renders "Half Height Media" Hero Banner correctly 1`] = `
           data-sizes="auto"
           data-src="mock.asset"
           data-srcset="mock.asset"
+          data-testid="Picture"
           src="mock.asset"
           srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
         />
@@ -1030,6 +1034,7 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
     >
       <div
         className="c3 lazyload"
+        data-testid="PictureWrapper"
       >
         <img
           alt="Image alt text"
@@ -1038,6 +1043,7 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
           data-sizes="auto"
           data-src="mock.asset"
           data-srcset="mock.asset"
+          data-testid="Picture"
           src="mock.asset"
           srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
         />
@@ -1070,11 +1076,13 @@ exports[`renders "Text Banner" Hero Banner correctly 2`] = `
     >
       <div
         className="c11 c12"
+        data-testid="PictureWrapper"
       >
         <img
           alt=""
           className="c13 lazyload"
           data-src="mock.asset"
+          data-testid="Picture"
         />
       </div>
     </div>

package/src/components/Molecules/PartnerLink/PartnerLink.test.js

@@ -147,6 +147,7 @@ it('renders correctly', () => {
 >
   <div
     className="c2 lazyload"
+    data-testid="PictureWrapper"
   >
     <img
       alt="test Image"
@@ -155,6 +156,7 @@ it('renders correctly', () => {
       data-sizes="auto"
       data-src={null}
       data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+      data-testid="Picture"
       src={null}
       srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
     />

package/src/components/Molecules/PictureOrVideo/__snapshots__/PictureOrVideo.test.js.snap

@@ -106,11 +106,13 @@ exports[`renders AmbientVideo when video props are provided correctly 1`] = `
 
 <div
   className="c0 c1"
+  data-testid="AmbientVideoWrapper"
 >
   <video
     autoPlay={true}
     className="c2"
     controls={false}
+    data-testid="AmbientVideo"
     loop={true}
     muted={true}
     onEnded={[Function]}
@@ -143,12 +145,14 @@ exports[`renders AmbientVideo when video props are provided correctly 1`] = `
     aria-label="Pause"
     className="c5 c6"
     data-play-pause="pause"
+    data-testid="PlayPauseButton"
     onClick={[Function]}
     type="button"
   >
     <span
       aria-hidden={true}
       className="c7 c8"
+      data-testid="PlayPauseIcon"
     />
   </button>
 </div>
@@ -171,6 +175,7 @@ exports[`renders Picture with flat props correctly 1`] = `
 
 <div
   className="c0 lazyload"
+  data-testid="PictureWrapper"
 >
   <img
     alt="Image alt text"
@@ -179,6 +184,7 @@ exports[`renders Picture with flat props correctly 1`] = `
     data-sizes="auto"
     data-src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
     data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+    data-testid="Picture"
     src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
     srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
   />
@@ -202,6 +208,7 @@ exports[`renders Picture with image object correctly 1`] = `
 
 <div
   className="c0 lazyload"
+  data-testid="PictureWrapper"
 >
   <img
     alt="Background image"
@@ -210,6 +217,7 @@ exports[`renders Picture with image object correctly 1`] = `
     data-sizes="auto"
     data-src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
     data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+    data-testid="Picture"
     src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
     srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
   />
@@ -245,6 +253,7 @@ exports[`renders with asBackground correctly 1`] = `
 >
   <div
     className="c1 lazyload"
+    data-testid="PictureWrapper"
   >
     <img
       alt="Background image"
@@ -253,6 +262,7 @@ exports[`renders with asBackground correctly 1`] = `
       data-sizes="auto"
       data-src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
       data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+      data-testid="Picture"
       src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
       srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
     />

package/src/components/Molecules/Promo/__snapshots__/Promo.test.js.snap

@@ -255,6 +255,7 @@ exports[`renders Promo correctly 1`] = `
   >
     <div
       className="c2 lazyload"
+      data-testid="PictureWrapper"
     >
       <img
         alt=""
@@ -263,6 +264,7 @@ exports[`renders Promo correctly 1`] = `
         data-sizes="auto"
         data-src="mock.asset"
         data-srcset="mock.asset"
+        data-testid="Picture"
         src="mock.asset"
         srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
       />
@@ -567,6 +569,7 @@ exports[`renders Promo correctly end position 1`] = `
   >
     <div
       className="c2 lazyload"
+      data-testid="PictureWrapper"
     >
       <img
         alt=""
@@ -575,6 +578,7 @@ exports[`renders Promo correctly end position 1`] = `
         data-sizes="auto"
         data-src="mock.asset"
         data-srcset="mock.asset"
+        data-testid="Picture"
         src="mock.asset"
         srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
       />

package/src/components/Molecules/SchoolLookup/__snapshots__/SchoolLookup.test.js.snap

@@ -121,6 +121,7 @@ exports[`renders correctly 1`] = `
 
 <div
   className="c0 TextInputWithDropdown"
+  data-testid="TextInputWithDropdownContainer"
   onKeyDown={[Function]}
 >
   <label
@@ -145,6 +146,7 @@ exports[`renders correctly 1`] = `
           aria-required={false}
           autoComplete="off"
           className="c6"
+          data-testid="TextInputWithDropdownInput"
           defaultValue=""
           id="school-lookup"
           name="school-lookup"

package/src/components/Molecules/SearchResult/__snapshots__/SearchResult.test.js.snap

@@ -166,11 +166,13 @@ exports[`renders correctly in minimalist form 1`] = `
     >
       <div
         className="c4"
+        data-testid="PictureWrapper"
       >
         <img
           alt="Image's description"
           className="c5 lazyload"
           data-src={null}
+          data-testid="Picture"
         />
       </div>
     </div>
@@ -391,11 +393,13 @@ exports[`renders correctly with copy 1`] = `
     >
       <div
         className="c4"
+        data-testid="PictureWrapper"
       >
         <img
           alt="Image's description"
           className="c5 lazyload"
           data-src={null}
+          data-testid="Picture"
         />
       </div>
     </div>
@@ -588,11 +592,13 @@ exports[`renders correctly with date 1`] = `
     >
       <div
         className="c4"
+        data-testid="PictureWrapper"
       >
         <img
           alt="Image's description"
           className="c5 lazyload"
           data-src={null}
+          data-testid="Picture"
         />
       </div>
     </div>
@@ -780,11 +786,13 @@ exports[`renders correctly with date and type 1`] = `
     >
       <div
         className="c4"
+        data-testid="PictureWrapper"
       >
         <img
           alt="Image's description"
           className="c5 lazyload"
           data-src={null}
+          data-testid="Picture"
         />
       </div>
     </div>

package/src/components/Molecules/SingleMessage/__snapshots__/SingleMessage.test.js.snap

@@ -144,6 +144,7 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
     >
       <div
         className="c3 lazyload"
+        data-testid="PictureWrapper"
       >
         <img
           alt=""
@@ -152,6 +153,7 @@ exports[`renders Single Message with 100% vertical height image correctly 1`] =
           data-sizes="auto"
           data-src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
           data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+          data-testid="Picture"
           src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
           srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
         />
@@ -402,6 +404,7 @@ exports[`renders Single Message with Image correctly 1`] = `
     >
       <div
         className="c3 lazyload"
+        data-testid="PictureWrapper"
       >
         <img
           alt=""
@@ -410,6 +413,7 @@ exports[`renders Single Message with Image correctly 1`] = `
           data-sizes="auto"
           data-src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
           data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+          data-testid="Picture"
           src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
           srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
         />
@@ -580,6 +584,7 @@ exports[`renders Single Message with double image correctly 1`] = `
     >
       <div
         className="c3 lazyload"
+        data-testid="PictureWrapper"
       >
         <img
           alt=""
@@ -588,6 +593,7 @@ exports[`renders Single Message with double image correctly 1`] = `
           data-sizes="auto"
           data-src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
           data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+          data-testid="Picture"
           src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
           srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
         />
@@ -598,6 +604,7 @@ exports[`renders Single Message with double image correctly 1`] = `
     >
       <div
         className="c3 lazyload"
+        data-testid="PictureWrapper"
       >
         <img
           alt=""
@@ -606,6 +613,7 @@ exports[`renders Single Message with double image correctly 1`] = `
           data-sizes="auto"
           data-src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
           data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+          data-testid="Picture"
           src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
           srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
         />
@@ -876,6 +884,7 @@ exports[`renders Single Message with full width correctly 1`] = `
     >
       <div
         className="c3 lazyload"
+        data-testid="PictureWrapper"
       >
         <img
           alt=""
@@ -884,6 +893,7 @@ exports[`renders Single Message with full width correctly 1`] = `
           data-sizes="auto"
           data-src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
           data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+          data-testid="Picture"
           src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
           srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
         />
@@ -1002,6 +1012,7 @@ exports[`renders Single Message with full width image and no text correctly 1`]
     >
       <div
         className="c3 lazyload"
+        data-testid="PictureWrapper"
       >
         <img
           alt=""
@@ -1010,6 +1021,7 @@ exports[`renders Single Message with full width image and no text correctly 1`]
           data-sizes="auto"
           data-src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
           data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+          data-testid="Picture"
           src="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
           srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
         />

package/src/components/Molecules/SingleMessageDS/__snapshots__/SingleMessageDs.test.js.snap

@@ -288,6 +288,7 @@ exports[`renders correctly 1`] = `
     >
       <div
         className="c3 lazyload"
+        data-testid="PictureWrapper"
       >
         <img
           alt="Happy man going to work"
@@ -296,6 +297,7 @@ exports[`renders correctly 1`] = `
           data-sizes="auto"
           data-src={null}
           data-srcset="//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=200&h=150&q=50 200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=400&h=300&q=50 400w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=800&h=600&q=50 800w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1200&h=900&q=50 1200w,//images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg?w=1440&h=1080&q=50 1440w"
+          data-testid="Picture"
           src={null}
           srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
         />

package/src/components/Molecules/StatsSlice/StatsSlice.js

@@ -28,8 +28,9 @@ const StatsSlice = ({
       $backgroundColour={pageBackgroundColour}
       $paddingTop={paddingTop}
       $paddingBottom={paddingBottom}
+      data-testid="StatsSliceOuterWrapper"
     >
-      <InnerWrapper>
+      <InnerWrapper data-testid="StatsSliceInnerWrapper">
         {nodes?.map((node, index) => {
           const key = index + String(node.title);
           const nodeComponent = (

package/src/components/Molecules/StatsSlice/_StatNode.js

@@ -62,9 +62,9 @@ export default function StatNodeComponent({
   let characterDelay = startDelayRef.current;
 
   return (
-    <StatContainer>
-      <ValueContainer>
-        <StatValue aria-hidden="true" ref={elRef}>
+    <StatContainer data-testid="StatContainer">
+      <ValueContainer data-testid="ValueContainer">
+        <StatValue aria-hidden="true" ref={elRef} data-testid="StatValue">
           {wordObjList.map((wordObj, wordIndex) => {
             // slightly gnarly here as we need to create a span for each word,
             // then the characters within that span;
@@ -74,7 +74,7 @@ export default function StatNodeComponent({
             // but that's unlikely to be a problem in practice
             const wordKey = String(wordIndex) + wordObj.word;
             return (
-              <Word key={wordKey}>
+              <Word key={wordKey} data-testid={`StatWord-${wordIndex}`}>
                 {wordObj.map(({ character, type }, characterIndex) => {
                   const characterKey = String(characterIndex) + character;
                   // update the character delay for the next character;
@@ -115,11 +115,12 @@ export default function StatNodeComponent({
           src={altCtaUnderline}
           $delay={startDelayRef.current + duration * 1.5}
           data-ease={ease}
+          data-testid="ValueUnderline"
         />
         )}
-        <AccessibleValue>{stat}</AccessibleValue>
+        <AccessibleValue data-testid="AccessibleValue">{stat}</AccessibleValue>
       </ValueContainer>
-      <Body>{body}</Body>
+      <Body data-testid="StatBody">{body}</Body>
     </StatContainer>
   );
 }

package/src/components/Molecules/StatsSlice/__snapshots__/StatsSlice.test.js.snap

@@ -631,22 +631,28 @@ exports[`Stats Slices with a single node should render 1`] = `
 
 <div
   className="c0"
+  data-testid="StatsSliceOuterWrapper"
 >
   <div
     className="c1"
+    data-testid="StatsSliceInnerWrapper"
   >
     <div
       className="c2"
+      data-testid="StatContainer"
     >
       <div
         className="c3"
+        data-testid="ValueContainer"
       >
         <div
           aria-hidden="true"
           className="c4"
+          data-testid="StatValue"
         >
           <span
             className="c5"
+            data-testid="StatWord-0"
           >
             <div
               className="c6"
@@ -1229,12 +1235,14 @@ exports[`Stats Slices with a single node should render 1`] = `
         </div>
         <h2
           className="c22"
+          data-testid="AccessibleValue"
         >
           123,456,789.02
         </h2>
       </div>
       <span
         className="c23 c24"
+        data-testid="StatBody"
       >
         hello
       </span>
@@ -1874,22 +1882,28 @@ exports[`Stats Slices with multiple nodes should render 1`] = `
 
 <div
   className="c0"
+  data-testid="StatsSliceOuterWrapper"
 >
   <div
     className="c1"
+    data-testid="StatsSliceInnerWrapper"
   >
     <div
       className="c2"
+      data-testid="StatContainer"
     >
       <div
         className="c3"
+        data-testid="ValueContainer"
       >
         <div
           aria-hidden="true"
           className="c4"
+          data-testid="StatValue"
         >
           <span
             className="c5"
+            data-testid="StatWord-0"
           >
             <div
               className="c6"
@@ -2472,28 +2486,34 @@ exports[`Stats Slices with multiple nodes should render 1`] = `
         </div>
         <h2
           className="c22"
+          data-testid="AccessibleValue"
         >
           123,456,789.02
         </h2>
       </div>
       <span
         className="c23 c24"
+        data-testid="StatBody"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
       </span>
     </div>
     <div
       className="c2"
+      data-testid="StatContainer"
     >
       <div
         className="c3"
+        data-testid="ValueContainer"
       >
         <div
           aria-hidden="true"
           className="c4"
+          data-testid="StatValue"
         >
           <span
             className="c5"
+            data-testid="StatWord-0"
           >
             <div
               className="c6"
@@ -3076,28 +3096,34 @@ exports[`Stats Slices with multiple nodes should render 1`] = `
         </div>
         <h2
           className="c22"
+          data-testid="AccessibleValue"
         >
           456,789,123.02
         </h2>
       </div>
       <span
         className="c23 c24"
+        data-testid="StatBody"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
       </span>
     </div>
     <div
       className="c2"
+      data-testid="StatContainer"
     >
       <div
         className="c3"
+        data-testid="ValueContainer"
       >
         <div
           aria-hidden="true"
           className="c4"
+          data-testid="StatValue"
         >
           <span
             className="c5"
+            data-testid="StatWord-0"
           >
             <div
               className="c6"
@@ -3680,12 +3706,14 @@ exports[`Stats Slices with multiple nodes should render 1`] = `
         </div>
         <h2
           className="c22"
+          data-testid="AccessibleValue"
         >
           789,123,456.02
         </h2>
       </div>
       <span
         className="c23 c24"
+        data-testid="StatBody"
       >
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
       </span>

package/src/components/Molecules/Typeahead/__snapshots__/Typeahead.test.js.snap

@@ -121,6 +121,7 @@ exports[`renders correctly 1`] = `
 
 <div
   className="c0 TextInputWithDropdown"
+  data-testid="TextInputWithDropdownContainer"
   onKeyDown={[Function]}
 >
   <label
@@ -145,6 +146,7 @@ exports[`renders correctly 1`] = `
           aria-required={false}
           autoComplete="off"
           className="c6"
+          data-testid="TextInputWithDropdownInput"
           defaultValue=""
           id="typeahead-test"
           name="q"