Merge pull request #19 from gabrielduete/test/resolve-todo-tests

pages/index.tsx

@@ -1,20 +1,23 @@
-import Introduction from '~/src/components/Introduction'
-import Header from '~/src/components/Header'
-import SectionServices from '~/src/components/SectionServices'
-import SectionProviders from '~/src/components/SectionProviders'
-import SectionApps from '~/src/components/SectionApps'
-import Articles from '~/src/components/Articles'
-import Footer from '~/src/components/Footer'
-import Depoiments from '~/src/components/Depoiments'
+import React from 'react'
+import {
+  Intro,
+  Header,
+  Services,
+  Providers,
+  Apps,
+  Articles,
+  Footer,
+  Depoiments,
+} from '../src/components/components'
 
 const Home = () => {
   return (
     <main>
       <Header />
-      <Introduction />
-      <SectionServices />
-      <SectionProviders />
-      <SectionApps />
+      <Intro />
+      <Services />
+      <Providers />
+      <Apps />
       <Depoiments />
       <Articles />
       <Footer />

src/components/Articles/index.tsx

@@ -7,7 +7,7 @@ const Articles = () => {
     <>
       <section
         className='flex flex-col items-center justify-center mt-48 mb-52 max-md:px-4 px-48'
-        id='aboutUs'
+        id='about'
       >
         <Title fontSize='text-3xl' hasLine={true} linePositionCenter={true}>
           Check out our latest article

src/components/Depoiments/Arrows/index.tsx

@@ -14,6 +14,7 @@ const Arrows = () => {
         className={`cursor-pointer ${
           firstStep ? 'text-sky-300' : 'text-blue-500'
         }`}
+        data-testid='depoiments-arrow__id-arrowBack'
         onClick={() => prevStep()}
       />
       <div className='flex gap-4'>
@@ -23,8 +24,9 @@ const Arrows = () => {
               className={`w-2.5	h-2.5 rounded-full cursor-pointer ${
                 id === step ? 'bg-blue-500' : 'bg-sky-300'
               }`}
-              onClick={() => goToStep(id)}
+              data-testid={`depoiments-arrow__id-${id}`}
               key={id}
+              onClick={() => goToStep(id)}
             />
           )
         })}
@@ -33,6 +35,7 @@ const Arrows = () => {
         className={`cursor-pointer ${
           lastStep ? 'text-sky-300' : 'text-blue-500'
         }`}
+        data-testid='depoiments-arrow__id-arrowForward'
         onClick={() => nextStep()}
       />
     </div>

src/components/Depoiments/Depoiments.data.ts

@@ -13,7 +13,7 @@ export const DEPOIMENTS = [
       'https://media.discordapp.net/attachments/778024116140769331/1151700614275936326/presidente.png?width=671&height=671',
     name: 'Gabriel Duete',
     jobRole: 'Presidente da república',
-    depoiment: 'Eu como presidente, Digo: Esse site é bala demais!',
+    depoiment: 'Eu como presidente, digo: Esse site é bala demais!',
     id: 1,
   },
   {

src/components/Depoiments/Depoiments.spec.tsx

@@ -1,6 +1,7 @@
-import { render, screen } from '@testing-library/react'
+import { fireEvent, render, screen } from '@testing-library/react'
 
 import Depoiments from '.'
+import { DEPOIMENTS } from './Depoiments.data'
 import { DepoimentsStorage } from './context'
 
 describe('<Depoiments />', () => {
@@ -13,8 +14,35 @@ describe('<Depoiments />', () => {
   })
 
   it('should render title correctly', () => {
-    screen.getByText('What our customer are saying')
+    expect(screen.getByText('What our customer are saying')).toBeInTheDocument()
   })
 
-  it.todo('test slide')
+  it.each(Array.from(Array(4).keys()))(
+    'should render %s step correctly when current button is clicked',
+    id => {
+      const button = screen.getByTestId(`depoiments-arrow__id-${id}`)
+
+      fireEvent.click(button)
+
+      expect(screen.getByText(DEPOIMENTS[id].jobRole)).toBeInTheDocument()
+    }
+  )
+
+  it('should render prev step when arrow back is clicked', () => {
+    const arrow = screen.getByTestId('depoiments-arrow__id-arrowBack')
+    const button = screen.getByTestId('depoiments-arrow__id-1')
+
+    fireEvent.click(button)
+    fireEvent.click(arrow)
+
+    expect(screen.getByText(DEPOIMENTS[0].jobRole)).toBeInTheDocument()
+  })
+
+  it('should render next step when arrow forward is clicked', () => {
+    const arrow = screen.getByTestId('depoiments-arrow__id-arrowForward')
+
+    fireEvent.click(arrow)
+
+    expect(screen.getByText(DEPOIMENTS[1].jobRole)).toBeInTheDocument()
+  })
 })

src/components/Depoiments/index.tsx

@@ -8,7 +8,7 @@ const Depoiments = () => {
     <DepoimentsStorage>
       <section
         className='flex flex-col items-center justify-center px-9 mb-56'
-        id='depoiments'
+        id='testimonials'
       >
         <Cards />
         <Arrows />

src/components/Footer/Footer.data.ts

@@ -1,8 +1,16 @@
-const items = [
+export const itemsLinks = [
   {
     title: 'Company',
-    texts: ['About', 'Testimonials', 'Find a doctor', 'Apps'],
+    texts: [
+      { text: 'About', id: 'about' },
+      { text: 'Testimonials', id: 'testimonials' },
+      { text: 'Find a doctor', id: 'find-doctor' },
+      { text: 'Apps', id: 'apps' },
+    ],
   },
+]
+
+export const itemsCommons = [
   {
     title: 'Region',
     texts: ['Idonesia', 'Singapore', 'Hongkong', 'Canada'],
@@ -12,5 +20,3 @@ const items = [
     texts: ['Help center', 'Contact support', 'Instructions', 'How it works'],
   },
 ]
-
-export default items

src/components/Footer/Footer.spec.tsx

@@ -1,16 +1,12 @@
 import { render, screen } from '@testing-library/react'
 
-import items from './Footer.data'
-
 import Footer from '.'
 
 describe('<Footer />', () => {
   beforeEach(() => {
     render(<Footer />)
   })
 
-  const itemsTexts = items.map(item => item.title)
-
   it('should section about correctly', () => {
     expect(
       screen.getByText(
@@ -21,8 +17,4 @@ describe('<Footer />', () => {
       screen.getByText(/Trafalgar PTY LTD 2020. All rights reserved/i)
     ).toBeInTheDocument()
   })
-
-  it.each(itemsTexts)('shold render %s section items correctly', title => {
-    expect(screen.getByText(title)).toBeInTheDocument()
-  })
 })

src/components/Footer/Items/Commons/Commons.spec.tsx

@@ -0,0 +1,23 @@
+import Commons from '.'
+
+import { itemsCommons } from '../../Footer.data'
+
+import { render, screen } from '@testing-library/react'
+
+describe('<Commons />', () => {
+  beforeEach(() => {
+    render(
+      <Commons title={itemsCommons[0].title} items={itemsCommons[0].texts} />
+    )
+  })
+
+  const texts = itemsCommons[0].texts
+
+  it('should render title correctly', () => {
+    screen.getByText(itemsCommons[0].title)
+  })
+
+  it.each(texts)('shold render %s texts correctly', text => {
+    expect(screen.getByText(text)).toBeInTheDocument()
+  })
+})

src/components/Footer/Item/index.tsx → src/components/Footer/Items/Commons/index.tsx

@@ -1,11 +1,11 @@
-import Title from '../../Title'
+import Title from '../../../Title'
 
-type ItemProps = {
+type CommonsProps = {
   title: string
   items: string[]
 }
 
-const Item = ({ title, items }: ItemProps) => {
+const Commons = ({ title, items }: CommonsProps) => {
   return (
     <div>
       <Title color='white'>{title}</Title>
@@ -22,4 +22,4 @@ const Item = ({ title, items }: ItemProps) => {
   )
 }
 
-export default Item
+export default Commons

src/components/Footer/Items/Links/Links.spec.tsx

@@ -0,0 +1,21 @@
+import Links from '.'
+
+import { render, screen } from '@testing-library/react'
+
+import { itemsLinks } from '../../Footer.data'
+
+describe('<Links />', () => {
+  beforeEach(() => {
+    render(<Links title={itemsLinks[0].title} items={itemsLinks[0].texts} />)
+  })
+
+  const texts = itemsLinks[0].texts.map(item => item.text)
+
+  it('should render title correctly', () => {
+    screen.getByText(itemsLinks[0].title)
+  })
+
+  it.each(texts)('shold render %s texts correctly', text => {
+    expect(screen.getByText(text)).toBeInTheDocument()
+  })
+})

src/components/Footer/Items/Links/index.tsx

@@ -0,0 +1,30 @@
+import Title from '../../../Title'
+
+type LinksProps = {
+  title: string
+  items: Array<{ text: string; id: string }>
+}
+
+const Links = ({ title, items }: LinksProps) => {
+  return (
+    <div>
+      <Title color='white'>{title}</Title>
+      <div className='mt-6'>
+        {items.map(({ text, id }) => {
+          return (
+            <p className='mt-2' key={id}>
+              <a
+                href={`#${id}`}
+                className='hover:text-black	delay-50 duration-500'
+              >
+                {text}
+              </a>
+            </p>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
+
+export default Links

src/components/Footer/index.tsx

@@ -1,7 +1,9 @@
 import Logo from '../Logo'
-import Item from './Item'
 
-import items from './Footer.data'
+import Links from './Items/Links'
+
+import { itemsCommons, itemsLinks } from './Footer.data'
+import Commons from './Items/Commons'
 
 const Footer = () => {
   return (
@@ -33,8 +35,9 @@ const Footer = () => {
         </p>
       </div>
       <div className='flex max-lg:flex-col gap-40 max-lg:gap-14'>
-        {items.map(({ title, texts }) => {
-          return <Item title={title} items={texts} key={title} />
+        <Links title={itemsLinks[0].title} items={itemsLinks[0].texts} />
+        {itemsCommons.map(({ title, texts }) => {
+          return <Commons title={title} items={texts} key={title} />
         })}
       </div>
     </footer>

src/components/Header/Header.data.ts

@@ -1,22 +1,22 @@
 export const TEXTS_SIDEBAR = [
   {
     name: 'Home',
-    id: 'introduction',
+    id: 'home',
   },
   {
     name: 'Find a doctor',
-    id: 'findADoctor',
+    id: 'find-doctor',
   },
   {
     name: 'Apps',
     id: 'apps',
   },
   {
     name: 'Testimonials',
-    id: 'depoiments',
+    id: 'testimonials',
   },
   {
     name: 'About us',
-    id: 'aboutUs',
+    id: 'about',
   },
 ]

src/components/Header/Header.spec.tsx

@@ -9,8 +9,10 @@ describe('<Header />', () => {
     render(<Header />)
   })
 
-  it.each(TEXTS_SIDEBAR)('should render %p correctly', text => {
-    waitFor(() => expect(screen.getByText(text)).toBeInTheDocument())
+  const texts = TEXTS_SIDEBAR.map(text => text.name)
+
+  it.each(texts)('should render %p correctly', name => {
+    waitFor(() => expect(screen.getByText(name)).toBeInTheDocument())
   })
 
   it('should render logo correctly', () => {

src/components/Introduction/index.tsx

@@ -7,7 +7,7 @@ const Introduction = () => {
   return (
     <section
       className='max-md:px-4 px-48 flex justify-center items-center gap-28 mt-28'
-      id='introduction'
+      id='home'
     >
       <div>
         <Title fontSize='text-5xl' width='max-w-[427px]'>

src/components/SectionServices/index.tsx

@@ -6,7 +6,7 @@ const SectionServices = () => {
   return (
     <section
       className='flex flex-col items-center justify-center mt-48 mb-52 max-md:px-4 px-48'
-      id='findADoctor'
+      id='find-doctor'
     >
       <Title fontSize='text-3xl' hasLine={true} linePositionCenter={true}>
         Our Services