@ampath/esm-patient-registration-app 6.0.1-pre.98 → 9.2.0-next.14

package/src/patient-registration/input/custom-input/autosuggest/autosuggest.test.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithRouter } from 'tools';
+import { Autosuggest } from './autosuggest.component';
+
+const mockPersons = [
+  {
+    uuid: 'randomuuid1',
+    display: 'John Doe',
+  },
+  {
+    uuid: 'randomuuid2',
+    display: 'John Smith',
+  },
+  {
+    uuid: 'randomuuid3',
+    display: 'James Smith',
+  },
+  {
+    uuid: 'randomuuid4',
+    display: 'Spider Man',
+  },
+];
+
+const mockGetSearchResults = async (query: string) => {
+  return mockPersons.filter((person) => {
+    return person.display.toUpperCase().includes(query.toUpperCase());
+  });
+};
+
+const mockHandleSuggestionSelected = jest.fn((field, value) => [field, value]);
+
+describe('Autosuggest', () => {
+  it('renders a search box', () => {
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
+    );
+
+    expect(screen.getByRole('searchbox')).toBeInTheDocument();
+    expect(screen.queryByRole('list')).not.toBeInTheDocument();
+  });
+
+  it('renders matching search results in a list when the user types a query', async () => {
+    const user = userEvent.setup();
+
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
+    );
+
+    const searchbox = screen.getByRole('searchbox');
+    await user.type(searchbox, 'john');
+
+    const list = screen.getByRole('list');
+
+    expect(list).toBeInTheDocument();
+    expect(screen.getAllByRole('listitem').length).toEqual(2);
+    expect(screen.getAllByRole('listitem')[0]).toHaveTextContent('John Doe');
+    expect(screen.getAllByRole('listitem')[1]).toHaveTextContent('John Smith');
+  });
+
+  it('clears the list of suggestions when a suggestion is selected', async () => {
+    const user = userEvent.setup();
+
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
+    );
+
+    let list = screen.queryByRole('list');
+    expect(list).not.toBeInTheDocument();
+
+    const searchbox = screen.getByRole('searchbox');
+    await user.type(searchbox, 'john');
+
+    list = screen.getByRole('list');
+    expect(list).toBeInTheDocument();
+
+    const listitems = screen.getAllByRole('listitem');
+    await user.click(listitems[0]);
+
+    expect(mockHandleSuggestionSelected).toHaveBeenLastCalledWith('person', 'randomuuid1');
+
+    list = screen.queryByRole('list');
+    expect(list).not.toBeInTheDocument();
+  });
+
+  it('changes suggestions when a search input is changed', async () => {
+    const user = userEvent.setup();
+
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
+    );
+
+    let list = screen.queryByRole('list');
+    expect(list).not.toBeInTheDocument();
+
+    const searchbox = screen.getByRole('searchbox');
+    await user.type(searchbox, 'john');
+
+    const suggestion = await screen.findByText('John Doe');
+    expect(suggestion).toBeInTheDocument();
+
+    await user.clear(searchbox);
+
+    list = screen.queryByRole('list');
+    expect(list).not.toBeInTheDocument();
+  });
+
+  it('hides the list of suggestions when the user clicks outside of the component', async () => {
+    const user = userEvent.setup();
+
+    renderWithRouter(
+      <Autosuggest
+        getSearchResults={mockGetSearchResults}
+        getDisplayValue={(item) => item.display}
+        getFieldValue={(item) => item.uuid}
+        id="person"
+        labelText=""
+        onSuggestionSelected={mockHandleSuggestionSelected}
+        placeholder="Find Person"
+      />,
+    );
+
+    const input = screen.getByRole('searchbox');
+
+    await user.type(input, 'john');
+    await screen.findByText('John Doe');
+    await user.click(document.body);
+
+    expect(screen.queryByText('John Doe')).not.toBeInTheDocument();
+  });
+});

package/src/patient-registration/input/custom-input/identifier/identifier-input.component.tsx

