ht2

package.json

@@ -46,7 +46,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.5",
     "enzyme": "^3.11.0",
     "husky": "^7.0.4",
-    "prettier": "^2.5.0",
+    "prettier": "^2.5.1",
     "pretty-quick": "^3.1.2"
   }
 }

src/components/app/app.js

@@ -1,8 +1,13 @@
 import { PureComponent } from 'react';
 import Restaurants from '../restaurants';
 import Header from '../header';
+import PropTypes from 'prop-types';
 
 export default class App extends PureComponent {
+  static propTypes = {
+    restaurants: PropTypes.array.isRequired,
+  };
+
   render() {
     return (
       <div>

src/components/banner/banner.js

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

src/components/button/button.js

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

src/components/product/product.js

@@ -1,9 +1,9 @@
 import { useEffect } from 'react';
-import PropTypes from 'prop-types';
 
 import counter from '../../hocs/counter';
 import styles from './product.module.css';
 import Button from '../button';
+import PropTypes from 'prop-types';
 
 function Product({ product, amount, decrement, increment, fetchData }) {
   useEffect(() => {
@@ -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}
+                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

@@ -4,6 +4,8 @@ import { ReactComponent as Star } from '../../icons/star.svg';
 
 import styles from './rate.module.css';
 
+import PropTypes from 'prop-types';
+
 const Rate = ({ value }) => (
   <div>
     {[...Array(5)].map((_, i) => (
@@ -15,4 +17,8 @@ const Rate = ({ value }) => (
   </div>
 );
 
+Rate.propTypes = {
+  value: PropTypes.number,
+};
+
 export default Rate;

src/components/restaurant/restaurant.js

@@ -4,6 +4,7 @@ import Reviews from '../reviews';
 import Banner from '../banner';
 import Rate from '../rate';
 import styles from './restaurant.module.css';
+import PropTypes from 'prop-types';
 
 const Restaurant = ({ restaurant }) => {
   const { id, name, menu, reviews } = restaurant;
@@ -26,4 +27,13 @@ const Restaurant = ({ restaurant }) => {
   );
 };
 
+Restaurant.propTypes = {
+  restaurant: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    menu: PropTypes.array.isRequired,
+    reviews: PropTypes.array.isRequired,
+  }),
+};
+
 export default Restaurant;

src/components/restaurants/restaurants.js

@@ -3,6 +3,8 @@ import { useState, useMemo } from 'react';
 import Restaurant from '../restaurant';
 import Tabs from '../tabs';
 
+import PropTypes from 'prop-types';
+
 export default function Restaurants({ restaurants }) {
   const [activeId, setActiveId] = useState(restaurants[0].id);
 
@@ -23,3 +25,12 @@ export default function Restaurants({ restaurants }) {
     </div>
   );
 }
+
+Restaurants.propTypes = {
+  restaurants: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+    })
+  ),
+};

src/components/reviews/review/review.js

@@ -1,6 +1,8 @@
 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}>
@@ -20,3 +22,9 @@ Review.defaultProps = {
 };
 
 export default Review;
+
+Review.propTypes = {
+  user: PropTypes.string,
+  text: PropTypes.string,
+  rating: PropTypes.number,
+};

src/components/reviews/reviews.js

@@ -1,14 +1,24 @@
 import Review from './review';
 import styles from './reviews.module.css';
 
+import PropTypes from 'prop-types';
+
 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>
   );
 };
 
 export default Reviews;
+
+Reviews.propTypes = {
+  reviews: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+    })
+  ),
+};

src/components/reviews/reviews.test.js

@@ -0,0 +1,21 @@
+import Enzyme, { mount } from 'enzyme';
+import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import Reviews from './reviews';
+import { restaurants } from '../../fixtures';
+import review from './review';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const reviews = restaurants[0].reviews;
+
+describe('Reviews', () => {
+  it('should render', () => {
+    const wrapper = mount(<Reviews reviews={reviews} />);
+    expect(wrapper.find('[data-id="reviews"]').length).toBe(1);
+  });
+
+  it('should render all reviews', () => {
+    const wrapper = mount(<Reviews reviews={reviews} />);
+    expect(wrapper.find('[data-id="review"]').length).toBe(reviews.length);
+  });
+});

src/components/tabs/tabs.js

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

yarn.lock

@@ -8989,10 +8989,10 @@ prepend-http@^1.0.0:
   resolved "https://registry.yarnpkg.com/prepend-http/-/prepend-http-1.0.4.tgz#d4f4562b0ce3696e41ac52d0e002e57a635dc6dc"
   integrity sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=
 
-prettier@^2.5.0:
-  version "2.5.0"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.0.tgz#a6370e2d4594e093270419d9cc47f7670488f893"
-  integrity sha512-FM/zAKgWTxj40rH03VxzIPdXmj39SwSjwG0heUcNFwI+EMZJnY93yAiKXM3dObIKAM5TA88werc8T/EwhB45eg==
+prettier@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.1.tgz#fff75fa9d519c54cf0fce328c1017d94546bc56a"
+  integrity sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==
 
 pretty-bytes@^5.3.0:
   version "5.6.0"