fix(RHINENG-1414): Sync create group schema with hints

Fixes https://issues.redhat.com/browse/RHINENG-1414.
RedHatInsights · Dec 7, 2023 · 64c5f6c · 64c5f6c
1 parent 942598f
commit 64c5f6c
Show file tree

Hide file tree

Showing 3 changed files with 104 additions and 4 deletions.
diff --git a/src/components/InventoryGroups/Modals/CreateGroupModal.test.js b/src/components/InventoryGroups/Modals/CreateGroupModal.test.js
@@ -1,7 +1,12 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
 import { validateGroupName } from '../utils/api';
-import { validate } from './CreateGroupModal';
+import CreateGroupModal, { validate } from './CreateGroupModal';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
 
 jest.mock('../utils/api');
+jest.mock('react-redux');
 
 describe('validate function', () => {
   afterEach(() => {
@@ -42,3 +47,98 @@ describe('validate function', () => {
     expect(validateGroupName).not.toHaveBeenCalled();
   });
 });
+
+describe('create group modal', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  const setIsModalOpen = jest.fn();
+  const reloadData = jest.fn();
+
+  it('create button is initially disabled', () => {
+    render(
+      <CreateGroupModal
+        isModalOpen
+        setIsModalOpen={setIsModalOpen}
+        reloadData={reloadData}
+      />
+    );
+
+    expect(
+      screen.getByRole('button', {
+        name: /create/i,
+      })
+    ).toBeDisabled();
+  });
+
+  it('can create a group with new name', async () => {
+    validateGroupName.mockResolvedValue(false);
+
+    render(
+      <CreateGroupModal
+        isModalOpen
+        setIsModalOpen={setIsModalOpen}
+        reloadData={reloadData}
+      />
+    );
+
+    await userEvent.type(
+      screen.getByRole('textbox', {
+        name: /group name/i,
+      }),
+      '_abc'
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', {
+          name: /create/i,
+        })
+      ).toBeEnabled();
+    });
+  });
+
+  it('cannot create a group with incorrect name', async () => {
+    render(
+      <CreateGroupModal
+        isModalOpen
+        setIsModalOpen={setIsModalOpen}
+        reloadData={reloadData}
+      />
+    );
+
+    expect(
+      screen.getByRole('button', {
+        name: /create/i,
+      })
+    ).toBeDisabled();
+
+    await userEvent.type(
+      screen.getByRole('textbox', {
+        name: /group name/i,
+      }),
+      '###'
+    );
+
+    expect(
+      screen.getByRole('button', {
+        name: /create/i,
+      })
+    ).toBeDisabled();
+
+    await userEvent.click(
+      screen.getByRole('button', {
+        name: /create/i,
+      })
+    ); // must change focus for the hint to appear (DDF implementation)
+
+    await waitFor(() => {
+      expect(
+        screen.getByText(
+          'Valid characters include letters, numbers, spaces, hyphens ( - ), and underscores ( _ ).'
+        )
+      ).toBeVisible();
+    });
+  });
+});
diff --git a/src/components/InventoryGroups/Modals/ModalSchemas/schemes.js b/src/components/InventoryGroups/Modals/ModalSchemas/schemes.js
@@ -13,7 +13,7 @@ export const createGroupSchema = (namePresenceValidator) => ({
       name: 'name',
       label: 'Group name',
       helperText:
-        'Can only contain letters, numbers, spaces, hyphens ( - ), and underscores( _ ).',
+        'Can only contain letters, numbers, spaces, hyphens ( - ), and underscores ( _ ).',
       isRequired: true,
       autoFocus: true,
       validate: [

diff --git a/src/components/InventoryGroups/helpers/validate.js b/src/components/InventoryGroups/helpers/validate.js
@@ -2,7 +2,7 @@ import validatorTypes from '@data-driven-forms/react-form-renderer/validator-typ
 
 export const nameValidator = {
   type: validatorTypes.PATTERN,
-  pattern: /^[A-Za-z0-9]+[A-Za-z0-9_\-\s]*$/,
+  pattern: /^[A-Za-z0-9_\-\s]+[A-Za-z0-9_\-\s]*$/,
   message:
-    'Must start with a letter or number. Valid characters include lowercase letters, numbers, hyphens ( - ), and underscores ( _ ).',
+    'Valid characters include letters, numbers, spaces, hyphens ( - ), and underscores ( _ ).',
 };