feat: adiciona os tests id do header e do title

This commit is contained in:
marlon passos 2023-03-29 08:22:08 -03:00
parent 7ba21a86fb
commit d727fdb369
5 changed files with 70 additions and 28 deletions

View File

@ -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 };

View File

@ -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>
);
};

View File

@ -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..."

View File

@ -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>
)
}

View File

@ -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>
);