Cashier errorcomponent testcase (binary-com#4879)

* test commit1

* platform settings font color change for select theme text in dark mode

* reverted test changes

* error component test case initial commit

* feat: add error component test

* feat: additional error components

* more test coverage

* rveret un wanted codes

* conflicts

* change test labels

* error component test coverage

* test case for error component and an update in routes.spec.js

* remove commented code blocks

* Add more coverage to the test case

* revert changes done for test case run

* remove commented code

* fix - prop data type update for redirect_urls and redirect_labels

* delete unwanted folder

* code cleaning

Co-authored-by: Ashraf Ali <ashrafali@Ashrafs-MacBook-Pro.local>
Co-authored-by: ashrafali-v <ashrafalifrk@gmail.com>
Co-authored-by: Farrah Mae Ochoa <82315152+farrah-deriv@users.noreply.github.com>

packages/cashier/src/Components/__tests__/error-component.spec.js

@@ -0,0 +1,81 @@
+import React, { useEffect } from 'react';
+import { screen, render, fireEvent } from '@testing-library/react';
+import ErrorComponent from '../error-component';
+import { Router } from 'react-router-dom';
+import { createBrowserHistory } from 'history';
+import { unmountComponentAtNode } from 'react-dom';
+describe('<ErrorComponent/>', () => {
+    let history;
+    const renderWithRouter = component => {
+        history = createBrowserHistory();
+        return render(<Router history={history}>{component}</Router>);
+    };
+    const reloadFn = () => {
+        window.location.reload(true);
+    };
+    beforeAll(() => {
+        Object.defineProperty(window, 'location', {
+            configurable: true,
+            value: { reload: jest.fn() },
+        });
+    });
+    const props = {
+        redirect_to: ['/testurl'],
+        redirect_label: ['testlabel'],
+    };
+    it('should show the default message when message is not passed', () => {
+        const message = '';
+        renderWithRouter(<ErrorComponent {...props} message={message} />);
+        expect(screen.getByText('Sorry, an error occured while processing your request.')).toBeInTheDocument();
+    });
+    it('should show the actual message when message is passed', () => {
+        const message = 'This is the error message';
+        renderWithRouter(<ErrorComponent {...props} message={message} />);
+        expect(screen.getByText(message)).toBeInTheDocument();
+    });
+    it('should show refresh message when should_show_refresh is true', () => {
+        renderWithRouter(<ErrorComponent {...props} should_show_refresh={true} />);
+        expect(screen.getByText('Please refresh this page to continue.')).toBeInTheDocument();
+    });
+    it('do not show refresh message when should_show_refresh is false', () => {
+        const refreshRequestText = screen.queryByText('Please refresh this page to continue.');
+        renderWithRouter(<ErrorComponent {...props} should_show_refresh={false} />);
+        expect(refreshRequestText).toBeNull();
+    });
+    it('should show default message when header message is not passed', () => {
+        const header = '';
+        renderWithRouter(<ErrorComponent {...props} header={header} />);
+        expect(screen.getByText('Something’s not right')).toBeInTheDocument();
+    });
+    it('should show actual message when header message is passed', () => {
+        const header = 'Header Text';
+        renderWithRouter(<ErrorComponent {...props} header={header} />);
+        expect(screen.getByText(header)).toBeInTheDocument();
+    });
+    it('should refresh the page when redirectOnClick is not passed or empty', () => {
+        const redirectOnClick = '';
+        renderWithRouter(<ErrorComponent {...props} buttonOnClick={redirectOnClick} />);
+        reloadFn(); // as defined above..
+        expect(window.location.reload).toHaveBeenCalled();
+    });
+    it('should show the redirect button label as refresh when there is no redirect_label', () => {
+        const redirectOnClick = '';
+        const redirect_to = ['/testurl'];
+        renderWithRouter(<ErrorComponent redirect_to={redirect_to} buttonOnClick={redirectOnClick} />);
+        expect(screen.getByText('Refresh')).toBeInTheDocument();
+    });
+    it('should trigger the history.listen and call the setError function when redirect button get clicked', () => {
+        const redirectOnClick = jest.fn();
+        const history = createBrowserHistory();
+        const setError = jest.fn();
+        render(
+            <Router history={history}>
+                <ErrorComponent {...props} buttonOnClick={redirectOnClick} setError={setError} />
+            </Router>
+        );
+        fireEvent.click(screen.getByText('testlabel'));
+        if (typeof setError === 'function') {
+            expect(setError).toHaveBeenCalledTimes(1);
+        }
+    });
+});

packages/cashier/src/Components/error-component.jsx

@@ -46,8 +46,8 @@ const ErrorComponent = ({
                           refresh_message,
                       ]
             }
-            redirect_url={redirect_to}
-            redirect_label={redirect_label || <Localize i18n_default_text='Refresh' />}
+            redirect_urls={[redirect_to]}
+            redirect_labels={[redirect_label || <Localize i18n_default_text='Refresh' />]}
             buttonOnClick={redirectOnClick || (() => location.reload())}
             should_clear_error_on_click={should_clear_error_on_click}
             setError={setError}

packages/cashier/src/Containers/__tests__/routes.spec.js

@@ -15,10 +15,19 @@ jest.mock('Components/Routes/binary-routes', () => () => <div>BinaryRoutes</div>
 describe('<Routes />', () => {
     it('should show error messages when "has_error = true"', () => {
         const history = createBrowserHistory();
-
+        const error = {
+            header:'',
+            message:'',
+            redirect_label:['test label'],
+            redirectOnClick:jest.fn(),
+            should_clear_error_on_click:true,
+            setError:jest.fn(),
+            redirect_to:['/testurl'],
+            should_show_refresh:true,
+        }
         render(
             <Router history={history}>
-                <Routes has_error />
+                <Routes has_error error={error}/>
             </Router>
         );