update snapshot tests and remove unnecessary 'key' prop from mocked p…

…roduct response to avoid react warning when running the snapshot tests
guardian · Dec 23, 2024 · 7cd57ac · 7cd57ac
1 parent 17c503a
commit 7cd57ac
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 103 deletions.
diff --git a/client/__tests__/__snapshots__/main.test.tsx.snap b/client/__tests__/__snapshots__/main.test.tsx.snap
@@ -21,8 +21,8 @@ exports[`Main renders something 1`] = `
 .emotion-1 {
   color: #052962;
   position: absolute;
-  text-align: center;
-  font-size: 12px;
+  textalign: center;
+  fontsize: 12px;
 }
 
 .emotion-1:focus {
@@ -111,7 +111,7 @@ exports[`Main renders something 1`] = `
 }
 
 .emotion-7 {
-  font-family: "GuardianTextEgyptian",Georgia,serif;
+  font-family: GuardianTextEgyptian,"Guardian Text Egyptian Web",Georgia,serif;
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -268,10 +268,13 @@ exports[`Main renders something 1`] = `
 
 .emotion-58 {
   color: #FFE500;
-  font-family: GH Guardian Headline,"GuardianTextEgyptian",Georgia,serif;
-  font-size: 24px;
+  font-family: "GH Guardian Headline","Guardian Egyptian Web",Georgia,serif;
+  font-size: 1.5rem;
+  line-height: 1.15;
+  font-weight: 700;
+  font-style: normal;
+  --source-text-decoration-thickness: 3px;
   line-height: 24px;
-  font-weight: bold;
   margin-top: 3px;
   margin-bottom: 12px;
 }
@@ -294,9 +297,10 @@ exports[`Main renders something 1`] = `
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -833,7 +837,7 @@ html:not(.src-focus-disabled) .emotion-63 :focus {
                     >
                       <path
                         clipRule="evenodd"
-                        d="M1 12.956h18.274l-7.167 8.575.932.932L23 12.478v-.956l-9.96-9.985-.932.932 7.166 8.575H1v1.912Z"
+                        d="M1 12.956h18.274l-7.167 8.575.932.932L23 12.478v-.956l-9.96-9.985-.932.932 7.166 8.575H1z"
                         fillRule="evenodd"
                       />
                     </svg>
@@ -864,7 +868,7 @@ html:not(.src-focus-disabled) .emotion-63 :focus {
                   >
                     <path
                       clipRule="evenodd"
-                      d="M23 16.768 12.502 6.27h-1.004L1 16.768l.98.954L12 9.284l10.02 8.438.98-.954Z"
+                      d="M23 16.768 12.502 6.27h-1.004L1 16.768l.98.954L12 9.284l10.02 8.438z"
                       fillRule="evenodd"
                     />
                   </svg>

diff --git a/client/__tests__/components/helpCentre/__snapshots__/helpCentreContactOptions.test.tsx.snap b/client/__tests__/components/helpCentre/__snapshots__/helpCentreContactOptions.test.tsx.snap
@@ -1012,9 +1012,10 @@ exports[`HelpCentreContactOptions Help Centre landing page with live chat featur
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  -webkit-box-pack: justify;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
   -webkit-align-items: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
@@ -1442,7 +1443,7 @@ html:not(.src-focus-disabled) .emotion-7:focus {
             >
               <path
                 clipRule="evenodd"
-                d="M1 12.956h18.274l-7.167 8.575.932.932L23 12.478v-.956l-9.96-9.985-.932.932 7.166 8.575H1v1.912Z"
+                d="M1 12.956h18.274l-7.167 8.575.932.932L23 12.478v-.956l-9.96-9.985-.932.932 7.166 8.575H1z"
                 fillRule="evenodd"
               />
             </svg>

diff --git a/client/__tests__/components/identity/__snapshots__/DropMenu.test.tsx.snap b/client/__tests__/components/identity/__snapshots__/DropMenu.test.tsx.snap
@@ -10,9 +10,12 @@ exports[`DropMenu displays the text in the supplied color 1`] = `
 }
 
 .emotion-1 {
-  font-size: 17px;
-  font-family: "GuardianTextEgyptian",Georgia,serif;
-  font-weight: bold;
+  font-family: GuardianTextEgyptian,"Guardian Text Egyptian Web",Georgia,serif;
+  font-size: 1.0625rem;
+  line-height: 1.3;
+  font-weight: 700;
+  font-style: normal;
+  --source-text-decoration-thickness: 2px;
   line-height: 24px;
   text-transform: capitalize;
   display: block;
@@ -39,7 +42,7 @@ exports[`DropMenu displays the text in the supplied color 1`] = `
   margin-left: 4px;
 }
 
-.emotion-1.open:after {
+.emotion-1.open:after: {
   -webkit-transform: rotate(225deg);
   -moz-transform: rotate(225deg);
   -ms-transform: rotate(225deg);
@@ -78,9 +81,12 @@ exports[`DropMenu if closed, opens and shows children on click 1`] = `
 }
 
 .emotion-1 {
-  font-size: 17px;
-  font-family: "GuardianTextEgyptian",Georgia,serif;
-  font-weight: bold;
+  font-family: GuardianTextEgyptian,"Guardian Text Egyptian Web",Georgia,serif;
+  font-size: 1.0625rem;
+  line-height: 1.3;
+  font-weight: 700;
+  font-style: normal;
+  --source-text-decoration-thickness: 2px;
   line-height: 24px;
   text-transform: capitalize;
   display: block;
@@ -107,7 +113,7 @@ exports[`DropMenu if closed, opens and shows children on click 1`] = `
   margin-left: 4px;
 }
 
-.emotion-1.open:after {
+.emotion-1.open:after: {
   -webkit-transform: rotate(225deg);
   -moz-transform: rotate(225deg);
   -ms-transform: rotate(225deg);
@@ -150,9 +156,12 @@ exports[`DropMenu if open, closes and hides children on click 1`] = `
 }
 
 .emotion-1 {
-  font-size: 17px;
-  font-family: "GuardianTextEgyptian",Georgia,serif;
-  font-weight: bold;
+  font-family: GuardianTextEgyptian,"Guardian Text Egyptian Web",Georgia,serif;
+  font-size: 1.0625rem;
+  line-height: 1.3;
+  font-weight: 700;
+  font-style: normal;
+  --source-text-decoration-thickness: 2px;
   line-height: 24px;
   text-transform: capitalize;
   display: block;
@@ -179,7 +188,7 @@ exports[`DropMenu if open, closes and hides children on click 1`] = `
   margin-left: 4px;
 }
 
-.emotion-1.open:after {
+.emotion-1.open:after: {
   -webkit-transform: rotate(225deg);
   -moz-transform: rotate(225deg);
   -ms-transform: rotate(225deg);
@@ -218,9 +227,12 @@ exports[`DropMenu initalises in the unopened state and displays the title 1`] =
 }
 
 .emotion-1 {
-  font-size: 17px;
-  font-family: "GuardianTextEgyptian",Georgia,serif;
-  font-weight: bold;
+  font-family: GuardianTextEgyptian,"Guardian Text Egyptian Web",Georgia,serif;
+  font-size: 1.0625rem;
+  line-height: 1.3;
+  font-weight: 700;
+  font-style: normal;
+  --source-text-decoration-thickness: 2px;
   line-height: 24px;
   text-transform: capitalize;
   display: block;
@@ -247,7 +259,7 @@ exports[`DropMenu initalises in the unopened state and displays the title 1`] =
   margin-left: 4px;
 }
 
-.emotion-1.open:after {
+.emotion-1.open:after: {
   -webkit-transform: rotate(225deg);
   -moz-transform: rotate(225deg);
   -ms-transform: rotate(225deg);

diff --git a/client/__tests__/components/identity/__snapshots__/NewsletterPreference.test.tsx.snap b/client/__tests__/components/identity/__snapshots__/NewsletterPreference.test.tsx.snap
@@ -2,9 +2,13 @@
 
 exports[`NewsletterPreference component renders correctly and displays marketing information 1`] = `
 .emotion-0 {
-  font-size: 14px;
-  font-family: "Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
-  line-height: 1.333;
+  font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.3;
+  font-weight: 400;
+  font-style: normal;
+  --source-text-decoration-thickness: 2px;
+  lineheight: 1.333;
   margin-top: 12px;
 }
 
@@ -14,17 +18,12 @@ exports[`NewsletterPreference component renders correctly and displays marketing
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 44px;
-  cursor: pointer;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  margin-bottom: 12px;
+  padding: 10px 0;
+  cursor: pointer;
 }
 
 .emotion-1:hover input {
@@ -118,7 +117,7 @@ html:not(.src-focus-disabled) .emotion-2:focus {
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
-    top: 14px;
+    top: 15px;
     left: 9px;
     pointer-events: none;
   }
@@ -150,19 +149,6 @@ html:not(.src-focus-disabled) .emotion-2:focus {
   }
 }
 
-@supports ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none)) {
-  .emotion-3 {
-    top: 15px;
-    left: 9px;
-  }
-}
-
-@supports ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none)) {
-  .emotion-3 {
-    top: 5px;
-  }
-}
-
 .emotion-4 {
   cursor: pointer;
 }
@@ -176,12 +162,6 @@ html:not(.src-focus-disabled) .emotion-2:focus {
   --source-text-decoration-thickness: 2px;
   color: #121212;
   width: 100%;
-  font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
-  font-size: 1.0625rem;
-  line-height: 1.3;
-  font-weight: 400;
-  font-style: normal;
-  --source-text-decoration-thickness: 2px;
   margin-top: 1px;
 }
 
@@ -190,13 +170,14 @@ html:not(.src-focus-disabled) .emotion-2:focus {
 }
 
 .emotion-6 {
-  font-size: 14px;
-  font-family: "Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+  font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.3;
+  font-weight: 700;
+  font-style: normal;
+  --source-text-decoration-thickness: 2px;
   cursor: pointer;
-  font-size: 14px;
   line-height: 22px;
-  font-family: "Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
-  font-weight: bold;
   margin: 0;
 }
 
@@ -302,9 +283,13 @@ html:not(.src-focus-disabled) .emotion-2:focus {
 
 exports[`NewsletterPreference component will select the checkbox when the selected prop is passed 1`] = `
 .emotion-0 {
-  font-size: 14px;
-  font-family: "Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
-  line-height: 1.333;
+  font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.3;
+  font-weight: 400;
+  font-style: normal;
+  --source-text-decoration-thickness: 2px;
+  lineheight: 1.333;
   margin-top: 12px;
 }
 
@@ -314,17 +299,12 @@ exports[`NewsletterPreference component will select the checkbox when the select
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 44px;
-  cursor: pointer;
   -webkit-align-items: flex-start;
   -webkit-box-align: flex-start;
   -ms-flex-align: flex-start;
   align-items: flex-start;
-  margin-bottom: 12px;
+  padding: 10px 0;
+  cursor: pointer;
 }
 
 .emotion-1:hover input {
@@ -418,7 +398,7 @@ html:not(.src-focus-disabled) .emotion-2:focus {
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     transform: rotate(45deg);
-    top: 14px;
+    top: 15px;
     left: 9px;
     pointer-events: none;
   }
@@ -450,19 +430,6 @@ html:not(.src-focus-disabled) .emotion-2:focus {
   }
 }
 
-@supports ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none)) {
-  .emotion-3 {
-    top: 15px;
-    left: 9px;
-  }
-}
-
-@supports ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none)) {
-  .emotion-3 {
-    top: 5px;
-  }
-}
-
 .emotion-4 {
   cursor: pointer;
 }
@@ -476,12 +443,6 @@ html:not(.src-focus-disabled) .emotion-2:focus {
   --source-text-decoration-thickness: 2px;
   color: #121212;
   width: 100%;
-  font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
-  font-size: 1.0625rem;
-  line-height: 1.3;
-  font-weight: 400;
-  font-style: normal;
-  --source-text-decoration-thickness: 2px;
   margin-top: 1px;
 }
 
@@ -490,13 +451,14 @@ html:not(.src-focus-disabled) .emotion-2:focus {
 }
 
 .emotion-6 {
-  font-size: 14px;
-  font-family: "Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+  font-family: GuardianTextSans,"Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
+  font-size: 0.875rem;
+  line-height: 1.3;
+  font-weight: 700;
+  font-style: normal;
+  --source-text-decoration-thickness: 2px;
   cursor: pointer;
-  font-size: 14px;
   line-height: 22px;
-  font-family: "Guardian Text Sans Web","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
-  font-weight: bold;
   margin: 0;
 }