@comicrelief/component-library 8.74.2 → 8.75.1

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

@@ -44,7 +44,6 @@ exports[`renders correctly in minimalist form 1`] = `
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c1:hover,
@@ -166,11 +165,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>
@@ -255,7 +256,6 @@ exports[`renders correctly with copy 1`] = `
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c1:hover,
@@ -391,11 +391,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>
@@ -466,7 +468,6 @@ exports[`renders correctly with date 1`] = `
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c1:hover,
@@ -588,11 +589,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>
@@ -658,7 +661,6 @@ exports[`renders correctly with date and type 1`] = `
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c1:hover,
@@ -780,11 +782,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"

package/src/components/Organisms/CookieBanner/CookieBanner.test.js

@@ -42,7 +42,6 @@ it('renders correctly', () => {
   display: inline;
   color: #FFFFFF;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c3:hover,

package/src/components/Organisms/DynamicGallery/DynamicGallery.js

@@ -199,6 +199,7 @@ const DynamicGallery = ({
       $textColour={textColour}
       $paddingTop={paddingTop}
       $paddingBottom={paddingBottom}
+      data-testid="DynamicGalleryOuterWrapper"
     >
       <LightboxContext.Provider
         value={{
@@ -211,7 +212,7 @@ const DynamicGallery = ({
           setFocusedNode
         }}
       >
-        <ImageGrid className="gallery-grid" $maxWidth={maxWidth} onKeyDown={event => handleKeyDown(event)}>
+        <ImageGrid className="gallery-grid" $maxWidth={maxWidth} onKeyDown={event => handleKeyDown(event)} data-testid="DynamicGalleryImageGrid">
           {hasNodes
           && Array(columnCount)
             .fill(null)
@@ -235,11 +236,11 @@ const DynamicGallery = ({
               );
             })}
 
-          <EmptyMessage $isEmpty={!hasNodes}>No images to display</EmptyMessage>
+          <EmptyMessage $isEmpty={!hasNodes} data-testid="DynamicGalleryEmptyMessage">No images to display</EmptyMessage>
         </ImageGrid>
         <Lightbox />
         {/* eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex */}
-        <FocusTrap className="gallery-focus-trap" tabIndex={0}>
+        <FocusTrap className="gallery-focus-trap" tabIndex={0} data-testid="DynamicGalleryFocusTrap">
           <span>End of gallery</span>
         </FocusTrap>
       </LightboxContext.Provider>

package/src/components/Organisms/DynamicGallery/_DynamicGalleryColumn.js

@@ -89,7 +89,7 @@ export default function DynamicGalleryColumn({
   const NodeComponent = useLightbox ? InteractiveGalleryNode : GalleryNode;
 
   return (
-    <Column ref={elRef} className="gallery-column">
+    <Column ref={elRef} className="gallery-column" data-testid="GalleryColumn">
       {nodes
         .map((node, nodeIndex) => {
           // only render nodes that are in the current column;
@@ -112,6 +112,7 @@ export default function DynamicGalleryColumn({
               $focusOutlineColour={focusOutlineColour}
               onPointerUp={useLightbox ? () => handlePointerUp(node) : undefined}
               tabIndex={0}
+              data-testid={`GalleryNode-${nodeIndex}`}
             >
               <ImageContainer
                 className="gallery-node-image"
@@ -119,6 +120,7 @@ export default function DynamicGalleryColumn({
                 $minHeight={String(minHeight) + 'px'}
                 // eslint-disable-next-line prefer-template
                 $maxHeight={String(maxHeight) + 'px'}
+                data-testid={`GalleryImageContainer-${nodeIndex}`}
               >
                 <Picture
                   image={node.image}
@@ -136,7 +138,7 @@ export default function DynamicGalleryColumn({
                   }}
                 />
               </ImageContainer>
-              <Details>
+              <Details data-testid={`GalleryDetails-${nodeIndex}`}>
                 {node.gridBody && <div>{node.gridBody}</div>}
                 {node.gridCaption && <div>{node.gridCaption}</div>}
               </Details>