Merge pull request #148 from wizelineacademy/pruebas-julio

chore: finished 10 unit tests

src/components/Decoration.tsx

@@ -63,8 +63,6 @@ const Decoration: React.FC<DecorationProps> = ({ pathname }) => {
     if (route) {
       setImages(route)
       setLoading(false)
-    } else {
-      console.error(`No se encontró una imagen para la ruta ${rootRoute}`)
     }
   }, [pathname, rootRoute])
 

src/components/Inputs/LbMsrInput.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { LbMsrInput } from './LbMsrInput'
+import { expect, vi } from 'vitest'
+
+test('renders component with the provided label, measure and placeholder', () => {
+  render(
+    <LbMsrInput
+      label='Test Label'
+      variable='Test Variable'
+      min={0}
+      max={100}
+      measure='Test Measure'
+      value={50}
+      setValue={() => {}}
+    />,
+  )
+
+  expect(screen.getByText('Test Label')).toBeInTheDocument()
+  expect(screen.getByPlaceholderText('Test Variable')).toBeInTheDocument()
+  expect(screen.getByText('Test Measure')).toBeInTheDocument()
+})
+
+test('calls setValue when input changes', () => {
+  const setValueMock = vi.fn()
+
+  render(
+    <LbMsrInput
+      label='Test Label'
+      variable='Test Variable'
+      min={0}
+      max={100}
+      measure='Test Measure'
+      value={50}
+      setValue={setValueMock}
+    />,
+  )
+
+  const input = screen.getByPlaceholderText('Test Variable')
+  fireEvent.change(input, { target: { value: '75' } })
+
+  expect(setValueMock).toHaveBeenCalledWith(75)
+})
+
+test('sets limits for the input', async () => {
+  render(
+    <LbMsrInput
+      label='Test Label'
+      variable='Test Variable'
+      min={0}
+      max={100}
+      measure='Test Measure'
+      value={50}
+      setValue={() => {}}
+    />,
+  )
+
+  const input = screen.getByRole('spinbutton')
+  expect(input).toHaveAttribute('min', '0')
+  expect(input).toHaveAttribute('max', '100')
+})

src/components/buttons/ButtonEvaluation.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { expect, test, vi } from 'vitest'
+import ButtonEvaluation from './ButtonEvaluation.'
+
+test("displays button's text correctly", () => {
+  render(<ButtonEvaluation text='Submit' onClick={() => {}} />)
+  const buttonText = screen.getByText('Submit')
+  expect(buttonText).toBeInTheDocument()
+})
+
+test('button is disabled when disabled prop is true', () => {
+  render(<ButtonEvaluation text='Submit' disabled onClick={() => {}} />)
+  const button = screen.getByRole('button')
+  expect(button).toBeDisabled()
+})
+
+test('Calls click function when button is clicked', () => {
+  const handleClick = vi.fn()
+
+  render(<ButtonEvaluation text='Submit' onClick={handleClick} />)
+  const button = screen.getByRole('button')
+  fireEvent.click(button)
+
+  expect(handleClick).toHaveBeenCalledOnce()
+})

src/components/cards/SelectableCard.test.tsx

@@ -0,0 +1,74 @@
+import React from 'react'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { expect, test, vi } from 'vitest'
+import SelectableCard from './SelectableCard'
+import { FaDumbbell } from 'react-icons/fa'
+
+test('displays card text correctly', () => {
+  render(
+    <SelectableCard
+      text='Exercise'
+      icon={FaDumbbell}
+      selected={false}
+      toggle={() => {}}
+    />,
+  )
+  const cardElement = screen.getByText('Exercise')
+  expect(cardElement).toBeInTheDocument()
+})
+
+test('check icon is displayed when selected prop is true', () => {
+  render(
+    <SelectableCard
+      text='Exercise'
+      icon={FaDumbbell}
+      selected={true}
+      toggle={() => {}}
+    />,
+  )
+  const checkIcon = screen.getByTestId('check')
+  expect(checkIcon).toBeInTheDocument()
+})
+
+test('Shows light color when selected prop is false', () => {
+  render(
+    <SelectableCard
+      text='Exercise'
+      icon={FaDumbbell}
+      selected={false}
+      toggle={() => {}}
+    />,
+  )
+  const cardElement = screen.getByRole('button')
+  expect(cardElement).toHaveClass('bg-mid-green')
+})
+
+test('Shows dark color when selected prop is true', () => {
+  render(
+    <SelectableCard
+      text='Exercise'
+      icon={FaDumbbell}
+      selected={true}
+      toggle={() => {}}
+    />,
+  )
+  const cardElement = screen.getByRole('button')
+  expect(cardElement).toHaveClass('bg-dark-green')
+})
+
+test('Calls toggle function when clicked', () => {
+  const handleClick = vi.fn()
+
+  render(
+    <SelectableCard
+      text='Exercise'
+      icon={FaDumbbell}
+      selected={true}
+      toggle={handleClick}
+    />,
+  )
+  const cardElement = screen.getByRole('button')
+  fireEvent.click(cardElement)
+
+  expect(handleClick).toHaveBeenCalledOnce()
+})

