Merge pull request #49 from cesarhenrq/qa

4588 feat  inital page

cypress/e2e/spec.cy.ts

@@ -1 +1,45 @@
-describe('e2e', () => {});
+describe('MetaVagas App', () => {
+  const clickTestsHelper = [
+    { whereToClick: 'Tecnologia', whatToExpect: 'filter-cards-technology' },
+    { whereToClick: 'Cargos', whatToExpect: 'filter-cards-roles' },
+    { whereToClick: 'Cidades', whatToExpect: 'filter-cards-location' },
+  ];
+
+  describe('Home Page', () => {
+    beforeEach(() => {
+      cy.visit('/');
+    });
+
+    it('should navigate to login page when click on "Entrar" in header', () => {
+      cy.getByCy('header').contains('Entrar').click();
+      cy.location('pathname').should('eq', '/login');
+    });
+
+    it('should navigate to register page when click on "Cadastrar-se gratuitamente" in header', () => {
+      cy.getByCy('header').contains('Cadastrar-se gratuitamente').click();
+      cy.location('pathname').should('eq', '/register');
+    });
+
+    it('should navigate to login page when click on "Entrar" in footer', () => {
+      cy.getByCy('footer').contains('Entrar').click();
+      cy.location('pathname').should('eq', '/login');
+    });
+
+    it('should navigate to register page when click on "Cadastrar-se gratuitamente" in footer', () => {
+      cy.getByCy('footer').contains('Cadastrar-se gratuitamente').click();
+      cy.location('pathname').should('eq', '/register');
+    });
+
+    it('should navigate to register page when click on "cadastro gratuito"', () => {
+      cy.contains('cadastro gratuito').click();
+      cy.location('pathname').should('eq', '/register');
+    });
+
+    clickTestsHelper.forEach(({ whereToClick, whatToExpect }) => {
+      it(`should navigate to ${whereToClick} page when click on ${whereToClick}`, () => {
+        cy.getByCy('filter-card-container').contains(whereToClick).click();
+        cy.getByCy(whatToExpect).should('exist');
+      });
+    });
+  });
+});

package.json

