From 0199341ba7502b832ad629419ee84feaf8223d5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=98eho=C5=99kov=C3=A1=20Kate=C5=99ina?=
 <katerina.rehorkova@almacareer.com>
Date: Wed, 29 Jan 2025 11:55:20 +0100
Subject: [PATCH] fixup! Feat(web-react): React version of Skeleton component
 #DS-1625

---
 .../src/components/Skeleton/SkeletonItem.tsx  |  6 +-
 .../__tests__/SkeletonHeading.test.tsx        | 59 ++++++-----------
 .../Skeleton/__tests__/SkeletonItem.test.tsx  | 54 +++++++---------
 .../Skeleton/__tests__/SkeletonShape.test.tsx | 32 +++-------
 .../Skeleton/__tests__/SkeletonText.test.tsx  | 64 ++++++-------------
 5 files changed, 79 insertions(+), 136 deletions(-)

diff --git a/packages/web-react/src/components/Skeleton/SkeletonItem.tsx b/packages/web-react/src/components/Skeleton/SkeletonItem.tsx
index 7fcd925fc3..b47b500621 100644
--- a/packages/web-react/src/components/Skeleton/SkeletonItem.tsx
+++ b/packages/web-react/src/components/Skeleton/SkeletonItem.tsx
@@ -1,13 +1,15 @@
 'use client';
 
 import React from 'react';
+import { useStyleProps } from '../../hooks';
 import { SpiritSkeletonItemProps } from '../../types';
 import { useSkeletonItemStyleProps } from './useSkeletonItemStyleProps';
 
 const SkeletonItem = (props: SpiritSkeletonItemProps): React.ReactElement => {
-  const { skeletonItemStyleProps, classProps } = useSkeletonItemStyleProps(props);
+  const { skeletonItemStyleProps, classProps, props: modifiedProps } = useSkeletonItemStyleProps(props);
+  const { props: otherProps } = useStyleProps(modifiedProps);
 
-  return <div className={classProps} aria-hidden="true" style={{ ...skeletonItemStyleProps }} />;
+  return <div {...otherProps} className={classProps} aria-hidden="true" style={{ ...skeletonItemStyleProps }} />;
 };
 
 export default SkeletonItem;
diff --git a/packages/web-react/src/components/Skeleton/__tests__/SkeletonHeading.test.tsx b/packages/web-react/src/components/Skeleton/__tests__/SkeletonHeading.test.tsx
index 6fb5416128..f5ccec0be0 100644
--- a/packages/web-react/src/components/Skeleton/__tests__/SkeletonHeading.test.tsx
+++ b/packages/web-react/src/components/Skeleton/__tests__/SkeletonHeading.test.tsx
@@ -1,11 +1,9 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
 import SkeletonHeading from '../SkeletonHeading';
 
