Amina/test coverage for accounts_limits spec (binary-com#5060)

* account-limit-article

* test cases for account limits-article/extra/footer

* test cases for account limits-article/extra/footer

* test_cases

* account-limits

* accout-limit-spec-files added

* accounts spec

* accounts spec

Co-authored-by: Carol Sachdeva <58209918+carol-binary@users.noreply.github.com>

packages/account/src/Components/account-limits/__tests__/account-limit-overlay.spec.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { fireEvent, screen, render } from '@testing-library/react';
+import AccountLimitsOverlay from '../account-limits-overlay';
+import AccountLimitsContext from '../account-limits-context';
+
+describe('<AccountLimitsOverlay/>', () => {
+    beforeAll(() => {
+        ReactDOM.createPortal = jest.fn(component => {
+            return component;
+        });
+    });
+
+    afterAll(() => {
+        ReactDOM.createPortal.mockClear();
+    });
+
+    const Component = () => (
+        <AccountLimitsContext.Provider
+            value={{
+                overlay_ref: <div data-testid='mocked_overlay_ref'></div>,
+                toggleOverlay: jest.fn(),
+            }}
+        >
+            <AccountLimitsOverlay />
+        </AccountLimitsContext.Provider>
+    );
+
+    it('should render AccountLimitsOverlay component', () => {
+        render(<Component />);
+        expect(screen.getByRole('heading', { name: /account limits/i })).toBeInTheDocument();
+        expect(screen.getByText(/these are default limits that we apply to your accounts\./i)).toBeInTheDocument();
+    });
+
+    it('should go to help-centre page if the Help Centre link on the text is clicked', () => {
+        render(<Component />);
+
+        expect(screen.getByText('Help Centre').closest('a')).toHaveAttribute('href', 'https://deriv.com/help-centre');
+    });
+    it('should show Done Button', () => {
+        render(<Component />);
+
+        const done_btn = screen.getByRole('button', {
+            name: /done/i,
+        });
+        expect(done_btn).toBeInTheDocument();
+    });
+});

packages/account/src/Components/account-limits/__tests__/account-limits-article.spec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import AccountLimitsArticle from '../account-limits-article';
+
+describe('<AccountLimitsArticle/>', () => {
+    it('should render AccountLimitsArticle component', () => {
+        render(<AccountLimitsArticle />);
+        expect(
+            screen.getByRole('heading', {
+                name: /account limits/i,
+            })
+        ).toBeInTheDocument();
+    });
+
+    it('should show the descriptions for the account limit', () => {
+        render(<AccountLimitsArticle />);
+        expect(screen.getByText(/these are default limits that we apply to your accounts\./i)).toBeInTheDocument();
+        expect(
+            screen.getByText(/to learn more about trading limits and how they apply, please go to the/i)
+        ).toBeInTheDocument();
+        expect(screen.getByRole('link', { name: /help centre\./i })).toBeInTheDocument();
+    });
+
+    it('should go to help-centre page if the Help Centre link on the text is clicked', () => {
+        render(<AccountLimitsArticle />);
+        expect(screen.getByText('Help Centre.').closest('a')).toHaveAttribute('href', 'https://deriv.com/help-centre');
+    });
+});

packages/account/src/Components/account-limits/__tests__/account-limits-extra-info.spec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { isMobile } from '@deriv/shared';
+import AccountLimitsExtraInfo from '../account-limits-extra-info';
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    isMobile: jest.fn(() => true),
+}));
+
+describe('<AccountLimitsExtraInfo/>', () => {
+    it('should render AccountLimitsExtraInfo component', () => {
+        render(<AccountLimitsExtraInfo message='Lorem Epsom' />);
+        expect(screen.getByText(/lorem epsom/i)).toBeInTheDocument();
+    });
+
+    it('should render PopoverComponent if isMobile is false', () => {
+        isMobile.mockReturnValue(false);
+        const { container } = render(<AccountLimitsExtraInfo message='Lorem Epsom' />);
+        expect(container.getElementsByClassName('da-account-limits__popover').length).toBe(1);
+    });
+
+    it('should pass props to PopoverComponent if isMobile is false', () => {
+        isMobile.mockReturnValue(false);
+        const { container } = render(<AccountLimitsExtraInfo message='Lorem Epsom' className='test_class' />);
+        expect(container.getElementsByClassName('test_class').length).toBe(1);
+    });
+});

packages/account/src/Components/account-limits/__tests__/account-limits-footer.spec.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { screen, render } from '@testing-library/react';
+import AccountLimitsContext from '../account-limits-context';
+import AccountLimitsFooterPortal from '../account-limits-footer';
+
+const AccountLimitsFooterPortalComponent = () => (
+    <AccountLimitsContext.Provider
+        value={{
+            footer_ref: <div data-testid='mocked_footer_ref'></div>,
+            toggleOverlay: jest.fn(),
+        }}
+    >
+        <AccountLimitsFooterPortal />
+    </AccountLimitsContext.Provider>
+);
+
+describe('<AccountLimitsFooterPortal/>', () => {
+    beforeAll(() => {
+        ReactDOM.createPortal = jest.fn(component => {
+            return component;
+        });
+    });
+
+    afterAll(() => {
+        ReactDOM.createPortal.mockClear();
+    });
+
+    it('should render AccountLimitsFooterPortal component', () => {
+        render(<AccountLimitsFooterPortalComponent />);
+        expect(screen.getByText(/learn more about account limits/i)).toBeInTheDocument();
+    });
+    it('should render anchor tag', () => {
+        render(<AccountLimitsFooterPortalComponent />);
+        expect(screen.getAllByTestId('footer_text').length).toBe(1);
+    });
+
+    it('should render AppSettings.Footer components correctly', () => {
+        const { container } = render(<AccountLimitsFooterPortalComponent />);
+        expect(container.getElementsByClassName('dc-app-settings__footer').length).toBe(1);
+    });
+});

