Tests

package.json

@@ -4,8 +4,9 @@
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^5.1.1",
-    "@testing-library/react": "^10.0.1",
-    "@testing-library/user-event": "^10.0.0",
+    "axios": "^0.19.2",
+    "history": "^4.10.1",
+    "jest-axe": "^3.4.0",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.7.2",
     "react": "^16.13.0",
@@ -18,7 +19,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "TZ=UTC react-scripts test --env=jest-environment-jsdom-sixteen",
     "eject": "react-scripts eject",
     "lint": "eslint .",
     "format": "eslint --fix ."
@@ -36,11 +37,15 @@
     ]
   },
   "devDependencies": {
+    "@testing-library/react": "^10.0.1",
+    "@testing-library/user-event": "^10.0.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-plugin-import": "^2.20.1",
     "eslint-plugin-jsx-a11y": "^6.2.3",
     "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-react-hooks": "^2.5.0"
+    "eslint-plugin-react-hooks": "^2.5.0",
+    "jest-environment-jsdom-sixteen": "^1.0.3",
+    "jest-styled-components": "^7.0.2"
   }
-}
+}

src/components/App/App.js

@@ -5,6 +5,8 @@ import SearchPage from '../../pages/SearchPage/SearchPage';
 import Header from '../Header/Header';
 import Footer from '../Footer/Footer';
 import { AppWrapper } from './App.style';
+import { SEARCH_PATH } from '../../config';
+
 
 function App() {
   return (
@@ -15,7 +17,7 @@ function App() {
           <Route exact path="/">
             <HomePage />
           </Route>
-          <Route exact path="/search/:subreddit">
+          <Route exact path={`/${SEARCH_PATH}/:subreddit`}>
             <SearchPage />
           </Route>
         </Switch>

src/components/App/App.test.js

@@ -1,9 +1,39 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
 import App from './App';
+import Theme from '../../styles/theme';
 
-test('renders learn react link', () => {
-  const { getByText } = render(<App />);
-  const linkElement = getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+expect.extend(toHaveNoViolations);
+
+const renderWithTheme = (component) => (
+  render(
+    <Theme>
+      {component}
+    </Theme>,
+  )
+);
+
+function setup() {
+  return renderWithTheme(
+    <App />,
+  );
+}
+
+describe('Header and footer', () => {
+  test('Header is rendered', async () => {
+    const { getByTestId } = setup();
+    expect(getByTestId('header')).toBeInTheDocument();
+  });
+  test('Footer is rendered', async () => {
+    const { getByTestId } = setup();
+    expect(getByTestId('footer')).toBeInTheDocument();
+  });
+});
+
+describe('Accessibility', () => {
+  test('There are no obvious accessibility violations in the app', async () => {
+    const { container } = setup();
+    expect(await axe(container)).toHaveNoViolations();
+  });
 });

src/components/Button/Button.js

@@ -4,7 +4,7 @@ const Button = styled.button`
   color: white;
   text-decoration: none;
   transition: color 300ms ease-out;
-  background: ${(props) => (props.inactive ? props.theme.colors.gray.main : props.theme.colors.primary.main)};
+  background: ${(props) => (props.disabled ? props.theme.colors.gray.main : props.theme.colors.primary.main)};
   padding: 14px 16px;
   border-radius: 4px;
   text-transform: uppercase;
@@ -14,7 +14,7 @@ const Button = styled.button`
   border: none;
   transition: background 300ms ease-out;
   &:hover {
-    background: ${(props) => (props.inactive ? props.theme.colors.gray.main : props.theme.colors.primary.light)};};
+    background: ${(props) => (props.disabled ? props.theme.colors.gray.main : props.theme.colors.primary.light)};};
   }
 `;
 

src/components/Footer/Footer.js

@@ -10,7 +10,7 @@ import Logo from '../../assets/images/sign.svg';
 
 function Footer() {
   return (
-    <FooterWrapper>
+    <FooterWrapper data-testid="footer">
       <FooterLeft>
         <Link
           as="a"

src/components/Header/Header.js

@@ -2,12 +2,14 @@ import React from 'react';
 import { HeaderWrapper, Logo, NavLink } from './Header.style';
 import Link from '../Link/Link';
 import LogoSVG from '../../assets/images/logo.svg';
-import { DEFAULT_SUBREDDIT } from '../../config';
+import { getSearchPath } from '../../config';
+
+const searchPath = getSearchPath();
 
 const headerLinks = [
   {
     title: 'Search',
-    link: `/search/${DEFAULT_SUBREDDIT}`,
+    link: searchPath,
   },
   {
     title: 'How it works',
@@ -21,13 +23,13 @@ const headerLinks = [
 
 function Header() {
   return (
-    <HeaderWrapper>
+    <HeaderWrapper data-testid="header">
       <Link to="/">
-        <Logo src={LogoSVG} alt="Logo" />
+        <Logo src={LogoSVG} alt="Logo" data-testid="header-logo" />
       </Link>
       <nav>
-        {headerLinks.map((item) => (
-          <NavLink key={item.title} to={item.link} alt={item.title}>
+        {headerLinks.map((item, index) => (
+          <NavLink key={item.title} to={item.link} alt={item.title} data-testid={`navbar-${index}`}>
             {item.title}
           </NavLink>
         ))}

src/components/Hero/Hero.js

@@ -9,24 +9,25 @@ import {
   Caption,
   Img,
 } from './Hero.style';
-import { DEFAULT_SUBREDDIT } from '../../config';
+import { getSearchPath, DEFAULT_SUBREDDIT } from '../../config';
 
 function Hero() {
+  const searchPath = getSearchPath();
   return (
     <HeroWrapper>
       <Title>No reactions to your reddit posts?</Title>
       <Subtitle>
         Great timing, great results! Find the best time to post on your
         subreddit.
       </Subtitle>
-      <CTA as={Link} to={`/search/${DEFAULT_SUBREDDIT}`}>
+      <CTA as={Link} to={searchPath}>
         Show me the best time
       </CTA>
       <Caption>
         r/
-        {DEFAULT_SUBREDDIT}
+        {searchPath}
       </Caption>
-      <Link to={`/search/${DEFAULT_SUBREDDIT}`}>
+      <Link to={searchPath}>
         <Img src={Table} alt={DEFAULT_SUBREDDIT} />
       </Link>
     </HeroWrapper>

src/components/Spinner/Spinner.js

@@ -3,7 +3,7 @@ import { SpinnerWrapper, SpinnerMain } from './Spinner.style';
 
 function Spinner() {
   return (
-    <SpinnerWrapper><SpinnerMain /></SpinnerWrapper>
+    <SpinnerWrapper data-testid="loading-spinner"><SpinnerMain /></SpinnerWrapper>
   );
 }
 

src/config.js

@@ -1,2 +1,8 @@
 // eslint-disable-next-line import/prefer-default-export
+// TODO: Use function to generate path and use it in other files
 export const DEFAULT_SUBREDDIT = 'javascript';
+export const SEARCH_PATH = 'search';
+
+export function getSearchPath(subreddit = DEFAULT_SUBREDDIT) {
+  return `/${SEARCH_PATH}/${subreddit}`;
+}