@comicrelief/component-library 8.74.2 → 8.75.1

package/src/components/Atoms/Picture/Picture.js

@@ -105,6 +105,7 @@ const Picture = ({
         $nonObjFitImage={nonObjFitImage}
         $objFitState={objFitState}
         {...rest}
+        data-testid="PictureWrapper"
       >
         <Image
           key={image}
@@ -116,6 +117,7 @@ const Picture = ({
           className="lazyload"
           $objFitState={objFitState}
           onLoad={onLoad}
+          data-testid="Picture"
         />
       </Wrapper>
     );
@@ -130,6 +132,7 @@ const Picture = ({
       $nonObjFitImage={nonObjFitImage}
       $objFitState={objFitState}
       {...rest}
+      data-testid="PictureWrapper"
     >
       <Image
         alt={alt}
@@ -146,6 +149,7 @@ const Picture = ({
         $objFitState={objFitState}
         $smallBreakpointRowLayout={smallBreakpointRowLayout}
         $mediumBreakpointRowLayout={mediumBreakpointRowLayout}
+        data-testid="Picture"
       />
     </Wrapper>
   );

package/src/components/Atoms/Picture/Picture.test.js

@@ -29,6 +29,7 @@ it('renders correctly', () => {
 
 <div
   className="c0 lazyload"
+  data-testid="PictureWrapper"
 >
   <img
     alt="Test images"
@@ -37,6 +38,7 @@ it('renders correctly', () => {
     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"
   />
@@ -73,6 +75,7 @@ it('renders correctly with custom props', () => {
 
 <div
   className="c0 lazyload"
+  data-testid="PictureWrapper"
 >
   <img
     alt="Test images"
@@ -81,6 +84,7 @@ it('renders correctly with custom props', () => {
     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/Atoms/SocialIcons/SocialIcons.js

@@ -79,7 +79,7 @@ const SocialIcons = ({
     : ['facebook', 'instagram', 'twitter', 'youtube'];
 
   return (
-    <StyledList $newStyle={newStyle}>
+    <StyledList $newStyle={newStyle} data-testid="SocialIconsList">
       {brandsToShow
         .filter(brand => shouldShowIcon(brand))
         .map(brand => {
@@ -92,7 +92,7 @@ const SocialIcons = ({
             return null;
           }
           return (
-            <StyledItem key={brand} $newStyle={newStyle}>
+            <StyledItem key={brand} $newStyle={newStyle} data-testid={`SocialIcon-${brand}`}>
               <StyledIcon
                 target={target}
                 icon={icon}

package/src/components/Atoms/SocialIcons/__snapshots__/SocialIcons.test.js.snap

@@ -55,9 +55,11 @@ exports[`renders correctly with Comic Relief links 1`] = `
 
 <ul
   className="c0"
+  data-testid="SocialIconsList"
 >
   <li
     className="c1"
+    data-testid="SocialIcon-facebook"
   >
     <a
       className="c2 c3"
@@ -76,6 +78,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
   </li>
   <li
     className="c1"
+    data-testid="SocialIcon-instagram"
   >
     <a
       className="c2 c3"
@@ -94,6 +97,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
   </li>
   <li
     className="c1"
+    data-testid="SocialIcon-twitter"
   >
     <a
       className="c2 c3"
@@ -112,6 +116,7 @@ exports[`renders correctly with Comic Relief links 1`] = `
   </li>
   <li
     className="c1"
+    data-testid="SocialIcon-youtube"
   >
     <a
       className="c2 c3"
@@ -186,9 +191,11 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
 
 <ul
   className="c0"
+  data-testid="SocialIconsList"
 >
   <li
     className="c1"
+    data-testid="SocialIcon-facebook"
   >
     <a
       className="c2 c3"
@@ -207,6 +214,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   </li>
   <li
     className="c1"
+    data-testid="SocialIcon-instagram"
   >
     <a
       className="c2 c3"
@@ -225,6 +233,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   </li>
   <li
     className="c1"
+    data-testid="SocialIcon-twitter"
   >
     <a
       className="c2 c3"
@@ -243,6 +252,7 @@ exports[`renders correctly with Red Nose Day links and self target 1`] = `
   </li>
   <li
     className="c1"
+    data-testid="SocialIcon-youtube"
   >
     <a
       className="c2 c3"
@@ -317,9 +327,11 @@ exports[`renders correctly with Sport Relief links 1`] = `
 
 <ul
   className="c0"
+  data-testid="SocialIconsList"
 >
   <li
     className="c1"
+    data-testid="SocialIcon-facebook"
   >
     <a
       className="c2 c3"
@@ -338,6 +350,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
   </li>
   <li
     className="c1"
+    data-testid="SocialIcon-instagram"
   >
     <a
       className="c2 c3"
@@ -356,6 +369,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
   </li>
   <li
     className="c1"
+    data-testid="SocialIcon-twitter"
   >
     <a
       className="c2 c3"
@@ -374,6 +388,7 @@ exports[`renders correctly with Sport Relief links 1`] = `
   </li>
   <li
     className="c1"
+    data-testid="SocialIcon-youtube"
   >
     <a
       className="c2 c3"

package/src/components/Atoms/TextInputWithDropdown/TextInputWithDropdown.js

@@ -125,11 +125,13 @@ const TextInputWithDropdown = React.forwardRef(
         className={`TextInputWithDropdown ${className}`.trim()}
         onKeyDown={navigateOptions}
         ref={containerRef}
+        data-testid="TextInputWithDropdownContainer"
       >
         <Input
           {...inputProps}
           className="TextInputWithDropdown__input"
           ref={forwardedRef}
+          data-testid="TextInputWithDropdownInput"
         />
         {options.length > 0 && !forceClosed && (
           <Options
@@ -167,7 +169,7 @@ const Options = React.forwardRef(({
   };
 
   return (
-    <Dropdown {...rest} $hideBorder={hideBorder}>
+    <Dropdown {...rest} $hideBorder={hideBorder} data-testid="TextInputWithDropdownDropdown">
       <DropdownList
         ref={ref}
         role="listbox"
@@ -175,6 +177,7 @@ const Options = React.forwardRef(({
         aria-activedescendant={
           activeOption > -1 ? `option-${activeOption}` : undefined
         }
+        data-testid="TextInputWithDropdownList"
       >
         {dropdownInstruction && (
           <DropdownItemSelectable
@@ -182,6 +185,7 @@ const Options = React.forwardRef(({
             role="option"
             key="dropdown-instruction"
             onClick={closeDropdown}
+            data-testid="TextInputWithDropdownInstruction"
           >
             <TextItalic>
               {dropdownInstruction}
@@ -207,6 +211,7 @@ const Options = React.forwardRef(({
                 ? element => element && element.focus()
                 : null
             }
+            data-testid={`TextInputWithDropdownOption-${index}`}
           >
             <Text>{option}</Text>
           </DropdownItemSelectable>

package/src/components/Atoms/TextInputWithDropdown/__snapshots__/TextInputWithDropdown.test.js.snap

@@ -121,6 +121,7 @@ exports[`renders correctly with no value and no options 1`] = `
 
 <div
   className="c0 TextInputWithDropdown"
+  data-testid="TextInputWithDropdownContainer"
   onKeyDown={[Function]}
 >
   <label
@@ -145,6 +146,7 @@ exports[`renders correctly with no value and no options 1`] = `
           aria-required={false}
           autoComplete="off"
           className="c6"
+          data-testid="TextInputWithDropdownInput"
           id="text-input-with-dropdown"
           name="query"
           onChange={[Function]}
@@ -280,6 +282,7 @@ exports[`renders correctly with value and no options 1`] = `
 
 <div
   className="c0 TextInputWithDropdown"
+  data-testid="TextInputWithDropdownContainer"
   onKeyDown={[Function]}
 >
   <label
@@ -304,6 +307,7 @@ exports[`renders correctly with value and no options 1`] = `
           aria-required={false}
           autoComplete="off"
           className="c6"
+          data-testid="TextInputWithDropdownInput"
           id="text-input-with-dropdown"
           name="query"
           onChange={[Function]}
@@ -478,6 +482,7 @@ exports[`renders correctly with value and options 1`] = `
 
 <div
   className="c0 TextInputWithDropdown"
+  data-testid="TextInputWithDropdownContainer"
   onKeyDown={[Function]}
 >
   <label
@@ -502,6 +507,7 @@ exports[`renders correctly with value and options 1`] = `
           aria-required={false}
           autoComplete="off"
           className="c6"
+          data-testid="TextInputWithDropdownInput"
           id="text-input-with-dropdown"
           name="query"
           onChange={[Function]}
@@ -515,15 +521,18 @@ exports[`renders correctly with value and options 1`] = `
   </label>
   <div
     className="c7 TextInputWithDropdown__options"
+    data-testid="TextInputWithDropdownDropdown"
   >
     <ul
       className="c8"
+      data-testid="TextInputWithDropdownList"
       onBlur={[Function]}
       role="listbox"
     >
       <li
         aria-selected={false}
         className="c9 c10"
+        data-testid="TextInputWithDropdownOption-0"
         id="option-0"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -539,6 +548,7 @@ exports[`renders correctly with value and options 1`] = `
       <li
         aria-selected={false}
         className="c9 c10"
+        data-testid="TextInputWithDropdownOption-1"
         id="option-1"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -554,6 +564,7 @@ exports[`renders correctly with value and options 1`] = `
       <li
         aria-selected={false}
         className="c9 c10"
+        data-testid="TextInputWithDropdownOption-2"
         id="option-2"
         onClick={[Function]}
         onKeyPress={[Function]}
@@ -569,6 +580,7 @@ exports[`renders correctly with value and options 1`] = `
       <li
         aria-selected={false}
         className="c9 c10"
+        data-testid="TextInputWithDropdownOption-3"
         id="option-3"
         onClick={[Function]}
         onKeyPress={[Function]}

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

@@ -72,7 +72,6 @@ it('renders article teaser correctly', () => {
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c1:hover,
@@ -382,6 +381,7 @@ it('renders article teaser correctly', () => {
       >
         <div
           className="c6 c7 c8"
+          data-testid="PictureWrapper"
         >
           <img
             alt="Image's description"
@@ -390,6 +390,7 @@ it('renders article teaser correctly', () => {
             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"
           />
@@ -520,7 +521,6 @@ it('renders press realese correctly', () => {
   display: inline;
   color: #000000;
   font-weight: normal;
-  color: #E52630;
 }
 
 .c1:hover,
@@ -802,6 +802,7 @@ it('renders press realese correctly', () => {
       >
         <div
           className="c6 c7 c8"
+          data-testid="PictureWrapper"
         >
           <img
             alt="Image's description"
@@ -810,6 +811,7 @@ it('renders press realese correctly', () => {
             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/Box/__snapshots__/Box.test.js.snap

@@ -73,6 +73,7 @@ exports[`renders correctly 1`] = `
   >
     <div
       className="c2 lazyload"
+      data-testid="PictureWrapper"
       squaredCorners={false}
     >
       <img
@@ -82,6 +83,7 @@ exports[`renders correctly 1`] = `
         data-sizes="auto"
         data-src={null}
         data-srcset="http://images.ctfassets.net/zsfivwzfgl3t/Yq59XdwwQgjNOxky93K1Q/17c2d80dce99067b0b3508f33075cbe3/funding_4-3_2x.jpg"
+        data-testid="Picture"
         src={null}
         srcSet="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
       />

package/src/components/Molecules/CTA/CTAMultiCard/CTAMultiCard.js

@@ -51,17 +51,19 @@ const CTAMultiCard = ({ data }) => {
   const cardsBackground = snakeCase(bgCards || 'white');
 
   return (
-    <CardsQueryWrapper>
+    <CardsQueryWrapper data-testid="CTAMultiCardQueryWrapper">
       <CardsSection
         $backgroundColor={cardsBackground}
         $paddingAbove={paddingAbove}
         $paddingBelow={paddingBelow}
+        data-testid="CTAMultiCardSection"
       >
-        <CardsInner>
+        <CardsInner data-testid="CTAMultiCardInner">
           <CardsContainer
             $columns={columns}
             $isCarousel={carouselOfCards}
             $useSplideCarousel={useSplideCarousel}
+            data-testid="CTAMultiCardContainer"
           >
             {useSplideCarousel ? (
               <Splide