From eb59db823e022b4b42f0d224e5490e5629535a38 Mon Sep 17 00:00:00 2001
From: Niloofar Sadeghi <93518187+niloofar-deriv@users.noreply.github.com>
Date: Mon, 16 Jan 2023 14:17:49 +0330
Subject: [PATCH] refactor: money tests (#7353)

---
 .../components/money/__tests__/money.spec.tsx | 49 +++++++++++++++
 .../components/src/components/money/money.tsx |  2 +-
 .../Elements/__tests__/money.spec.tsx         | 60 -------------------
 3 files changed, 50 insertions(+), 61 deletions(-)
 create mode 100644 packages/components/src/components/money/__tests__/money.spec.tsx
 delete mode 100644 packages/trader/src/App/Components/Elements/__tests__/money.spec.tsx

diff --git a/packages/components/src/components/money/__tests__/money.spec.tsx b/packages/components/src/components/money/__tests__/money.spec.tsx
new file mode 100644
index 000000000000..8e6c7a07c5d5
--- /dev/null
+++ b/packages/components/src/components/money/__tests__/money.spec.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Money from '../money';
+
+describe('Money', () => {
+    it('should have the "className" when passed in', () => {
+        render(<Money className='test-class' />);
+        expect(screen.getByTestId('dt_span')).toHaveClass('test-class');
+    });
+
+    it('should return correct text based on the props when "amount" is > 0 and "has_sign" is "true"', () => {
+        render(<Money has_sign amount={+10} />);
+        expect(screen.getByText('+')).toBeInTheDocument();
+        expect(screen.getByText('10.00')).toBeInTheDocument();
+    });
+
+    it('should return correct text based on the props when "amount" is < 0 and "has_sign" is "true"', () => {
+        render(<Money has_sign amount={-10} />);
+        expect(screen.getByText('-')).toBeInTheDocument();
+        expect(screen.getByText('10.00')).toBeInTheDocument();
+    });
+
+    it('should return correct text based on the props when "amount" is 0 and "has_sign" is "true"', () => {
+        render(<Money has_sign amount={0} />);
+        expect(screen.getByText('0.00')).toBeInTheDocument();
+    });
+
+    it('should return correct text based on the props when "amount" is > 0 and "has_sign" is "true" and "should_format" is "false")', () => {
+        render(<Money has_sign amount={+10} should_format={false} />);
+        expect(screen.getByText('+')).toBeInTheDocument();
+        expect(screen.getByText('10')).toBeInTheDocument();
+    });
+
+    it('should return correct text based on the props when "amount" is < 0 and "has_sign" is "true" and "should_format" is "false"', () => {
+        render(<Money has_sign amount={-10.5} should_format={false} />);
+        expect(screen.getByText('-')).toBeInTheDocument();
+        expect(screen.getByText('10.5')).toBeInTheDocument();
+    });
+
+    it('should return correct text based on the props when "amount" is 0 and "has_sign" is "true" and "should_format" is "false"', () => {
+        render(<Money has_sign should_format={false} amount={0} />);
+        expect(screen.getByText('0')).toBeInTheDocument();
+    });
+
+    it('should show the currency when "show_currency" passed', () => {
+        render(<Money amount={0} show_currency />);
+        expect(screen.getByText('0.00 USD')).toBeInTheDocument();
+    });
+});
diff --git a/packages/components/src/components/money/money.tsx b/packages/components/src/components/money/money.tsx
index 691e473072ff..d9556a181846 100644
--- a/packages/components/src/components/money/money.tsx
+++ b/packages/components/src/components/money/money.tsx
@@ -30,7 +30,7 @@ const Money = ({
     return (
         <React.Fragment>
             {has_sign && sign}
-            <span className={className}>
+            <span data-testid='dt_span' className={className}>
                 {final_amount} {show_currency && getCurrencyDisplayCode(currency)}
             </span>
         </React.Fragment>
diff --git a/packages/trader/src/App/Components/Elements/__tests__/money.spec.tsx b/packages/trader/src/App/Components/Elements/__tests__/money.spec.tsx
deleted file mode 100644
index 6c84a518702c..000000000000
--- a/packages/trader/src/App/Components/Elements/__tests__/money.spec.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// TODO refactor old tests in this component
-import React from 'react';
-import { Money } from '@deriv/components';
-
-// configure({ adapter: new Adapter() });
-
-describe('Money', () => {
-    it('should render one <Money /> component', () => {
-        // const wrapper = shallow(<Money />);
-        // expect(wrapper).toHaveLength(1);
-    });
-    // it('should return correct text based on props when number is > 0 and has_sign is true', () => {
-    //     const wrapper = shallow(<Money has_sign={true} amount={+10} />);
-    //     expect(wrapper.text().trim()).toBe('+10.00');
-    // });
-    // it('should return correct text based on props when number is > 0 and has_sign is true', () => {
-    //     const wrapper = shallow(<Money has_sign={true} amount={10} />);
-    //     expect(wrapper.text().trim()).toBe('+10.00');
-    // });
-    // it('should return correct text based on props when number is < 0 and has_sign is true', () => {
-    //     const wrapper = shallow(<Money has_sign={true} amount={-10} />);
-    //     expect(wrapper.text().trim()).toBe('-10.00');
-    // });
-    // it('should return correct text based on props when number is 0 and has_sign is true', () => {
-    //     const wrapper = shallow(<Money has_sign={true} amount={0} />);
-    //     expect(wrapper.text().trim()).toBe('0.00');
-    // });
-    // it('should return correct text based on props when number is > 0 and has_sign is true (should_format is false)', () => {
-    //     const wrapper = shallow(<Money has_sign={true} should_format={false} amount={+10} />);
-    //     expect(wrapper.text().trim()).toBe('+10');
-    // });
-    // it('should return correct text based on props when number is > 0 and has_sign is true (should_format is false)', () => {
-    //     const wrapper = shallow(<Money has_sign={true} should_format={false} amount={10} />);
-    //     expect(wrapper.text().trim()).toBe('+10');
-    // });
-    // it('should return correct text based on props when number is < 0 and has_sign is true (should_format is false)', () => {
-    //     const wrapper = shallow(<Money has_sign={true} should_format={false} amount={-10.5} />);
-    //     expect(wrapper.text().trim()).toBe('-10.5');
-    // });
-    // it('should return correct text based on props when number is 0 and has_sign is true (should_format is false)', () => {
-    //     const wrapper = shallow(<Money has_sign={true} should_format={false} amount={0} />);
-    //     expect(wrapper.text().trim()).toBe('0');
-    // });
-    // it('should return correct text based on props when number is > 0 and has_sign is false', () => {
-    //     const wrapper = shallow(<Money has_sign={false} amount={+10} />);
-    //     expect(wrapper.text().trim()).toBe('10.00');
-    // });
-    // it('should return correct text based on props when number is > 0 and has_sign is false', () => {
-    //     const wrapper = shallow(<Money has_sign={false} amount={10} />);
-    //     expect(wrapper.text().trim()).toBe('10.00');
-    // });
-    // it('should return correct text based on props when number is < 0 and has_sign is false', () => {
-    //     const wrapper = shallow(<Money has_sign={false} amount={-10.5} />);
-    //     expect(wrapper.text().trim()).toBe('10.50');
-    // });
-    // it('should return correct text based on props when number is 0 and has_sign is false', () => {
-    //     const wrapper = shallow(<Money has_sign={false} amount={0} />);
-    //     expect(wrapper.text().trim()).toBe('0.00');
-    // });
-});