From c8fec3b8954b6f92b77f426433b8bb8b95a60fa8 Mon Sep 17 00:00:00 2001
From: Niloofar Sadeghi <niloofar.sadeghi@re-work.dev>
Date: Fri, 13 Jan 2023 21:59:34 +0330
Subject: [PATCH 1/2] refactor: remove extra files from reports

---
 .../__tests__/marker-spot-label.spec.tsx      | 48 -----------
 .../Components/Markers/marker-spot-label.jsx  | 82 -------------------
 2 files changed, 130 deletions(-)
 delete mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.tsx
 delete mode 100644 packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx

diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.tsx b/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.tsx
deleted file mode 100644
index d4785bf362d7..000000000000
--- a/packages/reports/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-// TODO refactor old tests in this component
-import React from 'react';
-import MarkerSpotLabel from '../marker-spot-label.jsx';
-
-describe('MarkerSpotLabel', () => {
-    it('should render one <MarkerSpotLabel /> component', () => {
-        // const wrapper = shallow(<MarkerSpotLabel />);
-        // expect(wrapper).toHaveLength(1);
-    });
-    // it('should have class .chart-spot-label__time-value-container--top if align_label top is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel align_label={'top'} />);
-    //     expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).toBe(true);
-    // });
-    // it('should have class .chart-spot-label__time-value-container--bottom if align_label bottom is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel align_label={'bottom'} />);
-    //     expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).toBe(true);
-    // });
-    // it('should have class .chart-spot-label__time-value-container--top if no align_label is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel />);
-    //     expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).toBe(true);
-    //     expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).toBe(false);
-    // });
-    // it('should toggle label on hover if has_hover_toggle is passed in props', async () => {
-    //     const wrapper = mount(<MarkerSpotLabel has_hover_toggle={true} />);
-    //     expect(wrapper.find('.chart-spot-label__info-container').exists()).toBe(false);
-
-    //     wrapper.find('.marker-hover-container').simulate('mouseenter');
-    //     wrapper.update();
-    //     expect(wrapper.find('.chart-spot-label__info-container').exists()).toBe(true);
-
-    //     wrapper.find('.marker-hover-container').simulate('mouseleave');
-    //     wrapper.update();
-    //     expect(wrapper.find('.chart-spot-label__info-container').exists()).toBe(false);
-    // });
-    // it('should not toggle label on hover if has_label_toggle is not passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel />);
-    //     expect(wrapper.find('.chart-spot-label__info-container').exists()).toBe(true);
-    //     expect(wrapper.find('.marker-hover-container').exists()).toBe(false);
-    // });
-    // it('should have class .chart-spot-label__value-container--won if status won is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel status={'won'} />);
-    //     expect(wrapper.find('.chart-spot-label__value-container--won').exists()).toBe(true);
-    // });
-    // it('should have class .chart-spot-label__value-container--lost if status lost is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel status={'lost'} />);
-    //     expect(wrapper.find('.chart-spot-label__value-container--lost').exists()).toBe(true);
-    // });
-});
diff --git a/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx b/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
deleted file mode 100644
index bfcb77a258f9..000000000000
--- a/packages/reports/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import classNames from 'classnames';
-import { observer } from 'mobx-react';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { Icon, Text } from '@deriv/components';
-import { addComma, toMoment } from '@deriv/shared';
-
-import MarkerSpot from './marker-spot.jsx';
-
-const MarkerSpotLabel = ({
-    align_label,
-    has_hover_toggle,
-    spot_className,
-    spot_count,
-    spot_epoch,
-    spot_value,
-    status,
-}) => {
-    const [show_label, setShowLabel] = React.useState(!has_hover_toggle);
-
-    const handleHoverToggle = () => {
-        setShowLabel(!show_label);
-    };
-
-    let marker_spot = <MarkerSpot className={spot_className} spot_count={spot_count} />;
-
-    if (has_hover_toggle) {
-        marker_spot = (
-            <div className='marker-hover-container' onMouseEnter={handleHoverToggle} onMouseLeave={handleHoverToggle}>
-                {marker_spot}
-            </div>
-        );
-    }
-
-    return (
-        <div className={'chart-spot-label'}>
-            {show_label && (
-                <div className='chart-spot-label__info-container'>
-                    <div
-                        className={`chart-spot-label__time-value-container chart-spot-label__time-value-container--${align_label}`}
-                    >
-                        <div className='chart-spot-label__time-container'>
-                            <Icon
-                                icon='IcClockOutline'
-                                height={10}
-                                width={10}
-                                className='chart-spot-label__time-icon'
-                            />
-                            <Text as='p' color='prominent' size='xxxs'>
-                                {toMoment(+spot_epoch).format('HH:mm:ss')}
-                            </Text>
-                        </div>
-                        <div
-                            className={classNames('chart-spot-label__value-container', {
-                                'chart-spot-label__value-container--won': status === 'won',
-                                'chart-spot-label__value-container--lost': status === 'lost',
-                            })}
-                        >
-                            <p>{addComma(spot_value)}</p>
-                        </div>
-                    </div>
-                </div>
-            )}
-            {marker_spot}
-        </div>
-    );
-};
-
-MarkerSpotLabel.defaultProps = {
-    align_label: 'top',
-};
-
-MarkerSpotLabel.propTypes = {
-    align_label: PropTypes.oneOf(['top', 'bottom']),
-    has_hover_toggle: PropTypes.bool,
-    spot_className: PropTypes.string,
-    spot_count: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    spot_epoch: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    spot_value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    status: PropTypes.oneOf(['won', 'lost']),
-};
-export default observer(MarkerSpotLabel);

