RUC - 60 product card

src/App.scss

@@ -10,3 +10,9 @@
 .firstSelect {
   z-index: 1;
 }
+
+.productCard {
+  width: 300px;
+  height: 400px;
+  margin: 20px;
+}

src/App.tsx

@@ -19,6 +19,8 @@ import './components/atoms/Breadcrumbs/Breadcrumbs.scss';
 import Toast from './components/atoms/Toast/Toast';
 import Select from './components/atoms/Select/Select';
 import selectItems from './common/mocks/selectItems';
+import Card from './components/organisms/Card/Card';
+import mockProductDetails from './common/mocks/productDetails';
 
 function App() {
   const [value, setValue] = useState('');
@@ -27,6 +29,8 @@ function App() {
   const [progress, setProgress] = useState(0);
   const [showModal, handleShowModal] = useState(false);
   const [showToast, setShowToast] = useState(false);
+  const [isFav, setIsFav] = useState(false);
+  const [productCount, setProductCount] = useState(0);
 
   useEffect(() => {
     styleReorder();
@@ -130,6 +134,18 @@ function App() {
           setMultipleSelectOption(option);
         }}
       />
+      <Card
+        productDetails={mockProductDetails}
+        className="productCard"
+        onWishlistIconClick={() => {
+          setIsFav(!isFav);
+        }}
+        onCartIconClick={() => {
+          setProductCount(productCount + 1);
+        }}
+        isOnWishlist={isFav}
+        numberOfItemsInCart={productCount}
+      />
     </ThemeProvider>
   );
 }

src/common/mocks/productDetails.ts

@@ -0,0 +1,7 @@
+export default {
+  name: 'Croissant',
+  price: '3.00 EUR',
+  shortDescription: 'Taste our delicious croissants...',
+  imageUrl: 'https://cdn.pixabay.com/photo/2016/03/27/21/59/bread-1284438_1280.jpg',
+  hoverImageUrl: 'https://cdn.pixabay.com/photo/2016/11/29/05/07/baked-goods-1867459_1280.jpg',
+}

src/components/atoms/Image/Image.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
-import {OBJECT_FIT_OPTIONS} from '../../../common/constants/consts';
+import { OBJECT_FIT_OPTIONS } from '../../../common/constants/consts';
 
 interface IImage {
   className?: string;

src/components/atoms/Text/Text.tsx

@@ -4,7 +4,7 @@ import { COLOR_OPTIONS, TEXT_ALIGNMENT_OPTIONS, FONT_WEIGHT_OPTIONS } from '../.
 
 interface IText {
   className?: string;
-  children: string;
+  children?: string;
   color?: string;
   fontColor?: string;
   fontWeight?:

src/components/organisms/Card/Card.spec.js

@@ -0,0 +1,185 @@
+import React from 'react';
+import { create, act } from 'react-test-renderer';
+import { fireEvent, render } from '@testing-library/react';
+import 'jest-styled-components';
+import { ThemeProvider } from 'styled-components';
+import theme from '../../../common/theme';
+import Card, { HeartIcon } from './Card';
+import CardDetails from './CardDetails';
+import { CartIcon } from './CartIconContainer';
+import mockProductDetails from '../../../common/mocks/productDetails';
+import setupIntersectionObserverMock from '../../../helpers/intersectionObserverMock';
+import Badge from '../../atoms/Badge/Badge';
+
+describe('Card component', () => {
+  beforeEach(() => {
+    setupIntersectionObserverMock();
+  });
+
+  it('should render correctly', () => {
+    const card = create(
+      <ThemeProvider theme={theme}>
+        <Card productDetails={mockProductDetails} />
+      </ThemeProvider>
+    ).toJSON();
+    expect(card).toMatchSnapshot();
+  })
+
+  it('should render card with custom class', () => {
+    const card = create(
+      <ThemeProvider theme={theme}>
+        <Card className="test-class" productDetails={mockProductDetails} />
+      </ThemeProvider>
+    ).toJSON();
+    expect(card.props.className).toEqual(expect.stringContaining('test-class'));
+  });
+
+  it('should render card product details', () => {
+    const card = create(
+      <ThemeProvider theme={theme}>
+        <Card productDetails={mockProductDetails} />
+      </ThemeProvider>
+    );
+    const instance = card.root;
+    const productDetails = instance.findByType(CardDetails).findByType('div');
+    expect(productDetails.children[0].props.children).toBe('Croissant');
+    expect(productDetails.children[1].props.children).toBe('Taste our delicious croissants...');
+    expect(productDetails.children[2].props.children).toBe('3.00 EUR');
+  });
+
+  it('should not render description when hideDescription props is passed', () => {
+    const card = create(
+      <ThemeProvider theme={theme}>
+        <Card productDetails={mockProductDetails} hideDescription hideWishlistIcon />
+      </ThemeProvider>
+    );
+    const instance = card.root;
+    const productDetails = instance.findByType(CardDetails).findByType('div');
+    expect(productDetails.children.length).toEqual(2);
+    expect(productDetails.children[0].props.children).toBe('Croissant');
+    expect(productDetails.children[1].props.children).toBe('3.00 EUR');
+  });
+
+  it('should not render price when hidePrice props is passed', () => {
+    const card = create(
+      <ThemeProvider theme={theme}>
+        <Card productDetails={mockProductDetails} hidePrice hideWishlistIcon />
+      </ThemeProvider>
+    );
+    const instance = card.root;
+    const productDetails = instance.findByType(CardDetails).findByType('div');
+    expect(productDetails.children.length).toEqual(2);
+    expect(productDetails.children[0].props.children).toBe('Croissant');
+    expect(productDetails.children[1].props.children).toBe('Taste our delicious croissants...');
+  });
+
+  it('should render product details with font color based on color prop', () => {
+    const { getByText } = render(
+      <ThemeProvider theme={theme}>
+        <Card productDetails={mockProductDetails} color="secondary" />
+      </ThemeProvider>
+    );
+    const productName = getByText('Croissant');
+    expect(productName).toHaveStyle('color: #2196f3');
+  });
+
+  it('should render horizontal card by default', () => {
+    const card = create(
+      <ThemeProvider theme={theme}>
+        <Card productDetails={mockProductDetails} />
+      </ThemeProvider>
+    ).toJSON();
+    expect(card).toHaveStyleRule('flex-direction', 'column');
+  });
+
+  it('should render vertical card when proper direction props is passed', () => {
+    const card = create(
+      <ThemeProvider theme={theme}>
+        <Card productDetails={mockProductDetails} direction="vertical" />
+      </ThemeProvider>
+    ).toJSON();
+    expect(card).toHaveStyleRule('flex-direction', 'row');
+  });
+
+  it('should render with passed images', () => {
+    const { container, getByAltText } = render(
+      <ThemeProvider theme={theme}>
+        <Card productDetails={mockProductDetails} />
+      </ThemeProvider>
+    );
+    const image = getByAltText('Croissant');
+    expect(image).toHaveAttribute(
+      'src',
+      'https://cdn.pixabay.com/photo/2016/03/27/21/59/bread-1284438_1280.jpg'
+    );
+    fireEvent.mouseEnter(container.firstChild);
+    expect(image).toHaveAttribute(
+      'src',
+      'https://cdn.pixabay.com/photo/2016/11/29/05/07/baked-goods-1867459_1280.jpg'
+    );
+  });
+
+  it('should call onCartIconClick', () => {
+    const mockOnClick = jest.fn();
+    const e = { stopPropagation: jest.fn() };
+    const component = create(
+      <ThemeProvider theme={theme}>
+        <Card
+          productDetails={mockProductDetails}
+          onCartIconClick={mockOnClick}
+        />
+      </ThemeProvider>
+    );
+    const instance = component.root;
+    const cartIcon = instance.findByType(CartIcon);
+    act(() => {
+      cartIcon.props.onClick(e);
+    });
+    expect(mockOnClick.mock.calls.length).toEqual(1);
+  });
+
+  it('should call onWishlistIconClick', () => {
+    const mockOnClick = jest.fn();
+    const e = { stopPropagation: jest.fn() };
+    const component = create(
+      <ThemeProvider theme={theme}>
+        <Card
+          productDetails={mockProductDetails}
+          onWishlistIconClick={mockOnClick}
+        />
+      </ThemeProvider>
+    );
+    const instance = component.root;
+    const wishlistIcon = instance.findByType(HeartIcon);
+    act(() => {
+      wishlistIcon.props.onClick(e);
+    })
+    expect(mockOnClick.mock.calls.length).toEqual(1);
+  })
+
+  it('should call onClick', () => {
+    const mockOnClick = jest.fn();
+    const component = create(
+      <ThemeProvider theme={theme}>
+        <Card productDetails={mockProductDetails} onClick={mockOnClick} />
+      </ThemeProvider>
+    );
+    const instance = component.root;
+    const card = instance.findByType(Card);
+    act(() => {
+      card.props.onClick();
+    });
+    expect(mockOnClick.mock.calls.length).toEqual(1);
+  });
+
+  it('should show given cart product number', () => {
+    const component = create(
+      <ThemeProvider theme={theme}>
+        <Card productDetails={mockProductDetails} numberOfItemsInCart={3} />
+      </ThemeProvider>
+    );
+    const instance = component.root;
+    const badge = instance.findByType(Badge).findByType('span');
+    expect(badge.props.children).toBe(3);
+  })
+});