@@ -24,6 +24,7 @@
     "axios": "^1.5.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-router-dom": "^6.16.0",
     "styled-components": "^6.0.8"
   },
   "devDependencies": {

src/App.tsx

@@ -1,12 +1,12 @@
 import GlobalStyle from '@styles/global';
 
-import BaseLayout from '@pages/BaseLayout';
+import Router from '@routes/Router';
 
 export default function App() {
   return (
     <div className="App">
       <GlobalStyle />
-      <BaseLayout>it works!</BaseLayout>
+      <Router />
     </div>
   );
 }

src/components/FilterCardContainer/FilterCardContainer.cy.tsx

@@ -1,11 +1,12 @@
 import FilterCardContainer from './FilterCardContainer';
 import GlobalStyle from '@styles/global';
+import { BrowserRouter } from 'react-router-dom';
 
 const Sut = () => (
-  <>
+  <BrowserRouter>
     <GlobalStyle />
     <FilterCardContainer />
-  </>
+  </BrowserRouter>
 );
 
 describe('<FilterCardContainer />', () => {

src/components/FilterCardContainer/FilterCardContainer.test.tsx

@@ -1,10 +1,16 @@
 import { render, screen } from '@testing-library/react';
 
+import { BrowserRouter } from 'react-router-dom';
+
 import FilterCardContainer from './FilterCardContainer';
 
 describe('<FilterCardContainer />', () => {
   beforeEach(() => {
-    render(<FilterCardContainer />);
+    render(
+      <BrowserRouter>
+        <FilterCardContainer />
+      </BrowserRouter>,
+    );
   });
 
   it('should be defined', () => {

src/components/Footer/Footer.cy.tsx

@@ -1,11 +1,12 @@
 import Footer from './Footer';
 import GlobalStyle from '@styles/global';
+import { BrowserRouter } from 'react-router-dom';
 
 const Sut = () => (
-  <>
+  <BrowserRouter>
     <GlobalStyle />
     <Footer />
-  </>
+  </BrowserRouter>
 );
 
 describe('<Footer />', () => {

src/components/Footer/Footer.test.tsx

@@ -2,9 +2,17 @@ import { render, screen } from '@testing-library/react';
 
 import Footer from './Footer';
 
+import { BrowserRouter } from 'react-router-dom';
+
 describe('<Footer />', () => {
   beforeEach(() => {
-    render(<Footer />);
+    render(
+      <>
+        <BrowserRouter>
+          <Footer />
+        </BrowserRouter>
+      </>,
+    );
   });
 
   it('should render the footer', () => {

src/components/Footer/Footer.tsx

@@ -1,3 +1,5 @@
+import { useNavigate } from 'react-router';
+
 import Text from '@components/Text';
 import Button from '@components/Button';
 import { Telephone, Location, Message } from '@assets/db.icons';
@@ -18,8 +20,10 @@ const adressText = (
 );
 
 const Footer = () => {
-  const dummy = () => {
-    console.log('first');
+  const navigate = useNavigate();
+
+  const redirect = (path: string) => {
+    navigate(path);
   };
 
   return (
@@ -62,14 +66,14 @@ const Footer = () => {
       <div className="button-container" data-cy="auth-buttons">
         <Button
           label="Entrar"
-          onClick={dummy}
+          onClick={() => redirect('/login')}
           backgroundColor="purple-dark"
           fontColor="white"
           borderColor="white"
         />
         <Button
           label="Cadastrar-se gratuitamente"
-          onClick={dummy}
+          onClick={() => redirect('/register')}
           borderColor="yellow"
         />
       </div>

src/components/Header/Header.test.tsx

@@ -3,11 +3,19 @@ import { render, screen } from '@testing-library/react';
 import { expect } from '@jest/globals';
 import '@testing-library/jest-dom/extend-expect';
 
+import { BrowserRouter } from 'react-router-dom';
+
 import Header from './Header';
 
 describe('<Header />', () => {
   beforeEach(() => {
-    render(<Header />);
+    render(
+      <>
+        <BrowserRouter>
+          <Header />
+        </BrowserRouter>
+      </>,
+    );
   });
 
   it('should be defined', () => {

src/components/Header/Header.tsx

@@ -1,11 +1,15 @@
+import { useNavigate } from 'react-router-dom';
+
 import Text from '@components/Text';
 import Button from '@components/Button';
 
 import * as S from './styles';
 
 const Header = () => {
-  const dummy = () => {
-    console.log('first');
+  const navigate = useNavigate();
+
+  const redirect = (path: string) => {
+    navigate(path);
   };
   return (
     <>
@@ -23,14 +27,14 @@ const Header = () => {
         <div className="button-container">
           <Button
             label="Entrar"
-            onClick={dummy}
+            onClick={() => redirect('/login')}
             backgroundColor="purple-dark"
             fontColor="white"
             borderColor="white"
           />
           <Button
             label="Cadastrar-se gratuitamente"
-            onClick={dummy}
+            onClick={() => redirect('/register')}
             borderColor="yellow"
           />
         </div>

src/components/RegisterCard/RegisterCard.cy.tsx

@@ -1,13 +1,15 @@
 import RegisterCard from './RegisterCard';
 import GlobalStyle from '@styles/global';
 
+import { BrowserRouter } from 'react-router-dom';
+
 describe('<RegisterCard />', () => {
   beforeEach(() => {
     cy.mount(
-      <>
+      <BrowserRouter>
         <GlobalStyle />
         <RegisterCard />
-      </>,
+      </BrowserRouter>,
     );
   });
 
@@ -70,9 +72,4 @@ describe('<RegisterCard />', () => {
   it('should circle has height: 4rem', () => {
     cy.getByCy('circle').should('have.css', 'height', '64px');
   });
-
-  it('should redirect to register page when click on link', () => {
-    cy.getByCy('link').click();
-    cy.url().should('include', 'http://localhost:3000/__/');
-  });
 });

src/components/RegisterCard/RegisterCard.test.tsx

@@ -1,10 +1,18 @@
 import { render, screen } from '@testing-library/react';
 
+import { BrowserRouter } from 'react-router-dom';
+
 import RegisterCard from './RegisterCard';
 
 describe('<RegisterCard />', () => {
   beforeEach(() => {
-    render(<RegisterCard />);
+    render(
+      <>
+        <BrowserRouter>
+          <RegisterCard />
+        </BrowserRouter>
+      </>,
+    );
   });
 
   it('should be defined', () => {

src/components/RegisterCard/RegisterCard.tsx

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom';
+
 import BaseCard from '@components/BaseCard';
 import Text from '@components/Text';
 import { Person } from '@assets/db.icons';
@@ -8,9 +10,9 @@ const RegisterCard = () => {
   const textLabel = (
     <span>
       Faça seu{' '}
-      <a href="http://localhost:3000/__/" data-cy="link">
+      <Link to="/register" data-cy="link">
         cadastro gratuito
-      </a>{' '}
+      </Link>{' '}
       e encontre vagas de acordo com seu perfil.
     </span>
   );

src/components/SearchBar/SearchBar.tsx

@@ -22,7 +22,7 @@ const SearchBar = () => {
   };
 
   return (
-    <S.Container className="search-bar">
+    <S.Container className="search-bar" data-cy="search-bar">
       <div className="search-form">
         <div className="form-group">
           <label htmlFor="magnifier">
@@ -59,6 +59,7 @@ const SearchBar = () => {
               <Button
                 label={search}
                 onClick={() => handleRecentSearch(search)}
+                key={search}
                 fontSize="small"
                 fontColor="purple-light"
                 backgroundColor="white"

src/components/SearchBar/styles.ts

@@ -16,7 +16,7 @@ export const Container = styled.div`
     margin-bottom: 1rem;
 
     .input-with-icon {
-      width: 28rem;
+      width: 27rem;
     }
 
     .form-group {

src/components/SubHeader/Sub.header.tsx

@@ -5,7 +5,7 @@ import * as S from './styles';
 
 const SubHeader = () => {
   return (
-    <S.SubHeader>
+    <S.SubHeader data-cy="sub-header">
       <div className="text-container">
         <Text
           label="MAIS DE 12.000 VAGAS DE TECNOLOGIA, REUNIDAS EM UM SÓ LUGAR"

src/components/SubHeader/styles.ts

@@ -2,7 +2,7 @@ import styled from 'styled-components';
 
 export const SubHeader = styled.header`
   background-color: var(--purple-dark);
-  width: 100vw;
+  width: 100%;
   display: flex;
   justify-content: space-between;
   padding: 1.25rem 8.438rem;

src/pages/BaseLayout/BaseLayout.cy.tsx

@@ -1,13 +1,15 @@
 import BaseLayout from './BaseLayout';
 import GlobalStyle from '@styles/global';
 
+import { BrowserRouter } from 'react-router-dom';
+
 const Sut = () => (
-  <>
+  <BrowserRouter>
     <GlobalStyle />
     <BaseLayout>
       <div>children</div>
     </BaseLayout>
-  </>
+  </BrowserRouter>
 );
 
 describe('<BaseLayout />', () => {

src/pages/BaseLayout/BaseLayout.test.tsx

@@ -2,14 +2,18 @@ import { render, screen } from '@testing-library/react';
 
 import BaseLayout from './BaseLayout';
 
+import { BrowserRouter } from 'react-router-dom';
+
 describe('<BaseLayout />', () => {
   beforeEach(() => {
     render(
-      <BaseLayout>
-        <div data-cy="children">
-          <p>children</p>
-        </div>
-      </BaseLayout>,
+      <BrowserRouter>
+        <BaseLayout>
+          <div data-cy="children">
+            <p>children</p>
+          </div>
+        </BaseLayout>
+      </BrowserRouter>,
     );
   });