101 lines
2.8 KiB
TypeScript
101 lines
2.8 KiB
TypeScript
|
import { Map as ImmutableMap } from 'immutable';
|
||
|
import React from 'react';
|
||
|
import { Route, Switch } from 'react-router-dom';
|
||
|
|
||
|
import { __stub } from '../../../__mocks__/api';
|
||
|
import { render, screen } from '../../../jest/test-helpers';
|
||
|
import Verification from '../index';
|
||
|
|
||
|
const TestableComponent = () => (
|
||
|
<Switch>
|
||
|
<Route path='/auth/verify' exact><Verification /></Route>
|
||
|
<Route path='/' exact><span data-testid='home'>Homepage</span></Route>
|
||
|
</Switch>
|
||
|
);
|
||
|
|
||
|
const renderComponent = (store) => render(
|
||
|
<TestableComponent />,
|
||
|
{},
|
||
|
store,
|
||
|
{ initialEntries: ['/auth/verify'] },
|
||
|
);
|
||
|
|
||
|
describe('<Verification />', () => {
|
||
|
let store;
|
||
|
|
||
|
beforeEach(() => {
|
||
|
store = {
|
||
|
verification: ImmutableMap({
|
||
|
instance: {
|
||
|
isReady: true,
|
||
|
registrations: true,
|
||
|
},
|
||
|
isComplete: false,
|
||
|
}),
|
||
|
};
|
||
|
|
||
|
__stub(mock => {
|
||
|
mock.onGet('/api/v1/pepe/instance')
|
||
|
.reply(200, {
|
||
|
age_minimum: 18,
|
||
|
approval_required: true,
|
||
|
challenges: ['age', 'email', 'sms'],
|
||
|
});
|
||
|
|
||
|
mock.onPost('/api/v1/pepe/registrations')
|
||
|
.reply(200, {
|
||
|
access_token: 'N-dZmNqNSmTutJLsGjZ5AnJL4sLw_y-N3pn2acSqJY8',
|
||
|
});
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe('When registration is closed', () => {
|
||
|
it('successfully redirects to the homepage', () => {
|
||
|
const verification = store.verification.setIn(['instance', 'registrations'], false);
|
||
|
store.verification = verification;
|
||
|
|
||
|
renderComponent(store);
|
||
|
expect(screen.getByTestId('home')).toHaveTextContent('Homepage');
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe('When verification is complete', () => {
|
||
|
it('successfully renders the Registration component', () => {
|
||
|
const verification = store.verification.set('isComplete', true);
|
||
|
store.verification = verification;
|
||
|
|
||
|
renderComponent(store);
|
||
|
expect(screen.getByRole('heading')).toHaveTextContent('Register your account');
|
||
|
});
|
||
|
});
|
||
|
|
||
|
describe('Switching verification steps', () => {
|
||
|
it('successfully renders the Birthday step', () => {
|
||
|
const verification = store.verification.set('currentChallenge', 'age');
|
||
|
store.verification = verification;
|
||
|
|
||
|
renderComponent(store);
|
||
|
|
||
|
expect(screen.getByRole('heading')).toHaveTextContent('Enter your birth date');
|
||
|
});
|
||
|
|
||
|
it('successfully renders the Email step', () => {
|
||
|
const verification = store.verification.set('currentChallenge', 'email');
|
||
|
store.verification = verification;
|
||
|
|
||
|
renderComponent(store);
|
||
|
|
||
|
expect(screen.getByRole('heading')).toHaveTextContent('Enter your email address');
|
||
|
});
|
||
|
|
||
|
it('successfully renders the SMS step', () => {
|
||
|
const verification = store.verification.set('currentChallenge', 'sms');
|
||
|
store.verification = verification;
|
||
|
|
||
|
renderComponent(store);
|
||
|
|
||
|
expect(screen.getByRole('heading')).toHaveTextContent('Enter your phone number');
|
||
|
});
|
||
|
});
|
||
|
});
|