|
@@ -28,14 +28,14 @@ describe('InputModal', () => {
|
|
|
it('should render custom modal title', () => {
|
|
it('should render custom modal title', () => {
|
|
|
const inputModal = render(
|
|
const inputModal = render(
|
|
|
<InputModal
|
|
<InputModal
|
|
|
- title={'Custom title'}
|
|
|
|
|
- inputLabel={'Enter File name here'}
|
|
|
|
|
- submitText={'Create'}
|
|
|
|
|
|
|
+ title="Custom title"
|
|
|
|
|
+ inputLabel="Enter File name here"
|
|
|
|
|
+ submitText="Create"
|
|
|
showModal={true}
|
|
showModal={true}
|
|
|
onSubmit={mockOnSubmit}
|
|
onSubmit={mockOnSubmit}
|
|
|
onClose={mockOnClose}
|
|
onClose={mockOnClose}
|
|
|
- initialValue={''}
|
|
|
|
|
- inputType={'text'}
|
|
|
|
|
|
|
+ initialValue=""
|
|
|
|
|
+ inputType="text"
|
|
|
/>
|
|
/>
|
|
|
);
|
|
);
|
|
|
expect(inputModal.getByText('Custom title')).toBeVisible();
|
|
expect(inputModal.getByText('Custom title')).toBeVisible();
|
|
@@ -44,14 +44,14 @@ describe('InputModal', () => {
|
|
|
it('should render custom input label', () => {
|
|
it('should render custom input label', () => {
|
|
|
const inputModal = render(
|
|
const inputModal = render(
|
|
|
<InputModal
|
|
<InputModal
|
|
|
- title={'Create New File'}
|
|
|
|
|
- inputLabel={'Custom input label'}
|
|
|
|
|
- submitText={'Create'}
|
|
|
|
|
|
|
+ title="Create File"
|
|
|
|
|
+ inputLabel="Custom input label"
|
|
|
|
|
+ submitText="Create"
|
|
|
showModal={true}
|
|
showModal={true}
|
|
|
onSubmit={mockOnSubmit}
|
|
onSubmit={mockOnSubmit}
|
|
|
onClose={mockOnClose}
|
|
onClose={mockOnClose}
|
|
|
- initialValue={''}
|
|
|
|
|
- inputType={'text'}
|
|
|
|
|
|
|
+ initialValue=""
|
|
|
|
|
+ inputType="text"
|
|
|
/>
|
|
/>
|
|
|
);
|
|
);
|
|
|
expect(inputModal.getByText('Custom input label')).toBeVisible();
|
|
expect(inputModal.getByText('Custom input label')).toBeVisible();
|
|
@@ -61,19 +61,23 @@ describe('InputModal', () => {
|
|
|
const user = userEvent.setup();
|
|
const user = userEvent.setup();
|
|
|
render(
|
|
render(
|
|
|
<InputModal
|
|
<InputModal
|
|
|
- title={'Create New File'}
|
|
|
|
|
- inputLabel={'Enter File name here'}
|
|
|
|
|
- submitText={'Create'}
|
|
|
|
|
|
|
+ title="Create File"
|
|
|
|
|
+ inputLabel="Enter File name here"
|
|
|
|
|
+ submitText="Create"
|
|
|
showModal={true}
|
|
showModal={true}
|
|
|
onSubmit={mockOnSubmit}
|
|
onSubmit={mockOnSubmit}
|
|
|
onClose={mockOnClose}
|
|
onClose={mockOnClose}
|
|
|
- initialValue={''}
|
|
|
|
|
- inputType={'text'}
|
|
|
|
|
|
|
+ initialValue=""
|
|
|
|
|
+ inputType="text"
|
|
|
/>
|
|
/>
|
|
|
);
|
|
);
|
|
|
const submitButton = screen.getByRole('button', { name: 'Create' });
|
|
const submitButton = screen.getByRole('button', { name: 'Create' });
|
|
|
|
|
|
|
|
expect(mockOnSubmit).not.toHaveBeenCalled();
|
|
expect(mockOnSubmit).not.toHaveBeenCalled();
|
|
|
|
|
+
|
|
|
|
|
+ const inputField = screen.getByRole('textbox');
|
|
|
|
|
+ await user.type(inputField, 'test-file.txt');
|
|
|
|
|
+
|
|
|
await user.click(submitButton);
|
|
await user.click(submitButton);
|
|
|
expect(mockOnSubmit).toHaveBeenCalled();
|
|
expect(mockOnSubmit).toHaveBeenCalled();
|
|
|
});
|
|
});
|
|
@@ -82,14 +86,14 @@ describe('InputModal', () => {
|
|
|
const user = userEvent.setup();
|
|
const user = userEvent.setup();
|
|
|
render(
|
|
render(
|
|
|
<InputModal
|
|
<InputModal
|
|
|
- title={'Create New File'}
|
|
|
|
|
- inputLabel={'Enter File name here'}
|
|
|
|
|
- submitText={'Create'}
|
|
|
|
|
|
|
+ title="Create File"
|
|
|
|
|
+ inputLabel="Enter File name here"
|
|
|
|
|
+ submitText="Create"
|
|
|
showModal={true}
|
|
showModal={true}
|
|
|
onSubmit={mockOnSubmit}
|
|
onSubmit={mockOnSubmit}
|
|
|
onClose={mockOnClose}
|
|
onClose={mockOnClose}
|
|
|
- initialValue={''}
|
|
|
|
|
- inputType={'text'}
|
|
|
|
|
|
|
+ initialValue=""
|
|
|
|
|
+ inputType="text"
|
|
|
/>
|
|
/>
|
|
|
);
|
|
);
|
|
|
const closeButton = screen.getByRole('button', { name: 'Cancel' });
|
|
const closeButton = screen.getByRole('button', { name: 'Cancel' });
|
|
@@ -102,14 +106,14 @@ describe('InputModal', () => {
|
|
|
it('should render modal with input visible', () => {
|
|
it('should render modal with input visible', () => {
|
|
|
render(
|
|
render(
|
|
|
<InputModal
|
|
<InputModal
|
|
|
- title={'Create New File'}
|
|
|
|
|
- inputLabel={'Custom input label'}
|
|
|
|
|
- submitText={'Create'}
|
|
|
|
|
|
|
+ title="Create File"
|
|
|
|
|
+ inputLabel="Custom input label"
|
|
|
|
|
+ submitText="Create"
|
|
|
showModal={true}
|
|
showModal={true}
|
|
|
onSubmit={mockOnSubmit}
|
|
onSubmit={mockOnSubmit}
|
|
|
onClose={mockOnClose}
|
|
onClose={mockOnClose}
|
|
|
- initialValue={''}
|
|
|
|
|
- inputType={'text'}
|
|
|
|
|
|
|
+ initialValue=""
|
|
|
|
|
+ inputType="text"
|
|
|
/>
|
|
/>
|
|
|
);
|
|
);
|
|
|
const input = screen.getByRole('textbox');
|
|
const input = screen.getByRole('textbox');
|
|
@@ -120,14 +124,14 @@ describe('InputModal', () => {
|
|
|
it('should render modal with number input when input type is number', () => {
|
|
it('should render modal with number input when input type is number', () => {
|
|
|
render(
|
|
render(
|
|
|
<InputModal
|
|
<InputModal
|
|
|
- title={'Set replication'}
|
|
|
|
|
- inputLabel={'Custom input label'}
|
|
|
|
|
- submitText={'Submit'}
|
|
|
|
|
|
|
+ title="Set replication"
|
|
|
|
|
+ inputLabel="Custom input label"
|
|
|
|
|
+ submitText="Submit"
|
|
|
showModal={true}
|
|
showModal={true}
|
|
|
onSubmit={mockOnSubmit}
|
|
onSubmit={mockOnSubmit}
|
|
|
onClose={mockOnClose}
|
|
onClose={mockOnClose}
|
|
|
initialValue={2}
|
|
initialValue={2}
|
|
|
- inputType={'number'}
|
|
|
|
|
|
|
+ inputType="number"
|
|
|
/>
|
|
/>
|
|
|
);
|
|
);
|
|
|
const input = screen.getByRole('spinbutton');
|
|
const input = screen.getByRole('spinbutton');
|
|
@@ -138,14 +142,14 @@ describe('InputModal', () => {
|
|
|
it('should render modal with empty input value when intial value is empty', () => {
|
|
it('should render modal with empty input value when intial value is empty', () => {
|
|
|
render(
|
|
render(
|
|
|
<InputModal
|
|
<InputModal
|
|
|
- title={'Create New File'}
|
|
|
|
|
- inputLabel={'Custom input label'}
|
|
|
|
|
- submitText={'Create'}
|
|
|
|
|
|
|
+ title="Create File"
|
|
|
|
|
+ inputLabel="Custom input label"
|
|
|
|
|
+ submitText="Create"
|
|
|
showModal={true}
|
|
showModal={true}
|
|
|
onSubmit={mockOnSubmit}
|
|
onSubmit={mockOnSubmit}
|
|
|
onClose={mockOnClose}
|
|
onClose={mockOnClose}
|
|
|
- initialValue={''}
|
|
|
|
|
- inputType={'text'}
|
|
|
|
|
|
|
+ initialValue=""
|
|
|
|
|
+ inputType="text"
|
|
|
/>
|
|
/>
|
|
|
);
|
|
);
|
|
|
expect(screen.getByRole('textbox')).toHaveValue('');
|
|
expect(screen.getByRole('textbox')).toHaveValue('');
|
|
@@ -154,14 +158,14 @@ describe('InputModal', () => {
|
|
|
it('should render modal with intial value in input while input type is text', () => {
|
|
it('should render modal with intial value in input while input type is text', () => {
|
|
|
render(
|
|
render(
|
|
|
<InputModal
|
|
<InputModal
|
|
|
- title={'Create New File'}
|
|
|
|
|
- inputLabel={'Custom input label'}
|
|
|
|
|
- submitText={'Create'}
|
|
|
|
|
|
|
+ title="Create File"
|
|
|
|
|
+ inputLabel="Custom input label"
|
|
|
|
|
+ submitText="Create"
|
|
|
showModal={true}
|
|
showModal={true}
|
|
|
onSubmit={mockOnSubmit}
|
|
onSubmit={mockOnSubmit}
|
|
|
onClose={mockOnClose}
|
|
onClose={mockOnClose}
|
|
|
- initialValue={'hello'}
|
|
|
|
|
- inputType={'text'}
|
|
|
|
|
|
|
+ initialValue="hello"
|
|
|
|
|
+ inputType="text"
|
|
|
/>
|
|
/>
|
|
|
);
|
|
);
|
|
|
expect(screen.getByRole('textbox')).toHaveValue('hello');
|
|
expect(screen.getByRole('textbox')).toHaveValue('hello');
|
|
@@ -170,14 +174,14 @@ describe('InputModal', () => {
|
|
|
it('should render modal with intial value in input while input type is number', () => {
|
|
it('should render modal with intial value in input while input type is number', () => {
|
|
|
render(
|
|
render(
|
|
|
<InputModal
|
|
<InputModal
|
|
|
- title={'Create New File'}
|
|
|
|
|
- inputLabel={'Custom input label'}
|
|
|
|
|
- submitText={'Create'}
|
|
|
|
|
|
|
+ title="Create File"
|
|
|
|
|
+ inputLabel="Custom input label"
|
|
|
|
|
+ submitText="Create"
|
|
|
showModal={true}
|
|
showModal={true}
|
|
|
onSubmit={mockOnSubmit}
|
|
onSubmit={mockOnSubmit}
|
|
|
onClose={mockOnClose}
|
|
onClose={mockOnClose}
|
|
|
initialValue={2}
|
|
initialValue={2}
|
|
|
- inputType={'number'}
|
|
|
|
|
|
|
+ inputType="number"
|
|
|
/>
|
|
/>
|
|
|
);
|
|
);
|
|
|
expect(screen.getByRole('spinbutton')).toHaveValue(2);
|
|
expect(screen.getByRole('spinbutton')).toHaveValue(2);
|
|
@@ -187,28 +191,24 @@ describe('InputModal', () => {
|
|
|
const user = userEvent.setup();
|
|
const user = userEvent.setup();
|
|
|
render(
|
|
render(
|
|
|
<InputModal
|
|
<InputModal
|
|
|
- title={'Create New File'}
|
|
|
|
|
- inputLabel={'Custom input label'}
|
|
|
|
|
- submitText={'Create'}
|
|
|
|
|
|
|
+ title="Create File"
|
|
|
|
|
+ inputLabel="Custom input label"
|
|
|
|
|
+ submitText="Create"
|
|
|
showModal={true}
|
|
showModal={true}
|
|
|
onSubmit={mockOnSubmit}
|
|
onSubmit={mockOnSubmit}
|
|
|
onClose={mockOnClose}
|
|
onClose={mockOnClose}
|
|
|
- initialValue={''}
|
|
|
|
|
- inputType={'text'}
|
|
|
|
|
|
|
+ initialValue=""
|
|
|
|
|
+ inputType="text"
|
|
|
/>
|
|
/>
|
|
|
);
|
|
);
|
|
|
- const inputModal = screen.getByRole('dialog', { name: 'Create New File' });
|
|
|
|
|
- const closeIconButton = within(inputModal).getByRole('button', { name: 'Close' });
|
|
|
|
|
|
|
+ const inputModal = screen.getByRole('dialog', { name: 'Create File' });
|
|
|
const inputTextBox = within(inputModal).getByRole('textbox');
|
|
const inputTextBox = within(inputModal).getByRole('textbox');
|
|
|
const submitButton = within(inputModal).getByRole('button', { name: 'Create' });
|
|
const submitButton = within(inputModal).getByRole('button', { name: 'Create' });
|
|
|
const cancelButton = within(inputModal).getByRole('button', { name: 'Cancel' });
|
|
const cancelButton = within(inputModal).getByRole('button', { name: 'Cancel' });
|
|
|
|
|
|
|
|
- await user.tab();
|
|
|
|
|
- if (!closeIconButton.matches(':focus')) {
|
|
|
|
|
- await user.tab(); // Tab again if the focus is on the sentinel
|
|
|
|
|
- }
|
|
|
|
|
- expect(closeIconButton).toHaveFocus();
|
|
|
|
|
- await user.tab();
|
|
|
|
|
|
|
+ const inputField = screen.getByRole('textbox');
|
|
|
|
|
+ await user.type(inputField, 'test-file.txt');
|
|
|
|
|
+
|
|
|
expect(inputTextBox).toHaveFocus();
|
|
expect(inputTextBox).toHaveFocus();
|
|
|
await user.tab();
|
|
await user.tab();
|
|
|
expect(submitButton).toHaveFocus();
|
|
expect(submitButton).toHaveFocus();
|
|
@@ -219,18 +219,42 @@ describe('InputModal', () => {
|
|
|
it('should disable the submit button when buttonDisabled is true', () => {
|
|
it('should disable the submit button when buttonDisabled is true', () => {
|
|
|
render(
|
|
render(
|
|
|
<InputModal
|
|
<InputModal
|
|
|
- title={'Create New File'}
|
|
|
|
|
- inputLabel={'Custom input label'}
|
|
|
|
|
- submitText={'Create'}
|
|
|
|
|
|
|
+ title="Create File"
|
|
|
|
|
+ inputLabel="Custom input label"
|
|
|
|
|
+ submitText="Create"
|
|
|
showModal={true}
|
|
showModal={true}
|
|
|
onSubmit={mockOnSubmit}
|
|
onSubmit={mockOnSubmit}
|
|
|
onClose={mockOnClose}
|
|
onClose={mockOnClose}
|
|
|
- initialValue={''}
|
|
|
|
|
- inputType={'text'}
|
|
|
|
|
|
|
+ initialValue=""
|
|
|
|
|
+ inputType="text"
|
|
|
buttonDisabled={true}
|
|
buttonDisabled={true}
|
|
|
/>
|
|
/>
|
|
|
);
|
|
);
|
|
|
const submitButton = screen.getByRole('button', { name: 'Create' });
|
|
const submitButton = screen.getByRole('button', { name: 'Create' });
|
|
|
expect(submitButton).toBeDisabled();
|
|
expect(submitButton).toBeDisabled();
|
|
|
});
|
|
});
|
|
|
|
|
+
|
|
|
|
|
+ it('should disable the submit button when input value is same as initial value', async () => {
|
|
|
|
|
+ const user = userEvent.setup();
|
|
|
|
|
+ render(
|
|
|
|
|
+ <InputModal
|
|
|
|
|
+ title="Create File"
|
|
|
|
|
+ inputLabel="Custom input label"
|
|
|
|
|
+ submitText="Create"
|
|
|
|
|
+ showModal={true}
|
|
|
|
|
+ onSubmit={mockOnSubmit}
|
|
|
|
|
+ onClose={mockOnClose}
|
|
|
|
|
+ initialValue="sample_file.txt"
|
|
|
|
|
+ inputType="text"
|
|
|
|
|
+ />
|
|
|
|
|
+ );
|
|
|
|
|
+
|
|
|
|
|
+ const submitButton = screen.getByRole('button', { name: 'Create' });
|
|
|
|
|
+ expect(submitButton).toBeDisabled();
|
|
|
|
|
+
|
|
|
|
|
+ const inputField = screen.getByRole('textbox');
|
|
|
|
|
+ await user.type(inputField, 'test-file.txt');
|
|
|
|
|
+
|
|
|
|
|
+ expect(submitButton).not.toBeDisabled();
|
|
|
|
|
+ });
|
|
|
});
|
|
});
|