-jest.mock('../../../hooks/useIcon');
-
 describe('SkeletonHeading', () => {
   classNamePrefixProviderTest(SkeletonHeading, 'Skeleton');
 
@@ -13,56 +11,41 @@ describe('SkeletonHeading', () => {
 
   restPropsTest(SkeletonHeading, 'div');
 
-  it('should have default classname', () => {
-    const { container } = render(<SkeletonHeading />);
-
-    const element = container.querySelector('div');
-    expect(element).toHaveClass('Skeleton--heading');
+  beforeEach(() => {
+    render(<SkeletonHeading data-testid="SkeletonHeading" />);
   });
 
-  it('should render default size class when size is not provided', () => {
-    const { container } = render(<SkeletonHeading lines={2} />);
-
-    const element = container.querySelector('div');
-    expect(element).toHaveClass('Skeleton--medium');
+  it('should have default classname', () => {
+    expect(screen.getByTestId('SkeletonHeading')).toHaveClass('Skeleton--heading');
   });
 
-  it('should render custom size class when size is provided', () => {
-    const { container } = render(<SkeletonHeading lines={2} size="large" />);
-
-    const element = container.querySelector('div');
-    expect(element).toHaveClass('Skeleton--large');
+  it('should render default size class when size is not provided', () => {
+    expect(screen.getByTestId('SkeletonHeading')).toHaveClass('Skeleton--medium');
   });
 
   it('should render with aria-live attribute set to polite by default', () => {
-    const { container } = render(<SkeletonHeading lines={2} />);
-
-    const element = container.querySelector('div');
-    expect(element).toHaveAttribute('aria-live', 'polite');
+    expect(screen.getByTestId('SkeletonHeading')).toHaveAttribute('aria-live', 'polite');
   });
 
   it('should render with aria-busy attribute set to true by default', () => {
-    const { container } = render(<SkeletonHeading lines={2} />);
-
-    const element = container.querySelector('div');
-    expect(element).toHaveAttribute('aria-busy', 'true');
+    expect(screen.getByTestId('SkeletonHeading')).toHaveAttribute('aria-busy', 'true');
   });
 
-  it('should render 1 text children by default', () => {
-    const { container } = render(<SkeletonHeading />);
-
-    const parentElement = container.querySelector('div');
-    const childDivElements = parentElement?.querySelectorAll('div');
-
-    expect(childDivElements?.length).toBe(1);
+  it('should render 1 text child by default', () => {
+    expect(screen.getByTestId('SkeletonHeading').children).toHaveLength(1);
   });
 
-  it('should render custom text children when lines is provided', () => {
-    const { container } = render(<SkeletonHeading lines={3} />);
+  describe('with custom props', () => {
+    beforeEach(() => {
+      render(<SkeletonHeading data-testid="SkeletonHeadingCustom" lines={3} size="large" />);
+    });
 
-    const parentElement = container.querySelector('div');
-    const childDivElements = parentElement?.querySelectorAll('div');
+    it('should render custom size class when size is provided', () => {
+      expect(screen.getByTestId('SkeletonHeadingCustom')).toHaveClass('Skeleton--large');
+    });
 
-    expect(childDivElements?.length).toBe(3);
+    it('should render custom text children when lines is provided', () => {
+      expect(screen.getByTestId('SkeletonHeadingCustom').children).toHaveLength(3);
+    });
   });
 });
diff --git a/packages/web-react/src/components/Skeleton/__tests__/SkeletonItem.test.tsx b/packages/web-react/src/components/Skeleton/__tests__/SkeletonItem.test.tsx
index 856f4955e6..1a0d06cc38 100644
--- a/packages/web-react/src/components/Skeleton/__tests__/SkeletonItem.test.tsx
+++ b/packages/web-react/src/components/Skeleton/__tests__/SkeletonItem.test.tsx
@@ -1,53 +1,47 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { classNamePrefixProviderTest } from '@local/tests';
+import { classNamePrefixProviderTest, restPropsTest } from '@local/tests';
 import SkeletonItem from '../SkeletonItem';
-import SkeletonShape from '../SkeletonShape';
 
 describe('SkeletonItem', () => {
   classNamePrefixProviderTest(SkeletonItem, 'Skeleton__item');
 
-  it('should render with aria-hidden attribute set to true by default', () => {
-    const { container } = render(<SkeletonItem />);
+  restPropsTest(SkeletonItem, 'div');
 
-    const element = container.querySelector('div');
-    expect(element).toHaveAttribute('aria-hidden', 'true');
+  beforeEach(() => {
+    render(<SkeletonItem width={200} height={150} data-testid="SkeletonItem" />);
+  });
+
+  it('should render with aria-hidden attribute set to true by default', () => {
+    expect(screen.getByTestId('SkeletonItem')).toHaveAttribute('aria-hidden', 'true');
   });
 
   it('renders with custom width and height', () => {
-    const { container } = render(<SkeletonItem width={200} height={150} />);
-    const element = container.querySelector('div');
-    expect(element).toHaveStyle({
+    expect(screen.getByTestId('SkeletonItem')).toHaveStyle({
       '--spirit-skeleton-shape-width': '200px',
       '--spirit-skeleton-shape-height': '150px',
     });
   });
 
-  it('renders with default border radius', () => {
-    const { container } = render(<SkeletonShape width={100} height={100} />);
-    const element = container.querySelector('div');
-    const child = element?.querySelector('div');
+  it('has custom border radius', () => {
+    render(<SkeletonItem borderRadius="200" data-testid="SkeletonItemRadius" />);
 
-    expect(child).toHaveStyle({ '--spirit-skeleton-shape-radius': 'var(--spirit-radius-400)' });
-  });
-
-  it('renders with custom border radius', () => {
-    const { container } = render(<SkeletonShape width={100} height={100} borderRadius={200} />);
-    const element = container.querySelector('div');
-    const child = element?.querySelector('div');
-
-    expect(child).toHaveStyle({ '--spirit-skeleton-shape-radius': 'var(--spirit-radius-200)' });
+    expect(screen.getByTestId('SkeletonItemRadius')).toHaveStyle({
+      '--spirit-skeleton-shape-radius': 'var(--spirit-radius-200)',
+    });
   });
 
-  it('renders with responsive border radius', () => {
-    const { container } = render(
-      <SkeletonShape width={100} height={100} borderRadius={{ mobile: '100', tablet: '400', desktop: '500' }} />,
+  it('has responsive border radius', () => {
+    render(
+      <SkeletonItem
+        width={200}
+        height={150}
+        borderRadius={{ mobile: '100', tablet: '400', desktop: '500' }}
+        data-testid="SkeletonItemRadius"
+      />,
     );
-    const element = container.querySelector('div');
-    const child = element?.querySelector('div');
-
-    expect(child).toHaveStyle({
+    expect(screen.getByTestId('SkeletonItemRadius')).toHaveStyle({
       '--spirit-skeleton-shape-radius': 'var(--spirit-radius-100)',
       '--spirit-skeleton-shape-radius-tablet': 'var(--spirit-radius-400)',
       '--spirit-skeleton-shape-radius-desktop': 'var(--spirit-radius-500)',
diff --git a/packages/web-react/src/components/Skeleton/__tests__/SkeletonShape.test.tsx b/packages/web-react/src/components/Skeleton/__tests__/SkeletonShape.test.tsx
index d06153b49a..6405d75efb 100644
--- a/packages/web-react/src/components/Skeleton/__tests__/SkeletonShape.test.tsx
+++ b/packages/web-react/src/components/Skeleton/__tests__/SkeletonShape.test.tsx
@@ -1,11 +1,9 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
 import SkeletonShape from '../SkeletonShape';
 
-jest.mock('../../../hooks/useIcon');
-
 describe('SkeletonShape', () => {
   classNamePrefixProviderTest(SkeletonShape, 'Skeleton');
 
@@ -13,33 +11,23 @@ describe('SkeletonShape', () => {
 
   restPropsTest(SkeletonShape, 'div');
 
-  it('should have default classname', () => {
-    const { container } = render(<SkeletonShape width={100} height={100} />);
+  beforeEach(() => {
+    render(<SkeletonShape width={100} height={100} data-testid="SkeletonShape" />);
+  });
 
-    const element = container.querySelector('div');
-    expect(element).toHaveClass('Skeleton--shape');
+  it('should have default classname', () => {
+    expect(screen.getByTestId('SkeletonShape')).toHaveClass('Skeleton--shape');
   });
 
   it('should render with aria-live attribute set to polite by default', () => {
-    const { container } = render(<SkeletonShape width={100} height={100} />);
-
-    const element = container.querySelector('div');
-    expect(element).toHaveAttribute('aria-live', 'polite');
+    expect(screen.getByTestId('SkeletonShape')).toHaveAttribute('aria-live', 'polite');
   });
 
   it('should render with aria-busy attribute set to true by default', () => {
-    const { container } = render(<SkeletonShape width={100} height={100} />);
-
-    const element = container.querySelector('div');
-    expect(element).toHaveAttribute('aria-busy', 'true');
+    expect(screen.getByTestId('SkeletonShape')).toHaveAttribute('aria-busy', 'true');
   });
 
-  it('should render 1 text children by default', () => {
-    const { container } = render(<SkeletonShape width={100} height={100} />);
-
-    const parentElement = container.querySelector('div');
-    const childDivElements = parentElement?.querySelectorAll('div');
-
-    expect(childDivElements?.length).toBe(1);
+  it('should render 1 text child by default', () => {
+    expect(screen.getByTestId('SkeletonShape').children).toHaveLength(1);
   });
 });
diff --git a/packages/web-react/src/components/Skeleton/__tests__/SkeletonText.test.tsx b/packages/web-react/src/components/Skeleton/__tests__/SkeletonText.test.tsx
index 75008a948f..0d511f1d29 100644
--- a/packages/web-react/src/components/Skeleton/__tests__/SkeletonText.test.tsx
+++ b/packages/web-react/src/components/Skeleton/__tests__/SkeletonText.test.tsx
@@ -1,11 +1,9 @@
 import '@testing-library/jest-dom';
-import { render } from '@testing-library/react';
+import { screen, render } from '@testing-library/react';
 import React from 'react';
 import { classNamePrefixProviderTest, restPropsTest, stylePropsTest } from '@local/tests';
 import SkeletonText from '../SkeletonText';
 
-jest.mock('../../../hooks/useIcon');
-
 describe('SkeletonText', () => {
   classNamePrefixProviderTest(SkeletonText, 'Skeleton');
 
@@ -13,63 +11,41 @@ describe('SkeletonText', () => {
 
   restPropsTest(SkeletonText, 'div');
 
-  it('should have default classname', () => {
-    const { container } = render(<SkeletonText />);
-
-    const element = container.querySelector('div');
-    expect(element).toHaveClass('Skeleton--text');
+  beforeEach(() => {
+    render(<SkeletonText data-testid="SkeletonText" />);
   });
 
-  it('should use default elementType when elementType is not provided', () => {
-    const { container } = render(<SkeletonText />);
-
-    const element = container.querySelector('div');
-    expect(element).toBeInTheDocument();
+  it('should have default classname', () => {
+    expect(screen.getByTestId('SkeletonText')).toHaveClass('Skeleton--text');
   });
 
   it('should render default size class when size is not provided', () => {
-    const { container } = render(<SkeletonText lines={2} />);
-
-    const element = container.querySelector('div');
-    expect(element).toHaveClass('Skeleton--medium');
-  });
-
-  it('should render custom size class when size is provided', () => {
-    const { container } = render(<SkeletonText lines={2} size="large" />);
-
-    const element = container.querySelector('div');
-    expect(element).toHaveClass('Skeleton--large');
+    expect(screen.getByTestId('SkeletonText')).toHaveClass('Skeleton--medium');
   });
 
   it('should render with aria-live attribute set to polite by default', () => {
-    const { container } = render(<SkeletonText lines={2} />);
-
-    const element = container.querySelector('div');
-    expect(element).toHaveAttribute('aria-live', 'polite');
+    expect(screen.getByTestId('SkeletonText')).toHaveAttribute('aria-live', 'polite');
   });
 
   it('should render with aria-busy attribute set to true by default', () => {
-    const { container } = render(<SkeletonText lines={2} />);
-
-    const element = container.querySelector('div');
-    expect(element).toHaveAttribute('aria-busy', 'true');
+    expect(screen.getByTestId('SkeletonText')).toHaveAttribute('aria-busy', 'true');
   });
 
-  it('should render 1 text children by default', () => {
-    const { container } = render(<SkeletonText />);
-
-    const parentElement = container.querySelector('div');
-    const childDivElements = parentElement?.querySelectorAll('div');
-
-    expect(childDivElements?.length).toBe(1);
+  it('should render 1 text child by default', () => {
+    expect(screen.getByTestId('SkeletonText').children).toHaveLength(1);
   });
 
-  it('should render custom text children when lines is provided', () => {
-    const { container } = render(<SkeletonText lines={3} />);
+  describe('with custom props', () => {
+    beforeEach(() => {
+      render(<SkeletonText data-testid="SkeletonTextCustom" lines={3} size="large" />);
+    });
 
-    const parentElement = container.querySelector('div');
-    const childDivElements = parentElement?.querySelectorAll('div');
+    it('should render custom size class when size is provided', () => {
+      expect(screen.getByTestId('SkeletonTextCustom')).toHaveClass('Skeleton--large');
+    });
 
-    expect(childDivElements?.length).toBe(3);
+    it('should render custom text children when lines is provided', () => {
+      expect(screen.getByTestId('SkeletonTextCustom').children).toHaveLength(3);
+    });
   });
 });