@@ -1,15 +1,16 @@
-import React, { useState, useCallback, useContext, useMemo } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useField } from 'formik';
+import { useField, Field } from 'formik';
 import { Button } from '@carbon/react';
 import { TrashCan, Edit, Reset } from '@carbon/react/icons';
-import { ResourcesContext } from '../../../../offline.resources';
+import { type RegistrationConfig } from '../../../../config-schema';
 import { showModal, useConfig, UserHasAccess } from '@openmrs/esm-framework';
-import { shouldBlockPatientIdentifierInOfflineMode } from './utils';
 import { deleteIdentifierType, setIdentifierSource } from '../../../field/id/id-field.component';
-import { type PatientIdentifierValue } from '../../../patient-registration.types';
-import { PatientRegistrationContext } from '../../../patient-registration-context';
 import { Input } from '../../basic-input/input/input.component';
+import { usePatientRegistrationContext } from '../../../patient-registration-context';
+import { useResourcesContext } from '../../../../resources-context';
+import { shouldBlockPatientIdentifierInOfflineMode } from './utils';
+import { type PatientIdentifierValue } from '../../../patient-registration.types';
 import styles from '../../input.scss';
 
 interface IdentifierInputProps {
@@ -17,16 +18,17 @@ interface IdentifierInputProps {
   fieldName: string;
 }
 
-export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fieldName }) => {
+const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentifier, fieldName }) => {
   const { t } = useTranslation();
-  const { defaultPatientIdentifierTypes } = useConfig();
-  const { identifierTypes } = useContext(ResourcesContext);
-  const { isOffline, values, setFieldValue } = useContext(PatientRegistrationContext);
+  const { defaultPatientIdentifierTypes } = useConfig<RegistrationConfig>();
+  const { identifierTypes } = useResourcesContext();
+  const { isOffline, values, setFieldValue } = usePatientRegistrationContext();
   const identifierType = useMemo(
     () => identifierTypes.find((identifierType) => identifierType.uuid === patientIdentifier.identifierTypeUuid),
     [patientIdentifier, identifierTypes],
   );
-  const { autoGeneration, initialValue, identifierValue, identifierName, required } = patientIdentifier;
+  const { autoGeneration, initialValue, identifierValue, identifierName, required, selectedSource } = patientIdentifier;
+  const manualEntryEnabled = selectedSource?.autoGenerationOption?.manualEntryEnabled;
   const [hideInputField, setHideInputField] = useState(autoGeneration || initialValue === identifierValue);
   const name = `identifiers.${fieldName}.identifierValue`;
   const [identifierField, identifierFieldMeta] = useField(name);
@@ -41,13 +43,35 @@ export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentif
     return map;
   }, [defaultPatientIdentifierTypes]);
 
+  const validateInput = (value: string) => {
+    if (!value || value === '') {
+      return;
+    }
+
+    if (!identifierType?.format) {
+      return;
+    }
+
+    try {
+      const regex = new RegExp(identifierType.format);
+      if (regex.test(value)) {
+        return;
+      }
+
+      return identifierType.formatDescription ?? `Expected format: ${identifierType.format}`;
+    } catch (e) {
+      console.error('Invalid regex pattern:', identifierType.format);
+      return;
+    }
+  };
+
   const handleReset = useCallback(() => {
     setHideInputField(true);
     setFieldValue(`identifiers.${fieldName}`, {
       ...patientIdentifier,
       identifierValue: initialValue,
-      selectedSource: null,
-      autoGeneration: false,
+      selectedSource,
+      autoGeneration,
     } as PatientIdentifierValue);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialValue, setHideInputField]);
@@ -57,6 +81,7 @@ export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentif
     setFieldValue(`identifiers.${fieldName}`, {
       ...patientIdentifier,
       ...setIdentifierSource(identifierType?.identifierSources?.[0], initialValue, initialValue),
+      ...(autoGeneration && manualEntryEnabled && { identifierValue: initialValue ?? '' }),
     });
   };
 
