Niloofar Sadeghi / Task - Refactor tests in the marker-spot-label.spec.tsx file

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();
+    });
 });

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',

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();
+    });
 });

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',