Przeglądaj źródła

[frontend] Added tests for input modal

Nidhi Bhat G 1 rok temu
rodzic
commit
d8dbbf7907

+ 187 - 0
desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.test.tsx

@@ -0,0 +1,187 @@
+// Licensed to Cloudera, Inc. under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  Cloudera, Inc. licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import React from 'react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+
+import InputModal from './InputModal';
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn()
+  }))
+});
+
+describe('InputModal', () => {
+  test('renders custom modal title', () => {
+    const inputModal = render(
+      <InputModal
+        title={'Custom title'}
+        inputLabel={'Enter File name here'}
+        submitText={'Create'}
+        showModal={true}
+        onSubmit={jest.fn()}
+        onClose={jest.fn()}
+      />
+    );
+    expect(inputModal.getByText('Custom title')).toBeVisible();
+  });
+
+  test('renders custom input label', () => {
+    const inputModal = render(
+      <InputModal
+        title={'Create New File'}
+        inputLabel={'Custom input label'}
+        submitText={'Create'}
+        showModal={true}
+        onSubmit={jest.fn()}
+        onClose={jest.fn()}
+      />
+    );
+    expect(inputModal.getByText('Custom input label')).toBeVisible();
+  });
+
+  test('calls onSubmit when create button is clicked', async () => {
+    const onCloseMock = jest.fn();
+    const onSubmitMock = jest.fn();
+    const user = userEvent.setup();
+    render(
+      <InputModal
+        title={'Create New File'}
+        inputLabel={'Enter File name here'}
+        submitText={'Create'}
+        showModal={true}
+        onSubmit={onSubmitMock}
+        onClose={onCloseMock}
+      />
+    );
+    const submitButton = screen.getByRole('button', { name: 'Create' });
+
+    expect(onSubmitMock).not.toHaveBeenCalled();
+    await user.click(submitButton);
+    expect(onSubmitMock).toHaveBeenCalled();
+  });
+
+  test('calls onClose after submission when submit button is clicked', async () => {
+    const onCloseMock = jest.fn();
+    const onSubmitMock = jest.fn();
+    const user = userEvent.setup();
+    render(
+      <InputModal
+        title={'Create New File'}
+        inputLabel={'Enter File name here'}
+        submitText={'Create'}
+        showModal={true}
+        onSubmit={onSubmitMock}
+        onClose={onCloseMock}
+      />
+    );
+    const submitButton = screen.getByRole('button', { name: 'Create' });
+
+    await user.click(submitButton);
+    expect(onSubmitMock).toHaveBeenCalled();
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+
+  test('calls onClose when close button is clicked', async () => {
+    const onCloseMock = jest.fn();
+    const onSubmitMock = jest.fn();
+    const user = userEvent.setup();
+    render(
+      <InputModal
+        title={'Create New File'}
+        inputLabel={'Enter File name here'}
+        submitText={'Create'}
+        showModal={true}
+        onSubmit={onSubmitMock}
+        onClose={onCloseMock}
+      />
+    );
+    const closeButton = screen.getByRole('button', { name: 'Cancel' });
+
+    expect(onCloseMock).not.toHaveBeenCalled();
+    await user.click(closeButton);
+    expect(onCloseMock).toHaveBeenCalled();
+  });
+
+  test('renders modal with input visible', () => {
+    render(
+      <InputModal
+        title={'Create New File'}
+        inputLabel={'Custom input label'}
+        submitText={'Create'}
+        showModal={true}
+        onSubmit={jest.fn()}
+        onClose={jest.fn()}
+      />
+    );
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveClass('hue-input-modal__input');
+    expect(input).toBeVisible();
+  });
+
+  test('renders modal with empty input value', () => {
+    render(
+      <InputModal
+        title={'Create New File'}
+        inputLabel={'Custom input label'}
+        submitText={'Create'}
+        showModal={true}
+        onSubmit={jest.fn()}
+        onClose={jest.fn()}
+      />
+    );
+    expect(screen.getByRole('textbox')).toHaveValue('');
+  });
+
+  test('accepts tab focus on input elements placed in the drawer', async () => {
+    const user = userEvent.setup();
+    render(
+      <InputModal
+        title={'Create New File'}
+        inputLabel={'Custom input label'}
+        submitText={'Create'}
+        showModal={true}
+        onSubmit={jest.fn()}
+        onClose={jest.fn()}
+      />
+    );
+    const inputModal = screen.getByRole('dialog', { name: 'Create New File' });
+    const closeIconButton = within(inputModal).getByRole('button', { name: 'Close' });
+    const inputTextBox = within(inputModal).getByRole('textbox');
+    const submitButton = within(inputModal).getByRole('button', { name: 'Create' });
+    const cancelButton = within(inputModal).getByRole('button', { name: 'Cancel' });
+
+    await user.tab();
+    expect(closeIconButton).toHaveFocus();
+    await user.tab();
+    expect(inputTextBox).toHaveFocus();
+    await user.tab();
+    expect(submitButton).toHaveFocus();
+    await user.tab();
+    expect(cancelButton).toHaveFocus();
+  });
+});

+ 1 - 1
desktop/core/src/desktop/js/apps/storageBrowser/InputModal/InputModal.tsx

@@ -42,7 +42,7 @@ const InputModal: React.FC<InputModalProps> = ({
 }): JSX.Element => {
   const [value, setValue] = useState<string>('');
   const { t } = i18nReact.useTranslation();
-  const { cancelText = t('Close'), submitText = t('Submit') } = i18n;
+  const { cancelText = t('Cancel'), submitText = t('Submit') } = i18n;
 
   return (
     <Modal