@@ -68,52 +93,62 @@ export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentif
     */
 
     if (initialValue) {
-      const confirmDeleteIdentifierModal = showModal('delete-identifier-confirmation-modal', {
-        deleteIdentifier: (deleteIdentifier) => {
-          if (deleteIdentifier) {
+      const dispose = showModal('delete-identifier-confirmation-modal', {
+        closeModal: () => dispose(),
+        deleteIdentifier: (isConfirmed) => {
+          if (isConfirmed) {
             setFieldValue('identifiers', deleteIdentifierType(values.identifiers, fieldName));
           }
-          confirmDeleteIdentifierModal();
+          dispose();
         },
         identifierName,
-        initialValue,
+        identifierValue: initialValue,
       });
     } else {
       setFieldValue('identifiers', deleteIdentifierType(values.identifiers, fieldName));
     }
   };
 
+  const showEditButton = !required && hideInputField && (!!initialValue || manualEntryEnabled);
+  const showResetButton =
+    (!!initialValue && initialValue !== identifierValue) || (!hideInputField && manualEntryEnabled);
   return (
     <div className={styles.IDInput}>
-      {!autoGeneration && !hideInputField ? (
-        <Input
-          id={name}
-          labelText={identifierName}
-          name={name}
-          disabled={disabled}
-          required={required}
-          invalid={!!(identifierFieldMeta.touched && identifierFieldMeta.error)}
-          invalidText={identifierFieldMeta.error && t(identifierFieldMeta.error)}
-          // t('identifierValueRequired', 'Identifier value is required')
-          {...identifierField}
-        />
+      {!hideInputField ? (
+        <Field name={name} validate={validateInput}>
+          {({ field, form: { touched, errors } }) => (
+            <Input
+              id={name}
+              labelText={identifierName}
+              name={name}
+              disabled={disabled}
+              required={required}
+              invalid={errors[name] && touched[name]}
+              invalidText={errors[name] && t(errors[name])}
+              {...field}
+            />
+          )}
+        </Field>
       ) : (
         <div className={styles.textID}>
-          <p className={styles.label}>{identifierName}</p>
-          <p className={styles.bodyShort02}>
+          <p data-testid="identifier-label" className={styles.label}>
+            {required ? identifierName : `${t('optionalIdentifierLabel', { identifierName })}`}
+          </p>
+          <p data-testid="identifier-placeholder" className={styles.bodyShort02}>
             {autoGeneration ? t('autoGeneratedPlaceholderText', 'Auto-generated') : identifierValue}
           </p>
-          <input type="hidden" {...identifierField} disabled />
+          <input data-testid="identifier-input" type="hidden" {...identifierField} disabled />
           {/* This is added for any error descriptions */}
           {!!(identifierFieldMeta.touched && identifierFieldMeta.error) && (
             <span className={styles.dangerLabel01}>{identifierFieldMeta.error && t(identifierFieldMeta.error)}</span>
           )}
         </div>
       )}
-      <div style={{ marginBottom: '1rem' }}>
-        {!patientIdentifier.required && patientIdentifier.initialValue && hideInputField && (
+      <div className={styles.actionButtonContainer}>
+        {showEditButton && (
           <UserHasAccess privilege="Edit Patient Identifiers">
             <Button
+              data-testid="edit-button"
               size="md"
               kind="ghost"
               onClick={handleEdit}
@@ -124,7 +159,7 @@ export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentif
             </Button>
           </UserHasAccess>
         )}
-        {initialValue && initialValue !== identifierValue && (
+        {showResetButton && (
           <UserHasAccess privilege="Edit Patient Identifiers">
             <Button
               size="md"
@@ -154,3 +189,5 @@ export const IdentifierInput: React.FC<IdentifierInputProps> = ({ patientIdentif
     </div>
   );
 };
+
+export default IdentifierInput;

package/src/patient-registration/input/custom-input/identifier/identifier-input.test.tsx

@@ -0,0 +1,335 @@
+/* eslint-disable testing-library/no-node-access */
+import React from 'react';
+import userEvent from '@testing-library/user-event';
+import { screen } from '@testing-library/react';
+import { Form, Formik } from 'formik';
+import { getDefaultsFromConfigSchema, useConfig } from '@openmrs/esm-framework';
+import { esmPatientRegistrationSchema, type RegistrationConfig } from '../../../../config-schema';
+import { renderWithContext } from 'tools';
+import { ResourcesContextProvider } from '../../../../resources-context';
+import { type Resources } from '../../../../offline.resources';
+import {
+  PatientRegistrationContextProvider,
+  type PatientRegistrationContextProps,
+} from '../../../patient-registration-context';
+import type {
+  AddressTemplate,
+  FormValues,
+  IdentifierSource,
+  PatientIdentifierValue,
+} from '../../../patient-registration.types';
+import IdentifierInput from './identifier-input.component';
+
+const mockIdentifierTypes = [
+  {
+    fieldName: 'openMrsId',
+    format: '',
+    identifierSources: [
+      {
+        uuid: '01af8526-cea4-4175-aa90-340acb411771',
+        name: 'Generator 2 for OpenMRS ID',
+        autoGenerationOption: {
+          manualEntryEnabled: true,
+          automaticGenerationEnabled: true,
+        },
+      },
+    ],
+    isPrimary: true,
+    name: 'OpenMRS ID',
+    required: true,
+    uniquenessBehavior: 'UNIQUE' as const,
+    uuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+  },
+  {
+    fieldName: 'ssn',
+    format: '^[A-Z]{1}-[0-9]{7}$',
+    formatDescription: 'Identifier should be one letter, followed by a dash, and then 7 digits e.g. A-1234567',
+    identifierSources: [
+      {
+        uuid: '01af8526-cea4-4175-aa90-340acb411771',
+        name: 'Generator 2 for SSN',
+        autoGenerationOption: {
+          manualEntryEnabled: true,
+          automaticGenerationEnabled: false,
+        },
+      },
+    ],
+    isPrimary: false,
+    name: 'SSN',
+    required: true,
+    uniquenessBehavior: 'UNIQUE' as const,
+    uuid: 'a71403f3-8584-4289-ab41-2b4e5570bd45',
+  },
+];
+
+const mockResourcesContextValue: Resources = {
+  addressTemplate: {} as AddressTemplate,
+  currentSession: {
+    authenticated: true,
+    sessionId: 'JSESSION',
+    currentProvider: { uuid: 'provider-uuid', identifier: 'PRO-123' },
+  },
+  relationshipTypes: [],
+  identifierTypes: [...mockIdentifierTypes],
+};
+
+const mockInitialFormValues = {
+  additionalFamilyName: '',
+  additionalGivenName: '',
+  additionalMiddleName: '',
+  addNameInLocalLanguage: false,
+  address: {},
+  attributes: {},
+  birthdate: null,
+  deathDate: null,
+  familyName: '',
+  gender: '',
+  givenName: '',
+  identifiers: {},
+  middleName: '',
+  relationships: [],
+} as FormValues;
+
+const mockContextValues: PatientRegistrationContextProps = {
+  currentPhoto: '',
+  inEditMode: false,
+  identifierTypes: [],
+  initialFormValues: mockInitialFormValues,
+  isOffline: false,
+  setCapturePhotoProps: jest.fn(),
+  setFieldValue: jest.fn(),
+  setInitialFormValues: jest.fn(),
+  setFieldTouched: jest.fn(),
+  validationSchema: null,
+  values: mockInitialFormValues,
+};
+
+const mockUseConfig = jest.mocked(useConfig<RegistrationConfig>);
+
+describe('identifier input', () => {
+  mockUseConfig.mockReturnValue({
+    ...getDefaultsFromConfigSchema(esmPatientRegistrationSchema),
+  });
+
+  const fieldName = 'openMrsId';
+  const openmrsID = {
+    identifierTypeUuid: '05a29f94-c0ed-11e2-94be-8c13b969e334',
+    initialValue: '',
+    identifierName: 'OpenMRS ID',
+    selectedSource: {
+      uuid: '01af8526-cea4-4175-aa90-340acb411771',
+      name: 'Generator 2 for OpenMRS ID',
+      autoGenerationOption: {
+        manualEntryEnabled: false,
+        automaticGenerationEnabled: true,
+      },
+    } as IdentifierSource,
+    autoGeneration: false,
+    preferred: true,
+    required: true,
+  } as PatientIdentifierValue;
+
+  const setupIdentifierInput = (patientIdentifier: PatientIdentifierValue, initialValues = {}) => {
+    renderWithContext(
+      <Formik initialValues={initialValues} onSubmit={jest.fn()}>
+        <Form>
+          <PatientRegistrationContextProvider value={mockContextValues}>
+            <IdentifierInput patientIdentifier={patientIdentifier} fieldName={fieldName} />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+  };
+
+  it('shows the identifier input', () => {
+    openmrsID.autoGeneration = false;
+    setupIdentifierInput(openmrsID as PatientIdentifierValue);
+    expect(screen.getByLabelText(openmrsID.identifierName)).toBeInTheDocument();
+  });
+
+  it('displays an edit button when there is an initial value', async () => {
+    // setup
+    openmrsID.autoGeneration = false;
+    openmrsID.required = false;
+    openmrsID.initialValue = '1002UU9';
+    openmrsID.identifierValue = '1002UU9';
+    // replay
+    setupIdentifierInput(openmrsID as PatientIdentifierValue);
+    expect(screen.getByText('Edit')).toBeInTheDocument();
+  });
+
+  it('hides the edit button when the identifier is required', async () => {
+    // setup
+    openmrsID.autoGeneration = false;
+    openmrsID.required = true;
+    openmrsID.initialValue = '1002UU9';
+    openmrsID.identifierValue = '1002UU9';
+    // replay
+    setupIdentifierInput(openmrsID);
+    expect(screen.queryByText('Edit')).not.toBeInTheDocument();
+  });
+
+  it('displays a delete button when the identifier is not a default type', () => {
+    // setup
+    openmrsID.required = false;
+    // replay
+    setupIdentifierInput(openmrsID);
+    expect(screen.getByText('Delete')).toBeInTheDocument();
+  });
+
+  describe('auto-generated identifier', () => {
+    it('hides the input when the identifier is auto-generated', () => {
+      openmrsID.autoGeneration = true;
+      setupIdentifierInput(openmrsID);
+      expect(screen.getByTestId('identifier-input')).toHaveAttribute('type', 'hidden');
+    });
+
+    it("displays 'Auto-Generated' when the indentifier has auto generation", () => {
+      openmrsID.autoGeneration = true;
+      setupIdentifierInput(openmrsID);
+      expect(screen.getByTestId('identifier-placeholder').innerHTML).toBe('Auto-generated');
+      expect(screen.getByTestId('identifier-input')).toBeDisabled();
+    });
+
+    describe('manual entry allowed', () => {
+      openmrsID.selectedSource = {
+        autoGenerationOption: {
+          manualEntryEnabled: true,
+        },
+      } as IdentifierSource;
+
+      it('shows the edit button', () => {
+        openmrsID.autoGeneration = true;
+        setupIdentifierInput(openmrsID);
+        expect(screen.getByText('Edit')).toBeInTheDocument();
+      });
+
+      describe('edit button clicked', () => {
+        it('displays an empty input field', async () => {
+          const user = userEvent.setup();
+          openmrsID.autoGeneration = true;
+          openmrsID.required = false;
+          openmrsID.selectedSource = {
+            autoGenerationOption: {
+              manualEntryEnabled: true,
+            },
+          } as IdentifierSource;
+          setupIdentifierInput(openmrsID);
+          const editButton = screen.getByTestId('edit-button');
+          await user.click(editButton);
+          expect(screen.getByLabelText(new RegExp(`${openmrsID.identifierName}`))).toHaveValue('');
+        });
+
+        it('displays an input field with the identifier value if it exists', async () => {
+          const user = userEvent.setup();
+          openmrsID.autoGeneration = true;
+          openmrsID.required = false;
+          openmrsID.selectedSource = {
+            autoGenerationOption: {
+              manualEntryEnabled: true,
+            },
+          } as IdentifierSource;
+          setupIdentifierInput(openmrsID, { identifiers: { [fieldName]: { identifierValue: '10001V' } } });
+          const editButton = screen.getByTestId('edit-button');
+          await user.click(editButton);
+          expect(screen.getByLabelText(new RegExp(`${openmrsID.identifierName}`))).toHaveValue('10001V');
+        });
+      });
+    });
+  });
+
+  it('validates identifier format correctly for identifier types with regex formats', async () => {
+    const user = userEvent.setup();
+
+    const ssnIdentifier = {
+      ...openmrsID,
+      autoGeneration: false,
+      format: '^[A-Z]{1}-[0-9]{7}$',
+      identifierName: 'SSN',
+      identifierTypeUuid: 'a71403f3-8584-4289-ab41-2b4e5570bd45',
+      identifierValue: undefined,
+      initialValue: '',
+      required: true,
+      selectedSource: {
+        uuid: '01af8526-cea4-4175-aa90-340acb411771',
+        name: 'Generator 2 for SSN',
+        autoGenerationOption: {
+          manualEntryEnabled: true,
+          automaticGenerationEnabled: false,
+        },
+      } as IdentifierSource,
+    };
+
+    const mockSetFieldTouched = jest.fn();
+    const mockSetFieldValue = jest.fn();
+    const testContextValues = {
+      ...mockContextValues,
+      setFieldTouched: mockSetFieldTouched,
+      setFieldValue: mockSetFieldValue,
+      values: {
+        ...mockInitialFormValues,
+        identifiers: {
+          [fieldName]: ssnIdentifier,
+        },
+      },
+    };
+
+    const initialValues = {
+      identifiers: {
+        [fieldName]: {
+          identifierValue: '',
+        },
+      },
+    };
+
+    renderWithContext(
+      <Formik initialValues={initialValues} onSubmit={jest.fn()}>
+        <Form>
+          <PatientRegistrationContextProvider value={testContextValues}>
+            <IdentifierInput patientIdentifier={ssnIdentifier} fieldName={fieldName} />
+          </PatientRegistrationContextProvider>
+        </Form>
+      </Formik>,
+      ResourcesContextProvider,
+      mockResourcesContextValue,
+    );
+
+    const input = screen.getByRole('textbox', {
+      name: /ssn/i,
+    });
+
+    // Valid cases
+    await user.type(input, 'A-1234567');
+    await user.tab();
+    expect(input).toHaveValue('A-1234567');
+    expect(input).not.toHaveClass('cds--text-input--invalid');
+    expect(screen.queryByText(/identifier should be/i)).not.toBeInTheDocument();
+
+    // Invalid cases
+    await user.clear(input);
+    await user.type(input, 'A-0010902aaa'); // Extra characters
+    await user.tab();
+    expect(input).toHaveClass('cds--text-input--invalid');
+    expect(screen.getByText(/identifier should be/i)).toBeInTheDocument();
+
+    await user.clear(input);
+    await user.type(input, 'a-1234567'); // Lowercase letter
+    await user.tab();
+    expect(input).toHaveClass('cds--text-input--invalid');
+    expect(screen.getByText(/identifier should be/i)).toBeInTheDocument();
+
+    await user.clear(input);
+    await user.type(input, 'AB-1234567'); // Two letters
+    await user.tab();
+    expect(input).toHaveClass('cds--text-input--invalid');
+    expect(screen.getByText(/identifier should be/i)).toBeInTheDocument();
+
+    await user.clear(input);
+    await user.type(input, 'A-123456'); // Only 6 digits
+    await user.tab();
+    expect(input).toHaveClass('cds--text-input--invalid');
+    expect(screen.getByText(/identifier should be/i)).toBeInTheDocument();
+  });
+});