src/components/cards/SelectableCard.tsx

@@ -27,7 +27,7 @@ const SelectableCard: React.FC<SelectableCardProps> = ({
       <div className='mr-[5%] flex w-3/5 items-center justify-around md:mr-0 md:w-full lg:justify-between'>
         <p className='text-lg font-semibold md:text-xl'>{text}</p>
         <div className='w-5 lg:mr-2'>
-          {selected && <FaCheck className='h-6 w-6' />}
+          {selected && <FaCheck data-testid='check' className='h-6 w-6' />}
         </div>
       </div>
     </button>

src/components/charts/BarChartPlot.test.tsx

@@ -0,0 +1,77 @@
+/* eslint-disable testing-library/no-container */
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { expect, vi } from 'vitest'
+import { ValueRecord } from '@/src/data/datatypes/autoeval'
+import { BarChartPlot } from './BarChartPlot'
+
+vi.mock('recharts', async () => {
+  const OriginalModule = await vi.importActual('recharts')
+  return {
+    ...OriginalModule,
+    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+      <div style={{ width: 800, height: 800 }} data-testid='barchart'>
+        {children}
+      </div>
+    ),
+  }
+})
+
+const mockData: ValueRecord[] = [
+  { name: 'A', value: 30 },
+  { name: 'B', value: 50 },
+  { name: 'C', value: 70 },
+]
+const mockTags = ['Name', 'Value']
+const mockBarColor = 'fill-emerald-500'
+const mockInfoColor = 'text-black'
+const mockXLabel = 'X Axis'
+const mockYLabel = 'Y Axis'
+
+test('renders correctly', () => {
+  render(
+    <BarChartPlot
+      data={mockData}
+      tags={mockTags}
+      barColor={mockBarColor}
+      infoColor={mockInfoColor}
+      xLabel={mockXLabel}
+      yLabel={mockYLabel}
+    />,
+  )
+
+  expect(screen.getByTestId('barchart')).toBeInTheDocument()
+})
+
+test('renders axis labels correctly', () => {
+  render(
+    <BarChartPlot
+      data={mockData}
+      tags={mockTags}
+      barColor={mockBarColor}
+      infoColor={mockInfoColor}
+      xLabel={mockXLabel}
+      yLabel={mockYLabel}
+    />,
+  )
+
+  expect(screen.getByText('X Axis')).toBeInTheDocument()
+  expect(screen.getByText('Y Axis')).toBeInTheDocument()
+})
+
+test('renders the correct amount of bars', () => {
+  const { container } = render(
+    <BarChartPlot
+      data={mockData}
+      tags={mockTags}
+      barColor={mockBarColor}
+      infoColor={mockInfoColor}
+      xLabel={mockXLabel}
+      yLabel={mockYLabel}
+    />,
+  )
+
+  const bars = container.getElementsByClassName('recharts-bar-rectangle')
+  expect(bars.length).toBe(3)
+})

src/components/charts/BarChartPlot.tsx

@@ -46,7 +46,7 @@ export const BarChartPlot: React.FC<BarChartProps> = ({
   }
 
   return (
-    <ResponsiveContainer width='100%' height='100%'>
+    <ResponsiveContainer width='100%' height='100%' data-testid='barchart'>
       <BarChart width={730} height={250} data={data}>
         <XAxis
           dataKey='name'

src/components/charts/LineChartPlot.test.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable testing-library/no-container */
+
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import { expect, vi } from 'vitest'
+import { ValueRecord } from '@/src/data/datatypes/autoeval'
+import { BarChartPlot } from './BarChartPlot'
+import { LineChartPlot } from './LineChartPlot'
+
+vi.mock('recharts', async () => {
+  const OriginalModule = await vi.importActual('recharts')
+  return {
+    ...OriginalModule,
+    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+      <div style={{ width: 800, height: 800 }} data-testid='linechart'>
+        {children}
+      </div>
+    ),
+  }
+})
+
+const mockData: ValueRecord[] = [
+  { name: '1', value: 30 },
+  { name: '2', value: 50 },
+  { name: '3', value: 70 },
+  { name: '4', value: 60 },
+  { name: '5', value: 65 },
+]
+const mockTags = ['Name', 'Value']
+const mockLineColor = 'fill-emerald-500'
+const mockInfoColor = 'text-black'
+const mockXLabel = 'X Axis'
+const mockYLabel = 'Y Axis'
+
+test('renders correctly', () => {
+  render(
+    <LineChartPlot
+      data={mockData}
+      tags={mockTags}
+      lineColor={mockLineColor}
+      infoColor={mockInfoColor}
+      xLabel={mockXLabel}
+      yLabel={mockYLabel}
+    />,
+  )
+
+  expect(screen.getByTestId('linechart')).toBeInTheDocument()
+})
+
+test('renders axis labels correctly', () => {
+  render(
+    <BarChartPlot
+      data={mockData}
+      tags={mockTags}
+      barColor={mockLineColor}
+      infoColor={mockInfoColor}
+      xLabel={mockXLabel}
+      yLabel={mockYLabel}
+    />,
+  )
+
+  expect(screen.getByText('X Axis')).toBeInTheDocument()
+  expect(screen.getByText('Y Axis')).toBeInTheDocument()
+})
+
+test('renders the correct amount of lines', async () => {
+  const { container } = render(
+    <LineChartPlot
+      data={mockData}
+      tags={mockTags}
+      lineColor={mockLineColor}
+      infoColor={mockInfoColor}
+      xLabel={mockXLabel}
+      yLabel={mockYLabel}
+    />,
+  )
+
+  const lines = container.getElementsByClassName('recharts-line')
+  expect(lines.length).toBe(1)
+})

src/components/scales/FaceScale.test.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import FaceScale from './FaceScale' // Import your component
+import { expect, vi } from 'vitest'
+
+test('renders each quality level with its icon', () => {
+  render(<FaceScale quality={3} setQuality={() => {}} />)
+
+  expect(screen.getByText('1')).toBeInTheDocument()
+  expect(screen.getByText('2')).toBeInTheDocument()
+  expect(screen.getByText('3')).toBeInTheDocument()
+  expect(screen.getByText('4')).toBeInTheDocument()
+  expect(screen.getByText('5')).toBeInTheDocument()
+  expect(screen.getByTestId('frown-1')).toBeInTheDocument()
+  expect(screen.getByTestId('frown-2')).toBeInTheDocument()
+  expect(screen.getByTestId('meh')).toBeInTheDocument()
+  expect(screen.getByTestId('smile-1')).toBeInTheDocument()
+  expect(screen.getByTestId('smile-2')).toBeInTheDocument()
+})
+
+test('clicking on icon calls the setQuality function', () => {
+  const setQualityMock = vi.fn()
+
+  render(<FaceScale quality={3} setQuality={setQualityMock} />)
+  fireEvent.click(screen.getByTestId('frown-2'))
+
+  expect(setQualityMock).toHaveBeenCalledWith(2)
+})
+
+test('faces display in white color except for the one matching the selected quality', () => {
+  render(<FaceScale quality={3} setQuality={() => {}} />)
+
+  expect(screen.getByTestId('frown-1')).toHaveClass('fill-white')
+  expect(screen.getByTestId('frown-2')).toHaveClass('fill-white')
+  expect(screen.getByTestId('meh')).toHaveClass('fill-yellow-500')
+  expect(screen.getByTestId('smile-1')).toHaveClass('fill-white')
+  expect(screen.getByTestId('smile-2')).toHaveClass('fill-white')
+})