Merge pull request #8 from ekisler/development

Reparando todos los problemas del workflow

.eslintrc.js

@@ -1,4 +1,4 @@
-#!/usr/bin/env node
+// eslint-disable-next-line no-undef
 module.exports = {
   env: {
     browser: true,

src/ErrorMessage.jsx

@@ -1,7 +1,7 @@
-import React from 'react'
+import React from "react";
 
 const ErrorMessage = ({ error }) => (
   <div data-testid="error">An error occured: {error.toString()}</div>
-)
+);
 
-export default ErrorMessage
+export default ErrorMessage;

src/LoadingSpinner.jsx

@@ -1,7 +1,11 @@
-import React from 'react'
+import React from "react";
 
 const LoadingSpinner = () => (
-  <img className="loading-spinner" alt="Loading..." src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/items/poke-ball.png" />
-)
+  <img
+    className="loading-spinner"
+    alt="Loading..."
+    src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/items/poke-ball.png"
+  />
+);
 
-export default LoadingSpinner
+export default LoadingSpinner;

src/PokemonAbility.jsx

@@ -1,12 +1,10 @@
-import React from 'react'
+import React from "react";
 
 const PokemonAbility = ({ abilityName }) => (
   <div className="pokemon-ability">
     <div className="pokemon-ability-type">Hidden ability</div>
-    <div className="pokemon-ability-name">
-      {abilityName}
-    </div>
+    <div className="pokemon-ability-name">{abilityName}</div>
   </div>
-)
+);
 
-export default PokemonAbility
+export default PokemonAbility;

src/PokemonList.jsx

@@ -1,20 +1,23 @@
-import React from 'react'
-import { Link } from 'react-router-dom'
+import React from "react";
+import { Link } from "react-router-dom";
 
 const PokemonList = ({ pokemonList }) => {
   return (
     <div className="list-container">
       {pokemonList.map(({ id, name }) => (
-        <Link key={id} to={`/pokemon/${name}`} className="list-item" style={{ backgroundImage: `url(${`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`})` }}>
-          <div
-            className="list-item-name"
-          >
-            {name}
-          </div>
+        <Link
+          key={id}
+          to={`/pokemon/${name}`}
+          className="list-item"
+          style={{
+            backgroundImage: `url(${`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png`})`,
+          }}
+        >
+          <div className="list-item-name">{name}</div>
         </Link>
       ))}
     </div>
-  )
-}
+  );
+};
 
-export default PokemonList
+export default PokemonList;

src/useApi.js

@@ -1,20 +1,20 @@
-import { useEffect, useState } from 'react'
-import axios from 'axios'
+import { useEffect, useState } from "react";
+import axios from "axios";
 
 const useApi = (url, mapResults = (result) => result) => {
-  const [data, setData] = useState()
-  const [isLoading, setIsLoading] = useState(true)
-  const [error, setError] = useState()
+  const [data, setData] = useState();
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState();
   useEffect(() => {
-    setIsLoading(true)
+    setIsLoading(true);
     axios
       .get(url)
-      .then(response => setData(mapResults(response.data)))
+      .then((response) => setData(mapResults(response.data)))
       .catch(setError)
-      .finally(() => setIsLoading(false))
-  }, [url])
+      .finally(() => setIsLoading(false));
+  }, [url]);
 
-  return { data, isLoading, error }
-}
+  return { data, isLoading, error };
+};
 
-export { useApi }
+export { useApi };

test/App.jest.spec.jsx

@@ -1,35 +1,48 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import axiosMock from 'axios'
-import { act } from 'react-dom/test-utils'
-import '@testing-library/jest-dom'
-import { BrowserRouter as Router } from 'react-router-dom'
-import App from '../src/App'
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import axiosMock from "axios";
+import { act } from "react-dom/test-utils";
+import "@testing-library/jest-dom";
+import { BrowserRouter as Router } from "react-router-dom";
+import App from "../src/App";
 
-jest.mock('axios')
+jest.mock("axios");
 
-describe('<App />', () => {
-  it('fetches data', async () => {
-    axiosMock.get.mockResolvedValueOnce(
-      {
-        data: {
-          results: [{ url: 'https://pokeapi.co/api/v2/pokemon/1/', name: 'bulbasaur', id: 1 }]
-        }
-      }
-    )
+describe("<App />", () => {
+  it("fetches data", async () => {
+    axiosMock.get.mockResolvedValueOnce({
+      data: {
+        results: [
+          {
+            url: "https://pokeapi.co/api/v2/pokemon/1/",
+            name: "bulbasaur",
+            id: 1,
+          },
+        ],
+      },
+    });
     await act(async () => {
-      render(<Router><App/></Router>)
-    })
-    expect(axiosMock.get).toHaveBeenCalledTimes(1)
-    expect(axiosMock.get).toHaveBeenCalledWith('https://pokeapi.co/api/v2/pokemon/?limit=50')
-  })
+      render(
+        <Router>
+          <App />
+        </Router>
+      );
+    });
+    expect(axiosMock.get).toHaveBeenCalledTimes(1);
+    expect(axiosMock.get).toHaveBeenCalledWith(
+      "https://pokeapi.co/api/v2/pokemon/?limit=50"
+    );
+  });
 
-  it('shows error', async () => {
-    axiosMock.get.mockRejectedValueOnce(new Error())
+  it("shows error", async () => {
+    axiosMock.get.mockRejectedValueOnce(new Error());
     await act(async () => {
-      render(<Router><App/></Router>)
-    })
-    expect(screen.getByTestId('error')).toBeVisible()
-  })
-
-})
+      render(
+        <Router>
+          <App />
+        </Router>
+      );
+    });
+    expect(screen.getByTestId("error")).toBeVisible();
+  });
+});

test/PokemonList.jest.spec.jsx

@@ -1,28 +1,30 @@
-import React from 'react'
-import { render, screen } from '@testing-library/react'
-import { BrowserRouter } from 'react-router-dom'
-import '@testing-library/jest-dom'
-import PokemonList from '../src/PokemonList'
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import "@testing-library/jest-dom";
+import PokemonList from "../src/PokemonList";
 
+const pokemonList = [
+  {
+    url: "https://pokeapi.co/api/v2/pokemon/1/",
+    name: "bulbasaur",
+    id: 1,
+  },
+  {
+    url: "https://pokeapi.co/api/v2/pokemon/133/",
+    name: "eevee",
+    id: 133,
+  },
+];
 
-const pokemonList = [{
-  url: 'https://pokeapi.co/api/v2/pokemon/1/',
-  name: 'bulbasaur',
-  id: 1
-}, {
-  url: 'https://pokeapi.co/api/v2/pokemon/133/',
-  name: 'eevee',
-  id: 133
-}]
-
-describe('<PokemonList />', () => {
-  it('should render items', () => {
+describe("<PokemonList />", () => {
+  it("should render items", () => {
     render(
       <BrowserRouter>
         <PokemonList pokemonList={pokemonList} />
       </BrowserRouter>
-    )
-    expect(screen.getByText('bulbasaur')).toBeVisible()
-    expect(screen.getByText('eevee')).toBeVisible()
-  })
-})
+    );
+    expect(screen.getByText("bulbasaur")).toBeVisible();
+    expect(screen.getByText("eevee")).toBeVisible();
+  });
+});