Merge pull request #58 from TiagoM13/feature/pokedex

Feature/pokedex

.gitignore

@@ -11,6 +11,7 @@ node_modules
 dist
 dist-ssr
 *.local
+coverage
 
 # Editor directories and files
 .vscode/*

jest.config.js

@@ -2,7 +2,7 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'jest-environment-jsdom',
-  setupFilesAfterEnv: ['<rootDir>/jest/setup-tests.js'],
+  setupFilesAfterEnv: ['<rootDir>/jest/setup-tests.ts'],
   moduleNameMapper: {
     '\\.(gif|ttf|eot|svg|png)$': '<rootDir>/jest/__mocks__/setupMock.js',
     '\\.(css|less|sass|scss)$': 'identity-obj-proxy',

jest/setup-tests.ts

@@ -0,0 +1,11 @@
+import '@testing-library/jest-dom';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+
+export const mockPokemons = [
+  { id: 1, name: 'Pikachu' },
+  { id: 2, name: 'Charmander' },
+];
+
+const mock = new MockAdapter(axios);
+mock.onGet(process.env.VITE_URL_API).reply(200, mockPokemons);

src/components/Anchor/__test__/Anchor.spec.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import { Anchor } from '../Anchor';
+
+describe('<Anchor/>', () => {
+  it('should render anchor with correct URL', () => {
+    const link = 'https:google.com';
+    const { getByText } = render(<Anchor url={link}>Link Teste</Anchor>);
+
+    const anchorElement = getByText('Link Teste');
+
+    expect(anchorElement).toBeTruthy();
+    expect(anchorElement).toHaveAttribute('href', link);
+  });
+
+  it('should have "noreferrer" in the "rel" attribute', () => {
+    const { getByText } = render(
+      <Anchor url="https://example.com">Link Text</Anchor>
+    );
+    const anchorElement = getByText('Link Text');
+
+    expect(anchorElement).toHaveAttribute('rel', 'noreferrer');
+  });
+
+  it('should apply hover styles correctly', () => {
+    const { getByText } = render(
+      <Anchor url="https://example.com">Link Text</Anchor>
+    );
+    const anchorElement = getByText('Link Text');
+
+    expect(anchorElement).toHaveClass('hover:scale-105');
+    expect(anchorElement).toHaveClass('hover:border-blue-700');
+    expect(anchorElement).toHaveClass('hover:text-blue-700');
+  });
+});

src/components/Button/__tests__/Button.spec.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+
+import { Button } from '@components';
+import { fireEvent, render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('<Button/>', () => {
+  beforeEach(() => {
+    window.scrollTo = jest.fn();
+  });
+
+  it('renders the button component', () => {
+    const { getByTitle } = render(<Button />);
+    const buttonElement = getByTitle('back to the top');
+
+    expect(buttonElement).toBeInTheDocument();
+  });
+
+  it('should  button be hidden when height is false', () => {
+    const { getByTitle } = render(<Button />);
+    const buttonElement = getByTitle('back to the top');
+
+    jest.spyOn(React, 'useState').mockReturnValue([false, jest.fn()]);
+
+    userEvent.click(buttonElement);
+
+    expect(buttonElement).not.toBeVisible();
+  });
+
+  it('should the display none for the button', () => {
+    const { getByTitle } = render(<Button />);
+    const buttonElement = getByTitle('back to the top');
+
+    expect(buttonElement).toHaveStyle('display: none');
+  });
+
+  it('should scrolls to top when button is clicked', () => {
+    const { getByTitle } = render(<Button />);
+    const buttonElement = getByTitle('back to the top');
+
+    const scrollToSpy = jest.spyOn(window, 'scrollTo');
+
+    fireEvent.click(buttonElement);
+
+    expect(scrollToSpy).toHaveBeenCalledWith({ top: 0, behavior: 'smooth' });
+
+    scrollToSpy.mockRestore();
+  });
+});

src/components/DetailsCard/__tests__/BaseStats.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import { BaseStats } from '../components';
+
+describe('<BaseStats/>', () => {
+  it('should render correctly component', () => {
+    const mockStats = [
+      {
+        base_stat: 100,
+        effort: 90,
+        stat: {
+          name: 'hp',
+        },
+      },
+      {
+        base_stat: 80,
+        effort: 70,
+        stat: {
+          name: 'attack',
+        },
+      },
+    ];
+
+    const { getByText } = render(<BaseStats stats={mockStats} />);
+
+    expect(getByText('Base Stats')).toBeTruthy();
+    expect(getByText(mockStats[0].stat.name)).toBeTruthy();
+    expect(getByText(mockStats[0].base_stat)).toBeTruthy();
+    expect(getByText(mockStats[1].stat.name)).toBeTruthy();
+    expect(getByText(mockStats[1].base_stat)).toBeTruthy();
+  });
+});

src/components/DetailsCard/__tests__/Box.spec.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import { Box } from '../components';
+
+describe('<Box/>', () => {
+  it('should render correctly component', () => {
+    const { getByText } = render(<Box text="Title" />);
+
+    const boxElement = getByText('Title');
+
+    expect(boxElement).toBeTruthy();
+  });
+});

src/components/DetailsCard/__tests__/DetailsCard.spec.tsx

@@ -0,0 +1,124 @@
+import React from 'react';
+
+import { expect } from '@jest/globals';
+import { act, fireEvent, render } from '@testing-library/react';
+import { formatHeightWeight, getNumberOrderFormat } from '@utils';
+
+import { DetailsCard } from '../DetailsCard';
+
+describe('<DetailsCard/>', () => {
+  const mockDetailsCard = {
+    id: 6,
+    name: 'Charizard',
+    img: 'http://charizard.png',
+    types: [
+      {
+        type: { name: 'FIRE' },
+      },
+    ],
+    weight: 100,
+    height: 100,
+    abilities: [
+      {
+        ability: { name: 'Choque' },
+      },
+    ],
+    stats: [
+      {
+        base_stat: 100,
+        effort: 90,
+        stat: { name: 'hp' },
+      },
+    ],
+  };
+
+  it('should render correctly', () => {
+    const { getByText, queryAllByText } = render(
+      <DetailsCard
+        id={mockDetailsCard.id}
+        name={mockDetailsCard.name}
+        img={mockDetailsCard.img}
+        types={mockDetailsCard.types}
+        height={mockDetailsCard.height}
+        weight={mockDetailsCard.weight}
+        abilities={mockDetailsCard.abilities}
+        stats={mockDetailsCard.stats}
+      />
+    );
+
+    // on the screen
+    expect(getByText('Info')).toBeTruthy();
+    expect(getByText('Stats')).toBeTruthy();
+    expect(getByText(mockDetailsCard.name)).toBeTruthy();
+    expect(getByText(getNumberOrderFormat(mockDetailsCard.id))).toBeTruthy();
+    expect(getByText(mockDetailsCard.types[0].type.name)).toBeTruthy();
+    expect(getByText(mockDetailsCard.abilities[0].ability.name)).toBeTruthy();
+    expect(
+      getByText(`${formatHeightWeight(mockDetailsCard.height)} kg`)
+    ).toBeTruthy();
+    expect(
+      getByText(`${formatHeightWeight(mockDetailsCard.weight)} m`)
+    ).toBeTruthy();
+
+    // is not on screen
+    expect(
+      queryAllByText(mockDetailsCard.stats[0].stat.name).length
+    ).not.toBeTruthy();
+    expect(
+      queryAllByText(mockDetailsCard.stats[0].base_stat).length
+    ).not.toBeTruthy();
+  });
+
+  it('should render pokemon "stats" data', () => {
+    const { getByText, queryAllByText } = render(
+      <DetailsCard
+        id={mockDetailsCard.id}
+        name={mockDetailsCard.name}
+        img={mockDetailsCard.img}
+        types={mockDetailsCard.types}
+        height={mockDetailsCard.height}
+        weight={mockDetailsCard.weight}
+        abilities={mockDetailsCard.abilities}
+        stats={mockDetailsCard.stats}
+      />
+    );
+
+    expect(getByText('Info')).toBeTruthy();
+    expect(getByText('Stats')).toBeTruthy();
+    expect(getByText(mockDetailsCard.name)).toBeTruthy();
+    expect(getByText(getNumberOrderFormat(mockDetailsCard.id))).toBeTruthy();
+    expect(getByText(mockDetailsCard.types[0].type.name)).toBeTruthy();
+    expect(getByText(mockDetailsCard.abilities[0].ability.name)).toBeTruthy();
+    expect(
+      getByText(`${formatHeightWeight(mockDetailsCard.height)} kg`)
+    ).toBeTruthy();
+    expect(
+      getByText(`${formatHeightWeight(mockDetailsCard.weight)} m`)
+    ).toBeTruthy();
+
+    act(() => {
+      fireEvent.click(getByText('Stats'));
+    });
+
+    // on the screen
+    expect(getByText('Info')).toBeTruthy();
+    expect(getByText('Stats')).toBeTruthy();
+    expect(getByText(mockDetailsCard.name)).toBeTruthy();
+    expect(getByText(getNumberOrderFormat(mockDetailsCard.id))).toBeTruthy();
+    expect(getByText(mockDetailsCard.types[0].type.name)).toBeTruthy();
+    expect(getByText('Base Stats')).toBeTruthy();
+    expect(getByText(mockDetailsCard.stats[0].stat.name)).toBeTruthy();
+    expect(getByText(mockDetailsCard.stats[0].base_stat)).toBeTruthy();
+
+    // is not on screen
+    expect(
+      queryAllByText(mockDetailsCard.abilities[0].ability.name).length
+    ).not.toBeTruthy();
+    expect(
+      queryAllByText(`${formatHeightWeight(mockDetailsCard.height)} kg`).length
+    ).not.toBeTruthy();
+    expect(
+      queryAllByText(`${formatHeightWeight(mockDetailsCard.weight)} m`).length
+    ).not.toBeTruthy();
+  });
+});

src/components/DetailsCard/__tests__/InfoBox.spec.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+import { X } from 'phosphor-react';
+
+import { InfoBox } from '../components';
+
+describe('<InfoBox/>', () => {
+  it('should render correctly component', () => {
+    const { getByText } = render(
+      <InfoBox
+        title="Title"
+        icon={<X data-testid="icon" />}
+        component={<p>Paragraph</p>}
+      />
+    );
+
+    const titleElement = getByText('Title');
+    const paragraphElement = getByText('Paragraph');
+    const iconElement = getByText('Paragraph');
+
+    expect(titleElement).toBeTruthy();
+    expect(paragraphElement).toBeTruthy();
+    expect(iconElement).toBeTruthy();
+  });
+});

src/components/DetailsCard/__tests__/InfoCard.spec.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+import { formatHeightWeight } from '@utils';
+
+import { InfoCard } from '../components';
+
+describe('<InfoCard/>', () => {
+  it('should render correctly component', () => {
+    const mockInfo = {
+      weight: 170,
+      height: 13,
+      abilities: [
+        {
+          ability: {
+            name: 'Power Fire',
+          },
+        },
+      ],
+    };
+
+    const { getByText } = render(<InfoCard info={mockInfo} />);
+
+    expect(getByText('Weight')).toBeTruthy();
+    expect(getByText(`${formatHeightWeight(mockInfo.weight)} kg`)).toBeTruthy();
+    expect(getByText('Height')).toBeTruthy();
+    expect(getByText(`${formatHeightWeight(mockInfo.height)} m`)).toBeTruthy();
+    expect(getByText('Abilities')).toBeTruthy();
+    expect(getByText(mockInfo.abilities[0].ability.name)).toBeTruthy();
+  });
+});