#24 added prop types and Inventory-error tests

package.json

@@ -51,11 +51,12 @@
     "mini-css-extract-plugin": "^1.3.1",
     "node-sass": "^5.0.0",
     "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "prop-types": "^15.7.2",
     "sass-loader": "^10.1.0",
     "terser-webpack-plugin": "^4.2.3",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack": "^4.44.2",
     "webpack-cli": "3.3.12",
     "webpack-dev-server": "^3.11.1"
   }
-}
+}

src/components/inventory-error/inventory-error.js

@@ -1,9 +1,10 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import './inventory-error.scss'
 
 const InventoryError = ({ errorMsg }) => {
   return (
-    <div className="inventory-error card">
+    <div className="inventory-error card" data-test="component-inventory-error">
       <div>
         <div className="warning-icon">
           <i className="fas fa-shopping-bag"></i>
@@ -12,7 +13,7 @@ const InventoryError = ({ errorMsg }) => {
           <div className="first-line">
             OOPS!
           </div>
-          <div>{errorMsg}</div>
+          <div data-test="error-msg">{errorMsg}</div>
           <div></div>
         </div>
       </div>
@@ -21,3 +22,7 @@ const InventoryError = ({ errorMsg }) => {
 }
 
 export default InventoryError
+
+InventoryError.propTypes = {
+  errorMsg: PropTypes.string.isRequired
+}

src/components/inventory-error/inventory-error.test.js

@@ -0,0 +1,26 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+
+import InventoryError from './inventory-error'
+
+const setup = (props = {}) => {
+  const setupProps = { errorMsg: 'Some default error', ...props }
+  return shallow(<InventoryError {...setupProps} />)
+}
+
+describe('rendering testing', () => {
+  let wrapper
+
+  test('renders without error', () => {
+    wrapper = setup()
+    const component = wrapper.find("[data-test='component-inventory-error']")
+    expect(component.length).toBe(1)
+  })
+
+  test('renders error message from prop', () => {
+    const message = 'Some test error'
+    wrapper = setup({ errorMsg: message })
+    const errorMsgNode = wrapper.find("[data-test='error-msg']")
+    expect(errorMsgNode.text()).toEqual(message)
+  })
+})

yarn.lock

@@ -2183,11 +2183,6 @@ babel-plugin-jest-hoist@^26.6.2:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
-babel-plugin-react-remove-properties@^0.3.0:
-  version "0.3.0"
-  resolved "https://registry.yarnpkg.com/babel-plugin-react-remove-properties/-/babel-plugin-react-remove-properties-0.3.0.tgz#7b623fb3c424b6efb4edc9b1ae4cc50e7154b87f"
-  integrity sha512-vbxegtXGyVcUkCvayLzftU95vuvpYFV85pRpeMpohMHeEY46Qe0VNWfkVVcCbaZ12CXHzDFOj0esumATcW83ng==
-
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/babel-preset-current-node-syntax/-/babel-preset-current-node-syntax-1.0.1.tgz#b4399239b89b2a011f9ddbe3e4f401fc40cff73b"