prop types, tests

src/components/banner/banner.js

@@ -1,4 +1,5 @@
 import styles from './banner.module.css';
+import PropTypes from 'prop-types';
 
 import banner from './banner.jpg';
 
@@ -12,4 +13,9 @@ const Banner = ({ heading, children }) => (
   </div>
 );
 
+Banner.propTypes = {
+  heading: PropTypes.string.isRequired,
+  children: PropTypes.element.isRequired
+};
+
 export default Banner;

src/components/button/button.js

@@ -1,4 +1,5 @@
 import styles from './button.module.css';
+import PropTypes from 'prop-types';
 
 import { ReactComponent as PlusIcon } from '../../icons/plus.svg';
 import { ReactComponent as MinusIcon } from '../../icons/minus.svg';
@@ -17,4 +18,8 @@ const Button = ({ icon, ...props }) => {
   );
 };
 
+Button.propTypes = {
+  icon: PropTypes.string.isRequired
+};
+
 export default Button;

src/components/product/product.js

@@ -24,7 +24,7 @@ function Product({ product, amount, decrement, increment, fetchData }) {
               {amount}
             </div>
             <div className={styles.buttons}>
-              <Button onClick={decrement} icon="minus" />
+              <Button onClick={decrement} data-id="product-decrement" icon="minus" />
               <Button
                 onClick={increment}
                 data-id="product-increment"

src/components/product/product.test.js

@@ -24,6 +24,12 @@ describe('Product', () => {
     expect(wrapper.find('[data-id="product-amount"]').text()).toBe('1');
   });
 
+  it('should decrement amount', () => {
+    const wrapper = mount(<Product product={product} />);
+    wrapper.find('button[data-id="product-decrement"]').simulate('click');
+    expect(wrapper.find('[data-id="product-amount"]').text()).toBe('0');
+  });
+
   it('should fetch data', () => {
     const fn = jest.fn();
     mount(<Product product={product} fetchData={fn} />);

src/components/rate/rate.js

@@ -1,18 +1,24 @@
 import cn from 'classnames';
+import PropTypes from 'prop-types';
 
 import { ReactComponent as Star } from '../../icons/star.svg';
 
 import styles from './rate.module.css';
 
 const Rate = ({ value }) => (
-  <div>
+  <div >
     {[...Array(5)].map((_, i) => (
       <Star
+        data-id="review-rating"
         key={i}
         className={cn(styles.star, { [styles.checked]: i <= value - 1 })}
       />
     ))}
   </div>
 );
 
+Rate.propTypes = {
+  value: PropTypes.number.isRequired
+};
+
 export default Rate;

src/components/restaurant/restaurant.js

@@ -1,4 +1,6 @@
 import { useMemo } from 'react';
+import PropTypes from 'prop-types';
+
 import Menu from '../menu';
 import Reviews from '../reviews';
 import Banner from '../banner';
@@ -26,4 +28,26 @@ const Restaurant = ({ restaurant }) => {
   );
 };
 
+Restaurant.propTypes = {
+  restaurant:
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      menu: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.string.isRequired,
+          name: PropTypes.string.isRequired,
+          price: PropTypes.number.isRequired,
+          ingredients: PropTypes.arrayOf(PropTypes.string).isRequired,
+        })).isRequired,
+      reviews: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.string.isRequired,
+          user: PropTypes.string.isRequired,
+          rating: PropTypes.number.isRequired,
+          text: PropTypes.string.isRequired,
+        })).isRequired,
+    }).isRequired
+};
+
 export default Restaurant;

src/components/restaurants/restaurants.js

@@ -1,4 +1,5 @@
 import { useState, useMemo } from 'react';
+import PropTypes from 'prop-types';
 
 import Restaurant from '../restaurant';
 import Tabs from '../tabs';
@@ -23,3 +24,12 @@ export default function Restaurants({ restaurants }) {
     </div>
   );
 }
+
+Restaurants.propTypes = {
+  restaurants: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+    }).isRequired
+  ).isRequired,
+};

src/components/reviews/review/review.js

@@ -1,12 +1,14 @@
 import Rate from '../../rate';
 import styles from './review.module.css';
 
