diff --git a/__mocks__/forms/rfe-forms/repeating-component-test-form.json b/__mocks__/forms/rfe-forms/repeating-component-test-form.json
new file mode 100644
index 000000000..5a9b9a9f6
--- /dev/null
+++ b/__mocks__/forms/rfe-forms/repeating-component-test-form.json
@@ -0,0 +1,89 @@
+{
+ "name": "Repeating Component Test Form",
+ "pages": [
+ {
+ "label": "Emergency Contact",
+ "sections": [
+ {
+ "label": "Contacts",
+ "isExpanded": "true",
+ "questions": [
+ {
+ "label": "Contact",
+ "type": "obsGroup",
+ "required": true,
+ "id": "patientContact",
+ "questionOptions": {
+ "rendering": "repeating"
+ },
+ "questions": [
+ {
+ "label": "Contact relationship",
+ "type": "obs",
+ "required": true,
+ "id": "patientContactRelationship",
+ "questionOptions": {
+ "rendering": "radio",
+ "concept": "164352AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+ "conceptMappings": [
+ {
+ "relationship": "SAME-AS",
+ "type": "CIEL",
+ "value": "164352"
+ }
+ ],
+ "answers": [
+ {
+ "concept": "1528AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+ "label": "Child"
+ },
+ {
+ "concept": "972AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+ "label": "Brother/Sister"
+ },
+ {
+ "concept": "1527AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+ "label": "Father/Mother"
+ },
+ {
+ "concept": "5617AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+ "label": "Partner/Spouse"
+ },
+ {
+ "concept": "5622AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+ "label": "Other"
+ }
+ ]
+ }
+ },
+ {
+ "label": "Phone",
+ "type": "obs",
+ "required": true,
+ "id": "phoneNumber",
+ "questionOptions": {
+ "rendering": "text",
+ "concept": "1650AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
+ "conceptMappings": [
+ {
+ "relationship": "SAME-AS",
+ "type": "CIEL",
+ "value": "1650"
+ }
+ ]
+ }
+ }
+ ]
+ }
+ ]
+ }
+ ]
+ }
+ ],
+ "processor": "EncounterFormProcessor",
+ "encounterType": "dd528487-82a5-4082-9c72-ed246bd49591",
+ "referencedForms": [],
+ "uuid": "a8817ad2-ef92-46c8-bbf7-db336505027c",
+ "description": "test-repeating",
+ "version": "1.0"
+}
\ No newline at end of file
diff --git a/src/components/repeat/repeat.test.ts b/src/components/repeat/repeat.test.ts
deleted file mode 100644
index d9bbe237a..000000000
--- a/src/components/repeat/repeat.test.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { updateFieldIdInExpression } from './helpers';
-
-describe('RepeatingFieldComponent - handleExpressionFieldIdUpdate', () => {
- it('Should handle update of expression with ids in repeat group', () => {
- const expression =
- "infantStatus !== '151849AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' && infantStatus !== '154223AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'";
- const fieldIds = ['birthDate', 'infantStatus', 'deathDate'];
- const index = 2;
-
- const updatedExpression = updateFieldIdInExpression(expression, index, fieldIds);
-
- expect(updatedExpression).toEqual(
- "infantStatus_2 !== '151849AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' && infantStatus_2 !== '154223AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'",
- );
- });
-
- it('Should handle update of expression with ids not in repeat group', () => {
- const expression =
- "myValue > today() || myValue <= '1/1/1890' || myValue > useFieldValue('visit_date') || myValue < useFieldValue('visit_date')";
- const fieldIds = ['birthDate', 'infantStatus', 'deathDate'];
- const index = 1;
-
- const updatedExpression = updateFieldIdInExpression(expression, index, fieldIds);
-
- expect(updatedExpression).toEqual(
- "myValue > today() || myValue <= '1/1/1890' || myValue > useFieldValue('visit_date') || myValue < useFieldValue('visit_date')",
- );
- });
-});
diff --git a/src/components/repeat/repeat.test.tsx b/src/components/repeat/repeat.test.tsx
new file mode 100644
index 000000000..68196ac6f
--- /dev/null
+++ b/src/components/repeat/repeat.test.tsx
@@ -0,0 +1,152 @@
+import { updateFieldIdInExpression } from './helpers';
+import { render, screen, waitFor } from '@testing-library/react';
+import repeatingComponentTestForm from '../../../__mocks__/forms/rfe-forms/repeating-component-test-form.json';
+import { useFormProviderContext } from '../../provider/form-provider';
+import { usePatient, useSession } from '@openmrs/esm-framework';
+import { type FormSchema, type SessionMode } from '../../types';
+import { FormEngine } from '../../..';
+import { mockPatient } from '../../../__mocks__/patient.mock';
+import { mockSessionDataResponse } from '../../../__mocks__/session.mock';
+import userEvent from '@testing-library/user-event';
+import React, { act } from 'react';
+
+describe('RepeatingFieldComponent - handleExpressionFieldIdUpdate', () => {
+ it('Should handle update of expression with ids in repeat group', () => {
+ const expression =
+ "infantStatus !== '151849AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' && infantStatus !== '154223AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'";
+ const fieldIds = ['birthDate', 'infantStatus', 'deathDate'];
+ const index = 2;
+
+ const updatedExpression = updateFieldIdInExpression(expression, index, fieldIds);
+
+ expect(updatedExpression).toEqual(
+ "infantStatus_2 !== '151849AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' && infantStatus_2 !== '154223AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA'",
+ );
+ });
+
+ it('Should handle update of expression with ids not in repeat group', () => {
+ const expression =
+ "myValue > today() || myValue <= '1/1/1890' || myValue > useFieldValue('visit_date') || myValue < useFieldValue('visit_date')";
+ const fieldIds = ['birthDate', 'infantStatus', 'deathDate'];
+ const index = 1;
+
+ const updatedExpression = updateFieldIdInExpression(expression, index, fieldIds);
+
+ expect(updatedExpression).toEqual(
+ "myValue > today() || myValue <= '1/1/1890' || myValue > useFieldValue('visit_date') || myValue < useFieldValue('visit_date')",
+ );
+ });
+});
+
+describe('Repeat Component Tests', () => {
+ const mockUsePatient = jest.mocked(usePatient);
+ const mockUseSession = jest.mocked(useSession);
+
+ global.ResizeObserver = require('resize-observer-polyfill');
+
+ jest.mock('@openmrs/esm-framework', () => {
+ const originalModule = jest.requireActual('@openmrs/esm-framework');
+ return {
+ ...originalModule,
+ usePatient: jest.fn(),
+ useSession: jest.fn(),
+ createGlobalStore: jest.fn(),
+ ActionMenu: jest.fn(() => ),
+ };
+ });
+
+ jest.mock('../../provider/form-provider', () => {
+ const originalModule = jest.requireActual('../../provider/form-provider');
+ return {
+ ...originalModule,
+ useFormProviderContext: jest.fn(),
+ };
+ });
+
+ jest.mock('../../api', () => ({}));
+
+ const renderForm = async (mode: SessionMode = 'enter') => {
+ await act(async () => {
+ render(
+ ,
+ );
+ });
+ };
+
+ const user = userEvent.setup();
+
+ const mockContext = {
+ patient: {},
+ sessionMode: 'enter',
+ formFields: repeatingComponentTestForm.pages[0].sections[0].questions,
+ methods: { getValues: jest.fn(), setValue: jest.fn() },
+ addFormField: jest.fn(),
+ formFieldAdapters: { obsGroup: { transformFieldValue: jest.fn() } },
+ };
+
+ beforeEach(() => {
+ Object.defineProperty(window, 'i18next', {
+ writable: true,
+ configurable: true,
+ value: {
+ language: 'en',
+ t: jest.fn(),
+ },
+ });
+
+ mockUsePatient.mockImplementation(() => ({
+ patient: mockPatient,
+ isLoading: false,
+ error: undefined,
+ patientUuid: mockPatient.id,
+ }));
+
+ mockUseSession.mockImplementation(() => mockSessionDataResponse.data);
+ (useFormProviderContext as jest.Mock).mockReturnValue(mockContext);
+ });
+
+ it('Should add a repeatable field instance on clicking "Add"', async () => {
+ await renderForm();
+ const addButton = screen.getByText(/add/i);
+ await user.click(addButton);
+
+ expect(mockContext.addFormField).toHaveBeenCalledTimes(1);
+ expect(mockContext.addFormField).toHaveBeenCalledWith(expect.objectContaining({ id: 'patientContact_1' }));
+ });
+
+ it('Should clone the field at origin on clicking "Add"', async () => {
+ await renderForm();
+ const addButton = screen.getByText(/add/i);
+ await user.click(addButton);
+
+ const clonedField = screen.getByLabelText(/Contact relationship/i);
+ expect(clonedField).toBeInTheDocument();
+ });
+
+ it('Should submit both the origin and its instances\' values successfully', async () => {
+ await renderForm();
+ const addButton = screen.getByText(/add/i);
+ await user.click(addButton);
+
+ const contactRelationshipField = screen.getByLabelText(/Contact relationship/i);
+ const phoneNumberField = screen.getByLabelText(/Phone/i);
+
+ await user.type(contactRelationshipField, 'Child');
+ await user.type(phoneNumberField, '123456789');
+
+ const submitButton = screen.getByText(/save/i);
+ await user.click(submitButton);
+
+ await waitFor(() => {
+ expect(mockContext.methods.getValues).toHaveBeenCalledWith(expect.objectContaining({
+ patientContactRelationship: 'Child',
+ phoneNumber: '123456789',
+ }));
+ });
+ });
+});
\ No newline at end of file