From fa6bfd2e042ebb771ea8e237d41228e5c982804b Mon Sep 17 00:00:00 2001
From: Dennis Kigen <kigen.work@gmail.com>
Date: Mon, 2 Sep 2024 11:37:15 +0300
Subject: [PATCH] (refactor) Load styleguide config asynchronously in
 PageHeader (#1133)

* (refactor) Load styleguide config asynchronously in PageHeader

This PR refactors the PageHeader component to load the styleguide config
asynchronously via the getConfig function. This fixes an issue where the useConfig hook usage would result in the consuming
component failing to render in the test environment when running tests. I'm not sure why this only happens in the test environment,
but it's likely related to the way the styleguide config is loaded in the test environment. It's also possible that the better approach here would be
to refactor the useConfig stub to make it more flexible, but this PR fixes the issue for now. Functionality should be unchanged.

FWIW, the [other use](https://github.com/openmrs/openmrs-esm-patient-management/blob/main/packages/esm-patient-registration-app/src/patient-registration/form-manager.ts#L139-L140) of the styleguide config in the Patient Management app loads the config asynchronously via the getConfig function,
so this PR is consistent with that approach.

* Review feedback
---
 .../src/page-header/page-header.component.tsx | 15 +++--
 .../src/page-header/page-header.test.tsx      | 60 +++++++++++++++++++
 2 files changed, 69 insertions(+), 6 deletions(-)
 create mode 100644 packages/framework/esm-styleguide/src/page-header/page-header.test.tsx

diff --git a/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx b/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx
index 0ee034c52..79d2bd4b2 100644
--- a/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx
+++ b/packages/framework/esm-styleguide/src/page-header/page-header.component.tsx
@@ -1,7 +1,7 @@
 /** @module @category UI */
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import classNames from 'classnames';
-import { useConfig } from '@openmrs/esm-react-utils';
+import { getConfig } from '@openmrs/esm-config';
 import { type StyleguideConfigObject } from '../config-schema';
 import styles from './page-header.module.scss';
 
@@ -87,10 +87,13 @@ export const PageHeader: React.FC<PageHeaderProps> = (props) => {
  * ```
  */
 export const PageHeaderContent: React.FC<PageHeaderContentProps> = ({ title, illustration, className }) => {
-  const config = useConfig<StyleguideConfigObject>({
-    // Do not remove this property. See https://github.com/openmrs/openmrs-esm-core/pull/1125#issuecomment-2313230513 for more context.
-    externalModuleName: '@openmrs/esm-styleguide',
-  });
+  const [config, setConfig] = useState<StyleguideConfigObject | null>(null);
+
+  useEffect(() => {
+    getConfig('@openmrs/esm-styleguide').then((fetchedConfig: StyleguideConfigObject) => {
+      setConfig(fetchedConfig);
+    });
+  }, []);
 
   return (
     <div className={classNames(styles.pageHeaderContent, className)}>
diff --git a/packages/framework/esm-styleguide/src/page-header/page-header.test.tsx b/packages/framework/esm-styleguide/src/page-header/page-header.test.tsx
new file mode 100644
index 000000000..8979d6d65
--- /dev/null
+++ b/packages/framework/esm-styleguide/src/page-header/page-header.test.tsx
@@ -0,0 +1,60 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { getConfig } from '@openmrs/esm-config';
+import { PageHeaderContent } from './page-header.component';
+
+const mockedGetConfig = jest.mocked(getConfig);
+
+jest.mock('@openmrs/esm-config', () => ({
+  getConfig: jest.fn(),
+}));
+
+describe('PageHeaderContent', () => {
+  const mockIllustration = <svg data-testid="mock-illustration" />;
+
+  it('renders title and illustration', async () => {
+    mockedGetConfig.mockResolvedValue({});
+
+    render(<PageHeaderContent title="Test Title" illustration={mockIllustration} />);
+
+    await screen.findByText(/test title/i);
+    expect(screen.getByTestId('mock-illustration')).toBeInTheDocument();
+  });
+
+  it('renders implementation name when provided in config', async () => {
+    mockedGetConfig.mockResolvedValue({ implementationName: 'Test Clinic' });
+
+    render(<PageHeaderContent title="Test Title" illustration={mockIllustration} />);
+
+    await screen.findByText('Test Clinic');
+  });
+
+  it('does not render implementation name when not provided in config', async () => {
+    mockedGetConfig.mockResolvedValue({});
+
+    render(<PageHeaderContent title="Test Title" illustration={mockIllustration} />);
+
+    await screen.findByText(/test title/i);
+    expect(screen.queryByText('Test Clinic')).not.toBeInTheDocument();
+  });
+
+  it('applies custom className when provided', async () => {
+    mockedGetConfig.mockResolvedValue({});
+
+    const { container } = render(
+      <PageHeaderContent title="Test Title" illustration={mockIllustration} className="custom-class" />,
+    );
+
+    await screen.findByText(/test title/i);
+    expect(container.firstChild).toHaveClass('custom-class');
+  });
+
+  it('calls getConfig with correct module name', async () => {
+    mockedGetConfig.mockResolvedValue({});
+
+    render(<PageHeaderContent title="Test Title" illustration={mockIllustration} />);
+
+    await screen.findByText(/test title/i);
+    expect(getConfig).toHaveBeenCalledWith('@openmrs/esm-styleguide');
+  });
+});