fix(core-components-progress-bar): refactor, snapshot tests fix

core-ds · Jul 14, 2020 · 7b0b553 · 7b0b553
1 parent ab44afe
commit 7b0b553
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 290 deletions.
diff --git a/packages/progress-bar/src/Component.test.tsx b/packages/progress-bar/src/Component.test.tsx
@@ -6,57 +6,55 @@ import { ProgressBar } from './Component';
 describe('ProgressBar', () => {
     describe('Snapshots tests', () => {
         it('should match snapshot', () => {
-            expect(render(<ProgressBar />)).toMatchSnapshot();
-        });
-
-        it('should match with value snapshot', () => {
-            expect(render(<ProgressBar value={32} />)).toMatchSnapshot();
+            const { container } = render(<ProgressBar value={20} />);
+            expect(container).toMatchSnapshot();
         });
 
         it('should match with view snapshot', () => {
-            expect(render(<ProgressBar view='negative' />)).toMatchSnapshot();
+            const { container } = render(<ProgressBar value={20} view='negative' />);
+            expect(container).toMatchSnapshot();
         });
     });
 
     describe('Attributes tests', () => {
         it('should set `data-test-id` attribute', () => {
             const testId = 'test-id';
-            const { getByTestId } = render(<ProgressBar dataTestId={testId} />);
+            const { getByTestId } = render(<ProgressBar value={20} dataTestId={testId} />);
 
             expect(getByTestId(testId)).toHaveAttribute('data-test-id', testId);
         });
     });
 
     it('should use passed `value`', () => {
-        const value = 72.45;
+        const value = 72;
         const { container } = render(<ProgressBar value={value} />);
 
-        expect(container.querySelector('.filled')).toHaveStyle('transform: translateX(-27.55%)');
+        expect(container.querySelector('.filled')).toHaveStyle('transform: translateX(-28%)');
     });
 
     describe('Classes tests', () => {
         it('should set `className` class to root', () => {
             const className = 'test-class';
-            const { container } = render(<ProgressBar className={className} />);
+            const { container } = render(<ProgressBar value={20} className={className} />);
 
             expect(container.firstElementChild).toHaveClass(className);
         });
 
         it('should set default color class', () => {
-            const { container } = render(<ProgressBar />);
+            const { container } = render(<ProgressBar value={20} />);
 
             expect(container.querySelector('.filled')).toHaveClass('positive');
         });
 
         it('should set color class', () => {
-            const { container } = render(<ProgressBar view='negative' />);
+            const { container } = render(<ProgressBar value={20} view='negative' />);
 
             expect(container.querySelector('.filled')).toHaveClass('negative');
         });
     });
 
     it('should unmount without errors', () => {
-        const { unmount } = render(<ProgressBar />);
+        const { unmount } = render(<ProgressBar value={20} />);
 
         expect(unmount).not.toThrowError();
     });

diff --git a/packages/progress-bar/src/Component.tsx b/packages/progress-bar/src/Component.tsx
@@ -1,13 +1,13 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import cn from 'classnames';
 
 import styles from './index.module.css';
 
 export type ProgressBarProps = {
+    /** Значение заполненной части 0-100 */
+    value: number;
     /** Css-класс для стилизации */
     className?: string;
-    /** Значение заполненной части 0-100 */
-    value?: number;
     /** Цвет заполнения */
     view?: 'positive' | 'negative';
     /** Id компонента для тестов */
@@ -16,27 +16,21 @@ export type ProgressBarProps = {
 
 export const ProgressBar: React.FC<ProgressBarProps> = ({
     className,
-    value = 0,
+    value,
     view = 'positive',
     dataTestId,
-}) => {
-    const fillTranslate = useMemo(() => {
-        return Number((value - 100).toFixed(2));
-    }, [value]);
-
-    return (
+}) => (
+    <div
+        role='progressbar'
+        aria-valuenow={Math.round(value)}
+        aria-valuemin={0}
+        aria-valuemax={100}
+        className={cn(styles.container, className)}
+        data-test-id={dataTestId}
+    >
         <div
-            role='progressbar'
-            aria-valuenow={value}
-            aria-valuemin={0}
-            aria-valuemax={100}
-            className={cn(styles.container, className)}
-            data-test-id={dataTestId}
-        >
-            <div
-                className={cn(styles.filled, styles[view])}
-                style={{ transform: `translateX(${fillTranslate}%)` }}
-            />
-        </div>
-    );
-};
+            className={cn(styles.filled, styles[view])}
+            style={{ transform: `translateX(${value - 100}%)` }}
+        />
+    </div>
+);