HT2

src/components/banner/banner.js

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

src/components/button/button.js

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

src/components/product/product.js

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

src/components/product/product.test.js

@@ -24,6 +24,20 @@ 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-increment"]').simulate('click');
+    wrapper.find('button[data-id="product-increment"]').simulate('click');
+    wrapper.find('button[data-id="product-decrement"]').simulate('click');
+    expect(wrapper.find('[data-id="product-amount"]').text()).toBe('1');
+  });
+
+  it('amount should not be less then null', () => {
+    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,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 import cn from 'classnames';
 
 import { ReactComponent as Star } from '../../icons/star.svg';
@@ -15,4 +17,8 @@ const Rate = ({ value }) => (
   </div>
 );
 
+Rate.propTypes = {
+  value: PropTypes.number,
+};
+
 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,24 @@ const Restaurant = ({ restaurant }) => {
   );
 };
 
+Restaurant.propTypes = {
+  restaurant: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    menu: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: PropTypes.string,
+        name: PropTypes.string,
+        price: PropTypes.number,
+        ingredients: PropTypes.arrayOf(PropTypes.string),
+      })
+    ),
+    reviews: PropTypes.arrayOf(
+      PropTypes.shape({
+        rating: PropTypes.number.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,20 @@ export default function Restaurants({ restaurants }) {
     </div>
   );
 }
+
+Restaurants.propTypes = {
+  restaurants: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string,
+      menu: PropTypes.arrayOf(
+        PropTypes.shape({
+          id: PropTypes.string,
+          name: PropTypes.string,
+          price: PropTypes.number,
+          ingredients: PropTypes.arrayOf(PropTypes.string),
+        })
+      ),
+    })
+  ).isRequired,
+};

src/components/reviews/review/review.js

@@ -1,3 +1,5 @@
+import PropTypes from 'prop-types';
+
 import Rate from '../../rate';
 import styles from './review.module.css';
 
@@ -19,4 +21,10 @@ Review.defaultProps = {
   user: 'Anonymous',
 };
 
+Review.propTypes = {
+  user: PropTypes.string,
+  text: PropTypes.string,
+  rating: PropTypes.number,
+};
+
 export default Review;

src/components/reviews/reviews.js

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

src/components/reviews/reviews.test.js

@@ -0,0 +1,38 @@
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+
+import Reviews from './reviews';
+import { restaurants } from '../../fixtures';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('Reviews', () => {
+  const reviews = restaurants[0].reviews;
+  const wrapper = mount(<Reviews reviews={reviews} />);
+
+  it('should render', () => {
+    expect(wrapper.find('[data-id="reviews"]').length).toBe(1);
+  });
+
+  it('should have children', () => {
+    expect(wrapper.find('[data-id="review"]').length).not.toBe(0);
+  });
+
+  it('each child is not Anonymous', () => {
+    wrapper.find('[data-id="review"]').forEach((el) => {
+      expect(el.find('h4').text()).not.toBe('Anonymous');
+    });
+  });
+
+  it('each child name is not empty', () => {
+    wrapper.find('[data-id="review"]').forEach((el) => {
+      expect(el.find('h4').text().length).not.toBe(0);
+    });
+  });
+
+  it('each child has description', () => {
+    wrapper.find('[data-id="review"]').forEach((el) => {
+      expect(el.find('p').text().length).not.toBe(0);
+    });
+  });
+});

src/components/tabs/tabs.js

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