accounts-frontend/packages/app/containers/AuthFlowRouteContents.test.tsx

import React from 'react';
import sinon from 'sinon';
import uxpect from 'app/test/unexpected';
import { render, screen } from '@testing-library/react';
import authFlow from 'app/services/authFlow';

import AuthFlowRouteContents from './AuthFlowRouteContents';

describe('AuthFlowRouteContents', () => {
    beforeEach(() => {
        sinon.stub(authFlow, 'handleRequest');
    });

    afterEach(() => {
        (authFlow.handleRequest as any).restore();
    });

    let componentProps: { [key: string]: any };

    function Component(props: { [key: string]: any }) {
        componentProps = props;

        return <div data-testid="test-component" />;
    }

    it('should render component if route allowed', () => {
        const authRequest = {
            path: '/path',
            params: { foo: 1 },
            query: new URLSearchParams(),
        };

        const routerProps: any = {
            location: {
                pathname: authRequest.path,
                search: '',
                query: new URLSearchParams(),
            },
            match: {
                params: authRequest.params,
            },
        };

        (authFlow.handleRequest as any).callsArg(2);

        render(<AuthFlowRouteContents routerProps={routerProps} component={Component} />);

        const component = screen.getByTestId('test-component');

        uxpect(authFlow.handleRequest, 'to have a call satisfying', [
            {
                ...authRequest,
                query: uxpect.it('to be a', URLSearchParams),
            },
            uxpect.it('to be a function'),
            uxpect.it('to be a function'),
        ]);

        expect(component).toBeInTheDocument();
        uxpect(componentProps, 'to equal', routerProps);
    });
});