Rayane barbosa/testes unitarios

package.json

@@ -54,6 +54,8 @@
     "@rocketseat/eslint-config": "^2.2.2",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
     "@types/mocha": "^10.0.6",
     "@types/node": "^20.12.12",

src/components/footer/index.test.tsx

@@ -21,8 +21,6 @@ describe('AppFooter', () => {
       expect(linkElement).toBeInTheDocument()
       if (menu.href.startsWith('http')) {
         expect(linkElement.closest('a')).toHaveAttribute('href', menu.href)
-      } else {
-        expect(linkElement.closest('a')).toHaveAttribute('href', menu.href)
       }
     })
   })

src/components/footer/socials.test.tsx

@@ -0,0 +1,20 @@
+import { socials } from './socials'
+
+describe('socials', () => {
+  it('should have at least one social link', () => {
+    expect(socials.length).toBeGreaterThan(0)
+  })
+
+  it('should have valid href values', () => {
+    socials.forEach((social) => {
+      expect(social.href).toMatch(/^https?:\/\/[^\s/$.?#].[^\s]*$/)
+    })
+  })
+
+  it('should have valid icon components', () => {
+    socials.forEach((social) => {
+      expect(social.icon).toBeDefined()
+      expect(typeof social.icon).toBe('object')
+    })
+  })
+})

src/components/header/index.test.tsx

@@ -0,0 +1,65 @@
+import { AppHeader } from '@/components/header'
+import '@testing-library/jest-dom'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { BrowserRouter as Router } from 'react-router-dom'
+
+jest.mock('@/hooks/useIsMobile', () => ({
+  useIsMobile: () => true,
+}))
+
+jest.mock('@uidotdev/usehooks', () => ({
+  useWindowScroll: () => [{ y: 0 }],
+}))
+
+describe('AppHeader', () => {
+  it('renders without crashing', () => {
+    render(
+      <Router>
+        <AppHeader />
+      </Router>,
+    )
+  })
+  it('displays the hamburger menu icon on mobile', () => {
+    render(
+      <Router>
+        <AppHeader />
+      </Router>,
+    )
+    const hamburgerMenuIcon = screen.getByRole('button')
+    expect(hamburgerMenuIcon).toBeInTheDocument()
+  })
+
+  it('displays the navigation menu when the hamburger menu icon is clicked', () => {
+    render(
+      <Router>
+        <AppHeader />
+      </Router>,
+    )
+    const hamburgerMenuIcon = screen.getByRole('button')
+    fireEvent.click(hamburgerMenuIcon)
+    const navMenu = screen.getByRole('navigation')
+    expect(navMenu).toBeInTheDocument()
+  })
+
+  it('displays the "Voltar à home" link when not on the home page', () => {
+    window.history.pushState({}, '', '/not-home')
+    render(
+      <Router>
+        <AppHeader />
+      </Router>,
+    )
+    const link = screen.getByText('Voltar à home')
+    expect(link).toBeInTheDocument()
+  })
+
+  it('displays the "Cadastrar um pet" link when not on the subscription page', () => {
+    window.history.pushState({}, '', '/not-subscription')
+    render(
+      <Router>
+        <AppHeader />
+      </Router>,
+    )
+    const link = screen.getByText('Cadastrar um pet')
+    expect(link).toBeInTheDocument()
+  })
+})

src/components/header/index.tsx

@@ -9,7 +9,7 @@ import { Fragment, useState } from 'react'
 import { Link, useLocation } from 'react-router-dom'
 import { Link as ScrollLink } from 'react-scroll'
 import { Logo } from '../logo'
-import { Button } from '../ui/button'
+import { Button } from '../ui/components/button/button'
 
 const menus = [
   {

src/components/join-us/index.test.tsx

@@ -0,0 +1,32 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import { JoinUs } from './index'
+
+describe('JoinUs component', () => {
+  beforeEach(() => {
+    render(<JoinUs />)
+  })
+
+  it('renders without crashing', () => {
+    const joinUsElement = screen.getByText(/Faça parte da nossa equipe/i)
+    expect(joinUsElement).toBeInTheDocument()
+  })
+
+  it('contains a Paw component', () => {
+    const pawElement = screen.getByTestId('join-us-paw')
+    expect(pawElement).toBeInTheDocument()
+  })
+
+  it('contains a Button component', () => {
+    const buttonElement = screen.getByTestId('join-us-button')
+    expect(buttonElement).toBeInTheDocument()
+  })
+
+  it('contains a link to the Discord server', () => {
+    const linkElement = screen.getByRole('link')
+    expect(linkElement).toHaveAttribute(
+      'href',
+      'https://discord.com/invite/Pr2BZmUG',
+    )
+  })
+})

src/components/join-us/index.tsx

@@ -1,12 +1,15 @@
 import { ChevronRight } from 'lucide-react'
 import { Paw } from '../paw'
-import { Button } from '../ui/button'
+import { Button } from '../ui/components/button/button'
 
 export function JoinUs() {
   return (
     <section className="bg-primary-500 py-10 text-white lg:py-20">
       <div className="container">
-        <Paw className="mx-auto mb-2.5 size-10 lg:mb-11 lg:h-[68px] lg:w-[72px]" />
+        <Paw
+          data-testid="join-us-paw"
+          className="mx-auto mb-2.5 size-10 lg:mb-11 lg:h-[68px] lg:w-[72px]"
+        />
 
         <h2 className="mb-6 text-balance text-center text-2xl font-bold lg:mb-11 lg:text-5xl">
           Faça parte da nossa equipe
@@ -20,6 +23,7 @@ export function JoinUs() {
         </p>
 
         <Button
+          data-testid="join-us-button"
           asChild
           className="mx-auto mt-7 flex h-auto w-full gap-1 bg-white px-6 py-3 text-base font-semibold text-primary hover:bg-white/80 lg:mt-14 lg:w-fit"
         >

src/components/others-platforms/index.test.tsx

@@ -0,0 +1,22 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import { OthersPlatforms } from '.'
+
+describe('OthersPlatforms', () => {
+  test('renders without crashing', () => {
+    render(<OthersPlatforms />)
+    expect(screen).not.toBeNull()
+  })
+
+  test('contains the heading', () => {
+    render(<OthersPlatforms />)
+    const heading = screen.getByText(/Explore Mais Opções/i)
+    expect(heading).toBeInTheDocument()
+  })
+
+  test('contains the paragraph text', () => {
+    render(<OthersPlatforms />)
+    const paragraph = screen.getByText(/Se você ainda não encontrou seu pet/i)
+    expect(paragraph).toBeInTheDocument()
+  })
+})

src/components/pet-card/index.test.tsx

@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import { PetCard } from '.'
+
+describe('PetCard', () => {
+  const mockProps = {
+    id: 1,
+    imageSrc: 'testImageSrc',
+    title: 'testTitle',
+    description: 'testDescription',
+    specie: 'testSpecie',
+    size: 'testSize',
+    color: 'testColor',
+  }
+  it('displays the correct title', () => {
+    render(<PetCard {...mockProps} />)
+    expect(screen.getByText(mockProps.title)).toBeInTheDocument()
+  })
+
+  it('displays the correct description', () => {
+    render(<PetCard {...mockProps} />)
+    expect(screen.getByText(mockProps.description)).toBeInTheDocument()
+  })
+})

src/components/pet-card/index.tsx

@@ -5,10 +5,10 @@ import {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
-} from '@/components/ui/dialog'
+} from '@/components/ui/components/dialog/dialog'
 import { ChevronRight, ZoomIn } from 'lucide-react'
 import { Link } from 'react-router-dom'
-import { Button } from '../ui/button'
+import { Button } from '../ui/components/button/button'
 
 interface PetCardProps {
   id: number

src/components/ui/components/button/button.test.tsx

@@ -0,0 +1,28 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import { Button } from './button'
+
+describe('Button', () => {
+  it('renders correctly with default props', () => {
+    render(<Button />)
+    const button = screen.getByRole('button')
+    expect(button).toBeInTheDocument()
+    expect(button).toHaveClass(
+      'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+    )
+  })
+
+  it('renders correctly with variant prop', () => {
+    render(<Button variant="destructive" />)
+    const button = screen.getByRole('button')
+    expect(button).toHaveClass(
+      'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+    )
+  })
+
+  it('renders correctly with size prop', () => {
+    render(<Button size="lg" />)
+    const button = screen.getByRole('button')
+    expect(button).toHaveClass('h-10 rounded-md px-8')
+  })
+})

src/components/ui/button.tsx → src/components/ui/components/button/button.tsx

@@ -1,6 +1,6 @@
-import * as React from 'react'
 import { Slot } from '@radix-ui/react-slot'
 import { cva, type VariantProps } from 'class-variance-authority'
+import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 

src/components/ui/components/dialog/dialog.test.tsx

@@ -0,0 +1,35 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from './dialog'
+
+describe('Dialog Component', () => {
+  it('renders without crashing', () => {
+    render(
+      <Dialog>
+        <DialogTrigger>Open Dialog</DialogTrigger>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Dialog Title</DialogTitle>
+            <DialogClose>Close</DialogClose>
+          </DialogHeader>
+          <DialogDescription>Dialog Description</DialogDescription>
+          <DialogFooter>
+            <button>Cancel</button>
+            <button>Save</button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>,
+    )
+
+    expect(screen.findByRole('dialog')).toBeDefined()
+  })
+})

src/components/ui/components/image-with-loader/image-with-loader.test.tsx

@@ -0,0 +1,25 @@
+import { render } from '@testing-library/react'
+import { ImageWithLoader } from './image-with-loader'
+import '@testing-library/jest-dom'
+
+describe('ImageWithLoader', () => {
+  it('renders without errors', () => {
+    render(<ImageWithLoader src="test.jpg" alt="Test Image" />)
+  })
+
+  it('renders with the correct alt text', () => {
+    const altText = 'Test Image'
+    const { getByAltText } = render(
+      <ImageWithLoader src="test.jpg" alt={altText} />,
+    )
+    expect(getByAltText(altText)).toBeInTheDocument()
+  })
+
+  it('applies the provided className', () => {
+    const className = 'custom-class'
+    const { container } = render(
+      <ImageWithLoader src="test.jpg" alt="Test Image" className={className} />,
+    )
+    expect(container.firstChild).toHaveClass(className)
+  })
+})

src/components/ui/components/input/input-masked.test.tsx

@@ -0,0 +1,20 @@
+import '@testing-library/jest-dom'
+import { render, screen } from '@testing-library/react'
+import React from 'react'
+import { MaskedInput } from './input-masked'
+
+describe('MaskedInput', () => {
+  it('renders without errors', () => {
+    render(<MaskedInput />)
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+  })
+  it('renders with custom class name', () => {
+    render(<MaskedInput className="custom-input" />)
+    expect(screen.getByRole('textbox')).toHaveClass('custom-input')
+  })
+  it('forwards ref to the input element', () => {
+    const ref = React.createRef<HTMLInputElement>()
+    render(<MaskedInput ref={ref} />)
+    expect(ref.current).toBeInstanceOf(HTMLInputElement)
+  })
+})

src/components/ui/components/input/input.test.tsx

@@ -0,0 +1,30 @@
+import '@testing-library/jest-dom'
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+import { Input } from './input'
+
+describe('Input', () => {
+  test('renders without errors', () => {
+    render(<Input />)
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+  })
+
+  test('renders with custom class name', () => {
+    render(<Input className="custom-input" />)
+    expect(screen.getByRole('textbox')).toHaveClass('custom-input')
+  })
+
+  test('forwards ref to the input element', () => {
+    const ref = React.createRef<HTMLInputElement>()
+    render(<Input ref={ref} />)
+    expect(ref.current).toBeInstanceOf(HTMLInputElement)
+  })
+
+  test('triggers onChange event', () => {
+    const handleChange = jest.fn()
+    render(<Input onChange={handleChange} />)
+    fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
+    expect(handleChange).toHaveBeenCalledTimes(1)
+    expect(handleChange).toHaveBeenCalledWith(expect.any(Object))
+  })
+})