packages/account/src/Components/account-limits/__tests__/account-limits-table-cell.spec.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import AccountLimitsTableCell from '../account-limits-table-cell';
+
+describe('<AccountLimitsTableCell/>', () => {
+    it('should render AccountLimitsTableCell component', () => {
+        render(<AccountLimitsTableCell />, {
+            container: document.body.appendChild(document.createElement('tr')),
+        });
+        expect(screen.getByTestId('account_limit_table_cell')).toBeInTheDocument();
+    });
+
+    it('should render the children if children is passed', () => {
+        const props = {
+            children: <span data-testid='table_cell_child'>Test</span>,
+        };
+        render(<AccountLimitsTableCell {...props} />, {
+            container: document.body.appendChild(document.createElement('tr')),
+        });
+        expect(screen.getByTestId('table_cell_child')).toBeInTheDocument();
+    });
+
+    it('should not render Text component if children is not passed ', () => {
+        render(<AccountLimitsTableCell />, {
+            container: document.body.appendChild(document.createElement('tr')),
+        });
+        expect(screen.queryByTestId('account_limit_table_cell_text')).not.toBeInTheDocument();
+    });
+
+    it('should render renderExtraInfo if it is passed', () => {
+        const props = {
+            renderExtraInfo: () => <span data-testid='table_cell_render_extra_info'>test render extra function</span>,
+        };
+        render(<AccountLimitsTableCell {...props} />, {
+            container: document.body.appendChild(document.createElement('tr')),
+        });
+        expect(screen.getByTestId('table_cell_render_extra_info')).toBeInTheDocument();
+    });
+});

packages/account/src/Components/account-limits/__tests__/account-limits-table-header.spec.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import AccountLimitsTableHeader from '../account-limits-table-header';
+
+describe('<AccountLimitsTableHeader/>', () => {
+    it('should render AccountLimitsTableHeader component', () => {
+        render(<AccountLimitsTableHeader />, {
+            container: document.body.appendChild(document.createElement('tr')),
+        });
+        expect(screen.getByTestId('account_limit_table_header')).toBeInTheDocument();
+    });
+
+    it('should render the children if children is passed', () => {
+        const props = {
+            children: <span data-testid='table_header_child'>Test</span>,
+        };
+        render(<AccountLimitsTableHeader {...props} />, {
+            container: document.body.appendChild(document.createElement('tr')),
+        });
+        expect(screen.getByTestId('table_header_child')).toBeInTheDocument();
+    });
+
+    it('should not render Text component if children is not passed ', () => {
+        render(<AccountLimitsTableHeader />, {
+            container: document.body.appendChild(document.createElement('tr')),
+        });
+        expect(screen.queryByTestId('account_limit_table_header_text')).not.toBeInTheDocument();
+    });
+
+    it('should render renderExtraInfo if it is passed', () => {
+        const props = {
+            renderExtraInfo: () => <span data-testid='table_header_render_extra_info'>test render extra function</span>,
+        };
+        render(<AccountLimitsTableHeader {...props} />, {
+            container: document.body.appendChild(document.createElement('tr')),
+        });
+        expect(screen.getByTestId('table_header_render_extra_info')).toBeInTheDocument();
+    });
+});

packages/account/src/Components/account-limits/__tests__/account-limits-turnover-limit-row.spec.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { screen, render } from '@testing-library/react';
+import { formatMoney } from '@deriv/shared';
+import AccountLimitsTurnoverLimitRow from '../account-limits-turnover-limit-row';
+import AccountLimitsContext from '../account-limits-context';
+
+jest.mock('@deriv/shared', () => ({
+    ...jest.requireActual('@deriv/shared'),
+    formatMoney: jest.fn(),
+}));
+const AccountLimitsTurnoverLimitRowComponent = props => (
+    <AccountLimitsContext.Provider value={{ currency: 'AUD' }}>
+        <AccountLimitsTurnoverLimitRow {...props}></AccountLimitsTurnoverLimitRow>
+    </AccountLimitsContext.Provider>
+);
+
+describe('<AccountLimitsTurnoverLimitRow/>', () => {
+    const props = {
+        collection: [{ name: 'Major Pairs', payout_limit: 20000, profile_name: 'medium_risk', turnover_limit: 100000 }],
+    };
+    it('should render AccountLimitsTurnoverLimitRow component', () => {
+        render(<AccountLimitsTurnoverLimitRowComponent {...props} />, {
+            container: document.body.appendChild(document.createElement('tbody')),
+        });
+        expect(screen.queryByTestId('account-limits-turnover-limit-row')).toBeInTheDocument();
+    });
+
+    it('should return null if collection is empty array', () => {
+        render(<AccountLimitsTurnoverLimitRowComponent />, {
+            container: document.body.appendChild(document.createElement('tbody')),
+        });
+        expect(screen.queryByTestId('account-limits-turnover-limit-row')).not.toBeInTheDocument();
+    });
+
+    it('should display title and item name', () => {
+        render(<AccountLimitsTurnoverLimitRowComponent {...props} title='Forex' />, {
+            container: document.body.appendChild(document.createElement('tbody')),
+        });
+        expect(screen.getByText(/Forex - Major Pairs/i)).toBeInTheDocument();
+    });
+
+    it('should call formatMoney function', () => {
+        render(<AccountLimitsTurnoverLimitRowComponent {...props} />, {
+            container: document.body.appendChild(document.createElement('tbody')),
+        });
+
+        expect(formatMoney).toHaveBeenCalledWith('AUD', 100000, true);
+    });
+});