fixup! Feat(web-react): React version of Skeleton component #DS-1625

lmc-eu · Jan 29, 2025 · 0199341 · 0199341
1 parent ed0feea
commit 0199341
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 136 deletions.
diff --git 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
@@ -1,68 +1,51 @@
 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');
 
   stylePropsTest(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
@@ -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
@@ -1,45 +1,33 @@
 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');
 
   stylePropsTest(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
@@ -1,75 +1,51 @@
 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');
 
   stylePropsTest(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);
+    });
   });
 });