Merge pull request #86 from sima-land/85-product-carousel-fix

#85 ProductCarousel: исправить ошибку при удалении контента при показанной всплывающей карточке
sima-land · Feb 22, 2022 · e72e170 · e72e170
2 parents 263b8b7 + be94cd5
commit e72e170
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 0 deletions.
diff --git a/src/desktop/components/product-carousel/__test__/index.test.tsx b/src/desktop/components/product-carousel/__test__/index.test.tsx
@@ -9,6 +9,7 @@ import { HoverCard } from '../hover-card';
 import { Carousel } from '@sima-land/ui-nucleons/carousel';
 import { Parts, ProductInfo } from '../../../../common/components/product-info';
 import { LayerProvider } from '@sima-land/ui-nucleons/helpers/layer';
+import { Stepper } from '@sima-land/ui-nucleons/stepper';
 
 jest.mock('@sima-land/ui-nucleons/hooks/media', () => {
   const original = jest.requireActual('@sima-land/ui-nucleons/hooks/media');
@@ -269,4 +270,40 @@ describe('<ProductCarousel />', () => {
       expect(button.style.zIndex).toBe('22');
     });
   });
+
+  it('should handle removing content when hover card is shown', () => {
+    const TestComponent = ({ withContent }: { withContent?: boolean }) => (
+      <ProductCarousel withHoverCard>
+        {(withContent ? items : []).map((item, index) => (
+          <ProductInfo key={index}>
+            <Parts.Image src={item.imageSrc} href={item.url} />
+
+            <Parts.Prices
+              price={item.price}
+              oldPrice={item.oldPrice}
+              currencyGrapheme={item.currencyGrapheme}
+            />
+
+            <Parts.Title href={item.url}>{item.name}</Parts.Title>
+
+            <Parts.Footer>
+              <Parts.CartControl stepText='По 5 шт'>
+                <Stepper defaultValue={3} size='s' style={{ width: '122px' }} />
+              </Parts.CartControl>
+            </Parts.Footer>
+          </ProductInfo>
+        ))}
+      </ProductCarousel>
+    );
+
+    const { queryAllByTestId, getAllByTestId, rerender } = render(<TestComponent withContent />);
+
+    expect(queryAllByTestId('product-card:hover-card')).toHaveLength(0);
+    fireEvent.mouseEnter(getAllByTestId('product-carousel:item')[0]);
+    expect(queryAllByTestId('product-card:hover-card')).toHaveLength(1);
+
+    expect(() => {
+      rerender(<TestComponent withContent={false} />);
+    }).not.toThrow();
+  });
 });
diff --git a/src/desktop/components/product-carousel/index.tsx b/src/desktop/components/product-carousel/index.tsx
@@ -142,6 +142,7 @@ export const ProductCarousel = ({
       {/* ВАЖНО: чтобы размонтировать всплывающую карточку строго каждый раз используем массив и key */}
       {withHoverCard &&
         activeItemIndex !== null &&
+        items[activeItemIndex] &&
         [items[activeItemIndex]].map(item => (
           <HoverCard
             key={activeItemIndex}