From 773ece19a01ce0329c88270dab205976b5a24e99 Mon Sep 17 00:00:00 2001
From: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com>
Date: Mon, 9 Jan 2023 15:15:19 +0330
Subject: [PATCH] Niloofar Sadeghi / Refactor tests in the
 network-status.spec.tsx file (#7230)

* test: writting test for network-status component

* refactor: improve namings

* refactor: improve tests

* build: remove extra packages from core

Co-authored-by: Niloofar Sadeghi <niloofar.sadeghi@firstsource.tech>
---
 .../src/components/popover/popover.tsx        |  1 +
 .../Footer/__tests__/network-status.spec.tsx  | 90 +++++++++----------
 .../Layout/Footer/network-status.jsx          |  3 +-
 3 files changed, 44 insertions(+), 50 deletions(-)

diff --git a/packages/components/src/components/popover/popover.tsx b/packages/components/src/components/popover/popover.tsx
index b175ec643413..eab1a0a1737a 100644
--- a/packages/components/src/components/popover/popover.tsx
+++ b/packages/components/src/components/popover/popover.tsx
@@ -61,6 +61,7 @@ const Popover = ({
             ref={hover_ref as RefObject<HTMLDivElement>}
             className={classNames({ 'dc-popover__wrapper': relative_render })}
             onClick={onClick}
+            data-testid='dt_popover_wrapper'
         >
             {relative_render && (
                 <div className='dc-popover__container' style={{ zIndex }}>
diff --git a/packages/core/src/App/Components/Layout/Footer/__tests__/network-status.spec.tsx b/packages/core/src/App/Components/Layout/Footer/__tests__/network-status.spec.tsx
index d10b18e9a637..c1bfcf1984f2 100644
--- a/packages/core/src/App/Components/Layout/Footer/__tests__/network-status.spec.tsx
+++ b/packages/core/src/App/Components/Layout/Footer/__tests__/network-status.spec.tsx
@@ -1,56 +1,48 @@
-// TODO refactor old tests in this component
 import React from 'react';
-import { Popover } from '@deriv/components';
-import { NetworkStatus } from '../network-status.jsx';
+import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
+import { NetworkStatus } from '../network-status.jsx';
+
+const MockNetworkStatus = ({ is_mobile = true }) => (
+    <NetworkStatus status={{ class: 'offline' }} is_mobile={is_mobile} />
+);
+
+describe('network-status component', () => {
+    it('should has "network-status__wrapper--is-mobile" class when the "is_mobile" property is true', () => {
+        render(<MockNetworkStatus />);
+        const div_element = screen.getByTestId('dt_network_status');
+        expect(div_element).toHaveClass('network-status__wrapper--is-mobile');
+    });
 
-const status = {
-    class: 'online',
-    tooltip: 'Online',
-};
+    it('should has correct class based on class passed in the "status" property', () => {
+        const { rerender } = render(<NetworkStatus status={{ class: 'offline' }} />);
+        expect(screen.getByTestId('dt_network_status_element')).toHaveClass('network-status__circle--offline');
 
-describe('NetworkStatus Component', () => {
-    it('should has "network-status__wrapper--is-mobile" class when the "is_mobile" is true', () => {
-        render(<NetworkStatus status={status} is_mobile />);
-        const divElement = screen.getByTestId('dt_network_status_id');
-        expect(divElement).toHaveClass('network-status__wrapper--is-mobile');
+        rerender(<NetworkStatus status={{ class: 'online' }} />);
+        expect(screen.getByTestId('dt_network_status_element')).toHaveClass('network-status__circle--online');
+
+        rerender(<NetworkStatus status={{ class: 'blinker' }} />);
+        expect(screen.getByTestId('dt_network_status_element')).toHaveClass('network-status__circle--blinker');
+    });
+
+    it('should contain "Popover" with default message when "status.tooltip" is empty', () => {
+        render(<MockNetworkStatus is_mobile={false} />);
+        const popover_wrapper = screen.getByTestId('dt_popover_wrapper');
+        userEvent.hover(popover_wrapper);
+        const network_status = screen.getByText(/connecting to server/i);
+        expect(network_status).toBeInTheDocument();
     });
 
-    // it('should render one <NetworkStatus /> component', () => {
-    //     const wrapper = shallow(<NetworkStatus status={status} />);
-    //     expect(wrapper).toHaveLength(1);
-    // });
-    // it('should have correct class based on class passed in status', () => {
-    //     const wrapper = shallow(<NetworkStatus status={status} />);
-    //     expect(wrapper.find('.network-status__circle--online').exists()).toBe(true);
-    //     wrapper.setProps({ status: { class: 'offline' } });
-    //     expect(wrapper.find('.network-status__circle--offline').exists()).toBe(true);
-    //     wrapper.setProps({ status: { class: 'blinker' } });
-    //     expect(wrapper.find('.network-status__circle--blinker').exists()).toBe(true);
-    // });
-    // it('should contain Tooltip message passed in status', () => {
-    //     const wrapper = shallow(<NetworkStatus status={status} />);
-    //     expect(
-    //         wrapper.contains(
-    //             <Popover classNameBubble='network-status__tooltip' alignment='top' message='Network status: Online'>
-    //                 <div className='network-status__circle network-status__circle--online' />
-    //             </Popover>
-    //         )
-    //     ).toBe(true);
-    // });
-    // it('should contain Popover with default message and div with only default class if status does not contain them', () => {
-    //     status = {};
-    //     const wrapper = shallow(<NetworkStatus status={status} />);
-    //     expect(
-    //         wrapper.contains(
-    //             <Popover
-    //                 classNameBubble='network-status__tooltip'
-    //                 alignment='top'
-    //                 message='Network status: Connecting to server'
-    //             >
-    //                 <div className='network-status__circle' />
-    //             </Popover>
-    //         )
-    //     ).toBe(true);
-    // });
+    it('should contain "Tooltip" message passed in the status property', () => {
+        const status = {
+            class: 'online',
+            tooltip: 'Online',
+        };
+
+        render(<NetworkStatus status={status} />);
+        const popover_wrapper = screen.getByTestId('dt_popover_wrapper');
+        userEvent.hover(popover_wrapper);
+        const network_status = screen.getByText(/online/i);
+        expect(network_status).toBeInTheDocument();
+    });
 });
diff --git a/packages/core/src/App/Components/Layout/Footer/network-status.jsx b/packages/core/src/App/Components/Layout/Footer/network-status.jsx
index 369286c5dc53..9d6f844288b7 100644
--- a/packages/core/src/App/Components/Layout/Footer/network-status.jsx
+++ b/packages/core/src/App/Components/Layout/Footer/network-status.jsx
@@ -8,6 +8,7 @@ import { connect } from 'Stores/connect';
 const NetworkStatus = ({ is_mobile, status }) => {
     const network_status_element = (
         <div
+            data-testid='dt_network_status_element'
             className={classNames('network-status__circle', {
                 'network-status__circle--offline': status.class === 'offline',
                 'network-status__circle--online': status.class === 'online',
@@ -17,10 +18,10 @@ const NetworkStatus = ({ is_mobile, status }) => {
     );
     return (
         <div
+            data-testid='dt_network_status'
             className={classNames('network-status__wrapper', {
                 'network-status__wrapper--is-mobile': is_mobile,
             })}
-            data-testid='dt_network_status_id'
         >
             {is_mobile ? (
                 network_status_element