+import PropTypes from 'prop-types';
+
 const Review = ({ user, text, rating }) => (
   <div className={styles.review}>
     <div className={styles.content}>
       <div>
-        <h4 className={styles.name}>{user}</h4>
-        <p className={styles.comment}>{text}</p>
+        <h4 data-id="review-name" className={styles.name}>{user}</h4>
+        <p data-id="review-text" className={styles.comment}>{text}</p>
       </div>
       <div className={styles.rate}>
         <Rate value={rating} />
@@ -19,4 +21,10 @@ Review.defaultProps = {
   user: 'Anonymous',
 };
 
+Review.propTypes = {
+  user: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+  rating: PropTypes.number.isRequired,
+};
+
 export default Review;

src/components/reviews/reviews.js

@@ -1,14 +1,23 @@
 import Review from './review';
 import styles from './reviews.module.css';
 
+import PropTypes from 'prop-types';
+
 const Reviews = ({ reviews }) => {
   return (
-    <div className={styles.reviews}>
-      {reviews.map((review) => (
+    <div className={styles.reviews} data-id="reviews">
+      {reviews && reviews.map((review) => (
         <Review key={review.id} {...review} />
       ))}
     </div>
   );
 };
 
+Reviews.propTypes = {
+  reviews: PropTypes.arrayOf(
+    PropTypes.shape({
+    id: PropTypes.string.isRequired,
+  })).isRequired
+};
+
 export default Reviews;

src/components/reviews/reviews.test.js

@@ -0,0 +1,58 @@
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Reviews from './reviews';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const reviews = [{
+    id: '5db6247b-ab1c-49db-be1f-8dd27fd38b81',
+    text: 'Finally! This place is amazing place for breakfast, lunch, dinner and supper',
+    rating: 5,
+  }];
+
+describe('Reviews', () => {
+  it(' should render Reviews', () => {
+    const wrapper = mount(<Reviews reviews={reviews}/>);
+    expect(wrapper.find('[data-id="reviews"]').length).toBe(1);
+  });
+
+  it('should render Rate', () => {
+    const wrapper = mount(<Reviews reviews={reviews}/>);
+    expect(wrapper.find('svg[data-id="review-rating"]').length).toBe(5);
+  });
+
+  it('should render default name', () => {
+    const wrapper = mount(<Reviews reviews={reviews}/>);
+    expect(wrapper.find('h4[data-id="review-name"]').text()).toEqual('Anonymous')
+  });
+
+  it('should render text', () => {
+    const wrapper = mount(<Reviews reviews={reviews}/>);
+    expect(wrapper.find('p[data-id="review-text"]').text()).toEqual('Finally! This place is amazing place for breakfast, lunch, dinner and supper')
+  });
+
+  it('allows us to set props', () => {
+    const wrapper = mount(<Reviews reviews={reviews} />);
+    expect(wrapper.props().reviews[0].rating).toEqual(5);
+    wrapper.setProps({ bar: 'foo' });
+    expect(wrapper.props().bar).toEqual('foo');
+  });
+
+  it('reviews is an array of objects', () => {
+    const wrapper = mount(<Reviews reviews={reviews} />);
+    expect(reviews).toHaveLength(1);
+  });
+
+  it('review has properties', () => {
+    const wrapper = mount(<Reviews reviews={reviews} />);
+    expect(reviews[0]).toHaveProperty('id');
+    expect(reviews[0]).toHaveProperty('text');
+    expect(reviews[0]).toHaveProperty('rating');
+  });
+
+  it('reviews rating is a number', () => {
+    const wrapper = mount(<Reviews reviews={reviews} />);
+    expect(typeof reviews[0].rating).toEqual("number");
+  });
+});
+

src/components/tabs/tabs.js

@@ -1,3 +1,4 @@
+import PropTypes from 'prop-types';
 import cn from 'classnames';
 
 import styles from './tabs.module.css';
@@ -17,3 +18,14 @@ export default function Tabs({ tabs, activeId, onChange }) {
     </div>
   );
 }
+
+Tabs.propTypes = {
+  tabs: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+  })).isRequired,
+  activeId: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+