mirror of
https://github.com/SomboChea/ui
synced 2024-09-30 21:37:48 +07:00
106 lines
3.1 KiB
TypeScript
106 lines
3.1 KiB
TypeScript
|
import React from 'react';
|
||
|
|
||
|
import { render, waitForElement, fireEvent, waitForElementToBeRemoved } from '../../utils/test-react-testing-library';
|
||
|
import AppContext, { AppContextProps } from '../../App/AppContext';
|
||
|
import api from '../../utils/api';
|
||
|
|
||
|
import LoginDialog from './LoginDialog';
|
||
|
|
||
|
const appContextValue: AppContextProps = {
|
||
|
scope: '',
|
||
|
setUser: jest.fn(),
|
||
|
};
|
||
|
|
||
|
describe('<LoginDialog /> component', () => {
|
||
|
beforeEach(() => {
|
||
|
jest.resetModules();
|
||
|
jest.resetAllMocks();
|
||
|
});
|
||
|
|
||
|
test('should render the component in default state', () => {
|
||
|
const props = {
|
||
|
onClose: jest.fn(),
|
||
|
};
|
||
|
const { container } = render(
|
||
|
<AppContext.Provider value={appContextValue}>
|
||
|
<LoginDialog onClose={props.onClose} />
|
||
|
</AppContext.Provider>
|
||
|
);
|
||
|
expect(container.firstChild).toMatchSnapshot();
|
||
|
});
|
||
|
|
||
|
test('should load the component with the open prop', async () => {
|
||
|
const props = {
|
||
|
open: true,
|
||
|
onClose: jest.fn(),
|
||
|
};
|
||
|
|
||
|
const { getByText } = render(
|
||
|
<AppContext.Provider value={appContextValue}>
|
||
|
<LoginDialog onClose={props.onClose} open={props.open} />
|
||
|
</AppContext.Provider>
|
||
|
);
|
||
|
|
||
|
const loginDialogHeading = await waitForElement(() => getByText('Sign in'));
|
||
|
expect(loginDialogHeading).toBeTruthy();
|
||
|
});
|
||
|
|
||
|
test('onClose: should close the login modal', async () => {
|
||
|
const props = {
|
||
|
open: true,
|
||
|
onClose: jest.fn(),
|
||
|
};
|
||
|
|
||
|
const { getByTestId } = render(
|
||
|
<AppContext.Provider value={appContextValue}>
|
||
|
<LoginDialog onClose={props.onClose} open={props.open} />
|
||
|
</AppContext.Provider>
|
||
|
);
|
||
|
|
||
|
const loginDialogButton = await waitForElement(() => getByTestId('close-login-dialog-button'));
|
||
|
expect(loginDialogButton).toBeTruthy();
|
||
|
|
||
|
fireEvent.click(loginDialogButton, { open: false });
|
||
|
expect(props.onClose).toHaveBeenCalled();
|
||
|
});
|
||
|
|
||
|
// TODO
|
||
|
test.skip('setCredentials - should set username and password in state', async () => {
|
||
|
const props = {
|
||
|
open: true,
|
||
|
onClose: jest.fn(),
|
||
|
};
|
||
|
|
||
|
jest.spyOn(api, 'request').mockImplementation(() =>
|
||
|
Promise.resolve({
|
||
|
username: 'xyz',
|
||
|
token: 'djsadaskljd',
|
||
|
})
|
||
|
);
|
||
|
|
||
|
const { getByPlaceholderText, getByText } = render(
|
||
|
<AppContext.Provider value={appContextValue}>
|
||
|
<LoginDialog onClose={props.onClose} open={props.open} />
|
||
|
</AppContext.Provider>
|
||
|
);
|
||
|
|
||
|
// TODO: the input's value is not being updated in the DOM
|
||
|
const userNameInput = getByPlaceholderText('Your username');
|
||
|
fireEvent.focus(userNameInput);
|
||
|
fireEvent.change(userNameInput, { target: { value: 'xyz' } });
|
||
|
|
||
|
// TODO: the input's value is not being updated in the DOM
|
||
|
const passwordInput = getByPlaceholderText('Your strong password');
|
||
|
fireEvent.focus(passwordInput);
|
||
|
fireEvent.change(passwordInput, { target: { value: '1234' } });
|
||
|
|
||
|
// TODO: submitting form does not work
|
||
|
const signInButton = getByText('Sign in');
|
||
|
fireEvent.click(signInButton);
|
||
|
});
|
||
|
|
||
|
test.todo('validateCredentials: should validate credentials');
|
||
|
|
||
|
test.todo('submitCredentials: should submit credentials');
|
||
|
});
|