From d727fdb369caebd57cb0d4c85acc44c98d8d8a48 Mon Sep 17 00:00:00 2001
From: marlon passos <marlonpassos@agenciam3.com>
Date: Wed, 29 Mar 2023 08:22:08 -0300
Subject: [PATCH] feat: adiciona os tests id do header e do title

---
 src/components/Header/Header.tsx      | 49 ++++++++++++++++++---------
 src/components/Header/HeaderLinks.tsx |  6 ++--
 src/components/Header/SearchBar.tsx   |  1 +
 src/components/Main/Main.tsx          | 35 ++++++++++++++-----
 src/components/link/Link.tsx          |  7 +++-
 5 files changed, 70 insertions(+), 28 deletions(-)

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 509f5a7..d80268f 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -16,7 +16,10 @@ const Header = () => {
   };
 
   return (
-    <header className={styles["page-header"]}>
+    <header
+      className={styles["page-header"]}
+      data-testid="header__container"
+    >
       <div className={styles["page-header__container"]}>
         <section className={styles["page-header__container-top"]}>
           <div className={styles["page-header__menu"]}>
@@ -35,24 +38,15 @@ const Header = () => {
               onClick={activeMenuMobile}
             />
           </div>
-          <a className={styles["page-header__logo"]} href="/">
+          <a
+            className={styles["page-header__logo"]}
+            href="/"
+            data-testid="header__logo"
+          >
             <img src={Logo} alt="" />
           </a>
           <SearchBar />
-          <div className={styles["page-header__container-login"]}>
-            <Link link="/" text="ENTRAR" className={styles["link"]} />
-            <a
-              href="/"
-              aria-label="Carrinho"
-              className={styles["page-header__cart"]}
-            >
-              <img
-                src={Cart}
-                alt=""
-                className={styles["page-header__cart-image"]}
-              />
-            </a>
-          </div>
+          <MenuTop />
         </section>
         <section className={styles["page-header__container-bottom-mobile"]}>
           <SearchBar />
@@ -65,4 +59,27 @@ const Header = () => {
   );
 };
 
+export function MenuTop() {
+  return (
+    <div
+      className={styles["page-header__container-login"]}
+      data-testid="header__menuTop" 
+    >
+            <Link link="/" text="ENTRAR" className={styles["link"]} testid="header__enter" />
+            <a
+              href="/"
+              aria-label="Carrinho"
+              className={styles["page-header__cart"]}
+            >
+              <img
+                src={Cart}
+                alt=""
+                className={styles["page-header__cart-image"]}
+                data-testid="header__cartIcon"
+              />
+            </a>
+          </div>
+  )
+}
+
 export { Header };
diff --git a/src/components/Header/HeaderLinks.tsx b/src/components/Header/HeaderLinks.tsx
index bfe2059..9087bda 100644
--- a/src/components/Header/HeaderLinks.tsx
+++ b/src/components/Header/HeaderLinks.tsx
@@ -3,11 +3,13 @@ import styles from "./header.module.scss";
 
 const HeaderLinks = () => {
   return (
-    <>
+    <div
+      data-testid="header__menuBottom"
+    >
       <Link className={styles["link"]} link="/" text="CURSOS" />
       <Link className={styles["link"]} link="/" text="SAIBA MAIS" />
       <Link className={styles["link"]} link="/" text="INSTITUCIONAIS" />
-    </>
+    </div>
   );
 };
 
diff --git a/src/components/Header/SearchBar.tsx b/src/components/Header/SearchBar.tsx
index e39d8c1..da6a598 100644
--- a/src/components/Header/SearchBar.tsx
+++ b/src/components/Header/SearchBar.tsx
@@ -6,6 +6,7 @@ const SearchBar = () => {
   return (
     <div className={styles["page-header__busca"]}>
       <input
+        data-testid="header__searchBar"
         className={styles["page-header__busca-input"]}
         type="text"
         placeholder="Buscar..."
diff --git a/src/components/Main/Main.tsx b/src/components/Main/Main.tsx
index df83ea8..ecdf873 100644
--- a/src/components/Main/Main.tsx
+++ b/src/components/Main/Main.tsx
@@ -1,21 +1,38 @@
 import iconHome from "./assets/iconHome.svg";
 import arrow from "./assets/arrow.svg";
 import { SubjectMain } from "./Subject/SubjectMain";
-
 import styles from "./main.module.scss";
 
-const Main = () => {
+export const Main = () => {
   return (
     <main className={styles["page-main"]}>
-      <div className={styles["page-main__menu"]}>
-        <img className={styles["page-main__img-home"]} src={iconHome} alt="" />
-        <img className={styles["page-main__img-arrow"]} src={arrow} alt="" />
-        <strong className={styles["page-main__text"]}>INSTITUCIONAL</strong>
-      </div>
-      <h1 className={styles["page-main__title"]}>INSTITUCIONAL</h1>
+      <Breadcrumb />
+      <InstitucionalTitle />
       <SubjectMain />
     </main>
   );
 };
 
-export { Main };
+export const Breadcrumb = () => {
+  return (
+    <div
+      className={styles["page-main__menu"]}
+      data-testid="breadcrumb__container"
+    >
+        <img className={styles["page-main__img-home"]} src={iconHome} alt="" />
+        <img className={styles["page-main__img-arrow"]} src={arrow} alt="" />
+        <strong className={styles["page-main__text"]}>INSTITUCIONAL</strong>
+      </div>
+  )
+}
+
+export const InstitucionalTitle = () => {
+  return (
+    <h1
+      className={styles["page-main__title"]}
+      data-testid="title"
+    >
+      INSTITUCIONAL
+    </h1>
+  )
+}
diff --git a/src/components/link/Link.tsx b/src/components/link/Link.tsx
index 7043770..75a6bb6 100644
--- a/src/components/link/Link.tsx
+++ b/src/components/link/Link.tsx
@@ -2,12 +2,17 @@ export interface LinkProps {
   link: string;
   text: string;
   className: string;
+  testid?: string;
 }
 
 const Link = (props: LinkProps) => {
   const { link, text, className } = props;
   return (
-    <a href={link} className={className}>
+    <a
+      href={link}
+      className={className}
+      data-testid={props.testid} 
+    >
       {text}
     </a>
   );