{
const item = {
@@ -30,8 +31,40 @@ describe('ProductRow', () => {
expect(wrapper).toMatchSnapshot();
});
- it('renders properly without heart', () => {
- const wrapper = mount(
);
- expect(wrapper).toMatchSnapshot();
+ it('should render wish button', () => {
+ const spy = jest.fn();
+ const wrapper = mount(
);
+ expect(wrapper.getDOMNode().querySelectorAll('.wish-button')).toHaveLength(1);
+ });
+
+ it('should render wish button with click handler', () => {
+ const spy = jest.fn();
+ const wrapper = mount(
+
,
+ );
+
+ expect(wrapper.getDOMNode().querySelectorAll('.wish-button')).toHaveLength(1);
+
+ expect(spy).toHaveBeenCalledTimes(0);
+ fireEvent.click(wrapper.getDOMNode().querySelector('.wish-button'));
+ expect(spy).toHaveBeenCalledTimes(1);
+ });
+
+ it('should render wish button not pressed', () => {
+ const spy = jest.fn();
+ const wrapper = mount(
+
,
+ );
+
+ expect(wrapper.getDOMNode().querySelectorAll('.wish-button')).toHaveLength(1);
+
+ expect(spy).toHaveBeenCalledTimes(0);
+ fireEvent.click(wrapper.getDOMNode().querySelector('.wish-button'));
+ expect(spy).toHaveBeenCalledTimes(1);
+ });
+
+ it('should NOT render wish button', () => {
+ const wrapper = mount(
);
+ expect(wrapper.getDOMNode().querySelectorAll('.wish-button')).toHaveLength(0);
});
});
diff --git a/src/mobile/components/product-row/index.tsx b/src/mobile/components/product-row/index.tsx
index 09fa4065..2c05bffb 100644
--- a/src/mobile/components/product-row/index.tsx
+++ b/src/mobile/components/product-row/index.tsx
@@ -6,51 +6,69 @@ import { Link } from '@sima-land/ui-nucleons/link';
import { Price } from '@sima-land/ui-nucleons/price';
import { Box } from '@sima-land/ui-nucleons/box';
import { Text } from '@sima-land/ui-nucleons/text';
-import { WishButton } from '../../../common/components/wish-button';
-
-const cx = classnames.bind(styles);
+import { StrokedSVG } from '@sima-land/ui-nucleons/stroked-svg';
+import FavSVG from '@sima-land/ui-quarks/icons/24x24/Filled/favorite';
+import NotFavSVG from '@sima-land/ui-quarks/icons/24x24/Stroked/favorite';
+import { COLORS } from '@sima-land/ui-nucleons/colors';
export interface ProductRowProps {
- sid: number;
- itemUrl: string;
- imageUrl: string;
- name: string;
- currencyGrapheme: string;
- itemPrice: number;
+ /** Общая сумма товара. */
commonPrice: number;
- isFetchingWishItems: boolean;
- isWished: boolean;
- unit: string;
- onActionsClick: () => void;
- onWishButtonClick?: () => void;
+
+ /** Количество товара, которое будет доставлено. */
count?: number;
+
+ /** Символ валюты. */
+ currencyGrapheme: string;
+
+ /** Ссылка на картинку товара. */
+ imageUrl: string;
+
+ /** Изначально добавленное количество товара при заказе. */
initialCount?: number;
+
+ /** Признак загрузки добавления товара в список избранного. */
+ isFetchingWishItems?: boolean;
+
+ /** Товар добавлен в избранное. */
+ isWished?: boolean;
+
+ /** Цена товара за единицу. */
+ itemPrice: number;
+
+ /** Ссылка на страницу товара. */
+ itemUrl: string;
+
+ /** Id заказа в который перемещен товар. */
movedOrderId?: number;
+
+ /** Название товара. */
+ name: string;
+
+ /** Признак товара не в наличии. */
notInStock?: boolean;
+
+ /** Обработчик нажатия на кнопку действий над товаром. */
+ onActionsClick?: () => void;
+
+ /** Обработчик добавления/удаления в избранное. */
+ onWishButtonClick?: () => void;
+
+ /** Артикул товара. */
+ sid: number;
+
+ /** Единицы измерения. */
+ unit: string;
}
+const cx = classnames.bind(styles);
+
/**
- * Компонент вертикальной карточки товара для списков товаров.
- * @param props Свойства компонента.
- * @param props.itemUrl Ссылка на страницу товара.
- * @param props.imageUrl Ссылка на картинку товара.
- * @param props.name Название товара.
- * @param props.sid Артикул товара.
- * @param props.isWished Товар добавлен в избранное.
- * @param props.count Количество товара, которое будет доставлено.
- * @param props.unit Единицы измерения.
- * @param props.initialCount Изначально добавленное количество товара при заказе.
- * @param props.movedOrderId Id заказа в который перемещен товар.
- * @param props.notInStock Признак товара не в наличии.
- * @param props.currencyGrapheme Символ валюты.
- * @param props.commonPrice Общая сумма товара.
- * @param props.itemPrice Цена товара за единицу.
- * @param props.onWishButtonClick Обработчик добавления/удаления в избранное.
- * @param props.onActionsClick Обработчик нажатия на кнопку действий над товаром.
- * @param props.isFetchingWishItems Признак загрузки добавления товара в список избранного.
+ * Карточка товара для вертикальных списков товаров.
+ * @param props Свойства.
* @return Элемент.
*/
-export const ProductRow = ({
+export function ProductRow({
itemUrl,
imageUrl,
name,
@@ -67,71 +85,72 @@ export const ProductRow = ({
onWishButtonClick,
onActionsClick,
isFetchingWishItems,
-}: ProductRowProps) => (
-
-
-
-
-
- {onWishButtonClick && (
-
- )}
-
-
-
-
{name}
-
-
- Арт.: {sid}
-
- {Boolean(initialCount) && (
-
-
- {`Было в заказе: ${initialCount} ${unit}`}
- {`Вы получите: ${count} ${unit}`}
-
-
- )}
- {Boolean(itemPrice) && (
+}: ProductRowProps) {
+ return (
+
+
+
+ {/* @todo Использовать Parts.Image из ProductInfo */}
+
+
+ {onWishButtonClick && (
+
+ )}
+
+
+
+
{name}
+
-
-
- {` × ${count} ${unit}`}
-
-
- )}
- {Boolean(commonPrice && itemPrice) && (
-
-
-
-
+ Арт.: {sid}
- )}
- {Boolean(movedOrderId) && (
-
-
- Перемещен в заказ
-
- №{movedOrderId}
-
- )}
- {notInStock && (
-
-
- Нет на складе
-
-
- )}
+ {Boolean(initialCount) && (
+
+
+ {`Было в заказе: ${initialCount} ${unit}`}
+ {`Вы получите: ${count} ${unit}`}
+
+
+ )}
+ {Boolean(itemPrice) && (
+
+
+
+ {` × ${count} ${unit}`}
+
+
+ )}
+ {Boolean(commonPrice && itemPrice) && (
+
+
+
+
+
+ )}
+ {Boolean(movedOrderId) && (
+
+
+ Перемещен в заказ
+
+ №{movedOrderId}
+
+ )}
+ {notInStock && (
+
+
+ Нет на складе
+
+
+ )}
+
+
+
+
-
-
-
-
-);
+ );
+}
diff --git a/src/mobile/components/product-row/product-row.module.scss b/src/mobile/components/product-row/product-row.module.scss
index c850a8df..a58fd0f7 100644
--- a/src/mobile/components/product-row/product-row.module.scss
+++ b/src/mobile/components/product-row/product-row.module.scss
@@ -2,7 +2,6 @@
.wrapper {
display: flex;
- padding: 16px 0;
font-size: 14px;
&:not(:last-of-type) {
border-bottom: 1px solid colors.$basic-gray12;
diff --git a/src/mobile/components/product-slider/__test__/__snapshots__/index.test.tsx.snap b/src/mobile/components/product-slider/__test__/__snapshots__/index.test.tsx.snap
index 73183db2..50c2a6a4 100644
--- a/src/mobile/components/product-slider/__test__/__snapshots__/index.test.tsx.snap
+++ b/src/mobile/components/product-slider/__test__/__snapshots__/index.test.tsx.snap
@@ -161,10 +161,13 @@ exports[`
should renders correctly 1`] = `
style="width: 122px;"
>