Merge pull request #40 from cesarhenrq/qa

4023-feat--base-layout
cesarhenrq · Oct 5, 2023 · a7f1d1a · a7f1d1a
2 parents 0fb7516 + 04e2f8c
commit a7f1d1a
Show file tree

Hide file tree

Showing 11 changed files with 184 additions and 86 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,10 +1,12 @@
 import GlobalStyle from '@styles/global';
 
+import BaseLayout from '@pages/BaseLayout';
+
 export default function App() {
   return (
     <div className="App">
       <GlobalStyle />
-      it works!
+      <BaseLayout>it works!</BaseLayout>
     </div>
   );
 }
diff --git a/src/components/Footer/Footer.cy.tsx b/src/components/Footer/Footer.cy.tsx
@@ -72,8 +72,4 @@ describe('<Footer />', () => {
       '1px solid rgb(251, 176, 77)',
     );
   });
-
-  it('should line has margin: 0 8.4375rem', () => {
-    cy.getByCy('line').should('have.css', 'margin', '0px 135px');
-  });
 });
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -23,59 +23,57 @@ const Footer = () => {
   };
 
   return (
-    <>
+    <S.Footer data-cy="footer">
       <S.Line data-cy="line" />
-      <S.Footer data-cy="footer">
-        <div className="text-container" data-cy="logo">
-          <Text label="meta" fontColor="white" fontSize="large" />
-          <Text
-            label="vagas"
-            fontColor="yellow"
-            fontStyle="italic"
-            fontSize="large"
-            fontWeight="600"
-          />
-        </div>
-        <S.ContactInfo data-cy="contact-info">
-          <Text label="Contato e Endereço" fontColor="yellow" />
-          <S.ContactInfoItem
-            data-cy="contact-info-phone"
-            className="contact-info-item"
-          >
-            <S.Circle>
-              <Telephone {...iconProps} />
-            </S.Circle>
-            <Text label="4003-5442" fontColor="white" />
-          </S.ContactInfoItem>
-          <S.ContactInfoItem data-cy="contact-info-email">
-            <S.Circle>
-              <Message {...iconProps} />
-            </S.Circle>
-            <Text label="[email protected]" fontColor="white" />
-          </S.ContactInfoItem>
-          <S.ContactInfoItem data-cy="contact-info-adress">
-            <S.Circle>
-              <Location {...iconProps} />
-            </S.Circle>
-            <Text label={adressText} fontColor="white" data-cy="text-adress" />
-          </S.ContactInfoItem>
-        </S.ContactInfo>
-        <div className="button-container" data-cy="auth-buttons">
-          <Button
-            label="Entrar"
-            onClick={dummy}
-            backgroundColor="purple-dark"
-            fontColor="white"
-            borderColor="white"
-          />
-          <Button
-            label="Cadastrar-se gratuitamente"
-            onClick={dummy}
-            borderColor="yellow"
-          />
-        </div>
-      </S.Footer>
-    </>
+      <div className="text-container" data-cy="logo">
+        <Text label="meta" fontColor="white" fontSize="large" />
+        <Text
+          label="vagas"
+          fontColor="yellow"
+          fontStyle="italic"
+          fontSize="large"
+          fontWeight="600"
+        />
+      </div>
+      <S.ContactInfo data-cy="contact-info">
+        <Text label="Contato e Endereço" fontColor="yellow" />
+        <S.ContactInfoItem
+          data-cy="contact-info-phone"
+          className="contact-info-item"
+        >
+          <S.Circle>
+            <Telephone {...iconProps} />
+          </S.Circle>
+          <Text label="4003-5442" fontColor="white" />
+        </S.ContactInfoItem>
+        <S.ContactInfoItem data-cy="contact-info-email">
+          <S.Circle>
+            <Message {...iconProps} />
+          </S.Circle>
+          <Text label="[email protected]" fontColor="white" />
+        </S.ContactInfoItem>
+        <S.ContactInfoItem data-cy="contact-info-adress">
+          <S.Circle>
+            <Location {...iconProps} />
+          </S.Circle>
+          <Text label={adressText} fontColor="white" data-cy="text-adress" />
+        </S.ContactInfoItem>
+      </S.ContactInfo>
+      <div className="button-container" data-cy="auth-buttons">
+        <Button
+          label="Entrar"
+          onClick={dummy}
+          backgroundColor="purple-dark"
+          fontColor="white"
+          borderColor="white"
+        />
+        <Button
+          label="Cadastrar-se gratuitamente"
+          onClick={dummy}
+          borderColor="yellow"
+        />
+      </div>
+    </S.Footer>
   );
 };
 

diff --git a/src/components/Footer/styles.ts b/src/components/Footer/styles.ts
@@ -1,12 +1,13 @@
 import styled from 'styled-components';
 
 export const Footer = styled.footer`
+  position: relative;
   background-color: var(--purple-dark);
   padding: 4.375rem 8.4375rem 6.875rem 8.4375rem;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  width: 100vw;
+  width: 100%;
 
   .text {
     justify-content: flex-start;
@@ -45,6 +46,11 @@ export const Circle = styled.div`
 `;
 
 export const Line = styled.hr`
