[tests]: O3-4092-Added tests for editing a clinical view (#18)

* Added tests for editing a clinical view * added validation in tests
openmrs · Nov 14, 2024 · 2005e67 · 2005e67
1 parent f63ac0d
commit 2005e67
Showing 1 changed file with 106 additions and 19 deletions.
diff --git a/src/components/view-editor/view-editor.component.test.tsx b/src/components/view-editor/view-editor.component.test.tsx
@@ -15,40 +15,127 @@ beforeEach(() => {
 });
 
 describe('ContentPackagesEditorContent', () => {
-  it('renders correctly and allows inputting dummy schema', async () => {
-    render(
-      <MemoryRouter initialEntries={['/clinical-views-builder/new']}>
+  const mockShowSnackbar = jest.fn();
+  const defaultExistingContent = {
+    '@openmrs/esm-patient-chart-app': {
+      extensionSlots: {
+        'patient-chart-dashboard-slot': {
+          configure: {
+            'hiv-summary-dashboard-slot': {
+              title: 'HIV Summary',
+              launchOptions: { displayText: 'add' },
+              formList: [{ uuid: '8c48efc5-dd85-3795-9f58-8eb436a4edcc' }],
+            },
+          },
+        },
+      },
+    },
+  };
+
+  const renderComponent = (path: string, clinicalViewId?: string) => {
+    if (clinicalViewId) {
+      localStorage.setItem(clinicalViewId, JSON.stringify(defaultExistingContent));
+    }
+
+    return render(
+      <MemoryRouter initialEntries={[path]}>
         <ContentPackagesEditorContent t={(key) => key} />
       </MemoryRouter>,
     );
+  };
+
+  const verifyBasicElements = async () => {
+    expect(screen.getByText('schemaEditor')).toBeInTheDocument();
+    expect(screen.getByText(/interactiveBuilderHelperText/i)).toBeInTheDocument();
+
+    const startBuildingButton = screen.getByRole('button', { name: /startBuilding/i });
+    expect(startBuildingButton).toBeInTheDocument();
+    await userEvent.click(startBuildingButton);
+    expect(screen.getByText(/clinicalViewMenus/i)).toBeInTheDocument();
+  };
+
+  beforeEach(() => {
+    localStorage.clear();
+    jest.mock('@openmrs/esm-framework', () => ({
+      showSnackbar: mockShowSnackbar,
+      useConfig: () => ({}),
+    }));
+  });
+
+  it('renders correctly and allows inputting dummy schema', async () => {
+    renderComponent('/clinical-views-builder/new');
 
     expect(screen.getByText('schemaEditor')).toBeInTheDocument();
     const importSchemaButtons = screen.queryAllByText(/importSchema/i);
     expect(importSchemaButtons.length).toBeGreaterThan(0);
-    expect(screen.getByText(/inputDummySchema/i)).toBeInTheDocument();
 
     await userEvent.click(screen.getByText(/inputDummySchema/i));
 
-    expect(screen.getByText(/interactiveBuilderInfo/i)).toBeInTheDocument();
-    expect(screen.getByText(/Package One/i)).toBeInTheDocument();
-    expect(screen.getByText(/clinicalViewMenus/i)).toBeInTheDocument();
-    expect(screen.getByText(/First Menu/i)).toBeInTheDocument();
+    ['Package One', 'First Menu', 'Second Menu'].forEach((text) =>
+      expect(screen.getByText(new RegExp(text, 'i'))).toBeInTheDocument(),
+    );
+
     await userEvent.click(screen.getByRole('button', { name: /First Menu/i }));
     expect(screen.getByText(/menuSlot\s*:\s*first-menu-slot/i)).toBeInTheDocument();
-    const firstHelperText = screen.getAllByText(/helperTextForAddDasboards/i)[0];
-    expect(firstHelperText).toBeInTheDocument();
-
-    const firstConfigureButton = screen.getAllByRole('button', { name: /configureDashboard/i })[0];
-    expect(firstConfigureButton).toBeInTheDocument();
-    expect(screen.getByText(/Second Menu/i)).toBeInTheDocument();
-
     await userEvent.click(screen.getByRole('button', { name: /Second Menu/i }));
     expect(screen.getByText(/menuSlot\s*:\s*second-menu-slot/i)).toBeInTheDocument();
-    const secondHelperText = screen.getAllByText(/helperTextForAddDasboards/i)[1];
-    expect(secondHelperText).toBeInTheDocument();
 
-    const secondConfigureButton = screen.getAllByRole('button', { name: /configureDashboard/i })[1];
-    expect(secondConfigureButton).toBeInTheDocument();
     expect(screen.getByRole('button', { name: /addClinicalViewSubMenu/i })).toBeInTheDocument();
   });
+
+  it('should render the view editor with existing content', async () => {
+    const clinicalViewId = 'existing-clinical-view-id';
+    renderComponent(`/clinical-views-builder/edit/${clinicalViewId}`, clinicalViewId);
+    await verifyBasicElements();
+  });
+
+  it('should allow editing view content through the interactive builder', async () => {
+    const clinicalViewId = 'existing-clinical-view-id';
+    renderComponent(`/clinical-views-builder/edit/${clinicalViewId}`, clinicalViewId);
+    await verifyBasicElements();
+
+    const editTabDefinitionButton = screen.getByRole('button', { name: /renderChanges/i });
+    expect(editTabDefinitionButton).toBeInTheDocument();
+    await userEvent.click(editTabDefinitionButton);
+    const formInput = screen.getByRole('textbox');
+    expect(formInput).toBeInTheDocument();
+    await userEvent.type(formInput, 'New Form Input Value');
+  });
+
+  it('should handle errors during schema operations', async () => {
+    const clinicalViewId = 'existing-clinical-view-id';
+    renderComponent(`/clinical-views-builder/edit/${clinicalViewId}`, clinicalViewId);
+    await verifyBasicElements();
+
+    const saveSchemaButton = screen.getByRole('button', { name: /saveClinicalView/i });
+    expect(saveSchemaButton).toBeInTheDocument();
+    await userEvent.click(saveSchemaButton);
+  });
+
+  it('should allow editing form configurations within menus', async () => {
+    const clinicalViewId = 'existing-clinical-view-id';
+    renderComponent(`/clinical-views-builder/edit/${clinicalViewId}`, clinicalViewId);
+    await verifyBasicElements();
+
+    const editTabDefinitionButton = screen.getByRole('button', { name: /renderChanges/i });
+    expect(editTabDefinitionButton).toBeInTheDocument();
+    await userEvent.click(editTabDefinitionButton);
+    const formInput = screen.getByRole('textbox');
+    expect(formInput).toBeInTheDocument();
+    await userEvent.type(formInput, 'New Form Input Value');
+  });
+
+  it('should properly update state when schema changes', async () => {
+    const clinicalViewId = 'existing-clinical-view-id';
+    renderComponent(`/clinical-views-builder/edit/${clinicalViewId}`, clinicalViewId);
+    await verifyBasicElements();
+
+    const schemaInput = screen.getByRole('textbox');
+    expect(schemaInput).toBeInTheDocument();
+    await userEvent.type(schemaInput, 'Updated Schema');
+    const saveButton = screen.getByRole('button', { name: /saveClinicalView/i });
+    await userEvent.click(saveButton);
+    const updatedSchemaInput = screen.getByRole('textbox');
+    expect(updatedSchemaInput).toBeInTheDocument();
+  });
 });