Add project
midudev
3 years ago
commit
b0006c9027
@ -0,0 +1,8 @@
|
|||||||
|
{
|
||||||
|
"presets": ["@babel/preset-env", "@babel/preset-react"],
|
||||||
|
"env": {
|
||||||
|
"test": {
|
||||||
|
"plugins": ["@babel/plugin-transform-runtime"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
webpack.config.js
|
||||||
|
node_modules/
|
||||||
|
dist/
|
||||||
@ -0,0 +1,49 @@
|
|||||||
|
module.exports = {
|
||||||
|
"env": {
|
||||||
|
"browser": true,
|
||||||
|
"es6": true,
|
||||||
|
"jest/globals": true
|
||||||
|
},
|
||||||
|
"extends": [
|
||||||
|
"eslint:recommended",
|
||||||
|
"plugin:react/recommended"
|
||||||
|
],
|
||||||
|
"parserOptions": {
|
||||||
|
"ecmaFeatures": {
|
||||||
|
"jsx": true
|
||||||
|
},
|
||||||
|
"ecmaVersion": 2018,
|
||||||
|
"sourceType": "module"
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
"react", "jest"
|
||||||
|
],
|
||||||
|
"rules": {
|
||||||
|
"indent": [
|
||||||
|
"error",
|
||||||
|
2
|
||||||
|
],
|
||||||
|
"linebreak-style": [
|
||||||
|
"error",
|
||||||
|
"unix"
|
||||||
|
],
|
||||||
|
"quotes": [
|
||||||
|
"error",
|
||||||
|
"single"
|
||||||
|
],
|
||||||
|
"semi": [
|
||||||
|
"error",
|
||||||
|
"never"
|
||||||
|
],
|
||||||
|
"eqeqeq": "error",
|
||||||
|
"no-trailing-spaces": "error",
|
||||||
|
"object-curly-spacing": [
|
||||||
|
"error", "always"
|
||||||
|
],
|
||||||
|
"arrow-spacing": [
|
||||||
|
"error", { "before": true, "after": true }
|
||||||
|
],
|
||||||
|
"no-console": "error",
|
||||||
|
"react/prop-types": 0
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,2 @@
|
|||||||
|
dist/
|
||||||
|
node_modules/
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
# Full Stack open CI/CD
|
||||||
|
|
||||||
|
This repository is used for the CI/CD module of the Full stack open course
|
||||||
|
|
||||||
|
Fork the repository to complete course exercises
|
||||||
|
|
||||||
|
## Commands
|
||||||
|
|
||||||
|
Start by running `npm install` inside the project folder
|
||||||
|
|
||||||
|
`npm start` to run the webpack dev server
|
||||||
|
`npm test` to run tests
|
||||||
|
`npm run eslint` to run eslint
|
||||||
|
`npm run build` to make a production build
|
||||||
|
`npm run start-prod` to run your production build
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
const express = require("express");
|
||||||
|
const app = express();
|
||||||
|
|
||||||
|
// Heroku dynamically sets a port
|
||||||
|
const PORT = process.env.PORT || 5000;
|
||||||
|
|
||||||
|
app.use(express.static("dist"));
|
||||||
|
|
||||||
|
app.listen(PORT, () => {
|
||||||
|
console.log("server started on port 5000");
|
||||||
|
});
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,54 @@
|
|||||||
|
{
|
||||||
|
"name": "fullstackopen-cicd",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "Full Stack Open",
|
||||||
|
"main": "src/index.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "webpack-dev-server --open --mode development",
|
||||||
|
"start-prod": "node app.js",
|
||||||
|
"test": "jest",
|
||||||
|
"eslint": "eslint './**/*.{js,jsx}'",
|
||||||
|
"build": "webpack --mode production"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/smartlyio/fullstackopen-cicd.git"
|
||||||
|
},
|
||||||
|
"keywords": [
|
||||||
|
"fullstack-open"
|
||||||
|
],
|
||||||
|
"author": "Smartly.io",
|
||||||
|
"license": "ISC",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/smartlyio/fullstackopen-cicd/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://github.com/smartlyio/fullstackopen-cicd#readme",
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.9.6",
|
||||||
|
"@babel/plugin-transform-runtime": "^7.10.0",
|
||||||
|
"@babel/preset-env": "^7.9.6",
|
||||||
|
"@babel/preset-react": "^7.9.4",
|
||||||
|
"@testing-library/jest-dom": "^5.8.0",
|
||||||
|
"@testing-library/react": "^10.0.4",
|
||||||
|
"babel-jest": "^25.5.1",
|
||||||
|
"babel-loader": "^8.1.0",
|
||||||
|
"css-loader": "^3.5.3",
|
||||||
|
"eslint": "^6.8.0",
|
||||||
|
"eslint-plugin-jest": "^23.11.0",
|
||||||
|
"eslint-plugin-react": "^7.19.0",
|
||||||
|
"html-loader": "^1.1.0",
|
||||||
|
"html-webpack-plugin": "^4.3.0",
|
||||||
|
"jest": "^25.5.4",
|
||||||
|
"style-loader": "^1.2.1",
|
||||||
|
"webpack": "^4.43.0",
|
||||||
|
"webpack-cli": "^3.3.11",
|
||||||
|
"webpack-dev-server": "^3.11.0"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^0.19.2",
|
||||||
|
"express": "^4.17.1",
|
||||||
|
"react": "^16.13.1",
|
||||||
|
"react-dom": "^16.13.1",
|
||||||
|
"react-router-dom": "^5.2.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Pokemon</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<footer>Pokémon and Pokémon character names are trademarks of Nintendo.</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom'
|
||||||
|
import { useApi } from './useApi'
|
||||||
|
import LoadingSpinner from './LoadingSpinner'
|
||||||
|
import ErrorMessage from './ErrorMessage'
|
||||||
|
import PokemonPage from './PokemonPage'
|
||||||
|
import PokemonList from './PokemonList'
|
||||||
|
|
||||||
|
const mapResults = (({ results }) => results.map(({ url, name }) => ({
|
||||||
|
url,
|
||||||
|
name,
|
||||||
|
id: parseInt(url.match(/\/(\d+)\//)[1])
|
||||||
|
})))
|
||||||
|
|
||||||
|
const App = () => {
|
||||||
|
const { data: pokemonList, error, isLoading } = useApi('https://pokeapi.co/api/v2/pokemon/?limit=784', mapResults)
|
||||||
|
if (isLoading) {
|
||||||
|
return <LoadingSpinner />
|
||||||
|
}
|
||||||
|
if (error) {
|
||||||
|
return <ErrorMessage error={error} />
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Router>
|
||||||
|
<Switch>
|
||||||
|
<Route exact path="/">
|
||||||
|
<PokemonList pokemonList={pokemonList} />
|
||||||
|
</Route>
|
||||||
|
<Route path="/pokemon/:name" render={(routeParams) => {
|
||||||
|
const pokemonId = pokemonList.find(({ name }) => name === routeParams.match.params.name).id
|
||||||
|
const previous = pokemonList.find(({ id }) => id === pokemonId - 1)
|
||||||
|
const next = pokemonList.find(({ id }) => id === pokemonId + 1)
|
||||||
|
return <PokemonPage pokemonList={pokemonList} previous={previous} next={next} />
|
||||||
|
}} />
|
||||||
|
</Switch>
|
||||||
|
</Router>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default App
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
const ErrorMessage = ({ error }) => (
|
||||||
|
<div data-testid="error">An error occured: {error.toString()}</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default ErrorMessage
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
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" />
|
||||||
|
)
|
||||||
|
|
||||||
|
export default LoadingSpinner
|
||||||
@ -0,0 +1,12 @@
|
|||||||
|
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>
|
||||||
|
)
|
||||||
|
|
||||||
|
export default PokemonAbility
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
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>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PokemonList
|
||||||
@ -0,0 +1,63 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { Link, useParams } from 'react-router-dom'
|
||||||
|
import LoadingSpinner from './LoadingSpinner'
|
||||||
|
import { useApi } from './useApi'
|
||||||
|
import PokemonAbility from './PokemonAbility'
|
||||||
|
import ErrorMessage from './ErrorMessage'
|
||||||
|
|
||||||
|
const formatName = (nameWithDash) => nameWithDash.replace('-', ' ')
|
||||||
|
|
||||||
|
const PokemonPage = ({ previous, next }) => {
|
||||||
|
const { name } = useParams()
|
||||||
|
const { data: pokemon, error, isLoading } = useApi(`https://pokeapi.co/api/v2/pokemon/${name}`)
|
||||||
|
|
||||||
|
if (isLoading) {
|
||||||
|
return <LoadingSpinner />
|
||||||
|
}
|
||||||
|
if (error) {
|
||||||
|
return <ErrorMessage error={error} />
|
||||||
|
}
|
||||||
|
|
||||||
|
const { type } = pokemon.types.find((type) => type.slot === 1)
|
||||||
|
const stats = pokemon.stats.map((stat) => ({
|
||||||
|
name: formatName(stat.stat.name),
|
||||||
|
value: stat.base_stat
|
||||||
|
})).reverse()
|
||||||
|
const normalAbility = pokemon.abilities.find((ability) => !ability.is_hidden)
|
||||||
|
const hiddenAbility = pokemon.abilities.find((ability) => ability.is_hidden === true)
|
||||||
|
|
||||||
|
console.log('hiddenAbility=', hiddenAbility)
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="links">
|
||||||
|
{previous && <Link to={`/pokemon/${previous.name}`}>Previous</Link>}
|
||||||
|
<Link to="/">Home</Link>
|
||||||
|
{next && <Link to={`/pokemon/${previous.name}`}>Next</Link>}
|
||||||
|
</div>
|
||||||
|
<div className={`pokemon-page pokemon-type-${type.name}`}>
|
||||||
|
<div className="pokemon-image" style={{ backgroundImage: `url(${pokemon.sprites.front_default})` }} />
|
||||||
|
<div className="pokemon-info">
|
||||||
|
<div className="pokemon-name">{pokemon.name}</div>
|
||||||
|
<div className="pokemon-stats" data-testid="stats">
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
{stats.map(({ name, value }) => (
|
||||||
|
<tr key={name}>
|
||||||
|
<td className="pokemon-stats-name">{name}</td>
|
||||||
|
<td className="pokemon-stats-value">{value}</td>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
<div className="pokemon-abilities">
|
||||||
|
{normalAbility && <PokemonAbility abilityName={formatName(normalAbility.ability.name)} />}
|
||||||
|
{hiddenAbility && <PokemonAbility abilityName={formatName(hiddenAbility.ability.name)} />}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PokemonPage
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import ReactDOM from 'react-dom'
|
||||||
|
import App from './App'
|
||||||
|
import './styles.css'
|
||||||
|
|
||||||
|
ReactDOM.render(<App />, document.getElementById('app'))
|
||||||
@ -0,0 +1,215 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300,700');
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
font-family: "Open Sans";
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
body > div {
|
||||||
|
flex: 1 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
color: #888;
|
||||||
|
font-size: 12px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-spinner {
|
||||||
|
animation: rotation 2s infinite linear;
|
||||||
|
margin: 120px;
|
||||||
|
width: 80px;
|
||||||
|
}
|
||||||
|
@keyframes rotation {
|
||||||
|
from {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: rotate(359deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item {
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-color: #eee;
|
||||||
|
margin: 10px;
|
||||||
|
height: 150px;
|
||||||
|
width: 150px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-item-name {
|
||||||
|
position: absolute;
|
||||||
|
color: #000;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: capitalize;
|
||||||
|
background-color: #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.links {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
width: 332px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-page {
|
||||||
|
background: linear-gradient(140deg, var(--pokemon-type-color) 0%, #ddd 100%);
|
||||||
|
border-radius: 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 470px;
|
||||||
|
padding: 16px;
|
||||||
|
width: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-image {
|
||||||
|
min-height: 150px;
|
||||||
|
width: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-name {
|
||||||
|
font-family: "Open Sans Condensed", "Open Sans";
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-info {
|
||||||
|
background-color: rgba(255, 255, 255, 0.65);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1;
|
||||||
|
height: 100%;
|
||||||
|
padding: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-stats {
|
||||||
|
flex: 1;
|
||||||
|
font-family: "Open Sans Condensed", "Open Sans";
|
||||||
|
padding-top: 15px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-stats table {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-stats-name {
|
||||||
|
font-weight: 300;
|
||||||
|
padding: 4px 8px 0 8px;
|
||||||
|
text-align: right;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-stats-value {
|
||||||
|
padding: 4px 8px 0 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-abilities {
|
||||||
|
display: flex;
|
||||||
|
margin-top: 20px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-ability {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-ability-type {
|
||||||
|
font-size: 10px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-bug {
|
||||||
|
--pokemon-type-color: #ac2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-dark {
|
||||||
|
--pokemon-type-color: #754;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-dragon {
|
||||||
|
--pokemon-type-color: #73f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-electric {
|
||||||
|
--pokemon-type-color: #fd3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-fairy {
|
||||||
|
--pokemon-type-color: #d8b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-fighting {
|
||||||
|
--pokemon-type-color: #c33;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-fire {
|
||||||
|
--pokemon-type-color: #f83;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-flying {
|
||||||
|
--pokemon-type-color: #b9f;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-ghost {
|
||||||
|
--pokemon-type-color: #759;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-grass {
|
||||||
|
--pokemon-type-color: #8c5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-ground {
|
||||||
|
--pokemon-type-color: #ec6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-ice {
|
||||||
|
--pokemon-type-color: #9ed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-normal {
|
||||||
|
--pokemon-type-color: #ba8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-poison {
|
||||||
|
--pokemon-type-color: #a4a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-psychic {
|
||||||
|
--pokemon-type-color: #f59;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-rock {
|
||||||
|
--pokemon-type-color: #ba3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-steel {
|
||||||
|
--pokemon-type-color: #bcd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemon-type-water {
|
||||||
|
--pokemon-type-color: #69f;
|
||||||
|
}
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
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()
|
||||||
|
useEffect(() => {
|
||||||
|
setIsLoading(true)
|
||||||
|
axios
|
||||||
|
.get(url)
|
||||||
|
.then(response => setData(mapResults(response.data)))
|
||||||
|
.catch(setError)
|
||||||
|
.finally(() => setIsLoading(false))
|
||||||
|
}, [url])
|
||||||
|
|
||||||
|
return { data, isLoading, error }
|
||||||
|
}
|
||||||
|
|
||||||
|
export { useApi }
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
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/extend-expect'
|
||||||
|
import App from '../src/App'
|
||||||
|
|
||||||
|
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 }]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
)
|
||||||
|
await act(async () => {
|
||||||
|
render(<App />)
|
||||||
|
})
|
||||||
|
expect(axiosMock.get).toHaveBeenCalledTimes(1)
|
||||||
|
expect(axiosMock.get).toHaveBeenCalledWith('https://pokeapi.co/api/v2/pokemon/?limit=784')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('shows LoadingSpinner', async () => {
|
||||||
|
axiosMock.get.mockResolvedValueOnce({})
|
||||||
|
await act(async () => {
|
||||||
|
const { getByAltText } = render(<App />)
|
||||||
|
expect(getByAltText('Loading...')).toBeVisible()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it('shows error', async () => {
|
||||||
|
axiosMock.get.mockRejectedValueOnce(new Error())
|
||||||
|
await act(async () => {
|
||||||
|
render(<App />)
|
||||||
|
})
|
||||||
|
expect(screen.getByTestId('error')).toBeVisible()
|
||||||
|
})
|
||||||
|
})
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { render, screen } from '@testing-library/react'
|
||||||
|
import { BrowserRouter } from 'react-router-dom'
|
||||||
|
import '@testing-library/jest-dom/extend-expect'
|
||||||
|
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
|
||||||
|
}]
|
||||||
|
|
||||||
|
describe('<PokemonList />', () => {
|
||||||
|
it('should render items', () => {
|
||||||
|
render(
|
||||||
|
<BrowserRouter>
|
||||||
|
<PokemonList pokemonList={pokemonList} />
|
||||||
|
</BrowserRouter>
|
||||||
|
)
|
||||||
|
expect(screen.getByText('bulbasaur')).toBeVisible()
|
||||||
|
expect(screen.getByText('eevee')).toBeVisible()
|
||||||
|
})
|
||||||
|
})
|
||||||
@ -0,0 +1,139 @@
|
|||||||
|
import React from 'react'
|
||||||
|
import { render, screen } from '@testing-library/react'
|
||||||
|
import { Router } from 'react-router-dom'
|
||||||
|
import { createMemoryHistory } from 'history'
|
||||||
|
import axiosMock from 'axios'
|
||||||
|
import { act } from 'react-dom/test-utils'
|
||||||
|
import '@testing-library/jest-dom/extend-expect'
|
||||||
|
import PokemonPage from '../src/PokemonPage'
|
||||||
|
|
||||||
|
jest.mock('axios')
|
||||||
|
|
||||||
|
const previous = {
|
||||||
|
url: 'https://pokeapi.co/api/v2/pokemon/132/',
|
||||||
|
name: 'ditto',
|
||||||
|
id: 132
|
||||||
|
}
|
||||||
|
const next = {
|
||||||
|
url: 'https://pokeapi.co/api/v2/pokemon/134/',
|
||||||
|
name: 'vaporeon',
|
||||||
|
id: 134
|
||||||
|
}
|
||||||
|
|
||||||
|
const pokemonList = {
|
||||||
|
id: 133,
|
||||||
|
abilities: [
|
||||||
|
{
|
||||||
|
ability: {
|
||||||
|
name: 'anticipation',
|
||||||
|
url: 'https://pokeapi.co/api/v2/ability/107/'
|
||||||
|
},
|
||||||
|
is_hidden: true,
|
||||||
|
slot: 3
|
||||||
|
},
|
||||||
|
{
|
||||||
|
ability: {
|
||||||
|
name: 'adaptability',
|
||||||
|
url: 'https://pokeapi.co/api/v2/ability/91/'
|
||||||
|
},
|
||||||
|
is_hidden: false,
|
||||||
|
slot: 2
|
||||||
|
}
|
||||||
|
],
|
||||||
|
name: 'eevee',
|
||||||
|
stats: [
|
||||||
|
{
|
||||||
|
base_stat: 55,
|
||||||
|
effort: 0,
|
||||||
|
stat: {
|
||||||
|
name: 'attack',
|
||||||
|
url: 'https://pokeapi.co/api/v2/stat/2/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
base_stat: 55,
|
||||||
|
effort: 0,
|
||||||
|
stat: {
|
||||||
|
name: 'hp',
|
||||||
|
url: 'https://pokeapi.co/api/v2/stat/1/'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
types: [
|
||||||
|
{
|
||||||
|
slot: 1,
|
||||||
|
type: {
|
||||||
|
name: 'normal',
|
||||||
|
url: 'https://pokeapi.co/api/v2/type/1/'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
sprites: { front_default: 'URL' }
|
||||||
|
}
|
||||||
|
|
||||||
|
const history = createMemoryHistory()
|
||||||
|
|
||||||
|
describe('<PokemonPage />', () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
history.push('/pokemon/eevee')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render abilities', async () => {
|
||||||
|
axiosMock.get.mockResolvedValueOnce({ data: pokemonList })
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
render(
|
||||||
|
<Router history={history}>
|
||||||
|
<PokemonPage />
|
||||||
|
</Router>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(screen.getByText('adaptability')).toBeVisible()
|
||||||
|
expect(screen.getByText('anticipation')).toBeVisible()
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render stats', async () => {
|
||||||
|
axiosMock.get.mockResolvedValueOnce({ data: pokemonList })
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
render(
|
||||||
|
<Router history={history}>
|
||||||
|
<PokemonPage />
|
||||||
|
</Router>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(screen.getByTestId('stats')).toHaveTextContent('hp55attack55')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should render previous and next urls if they exist', async () => {
|
||||||
|
axiosMock.get.mockResolvedValueOnce({ data: pokemonList })
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
render(
|
||||||
|
<Router history={history}>
|
||||||
|
<PokemonPage previous={previous} next={next} />
|
||||||
|
</Router>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(screen.getByText('Previous')).toHaveAttribute('href', '/pokemon/ditto')
|
||||||
|
expect(screen.getByText('Next')).toHaveAttribute('href', '/pokemon/vaporeon')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('should not render previous and next urls if none exist', async () => {
|
||||||
|
axiosMock.get.mockResolvedValueOnce({ data: pokemonList })
|
||||||
|
|
||||||
|
await act(async () => {
|
||||||
|
render(
|
||||||
|
<Router history={history}>
|
||||||
|
<PokemonPage />
|
||||||
|
</Router>
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
expect(screen.queryByText('Previous')).toBeNull()
|
||||||
|
expect(screen.queryByText('Next')).toBeNull()
|
||||||
|
})
|
||||||
|
})
|
||||||
@ -0,0 +1,46 @@
|
|||||||
|
const HtmlWebPackPlugin = require("html-webpack-plugin");
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
entry: "./src/index.jsx",
|
||||||
|
output: {
|
||||||
|
path: path.resolve(__dirname, 'dist'),
|
||||||
|
filename: 'bundle.js',
|
||||||
|
publicPath: '/'
|
||||||
|
},
|
||||||
|
module: {
|
||||||
|
rules: [
|
||||||
|
{
|
||||||
|
test: /\.(js|jsx)$/,
|
||||||
|
exclude: /node_modules/,
|
||||||
|
use: {
|
||||||
|
loader: "babel-loader",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.html$/,
|
||||||
|
use: [
|
||||||
|
{
|
||||||
|
loader: "html-loader",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
{
|
||||||
|
test: /\.css$/,
|
||||||
|
loaders: ['style-loader', 'css-loader'],
|
||||||
|
}
|
||||||
|
],
|
||||||
|
},
|
||||||
|
resolve: {
|
||||||
|
extensions: ["*", ".js", ".jsx"],
|
||||||
|
},
|
||||||
|
devServer: {
|
||||||
|
historyApiFallback: true,
|
||||||
|
},
|
||||||
|
plugins: [
|
||||||
|
new HtmlWebPackPlugin({
|
||||||
|
template: "./public/index.html",
|
||||||
|
filename: "./index.html",
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue