Fix Lint and Jest Failing

.github/workflows/dependabot_lint_format.yml

@@ -66,3 +66,9 @@ jobs:
         with:
           commit_message: Format & lint pnpm-lock.yaml
           file_pattern: "./pnpm-lock.yaml"
+
+      - name: "Run lint and jest if there are changes"
+        if: steps.auto-commit-action.outputs.changes_detected == 'true'
+        run: |
+          pnpm lint-check
+          pnpm test

apps/charterafrica/src/components/Dataset/Dataset.snap.js

@@ -82,15 +82,15 @@ exports[`<Dataset /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-18qart5-MuiGrid-root"
           >
             <div
-              class="MuiStack-root css-1gopyth-MuiStack-root"
+              class="MuiStack-root css-1p1s33i-MuiStack-root"
             >
               <div
                 class="MuiTypography-root MuiTypography-p3 css-1orwtxp-MuiTypography-root"
               >
                 Share Via
               </div>
               <div
-                class="MuiStack-root css-a2l1ks-MuiStack-root"
+                class="MuiStack-root css-b6wkik-MuiStack-root"
               >
                 <button
                   aria-label="twitter"

apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.snap.js

@@ -17,7 +17,7 @@ exports[`<DesktopNavBar /> renders unchanged 1`] = `
           alt="Charter Africa"
           data-nimg="fill"
           decoding="async"
-          fetchpriority="high"
+          loading="lazy"
           src="/images/charter-logo.svg"
           style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; color: transparent;"
         />

apps/charterafrica/src/components/DesktopNavBar/DesktopNavBar.test.js

@@ -17,7 +17,6 @@ const defaultProps = {
     image: {
       alt: "Charter Africa",
       fill: true,
-      priority: true,
       src: "/images/charter-logo.svg",
     },
     href: "/",

apps/charterafrica/src/components/Document/Document.snap.js

@@ -56,15 +56,15 @@ exports[`<Document /> renders unchanged 1`] = `
             class="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 css-mqmitf-MuiGrid-root"
           >
             <div
-              class="MuiStack-root css-ro4qnv-MuiStack-root"
+              class="MuiStack-root css-m2meqv-MuiStack-root"
             >
               <div
                 class="MuiTypography-root MuiTypography-p3 css-1orwtxp-MuiTypography-root"
               >
                 Share this document
               </div>
               <div
-                class="MuiStack-root css-a2l1ks-MuiStack-root"
+                class="MuiStack-root css-b6wkik-MuiStack-root"
               >
                 <button
                   aria-label="twitter"

apps/charterafrica/src/components/Explainers/Explainer.snap.js

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Explainer /> renders unchanged 1`] = `
+<div>
+  <div
+    class="MuiStack-root css-nen11g-MuiStack-root"
+  >
+    <figure
+      class="MuiBox-root css-db5opy"
+    >
+      <img
+        alt="Event 1"
+        class="css-g98gbd"
+        data-nimg="1"
+        decoding="async"
+        height="0"
+        loading="lazy"
+        src="/_next/image?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F39160236%2F214778112-7aefbe8f-11f2-423f-b6c9-a284feaf9b33.png&w=16&q=75"
+        srcset="/_next/image?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F39160236%2F214778112-7aefbe8f-11f2-423f-b6c9-a284feaf9b33.png&w=16&q=75 1x"
+        style="color: transparent; width: 100%; height: auto;"
+        width="0"
+      />
+    </figure>
+    <div
+      class="MuiTypography-root MuiTypography-h3SmallSemiBold css-zyjgo7-MuiTypography-root"
+    >
+      Event title going on two or even three lines
+    </div>
+    <div
+      class="MuiBox-root css-12mwhaj"
+    >
+      <p
+        class="MuiTypography-root MuiTypography-p2 css-1gx5see-MuiTypography-root"
+      >
+        Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur 
+      </p>
+    </div>
+  </div>
+</div>
+`;

apps/charterafrica/src/components/Explainers/Explainer.test.js

@@ -0,0 +1,35 @@
+import { createRender } from "@commons-ui/testing-library";
+import React from "react";
+
+import Explainer from "./Explainer";
+
+import theme from "@/charterafrica/theme";
+
+// eslint-disable-next-line testing-library/render-result-naming-convention
+const render = createRender({ theme });
+
+const defaultProps = {
+  id: 1,
+  title: "Event title going on two or even three lines",
+  showTitle: true,
+  description: [
+    {
+      children: [
+        {
+          text: "Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur adipiscing elit tempus nibh cursus, urna porta sagittis non eget taciti nunc sed felis dui, praesent ullamcorper facilisi euismod ut in platea laoreet integer. Lorem ipsum dolor sit amet consectetur ",
+        },
+      ],
+    },
+  ],
+  image: {
+    url: "https://user-images.githubusercontent.com/39160236/214778112-7aefbe8f-11f2-423f-b6c9-a284feaf9b33.png",
+    fill: true,
+    alt: `Event 1`,
+  },
+};
+describe("<Explainer />", () => {
+  it("renders unchanged", () => {
+    const { container } = render(<Explainer {...defaultProps} />);
+    expect(container).toMatchSnapshot();
+  });
+});

apps/charterafrica/src/components/Explainers/Explainers.js

@@ -30,9 +30,9 @@ const Explainers = React.forwardRef(function Explainers(props, ref) {
           {title}
         </RichTypography>
 
-        {explainers.map((e, i) => (
+        {explainers.map((e) => (
           <Fragment key={e.id}>
-            <Explainer {...e} ImageProps={{ priority: i === 0 }} key={e.id} />
+            <Explainer {...e} key={e.id} />
             <Divider sx={{ my: 5 }} />
           </Fragment>
         ))}

apps/charterafrica/src/components/Explainers/Explainers.snap.js

@@ -20,12 +20,12 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-db5opy"
         >
           <img
-            alt="Event title going on two or even three lines"
+            alt="Event 0"
             class="css-g98gbd"
             data-nimg="1"
             decoding="async"
-            fetchpriority="high"
             height="0"
+            loading="lazy"
             src="/_next/image?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F39160236%2F214778112-7aefbe8f-11f2-423f-b6c9-a284feaf9b33.png&w=16&q=75"
             srcset="/_next/image?url=https%3A%2F%2Fuser-images.githubusercontent.com%2F39160236%2F214778112-7aefbe8f-11f2-423f-b6c9-a284feaf9b33.png&w=16&q=75 1x"
             style="color: transparent; width: 100%; height: auto;"
@@ -52,7 +52,7 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-db5opy"
         >
           <img
-            alt="Event title going on two or even three lines"
+            alt="Event 1"
             class="css-g98gbd"
             data-nimg="1"
             decoding="async"
@@ -84,7 +84,7 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-db5opy"
         >
           <img
-            alt="Event title going on two or even three lines"
+            alt="Event 2"
             class="css-g98gbd"
             data-nimg="1"
             decoding="async"
@@ -116,7 +116,7 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-db5opy"
         >
           <img
-            alt="Event title going on two or even three lines"
+            alt="Event 3"
             class="css-g98gbd"
             data-nimg="1"
             decoding="async"
@@ -148,7 +148,7 @@ exports[`<Explainers /> renders unchanged 1`] = `
           class="MuiBox-root css-db5opy"
         >
           <img
-            alt="Event title going on two or even three lines"
+            alt="Event 4"
             class="css-g98gbd"
             data-nimg="1"
             decoding="async"

apps/charterafrica/src/components/Explainers/Explainers.test.js

@@ -24,6 +24,8 @@ const defaultProps = {
     ],
     image: {
       url: "https://user-images.githubusercontent.com/39160236/214778112-7aefbe8f-11f2-423f-b6c9-a284feaf9b33.png",
+      fill: true,
+      alt: `Event ${i}`,
     },
   })),
 };

apps/charterafrica/src/components/FeaturedPostCard/FeaturedPostCard.snap.js

@@ -20,7 +20,7 @@ exports[`FeaturedPostCard should render 1`] = `
           class="MuiCardContent-root css-cnb62q-MuiCardContent-root"
         >
           <div
-            class="MuiStack-root css-pnq1z9-MuiStack-root"
+            class="MuiStack-root css-ki96yg-MuiStack-root"
           >
             <div
               class="MuiTypography-root MuiTypography-h2SemiBold css-1j0n21l-MuiTypography-root"
@@ -37,7 +37,7 @@ exports[`FeaturedPostCard should render 1`] = `
               </h6>
             </div>
             <div
-              class="MuiStack-root css-173zx7o-MuiStack-root"
+              class="MuiStack-root css-11sh0dx-MuiStack-root"
             >
               <div
                 class="MuiTypography-root MuiTypography-p1 css-iui9m1-MuiTypography-root"

apps/charterafrica/src/components/Impressum/Impressum.js

@@ -43,7 +43,6 @@ const Impressum = React.forwardRef(function Impressum(props, ref) {
                   alt: image.alt,
                   fill: false,
                   height: 0,
-                  priority: true,
                   src: image.url,
                   style: {
                     height: "auto",

apps/charterafrica/src/components/Impressum/Impressum.snap.js

@@ -22,8 +22,8 @@ exports[`<Impressum /> renders unchanged 1`] = `
               class="css-g98gbd"
               data-nimg="1"
               decoding="async"
-              fetchpriority="high"
               height="0"
+              loading="lazy"
               src="/_next/image?url=http%3A%2F%2Flocalhost%3A3000%2Fmedia%2F3a134a6ee61bdaf42fd06b59f46cf9fe-1.png&w=16&q=75"
               srcset="/_next/image?url=http%3A%2F%2Flocalhost%3A3000%2Fmedia%2F3a134a6ee61bdaf42fd06b59f46cf9fe-1.png&w=16&q=75 1x"
               style="color: transparent; height: auto; object-fit: inherit; width: 100%;"

apps/charterafrica/src/components/Logo/Logo.test.js

@@ -13,7 +13,6 @@ const defaultProps = {
     image: {
       alt: "Charter Africa",
       fill: true,
-      priority: true,
       src: "/images/charter-logo.svg",
     },
     href: "/",

apps/charterafrica/src/components/NavBar/NavBar.snap.js

@@ -26,7 +26,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
                 alt="Charter Africa"
                 data-nimg="fill"
                 decoding="async"
-                fetchpriority="high"
+                loading="lazy"
                 src="/images/charter-logo.svg"
                 style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; color: transparent;"
               />
@@ -65,7 +65,7 @@ exports[`<NavBar /> renders unchanged 1`] = `
                 alt="Charter Africa"
                 data-nimg="fill"
                 decoding="async"
-                fetchpriority="high"
+                loading="lazy"
                 src="/images/charter-logo.svg"
                 style="position: absolute; height: 100%; width: 100%; left: 0px; top: 0px; right: 0px; bottom: 0px; color: transparent;"
               />

apps/charterafrica/src/components/NavBar/NavBar.test.js

@@ -13,7 +13,6 @@ const defaultProps = {
     image: {
       alt: "Charter Africa",
       fill: true,
-      priority: true,
       src: "/images/charter-logo.svg",
     },
     href: "/",

apps/charterafrica/src/components/Opportunity/Opportunity.js

@@ -34,7 +34,6 @@ const Opportunity = React.forwardRef(function Opportunity(props, ref) {
                   alt: image.alt,
                   fill: false,
                   height: 0,
-                  priority: true,
                   src: image.url,
                   style: {
                     height: "auto",

apps/charterafrica/src/components/Opportunity/Opportunity.snap.js

@@ -25,8 +25,8 @@ exports[`<Opportunity /> renders unchanged 1`] = `
                 class="css-g98gbd"
                 data-nimg="1"
                 decoding="async"
-                fetchpriority="high"
                 height="0"
+                loading="lazy"
                 src="/_next/image?url=http%3A%2F%2Flocalhost%3A3000%2Fmedia%2Fhero-slide-1.jpg&w=16&q=75"
                 srcset="/_next/image?url=http%3A%2F%2Flocalhost%3A3000%2Fmedia%2Fhero-slide-1.jpg&w=16&q=75 1x"
                 style="color: transparent; height: auto; object-fit: cover; width: 100%;"

apps/charterafrica/src/components/PageHeader/ImagePageHeader.js

@@ -51,7 +51,6 @@ const ImagePageHeader = React.forwardRef(function ImagePageHeader(props, ref) {
                 alt: media.image.alt || title,
                 fill: false,
                 height: 0,
-                priority: true,
                 src: media.image.url,
                 style: {
                   height: "auto",

apps/charterafrica/src/components/PageHeader/PageHeader.snap.js

@@ -22,8 +22,8 @@ exports[`<PageHeader/> renders unchanged 1`] = `
               class="css-g98gbd"
               data-nimg="1"
               decoding="async"
-              fetchpriority="high"
               height="0"
+              loading="lazy"
               src="/_next/image?url=%2Fmedia%2Fs.jpg&w=16&q=75"
               srcset="/_next/image?url=%2Fmedia%2Fs.jpg&w=16&q=75 1x"
               style="color: transparent; height: auto; object-fit: inherit; object-position: inherit; width: 100%;"

apps/charterafrica/src/components/ShareThisPage/ShareThisPage.snap.js

@@ -3,15 +3,15 @@
 exports[`<ShareThisPage /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiStack-root css-1lwbda4-MuiStack-root"
+    class="MuiStack-root css-j378z1-MuiStack-root"
   >
     <div
       class="MuiTypography-root MuiTypography-p3 css-1orwtxp-MuiTypography-root"
     >
       Sample Title
     </div>
     <div
-      class="MuiStack-root css-a2l1ks-MuiStack-root"
+      class="MuiStack-root css-b6wkik-MuiStack-root"
     >
       <button
         aria-label="twitter"

apps/charterafrica/src/components/SocialMediaBar/SocialMediaBar.snap.js

@@ -3,15 +3,15 @@
 exports[`<SocialMediaBar /> renders unchanged 1`] = `
 <div>
   <div
-    class="MuiStack-root css-1lwbda4-MuiStack-root"
+    class="MuiStack-root css-j378z1-MuiStack-root"
   >
     <div
       class="MuiTypography-root MuiTypography-p3 css-1orwtxp-MuiTypography-root"
     >
       Connect with: 
     </div>
     <div
-      class="MuiStack-root css-a2l1ks-MuiStack-root"
+      class="MuiStack-root css-b6wkik-MuiStack-root"
     />
   </div>
 </div>

apps/charterafrica/src/components/Tool/Tool.snap.js

@@ -139,15 +139,15 @@ exports[`<Tool /> renders unchanged 1`] = `
                 class="MuiBox-root css-oqyb22"
               >
                 <div
-                  class="MuiStack-root css-hmfqeh-MuiStack-root"
+                  class="MuiStack-root css-hhlonh-MuiStack-root"
                 >
                   <div
                     class="MuiTypography-root MuiTypography-p3 css-1orwtxp-MuiTypography-root"
                   >
                     Share via
                   </div>
                   <div
-                    class="MuiStack-root css-a2l1ks-MuiStack-root"
+                    class="MuiStack-root css-b6wkik-MuiStack-root"
                   >
                     <button
                       aria-label="twitter"

apps/codeforafrica/src/components/ArticleHeader/ArticleHeader.snap.js

@@ -6,15 +6,15 @@ exports[`<ArticleHeader /> renders unchanged 1`] = `
     class="MuiContainer-root MuiContainer-maxWidthLg MuiContainer-fixed MuiContainer-disableGutters css-12qr4r4-MuiContainer-root"
   >
     <div
-      class="MuiStack-root css-1rvuxdl-MuiStack-root"
+      class="MuiStack-root css-1het2hz-MuiStack-root"
     >
       <div
         class="MuiTypography-root MuiTypography-footerCap css-scsc4a-MuiTypography-root"
       >
         Share This Article
       </div>
       <div
-        class="MuiStack-root css-163j9ep-MuiStack-root"
+        class="MuiStack-root css-1jqw290-MuiStack-root"
       >
         <button
           aria-label="Twitter"

apps/codeforafrica/src/components/ArticlePage/ArticlePage.js

@@ -25,7 +25,6 @@ function ArticlePage({
         ImageProps={{
           alt: title,
           sx: { objectFit: "cover" },
-          priority: true,
           src: featureImage,
         }}
         sx={{