From 1ca4446fa2898db1fcece1259feedb77ec5e75bc Mon Sep 17 00:00:00 2001
From: marlon passos <marlonpassos@agenciam3.com>
Date: Wed, 29 Mar 2023 13:25:47 -0300
Subject: [PATCH] feat: adiciona test id de parte do footer bottom e refatora
 um pouco do codigo

---
 .../footer/footer-bottom/footer-bottom.tsx    | 20 ++++++---
 .../footer/footer-bottom/img-footer/img.tsx   | 15 ++++---
 .../footer/footer-bottom/pagamento/imgs.tsx   | 44 ++++++++++++++-----
 .../footer/newsletter/Newsletter.tsx          |  2 +-
 src/components/footer/text/Text.tsx           | 15 ++++---
 5 files changed, 66 insertions(+), 30 deletions(-)

diff --git a/src/components/footer/footer-bottom/footer-bottom.tsx b/src/components/footer/footer-bottom/footer-bottom.tsx
index 7b35ec9..6950aba 100644
--- a/src/components/footer/footer-bottom/footer-bottom.tsx
+++ b/src/components/footer/footer-bottom/footer-bottom.tsx
@@ -8,15 +8,10 @@ const FooterBottom = () => {
   return (
     <section
       className={styles["page-footer__footer-bottom"]}
-      data-testid="footer__bottom" 
+      data-testid="footer__bottomContainer" 
     >
       <div className={styles["page-footer__footer-bottom-container"]}>
-        <section className={styles["page-footer__container-footer-text"]}>
-          <Text
-            className={styles["page-footer__footer-text"]}
-            text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tecmpor"
-          />
-        </section>
+        <Copyright />
         <Imgs />
         <Autores />
       </div>
@@ -25,3 +20,14 @@ const FooterBottom = () => {
 };
 
 export { FooterBottom };
+
+export const Copyright = () => (
+  <section
+    className={styles["page-footer__container-footer-text"]}>
+    <Text
+      testId="footer__copyright"
+      className={styles["page-footer__footer-text"]}
+      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tecmpor"
+    />
+  </section>
+)
\ No newline at end of file
diff --git a/src/components/footer/footer-bottom/img-footer/img.tsx b/src/components/footer/footer-bottom/img-footer/img.tsx
index c357223..a3f30bf 100644
--- a/src/components/footer/footer-bottom/img-footer/img.tsx
+++ b/src/components/footer/footer-bottom/img-footer/img.tsx
@@ -1,14 +1,19 @@
 import React from "react";
 
-interface ButtonProps {
+export interface ImgProps {
   img: string;
   text: string;
   className: string;
+  testId?: string
 }
 
-const Img = (props: ButtonProps) => {
-  const { img, text, className } = props;
-  return <img className={className} src={img} alt={text} />;
-};
+const Img = ({ img, text, testId, className }: ImgProps) => (
+  <img
+    className={className}
+    src={img}
+    alt={text}
+    data-testid={testId}
+  />
+)
 
 export { Img };
diff --git a/src/components/footer/footer-bottom/pagamento/imgs.tsx b/src/components/footer/footer-bottom/pagamento/imgs.tsx
index 0159439..1b10ec7 100644
--- a/src/components/footer/footer-bottom/pagamento/imgs.tsx
+++ b/src/components/footer/footer-bottom/pagamento/imgs.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 
 import styles from "../../footer.module.scss";
-import { Img } from "../img-footer/img";
+import { Img, ImgProps } from "../img-footer/img";
 import Master from "../assets/img/Master.png";
 import Visa from "../assets/img/Visa.png";
 import Diners from "../assets/img/Diners.png";
@@ -11,24 +11,46 @@ import Pagseguro from "../assets/img/Pagseguro.png";
 import Boleto from "../assets/img/Boleto.png";
 import vtex from "../assets/img/vtex-pci-200.png";
 
-const Imgs = () => {
+const PaymentsMethods = () => {
   return (
-    <section className={styles["page-footer__imgs"]}>
-      <Img className={styles["img"]} img={Master} text="Cartão master" />
-      <Img className={styles["img"]} img={Visa} text="Cartão visa" />
+    <section
+      className={styles["page-footer__imgs"]}
+      data-testid="footer__paymentMethods"   
+    >
+      <PaymentMethod img={Master} text="Cartão master" />
+      <PaymentMethod img={Visa} text="Cartão visa" />
       <Img
         className={styles["img"]}
         img={Diners}
         text="Cartão american diners"
       />
-      <Img className={styles["img"]} img={Elo} text="Cartão elo" />
-      <Img className={styles["img"]} img={Hiper} text="Cartão hiper" />
-      <Img className={styles["img"]} img={Pagseguro} text="Pague Seguro" />
-      <Img className={styles["img"]} img={Boleto} text="Pagamento boleto" />
+      <PaymentMethod img={Elo} text="Cartão elo" />
+      <PaymentMethod img={Hiper} text="Cartão hiper" />
+      <PaymentMethod img={Pagseguro} text="Pague Seguro" />
+      <PaymentMethod img={Boleto} text="Pagamento boleto" />
       <div className={styles["divisor"]}></div>
-      <Img className={styles["img-grande"]} img={vtex} text="Vtex" />
+      <PaymentMethod isBig img={vtex} text="Vtex" />
     </section>
   );
 };
 
-export { Imgs };
+export type PaymentMethodProps = Pick<ImgProps, "img" | "text"> & {
+  isBig?: boolean;
+}
+
+export const PaymentMethod = ({ img, text, isBig }: PaymentMethodProps) => {
+  return (
+    <Img
+      className={getClassName()}
+      img={img}
+      text={text}
+      testId="footer__paymentMethod"
+    />
+  )
+
+  function getClassName() {
+    return isBig ? styles["img-grande"] : styles["img"]
+  }
+}
+
+export { PaymentsMethods as Imgs };
diff --git a/src/components/footer/newsletter/Newsletter.tsx b/src/components/footer/newsletter/Newsletter.tsx
index cd15711..8ceecb7 100644
--- a/src/components/footer/newsletter/Newsletter.tsx
+++ b/src/components/footer/newsletter/Newsletter.tsx
@@ -34,7 +34,7 @@ const Newsletter = () => {
             <div className={styles["page-footer__newsletter-form"]}>
               <Field
                 name="email"
-                test-testid="newsletter__input"
+                data-testid="newsletter__input"
                 className={styles["input"]}
                 placeholder="E-mail"
               />
diff --git a/src/components/footer/text/Text.tsx b/src/components/footer/text/Text.tsx
index b2e3d2b..08a56e2 100644
--- a/src/components/footer/text/Text.tsx
+++ b/src/components/footer/text/Text.tsx
@@ -1,13 +1,16 @@
-import React from "react";
-
 interface TextProps {
   text: string;
   className: string;
+  testId?: string;
 }
 
-const Text = (props: TextProps) => {
-  const { text, className } = props;
-  return <p className={className}>{text}</p>;
-};
+const Text = ({ text, className, testId}: TextProps) => (
+  <p
+    className={className}
+    data-tesid={testId}
+  >
+    {text}
+  </p>
+);
 
 export { Text };