diff --git a/cypress/e2e/error_spec.cy.js b/cypress/e2e/error_spec.cy.js index 8d32510..022bbf2 100644 --- a/cypress/e2e/error_spec.cy.js +++ b/cypress/e2e/error_spec.cy.js @@ -1,19 +1,26 @@ describe('error page', () => { - // it('should display an error page if failed to get fact', () => { - // cy.intercept('https://catfact.ninja/fact', { - // statusCode: 500 - // }) - // cy.visit('https://cats-meow.vercel.app/') - // cy.get('button[class=fact-btn]').click() - // cy.get('h2').contains('Looks like there was a problem. Please try again later') - // }) + it('should display an error page if failed to get fact', () => { + cy.intercept('https://catfact.ninja/fact', { + statusCode: 500 + }) + cy.visit('http://localhost:3000/') + cy.get('button[class=fact-btn]').click() + cy.get('h2').contains("Looks like something is wrong. Please try again later.") + }) - // it('should display message if no favorited facts', () => { - // cy.visit('https://cats-meow.vercel.app/') - // cy.get('button[class=fav-btn]').click() - // cy.get('h2').contains('No saved ideas yet') - // }) - it('should be able to visit home page', () => { - cy.visit('https://cats-meow.vercel.app/') + it('should display message if no favorited facts', () => { + cy.visit('https://cats-meow.vercel.app/') + cy.get('button[class=fav-btn]').click() + cy.get('h2').contains('No saved ideas yet') + }) + it('should be able to navigate back to home page', () => { + cy.intercept('https://catfact.ninja/fact', { + statusCode: 500 + }) + cy.visit('http://localhost:3000/') + cy.get('button[class=fact-btn]').click() + cy.get('h2').contains("Looks like something is wrong. Please try again later.") + cy.get('h3').click() + cy.get('h1').contains('Cats Meow') }) }) \ No newline at end of file diff --git a/src/components/App/App.js b/src/components/App/App.js index d1025ed..12849ac 100644 --- a/src/components/App/App.js +++ b/src/components/App/App.js @@ -1,7 +1,6 @@ import './App.css'; import React, { useState } from 'react'; import Home from '../Home/Home'; -// import Header from '../Header/Header'; import Fact, { factLoader } from '../Fact/Fact'; import { RouterProvider, createBrowserRouter } from 'react-router-dom'; import Favorites from '../Favorites/Favorites'; @@ -10,7 +9,6 @@ import RootLayout from '../../utilities/RootLayout'; const App = () => { const [favorites, setFavorites] = useState(JSON.parse(sessionStorage.getItem('allFavorites')) || []); - const [err, setErr] = useState(''); const favoriteFact = (currentFact) => { const noDuplicate = favorites.every(fact => fact.fact !== currentFact.fact) @@ -27,15 +25,12 @@ const App = () => { setFavorites(newFavs) sessionStorage.setItem('allFavorites', JSON.stringify(newFavs)) } - - const removeErr = () => { - setErr('') - } const routes = createBrowserRouter([ { path: "/", element: , + errorElement: , children: [ { path: "/", @@ -49,30 +44,14 @@ const App = () => { { path: "/favorites", element: - }, - { - path: "/*", - element: } ] - }, - - ] - ) - - - if (err) { - return ( -
- -
- ) - } else { - return ( - - ) } + ]) + return ( + + ) } export default App; diff --git a/src/components/Error/Error.js b/src/components/Error/Error.js index a300d6c..4101572 100644 --- a/src/components/Error/Error.js +++ b/src/components/Error/Error.js @@ -3,13 +3,13 @@ import { Link } from 'react-router-dom'; import PropTypes from 'prop-types'; import './Error.css'; -const Error = ({ err, removeErr }) => { +const Error = ({ err }) => { return (

{err}

sad cat in a box -

removeErr()}>return home

+

return home

) } @@ -17,6 +17,5 @@ const Error = ({ err, removeErr }) => { export default Error; Error.propTypes = { - err: PropTypes.string.isRequired, - removeErr: PropTypes.func.isRequired + err: PropTypes.string.isRequired } \ No newline at end of file diff --git a/src/components/Fact/Fact.js b/src/components/Fact/Fact.js index e9e75a7..060e0d9 100644 --- a/src/components/Fact/Fact.js +++ b/src/components/Fact/Fact.js @@ -5,11 +5,16 @@ import PropTypes from 'prop-types'; import { useLoaderData } from 'react-router-dom'; const Fact = ({ favFact }) => { - const [currentFact, setCurrentFact] = useState(JSON.parse(sessionStorage.getItem('currentFact')) || {}); + const [currentFact, setCurrentFact] = useState(JSON.parse(sessionStorage.getItem('currentFact'))); // const [err, setErr] = useState(''); const randFact = useLoaderData() + if (currentFact === null) { + setCurrentFact(randFact) + sessionStorage.setItem('currentFact', JSON.stringify({fact: randFact.fact})) + } + const setFact = (fact) => { setCurrentFact({fact: fact}); sessionStorage.setItem('currentFact', JSON.stringify({fact: fact})) @@ -29,7 +34,7 @@ const Fact = ({ favFact }) => { return (
-

{currentFact.fact || randFact.fact}

+

{currentFact.fact}