From 25db8ec21fbabae251a7fff53d39e8249eb99eb7 Mon Sep 17 00:00:00 2001
From: Niloofar Sadeghi <niloofar.sadeghi@re-work.dev>
Date: Fri, 13 Jan 2023 23:40:29 +0330
Subject: [PATCH 2/2] refactor: marker-spot-label tests

---
 .../__tests__/marker-spot-label.spec.tsx      | 87 ++++++++++---------
 .../Components/markers/marker-spot-label.jsx  |  9 +-
 .../__tests__/marker-spot-label.spec.tsx      | 87 ++++++++++---------
 .../Components/Markers/marker-spot-label.jsx  |  9 +-
 4 files changed, 104 insertions(+), 88 deletions(-)

diff --git a/packages/core/src/Components/markers/__tests__/marker-spot-label.spec.tsx b/packages/core/src/Components/markers/__tests__/marker-spot-label.spec.tsx
index d4785bf362d7..420ed80774e4 100644
--- a/packages/core/src/Components/markers/__tests__/marker-spot-label.spec.tsx
+++ b/packages/core/src/Components/markers/__tests__/marker-spot-label.spec.tsx
@@ -1,48 +1,49 @@
-// TODO refactor old tests in this component
 import React from 'react';
+import { render, screen } from '@testing-library/react';
 import MarkerSpotLabel from '../marker-spot-label.jsx';
 
 describe('MarkerSpotLabel', () => {
-    it('should render one <MarkerSpotLabel /> component', () => {
-        // const wrapper = shallow(<MarkerSpotLabel />);
-        // expect(wrapper).toHaveLength(1);
-    });
-    // it('should have class .chart-spot-label__time-value-container--top if align_label top is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel align_label={'top'} />);
-    //     expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).toBe(true);
-    // });
-    // it('should have class .chart-spot-label__time-value-container--bottom if align_label bottom is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel align_label={'bottom'} />);
-    //     expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).toBe(true);
-    // });
-    // it('should have class .chart-spot-label__time-value-container--top if no align_label is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel />);
-    //     expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).toBe(true);
-    //     expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).toBe(false);
-    // });
-    // it('should toggle label on hover if has_hover_toggle is passed in props', async () => {
-    //     const wrapper = mount(<MarkerSpotLabel has_hover_toggle={true} />);
-    //     expect(wrapper.find('.chart-spot-label__info-container').exists()).toBe(false);
-
-    //     wrapper.find('.marker-hover-container').simulate('mouseenter');
-    //     wrapper.update();
-    //     expect(wrapper.find('.chart-spot-label__info-container').exists()).toBe(true);
-
-    //     wrapper.find('.marker-hover-container').simulate('mouseleave');
-    //     wrapper.update();
-    //     expect(wrapper.find('.chart-spot-label__info-container').exists()).toBe(false);
-    // });
-    // it('should not toggle label on hover if has_label_toggle is not passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel />);
-    //     expect(wrapper.find('.chart-spot-label__info-container').exists()).toBe(true);
-    //     expect(wrapper.find('.marker-hover-container').exists()).toBe(false);
-    // });
-    // it('should have class .chart-spot-label__value-container--won if status won is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel status={'won'} />);
-    //     expect(wrapper.find('.chart-spot-label__value-container--won').exists()).toBe(true);
-    // });
-    // it('should have class .chart-spot-label__value-container--lost if status lost is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel status={'lost'} />);
-    //     expect(wrapper.find('.chart-spot-label__value-container--lost').exists()).toBe(true);
-    // });
+    it('should have "chart-spot-label__time-value-container--top" class if no "align_label" is passed in the props', () => {
+        render(<MarkerSpotLabel />);
+        expect(screen.getByTestId('dt_time_value_container')).toHaveClass(
+            'chart-spot-label__time-value-container--top'
+        );
+    });
+
+    it('should have "chart-spot-label__time-value-container--bottom" class if "align_label" "bottom" is passed in the props', () => {
+        render(<MarkerSpotLabel align_label='bottom' />);
+        expect(screen.getByTestId('dt_time_value_container')).toHaveClass(
+            'chart-spot-label__time-value-container--bottom'
+        );
+    });
+
+    it('should have "chart-spot-label__value-container--won" class if "status" "won" is passed in the props', () => {
+        render(<MarkerSpotLabel status='won' />);
+        expect(screen.getByTestId('dt_value_container')).toHaveClass('chart-spot-label__value-container--won');
+    });
+
+    it('should have "chart-spot-label__value-container--lost" class if "status" "lost" is passed in the props', () => {
+        render(<MarkerSpotLabel status='lost' />);
+        expect(screen.getByTestId('dt_value_container')).toHaveClass('chart-spot-label__value-container--lost');
+    });
+
+    it('should render "spot_value" with the correct commas if it is passed in the props', () => {
+        render(<MarkerSpotLabel spot_value={290787} />);
+        expect(screen.getByText('290,787')).toBeInTheDocument();
+    });
+
+    it('should render "spot_epoch" with the correct format if it is passed in the props', () => {
+        render(<MarkerSpotLabel spot_epoch={22} />);
+        expect(screen.getByText('00:00:22')).toBeInTheDocument();
+    });
+
+    it('should "HoverToggle" if "has_hover_toggle" is passed in the props', async () => {
+        render(<MarkerSpotLabel has_hover_toggle />);
+        expect(screen.getByTestId('dt_marker_hover_container')).toBeInTheDocument();
+    });
+
+    it('should not "HoverToggle" if "has_hover_toggle" is not passed in the props', () => {
+        render(<MarkerSpotLabel />);
+        expect(screen.queryByTestId('dt_marker_hover_container')).not.toBeInTheDocument();
+    });
 });