+  position: absolute;
   border: 1px solid var(--yellow);
-  margin: 0 8.4375rem;
+  top: 0;
+  left: 8.4375rem;
+  right: 8.4375rem;
+  width: calc(100% - 16.875rem);
+  z-index: 1;
 `;
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -8,32 +8,35 @@ const Header = () => {
     console.log('first');
   };
   return (
-    <S.Header>
-      <div className="text-container">
-        <Text label="meta" fontColor="white" fontSize="large" />
-        <Text
-          label="vagas"
-          fontColor="yellow"
-          fontStyle="italic"
-          fontSize="large"
-          fontWeight="600"
-        />
-      </div>
-      <div className="button-container">
-        <Button
-          label="Entrar"
-          onClick={dummy}
-          backgroundColor="purple-dark"
-          fontColor="white"
-          borderColor="white"
-        />
-        <Button
-          label="Cadastrar-se gratuitamente"
-          onClick={dummy}
-          borderColor="yellow"
-        />
-      </div>
-    </S.Header>
+    <>
+      <S.Header data-cy="header">
+        <div className="text-container">
+          <Text label="meta" fontColor="white" fontSize="large" />
+          <Text
+            label="vagas"
+            fontColor="yellow"
+            fontStyle="italic"
+            fontSize="large"
+            fontWeight="600"
+          />
+        </div>
+        <div className="button-container">
+          <Button
+            label="Entrar"
+            onClick={dummy}
+            backgroundColor="purple-dark"
+            fontColor="white"
+            borderColor="white"
+          />
+          <Button
+            label="Cadastrar-se gratuitamente"
+            onClick={dummy}
+            borderColor="yellow"
+          />
+        </div>
+      </S.Header>
+      <S.Line />
+    </>
   );
 };
 

diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
@@ -7,7 +7,10 @@ export const Header = styled.header`
   display: flex;
   justify-content: space-between;
   align-items: center;
-  width: 100vw;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 2;
 
   .text-container {
     display: flex;
@@ -19,3 +22,13 @@ export const Header = styled.header`
     gap: 1.5rem;
   }
 `;
+
+export const Line = styled.hr`
+  position: fixed;
+  border: 1px solid black;
+  top: calc(6.4375rem - 2px);
+  left: 8.4375rem;
+  right: 8.4375rem;
+  width: calc(100% - 16.875rem);
+  z-index: 3;
+`;
diff --git a/src/pages/BaseLayout/BaseLayout.cy.tsx b/src/pages/BaseLayout/BaseLayout.cy.tsx
@@ -0,0 +1,21 @@
+import BaseLayout from './BaseLayout';
+import GlobalStyle from '@styles/global';
+
+const Sut = () => (
+  <>
+    <GlobalStyle />
+    <BaseLayout>
+      <div>children</div>
+    </BaseLayout>
+  </>
+);
+
+describe('<BaseLayout />', () => {
+  beforeEach(() => {
+    cy.mount(<Sut />);
+  });
+
+  it('should main content has padding-top: 6.4375rem', () => {
+    cy.getByCy('main-content').should('have.css', 'padding-top', '103px');
+  });
+});
diff --git a/src/pages/BaseLayout/BaseLayout.test.tsx b/src/pages/BaseLayout/BaseLayout.test.tsx
@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+
+import BaseLayout from './BaseLayout';
+
+describe('<BaseLayout />', () => {
+  beforeEach(() => {
+    render(
+      <BaseLayout>
+        <div data-cy="children">
+          <p>children</p>
+        </div>
+      </BaseLayout>,
+    );
+  });
+
+  it('should render the header', () => {
+    screen.getByTestId('header');
+  });
+
+  it('should render the footer', () => {
+    screen.getByTestId('footer');
+  });
+
+  it('should render the main content', () => {
+    screen.getByTestId('main-content');
+  });
+
+  it('should render the children', () => {
+    screen.getByTestId('children');
+  });
+});
diff --git a/src/pages/BaseLayout/BaseLayout.tsx b/src/pages/BaseLayout/BaseLayout.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Header from '@components/Header';
+import Footer from '@components/Footer';
+
+import * as S from './styles';
+
+type BaseLayoutProps = {
+  children: React.ReactNode;
+};
+
+const BaseLayout = ({ children }: BaseLayoutProps) => {
+  return (
+    <>
+      <Header />
+      <S.Main data-cy="main-content">{children}</S.Main>
+      <Footer />
+    </>
+  );
+};
+
+export default BaseLayout;
diff --git a/src/pages/BaseLayout/index.ts b/src/pages/BaseLayout/index.ts
@@ -0,0 +1 @@
+export { default } from './BaseLayout';
diff --git a/src/pages/BaseLayout/styles.ts b/src/pages/BaseLayout/styles.ts
@@ -0,0 +1,5 @@
+import styled from 'styled-components';
+
+export const Main = styled.main`
+  padding-top: 6.4375rem;
+`;