strvcom · dannytce · Apr 26, 2019 · Apr 21, 2019 · Apr 21, 2019 · Apr 21, 2019
diff --git a/package.json b/package.json
@@ -11,6 +11,15 @@
     "lint:js": "eslint . --ignore-path .gitignore --fix",
     "lint:css": "stylelint 'src/**/*.js'"
   },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx}",
+      "!/node_modules/",
+      "!src/index.js",
+      "!src/serviceWorker.js",
+      "!src/store/index.js"
+    ]
+  },
   "lint-staged": {
     "*.js": [
       "eslint --fix",
@@ -55,9 +64,12 @@
     "@strv/stylelint-config-styled-components": "^1.0.0",
     "eslint-config-prettier": "^4.1.0",
     "eslint-plugin-react-hooks": "^1.6.0",
+    "fetch-mock": "^7.3.1",
     "husky": "^1.3.1",
+    "jest-styled-components": "^6.3.1",
     "lint-staged": "^8.1.5",
     "prettier": "^1.16.4",
+    "react-testing-library": "^6.1.2",
     "stylelint": "^9.10.1",
     "stylelint-config-prettier": "^5.0.0"
   }

diff --git a/src/App.js b/src/App.js
@@ -19,8 +19,8 @@ const store = configureStore({
   customer: getCustomer(),
 })
 
-const App = () => (
-  <Provider store={store}>
+const App = ({ customStore }) => (
+  <Provider store={customStore || store}>
     <React.Fragment>
       <GlobalStyles />
       <Switch>

diff --git a/src/components/Button/test/__snapshots__/index.test.js.snap b/src/components/Button/test/__snapshots__/index.test.js.snap
@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`[components] Button should render correctly 1`] = `
+.c0 {
+  background: #ef0d33;
+  cursor: pointer;
+  padding: 1rem;
+  margin-top: 0.5rem;
+  border: none;
+  border-radius: 5px;
+  color: #fff;
+}
+
+<body>
+  <div>
+    <button
+      class="c0"
+    >
+      My Button
+    </button>
+  </div>
+</body>
+`;
+
+exports[`[components] Button when disabled should render correctly 1`] = `
+<body>
+  <div>
+    <button
+      class="Button-sc-2y5gim-0 iFNPkt"
+    >
+      My Button
+    </button>
+  </div>
+  .c0 {
+  background: #e5e5e5;
+  cursor: default;
+  padding: 1rem;
+  margin-top: 0.5rem;
+  border: none;
+  border-radius: 5px;
+  color: #fff;
+}
+
+<div>
+    <button
+      class="c0"
+      disabled=""
+    >
+      My Button
+    </button>
+  </div>
+</body>
+`;
diff --git a/src/components/Button/test/index.test.js b/src/components/Button/test/index.test.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { render } from 'react-testing-library'
+import 'jest-styled-components'
+
+import Button from '../index'
+
+// This is just an example how to test components
+describe('[components] Button', () => {
+  it('should render correctly', () => {
+    const renderer = render(<Button>My Button</Button>)
+    expect(renderer.baseElement).toMatchSnapshot()
+  })
+
+  describe('when disabled', () => {
+    it('should render correctly', () => {
+      const renderer = render(<Button disabled>My Button</Button>)
+      expect(renderer.baseElement).toMatchSnapshot()
+    })
+  })
+})
diff --git a/src/components/Layout/index.js b/src/components/Layout/index.js
@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react'
+import React, { Fragment } from 'react'
 import { withRouter } from 'react-router-dom'
 import { connect } from 'react-redux'
 
@@ -9,44 +9,40 @@ import { removeToken } from '../../utils/token'
 import { removeCustomer } from '../../utils/customer'
 import { Wrapper, Header, HeaderSection, HeaderLink } from './styled'
 
-class Layout extends Component {
-  handleLogout = () => {
-    this.props.logout()
+const Layout = ({ logout, isAuthenticated, history, children, dataTestId }) => {
+  const handleLogout = () => {
+    logout()
     removeToken()
     removeCustomer()
-    this.props.history.push(routes.HOMEPAGE)
+    history.push(routes.HOMEPAGE)
   }
 
-  render() {
-    const { isAuthenticated } = this.props
-
-    return (
-      <Fragment>
-        <Header>
-          <HeaderSection>
-            <HeaderLink to={routes.PRODUCT_LIST}>All Products</HeaderLink>
-          </HeaderSection>
-          <HeaderSection>
-            <HeaderLink to={routes.CART}>My Cart</HeaderLink>|
-            {isAuthenticated ? (
-              <>
-                <HeaderLink to={routes.ACCOUNT}>My Account</HeaderLink>|
-                <HeaderLink as="button" onClick={this.handleLogout}>
-                  Logout
-                </HeaderLink>
-              </>
-            ) : (
-              <>
-                <HeaderLink to={routes.LOGIN}>Log In</HeaderLink> |
-                <HeaderLink to={routes.SIGN_UP}>Sign Up</HeaderLink>
-              </>
-            )}
-          </HeaderSection>
-        </Header>
-        <Wrapper>{this.props.children}</Wrapper>
-      </Fragment>
-    )
-  }
+  return (
+    <Fragment>
+      <Header>
+        <HeaderSection>
+          <HeaderLink to={routes.PRODUCT_LIST}>All Products</HeaderLink>
+        </HeaderSection>
+        <HeaderSection>
+          <HeaderLink to={routes.CART}>My Cart</HeaderLink>|
+          {isAuthenticated ? (
+            <>
+              <HeaderLink to={routes.ACCOUNT}>My Account</HeaderLink>|
+              <HeaderLink as="button" onClick={handleLogout}>
+                Logout
+              </HeaderLink>
+            </>
+          ) : (
+            <>
+              <HeaderLink to={routes.LOGIN}>Log In</HeaderLink> |
+              <HeaderLink to={routes.SIGN_UP}>Sign Up</HeaderLink>
+            </>
+          )}
+        </HeaderSection>
+      </Header>
+      <Wrapper data-testid={dataTestId}>{children}</Wrapper>
+    </Fragment>
+  )
 }
 
 const mapStateToProps = state => ({

diff --git a/src/components/Loader/index.js b/src/components/Loader/index.js
@@ -2,7 +2,7 @@ import React from 'react'
 import { LoaderWrap, StyledLoader, Circular, Path } from './styled'
 
 const Loader = props => (
-  <LoaderWrap {...props}>
+  <LoaderWrap data-testid="loader" {...props}>
     <StyledLoader>
       <Circular viewBox="25 25 50 50">
         <Path

diff --git a/src/components/Pagination/SizeSelect.js b/src/components/Pagination/SizeSelect.js
@@ -0,0 +1,16 @@
+import React from 'react'
+
+const options = [10, 25, 50, 100]
+
+const SizeSelect = ({ onChange, value }) => (
+  // eslint-disable-next-line jsx-a11y/no-onchange
+  <select onChange={onChange} value={value}>
+    {options.map(number => (
+      <option value={number} key={number}>
+        {number}
+      </option>
+    ))}
+  </select>
+)
+
+export { SizeSelect }
diff --git a/src/components/Pagination/index.js b/src/components/Pagination/index.js
@@ -5,16 +5,22 @@ import { Link } from 'react-router-dom'
 
 import * as routes from '../../routes'
 
+import { SizeSelect } from './SizeSelect'
 import { List, ListItem } from './styled'
 
-const renderPaginationItem = number => (
+const renderPaginationItem = size => number => (
   <ListItem key={number}>
-    <Link to={`${routes.PRODUCT_LIST}?page=${number}`}>{number}</Link>
+    <Link to={`${routes.PRODUCT_LIST}?page=${number}&size=${size}`}>
+      {number}
+    </Link>
   </ListItem>
 )
 
-const Pagination = ({ pages }) => (
-  <List>{map(renderPaginationItem, range(1, pages + 1))}</List>
+const Pagination = ({ pages, size, onSizeChange }) => (
+  <>
+    <List>{map(renderPaginationItem(size), range(1, pages + 1))}</List>
+    <SizeSelect onChange={onSizeChange} value={size} />
+  </>
 )
 
 export { Pagination }
diff --git a/src/components/PrivateRoute/index.js b/src/components/PrivateRoute/index.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import { Route, Redirect } from 'react-router-dom'
 import { connect } from 'react-redux'
+import isEmpty from 'ramda/src/isEmpty'
 
 import * as routes from '../../routes'
 
@@ -32,7 +33,7 @@ const PrivateRouteComponent = ({
 }
 
 const mapStateToProps = state => ({
-  isAuthenticated: Object.keys(state.customer).length !== 0,
+  isAuthenticated: !isEmpty(state.customer),
 })
 
 export const PrivateRoute = connect(mapStateToProps)(PrivateRouteComponent)
diff --git a/src/pages/Account/index.js b/src/pages/Account/index.js
@@ -5,7 +5,7 @@ import Layout from '../../components/Layout'
 import { H1 } from '../../components/Typography'
 
 const AccountPage = ({ customer }) => (
-  <Layout>
+  <Layout dataTestId="account-page">
     <H1>Welcome {customer.attributes.metadata.firstName}</H1>
   </Layout>
 )

diff --git a/src/pages/Account/test/index.test.js b/src/pages/Account/test/index.test.js
@@ -0,0 +1,39 @@
+import React from 'react'
+import 'jest-styled-components'
+
+import { App } from '../../../App'
+import * as routes from '../../../routes'
+import { renderWithRouter } from '../../../utilsTest/render'
+import { configureStore } from '../../../store'
+import { USER } from '../../../utilsTest/mockData'
+
+describe('[pages] Account', () => {
+  describe('when not logged in', () => {
+    it('should redirect to login page', () => {
+      const renderer = renderWithRouter(<App />, routes.ACCOUNT)
+      const HTMLDivElement = renderer.getByTestId('login-page')
+      expect(HTMLDivElement).toBeTruthy()
+    })
+  })
+
+  describe('when logged in', () => {
+    it('should render private user account page', async () => {
+      const store = configureStore({
+        customer: {
+          attributes: {
+            metadata: {
+              firstName: USER.firstName,
+            },
+          },
+        },
+      })
+
+      const renderer = renderWithRouter(
+        <App customStore={store} />,
+        routes.ACCOUNT
+      )
+      const H1HtmlElement = renderer.getByText(`Welcome ${USER.firstName}`)
+      expect(H1HtmlElement).toBeTruthy()
+    })
+  })
+})
diff --git a/src/pages/Cart/CartItem.js b/src/pages/Cart/CartItem.js
@@ -1,26 +1,35 @@
 import * as React from 'react'
+import flip from 'ramda/src/flip'
+import propOr from 'ramda/src/propOr'
 
 import { getProductById } from '../../api/products/get-product'
 import { useApi } from '../../api/use-api'
 
 import Loader from '../../components/Loader'
 import Button from '../../components/Button'
 
+const getNameFallback = flip(propOr)('name')
+
 const CartItem = ({ productId, quantity, removeProduct }) => {
-  const { data: product, isLoading } = useApi(
-    () => getProductById(productId),
-    productId
-  )
+  const { data: product, isLoading } = useApi(() => getProductById(productId), [
+    productId,
+  ])
+
+  const getName = getNameFallback(productId)
 
   return (
     <li key={productId}>
       {isLoading && <Loader small />}
-      <p>
-        {product ? product.name : productId} - {quantity}
-      </p>
-      <Button type="button" onClick={() => removeProduct(productId)}>
-        Remove
-      </Button>
+      {!isLoading && (
+        <React.Fragment>
+          <p>
+            {getName(product)} - {quantity}
+          </p>
+          <Button type="button" onClick={() => removeProduct(productId)}>
+            Remove
+          </Button>
+        </React.Fragment>
+      )}
     </li>
   )
 }

diff --git a/src/pages/Cart/index.js b/src/pages/Cart/index.js
@@ -1,5 +1,6 @@
 import React from 'react'
 import { connect } from 'react-redux'
+import toPairs from 'ramda/src/toPairs'
 
 import Layout from '../../components/Layout'
 import { H1 } from '../../components/Typography'
@@ -25,8 +26,8 @@ const CartView = ({ items, removeProduct }) => {
 }
 
 const mapStateToProps = state => ({
-  items: Object.keys(state.cart).map(productId => ({
-    quantity: state.cart[productId],
+  items: toPairs(state.cart).map(([productId, quantity]) => ({
+    quantity,
     product: { id: productId },
   })),
 })