diff --git a/packages/core/src/Components/markers/marker-spot-label.jsx b/packages/core/src/Components/markers/marker-spot-label.jsx
index bfcb77a258f9..29c2ceabb1d0 100644
--- a/packages/core/src/Components/markers/marker-spot-label.jsx
+++ b/packages/core/src/Components/markers/marker-spot-label.jsx
@@ -26,7 +26,12 @@ const MarkerSpotLabel = ({
 
     if (has_hover_toggle) {
         marker_spot = (
-            <div className='marker-hover-container' onMouseEnter={handleHoverToggle} onMouseLeave={handleHoverToggle}>
+            <div
+                data-testid='dt_marker_hover_container'
+                className='marker-hover-container'
+                onMouseEnter={handleHoverToggle}
+                onMouseLeave={handleHoverToggle}
+            >
                 {marker_spot}
             </div>
         );
@@ -37,6 +42,7 @@ const MarkerSpotLabel = ({
             {show_label && (
                 <div className='chart-spot-label__info-container'>
                     <div
+                        data-testid='dt_time_value_container'
                         className={`chart-spot-label__time-value-container chart-spot-label__time-value-container--${align_label}`}
                     >
                         <div className='chart-spot-label__time-container'>
@@ -51,6 +57,7 @@ const MarkerSpotLabel = ({
                             </Text>
                         </div>
                         <div
+                            data-testid='dt_value_container'
                             className={classNames('chart-spot-label__value-container', {
                                 'chart-spot-label__value-container--won': status === 'won',
                                 'chart-spot-label__value-container--lost': status === 'lost',
diff --git a/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.tsx b/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.tsx
index d4785bf362d7..420ed80774e4 100644
--- a/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.tsx
+++ b/packages/trader/src/Modules/SmartChart/Components/Markers/__tests__/marker-spot-label.spec.tsx
@@ -1,48 +1,49 @@
-// TODO refactor old tests in this component
 import React from 'react';
+import { render, screen } from '@testing-library/react';
 import MarkerSpotLabel from '../marker-spot-label.jsx';
 
 describe('MarkerSpotLabel', () => {
-    it('should render one <MarkerSpotLabel /> component', () => {
-        // const wrapper = shallow(<MarkerSpotLabel />);
-        // expect(wrapper).toHaveLength(1);
-    });
-    // it('should have class .chart-spot-label__time-value-container--top if align_label top is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel align_label={'top'} />);
-    //     expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).toBe(true);
-    // });
-    // it('should have class .chart-spot-label__time-value-container--bottom if align_label bottom is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel align_label={'bottom'} />);
-    //     expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).toBe(true);
-    // });
-    // it('should have class .chart-spot-label__time-value-container--top if no align_label is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel />);
-    //     expect(wrapper.find('.chart-spot-label__time-value-container--top').exists()).toBe(true);
-    //     expect(wrapper.find('.chart-spot-label__time-value-container--bottom').exists()).toBe(false);
-    // });
-    // it('should toggle label on hover if has_hover_toggle is passed in props', async () => {
-    //     const wrapper = mount(<MarkerSpotLabel has_hover_toggle={true} />);
-    //     expect(wrapper.find('.chart-spot-label__info-container').exists()).toBe(false);
-
-    //     wrapper.find('.marker-hover-container').simulate('mouseenter');
-    //     wrapper.update();
-    //     expect(wrapper.find('.chart-spot-label__info-container').exists()).toBe(true);
-
-    //     wrapper.find('.marker-hover-container').simulate('mouseleave');
-    //     wrapper.update();
-    //     expect(wrapper.find('.chart-spot-label__info-container').exists()).toBe(false);
-    // });
-    // it('should not toggle label on hover if has_label_toggle is not passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel />);
-    //     expect(wrapper.find('.chart-spot-label__info-container').exists()).toBe(true);
-    //     expect(wrapper.find('.marker-hover-container').exists()).toBe(false);
-    // });
-    // it('should have class .chart-spot-label__value-container--won if status won is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel status={'won'} />);
-    //     expect(wrapper.find('.chart-spot-label__value-container--won').exists()).toBe(true);
-    // });
-    // it('should have class .chart-spot-label__value-container--lost if status lost is passed in props', () => {
-    //     const wrapper = shallow(<MarkerSpotLabel status={'lost'} />);
-    //     expect(wrapper.find('.chart-spot-label__value-container--lost').exists()).toBe(true);
-    // });
+    it('should have "chart-spot-label__time-value-container--top" class if no "align_label" is passed in the props', () => {
+        render(<MarkerSpotLabel />);
+        expect(screen.getByTestId('dt_time_value_container')).toHaveClass(
+            'chart-spot-label__time-value-container--top'
+        );
+    });
+
+    it('should have "chart-spot-label__time-value-container--bottom" class if "align_label" "bottom" is passed in the props', () => {
+        render(<MarkerSpotLabel align_label='bottom' />);
+        expect(screen.getByTestId('dt_time_value_container')).toHaveClass(
+            'chart-spot-label__time-value-container--bottom'
+        );
+    });
+
+    it('should have "chart-spot-label__value-container--won" class if "status" "won" is passed in the props', () => {
+        render(<MarkerSpotLabel status='won' />);
+        expect(screen.getByTestId('dt_value_container')).toHaveClass('chart-spot-label__value-container--won');
+    });
+
+    it('should have "chart-spot-label__value-container--lost" class if "status" "lost" is passed in the props', () => {
+        render(<MarkerSpotLabel status='lost' />);
+        expect(screen.getByTestId('dt_value_container')).toHaveClass('chart-spot-label__value-container--lost');
+    });
+
+    it('should render "spot_value" with the correct commas if it is passed in the props', () => {
+        render(<MarkerSpotLabel spot_value={290787} />);
+        expect(screen.getByText('290,787')).toBeInTheDocument();
+    });
+
+    it('should render "spot_epoch" with the correct format if it is passed in the props', () => {
+        render(<MarkerSpotLabel spot_epoch={22} />);
+        expect(screen.getByText('00:00:22')).toBeInTheDocument();
+    });
+
+    it('should "HoverToggle" if "has_hover_toggle" is passed in the props', async () => {
+        render(<MarkerSpotLabel has_hover_toggle />);
+        expect(screen.getByTestId('dt_marker_hover_container')).toBeInTheDocument();
+    });
+
+    it('should not "HoverToggle" if "has_hover_toggle" is not passed in the props', () => {
+        render(<MarkerSpotLabel />);
+        expect(screen.queryByTestId('dt_marker_hover_container')).not.toBeInTheDocument();
+    });
 });
diff --git a/packages/trader/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx b/packages/trader/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
index bfcb77a258f9..29c2ceabb1d0 100644
--- a/packages/trader/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
+++ b/packages/trader/src/Modules/SmartChart/Components/Markers/marker-spot-label.jsx
@@ -26,7 +26,12 @@ const MarkerSpotLabel = ({
 
     if (has_hover_toggle) {
         marker_spot = (
-            <div className='marker-hover-container' onMouseEnter={handleHoverToggle} onMouseLeave={handleHoverToggle}>
+            <div
+                data-testid='dt_marker_hover_container'
+                className='marker-hover-container'
+                onMouseEnter={handleHoverToggle}
+                onMouseLeave={handleHoverToggle}
+            >
                 {marker_spot}
             </div>
         );
@@ -37,6 +42,7 @@ const MarkerSpotLabel = ({
             {show_label && (
                 <div className='chart-spot-label__info-container'>
                     <div
+                        data-testid='dt_time_value_container'
                         className={`chart-spot-label__time-value-container chart-spot-label__time-value-container--${align_label}`}
                     >
                         <div className='chart-spot-label__time-container'>
@@ -51,6 +57,7 @@ const MarkerSpotLabel = ({
                             </Text>
                         </div>
                         <div
+                            data-testid='dt_value_container'
                             className={classNames('chart-spot-label__value-container', {
                                 'chart-spot-label__value-container--won': status === 'won',
                                 'chart-spot-label__value-container--lost': status === 'lost',