Maryia/WEBREL-2578/test: coverage for routes & routes-config in Reports

packages/reports/.eslintrc.js

@@ -1,3 +1,4 @@
+const { rule } = require('postcss');
 const webpackConfig = require('./build/webpack.config-test.js');
 
 module.exports = {
@@ -7,4 +8,7 @@ module.exports = {
             webpack: { config: webpackConfig({}) },
         },
     },
+    rules: {
+        'import/no-extraneous-dependencies': ['off', { devDependencies: ['**/*.spec.*', '**/*.test.*', '**/*.d.ts*'] }],
+    },
 };

packages/reports/jest.config.js

@@ -8,6 +8,7 @@ module.exports = {
         '^_common/(.*)$': '<rootDir>/src/_common/$1',
         '^App/(.*)$': '<rootDir>/src/App/$1',
         '^Assets/(.*)$': '<rootDir>/src/Assets/$1',
+        '^Components/(.*)$': '<rootDir>/src/Components/$1',
         '^Constants/(.*)$': '<rootDir>/src/Constants/$1',
         '^Constants$': '<rootDir>/src/Constants/index.js',
         '^Documents/(.*)$': '<rootDir>/src/Documents/$1',

packages/reports/src/Constants/__tests__/routes-config.spec.tsx

@@ -0,0 +1,94 @@
+import React from 'react';
+import { RouteComponentProps, Router } from 'react-router';
+import { createMemoryHistory } from 'history';
+import { mockStore } from '@deriv/stores';
+import { routes } from '@deriv/shared';
+import { render, screen, waitFor } from '@testing-library/react';
+import BinaryRoutes from '../../Components/Routes';
+import ReportsProviders from '../../reports-providers';
+import getRoutesConfig from '../routes-config';
+
+const mockedError404 = 'Error 404';
+const mockedOpenPositions = 'Open positions';
+const mockedStatement = 'Statement';
+const mockedTradeTable = 'Trade table';
+const reportsPageTitle = 'Reports';
+
+jest.mock('Modules/Page404', () => ({
+    __esModule: true,
+    default: () => <div>{mockedError404}</div>,
+}));
+
+jest.mock('../../Containers', () => ({
+    __esModule: true,
+    default: {
+        ...jest.requireActual('../../Containers').default,
+        OpenPositions: () => <div>{mockedOpenPositions}</div>,
+        ProfitTable: () => <div>{mockedTradeTable}</div>,
+        Statement: () => <div>{mockedStatement}</div>,
+    },
+}));
+
+describe('Routes Config', () => {
+    // we need to render BinaryRoutes component that uses routes-config to test that lazy-loaded components are loaded
+    const MockBinaryRoutes = ({ history }: Partial<RouteComponentProps>) => (
+        <ReportsProviders store={mockStore({ client: { is_logged_in: true }, ui: { is_reports_visible: true } })}>
+            <Router history={history}>
+                <BinaryRoutes is_logged_in />
+            </Router>
+        </ReportsProviders>
+    );
+
+    it('should return default routes config', () => {
+        const routesConfig = getRoutesConfig();
+        expect(routesConfig).toHaveLength(2);
+    });
+    it('should return routes with Reports / Open positions route', async () => {
+        const routesConfig = getRoutesConfig();
+        expect(routesConfig?.[0]?.path).toBe(routes.reports);
+        expect(routesConfig?.[0]?.getTitle?.()).toBe(reportsPageTitle);
+        expect(routesConfig?.[0]?.is_authenticated).toBe(true);
+        expect(routesConfig?.[0].routes?.[0].path).toBe(routes.positions);
+        const history = createMemoryHistory();
+        history.push(routes.positions);
+        render(<MockBinaryRoutes history={history} />);
+        await waitFor(() => {
+            expect(screen.getByText(reportsPageTitle)).toBeInTheDocument();
+            expect(screen.getByText(mockedOpenPositions)).toBeInTheDocument();
+        });
+    });
+    it('should return routes with Reports / Trade table route', async () => {
+        const routesConfig = getRoutesConfig();
+        expect(routesConfig?.[0].routes?.[1].path).toBe(routes.profit);
+        expect(routesConfig?.[0].routes?.[1].getTitle()).toBe(mockedTradeTable);
+        const history = createMemoryHistory();
+        history.push(routes.profit);
+        render(<MockBinaryRoutes history={history} />);
+        await waitFor(() => {
+            expect(screen.getByText(reportsPageTitle)).toBeInTheDocument();
+            expect(screen.getByText(mockedTradeTable)).toBeInTheDocument();
+        });
+    });
+    it('should return routes with Reports / Statement route', async () => {
+        const routesConfig = getRoutesConfig();
+        expect(routesConfig?.[0].routes?.[2].path).toBe(routes.statement);
+        expect(routesConfig?.[0].routes?.[2].getTitle()).toBe(mockedStatement);
+        const history = createMemoryHistory();
+        history.push(routes.statement);
+        render(<MockBinaryRoutes history={history} />);
+        await waitFor(() => {
+            expect(screen.getByText(reportsPageTitle)).toBeInTheDocument();
+            expect(screen.getByText(mockedStatement)).toBeInTheDocument();
+        });
+    });
+    it('should return routes with route for Page 404 which loads when the path does not exist', async () => {
+        const routesConfig = getRoutesConfig();
+        expect(routesConfig?.[1]?.getTitle?.()).toBe(mockedError404);
+        const history = createMemoryHistory();
+        history.push('/non-existent-path');
+        render(<MockBinaryRoutes history={history} />);
+        await waitFor(() => {
+            expect(screen.getByText(mockedError404)).toBeInTheDocument();
+        });
+    });
+});

packages/reports/src/Containers/__tests__/routes.spec.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { createMemoryHistory } from 'history';
+import { mockStore } from '@deriv/stores';
+import { Router } from 'react-router-dom';
+import { TCoreStores } from '@deriv/stores/types';
+import BinaryRoutes from '../../Components/Routes';
+import Routes from '../routes';
+import ReportsProviders from '../../reports-providers';
+
+const mockedBinaryRoutes = 'BinaryRoutes';
+const mockedErrorComponent = 'ErrorComponent';
+
+jest.mock('../../../src/Components/Routes', () => jest.fn(() => mockedBinaryRoutes));
+jest.mock('../../../src/Components/Errors', () => jest.fn(() => mockedErrorComponent));
+
+describe('Routes', () => {
+    const history = createMemoryHistory();
+    const store = mockStore({});
+
+    const renderMockedRoutes = (
+        mockedStore: TCoreStores = store,
+        passthrough?: React.ComponentProps<typeof BinaryRoutes>['passthrough']
+    ) => {
+        return render(
+            <ReportsProviders store={mockedStore}>
+                <Router history={history}>
+                    <Routes passthrough={passthrough} />
+                </Router>
+            </ReportsProviders>
+        );
+    };
+
+    it('should render BinaryRoutes', () => {
+        renderMockedRoutes();
+        expect(screen.getByText(mockedBinaryRoutes)).toBeInTheDocument();
+    });
+    it('should render ErrorComponent', () => {
+        renderMockedRoutes(mockStore({ common: { has_error: true } }));
+        expect(screen.queryByText(mockedBinaryRoutes)).not.toBeInTheDocument();
+        expect(screen.getByText(mockedErrorComponent)).toBeInTheDocument();
+    });
+});

packages/reports/src/Containers/routes.tsx

@@ -1,11 +1,11 @@
 import { observer, useStore } from '@deriv/stores';
-import { withRouter } from 'react-router';
+import { RouteComponentProps, withRouter } from 'react-router';
 import React from 'react';
 import BinaryRoutes from 'Components/Routes';
 import ErrorComponent from 'Components/Errors';
 import { TRoutes } from 'Types';
 
-const Routes = observer(({ passthrough }: TRoutes) => {
+const Routes = observer(({ passthrough }: TRoutes & RouteComponentProps) => {
     const { client, common } = useStore();
     const { is_logged_in, is_logging_in } = client;
     const { error, has_error } = common;