test(client): refreshProfile() sets isLoading() === true again

packages/core/src/client.ts

@@ -682,9 +682,13 @@ export interface RequestProfileSchemaOptions {
  expandProfile?: boolean;
 }
 
+/**
+ * This map enumerates all the lifecycle events that `MedplumClient` emits and what the shape of the `Event` is.
+ */
 export type MedplumClientEventMap = {
  change: { type: 'change' };
  offline: { type: 'offline' };
+ profileRefreshing: { type: 'profileRefreshing' };
  profileRefreshed: { type: 'profileRefreshed' };
  storageInitialized: { type: 'storageInitialized' };
 };
@@ -2722,6 +2726,7 @@ export class MedplumClient extends TypedEventTarget<MedplumClientEventMap> {
  return Promise.resolve(undefined);
  }
  this.profilePromise = new Promise((resolve, reject) => {
+ this.dispatchEvent({ type: 'profileRefreshing' });
  this.get('auth/me')
  .then((result: SessionDetails) => {
  this.profilePromise = undefined;

packages/react-hooks/src/MedplumProvider/MedplumProvider.test.tsx

@@ -99,6 +99,8 @@ describe('MedplumProvider', () => {
  act(() => {
  storage = new MockAsyncClientStorage();
  storage.setObject('activeLogin', {
+ // This access token contains a field `login_id` which is necessary to pass the validation required in `isMedplumAccessToken`
+ // to get into the state of `MedplumClient.medplumServer === true`
  accessToken:
  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyLCJsb2dpbl9pZCI6InRlc3RpbmcxMjMifQ.lJGCbp2taTarRbamxaKFsTR_VRVgzvttKMmI5uFQSM0',
  refreshToken: '456',
@@ -201,6 +203,7 @@ describe('MedplumProvider', () => {
  reference: 'Project/123',
  },
  });
+
  let medplum!: MockClient;
  const router = new FhirRouter();
  const repo = new MemoryRepository();
@@ -233,5 +236,93 @@ describe('MedplumProvider', () => {
 
  mockFetchSpy.mockRestore();
  });
+
+ test('Refreshing profile re-triggers loading', async () => {
+ const baseUrl = 'https://example.com/';
+ const storage = new ClientStorage(new MemoryStorage());
+ storage.setObject('activeLogin', {
+ accessToken:
+ 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyLCJsb2dpbl9pZCI6InRlc3RpbmcxMjMifQ.lJGCbp2taTarRbamxaKFsTR_VRVgzvttKMmI5uFQSM0',
+ refreshToken: '456',
+ profile: {
+ reference: 'Practitioner/123',
+ },
+ project: {
+ reference: 'Project/123',
+ },
+ });
+
+ let medplum!: MockClient;
+ const router = new FhirRouter();
+ const repo = new MemoryRepository();
+ const client = new MockFetchClient(router, repo, baseUrl);
+ const mockFetchSpy = jest.spyOn(client, 'mockFetch');
+ let dispatchEventSpy!: jest.SpyInstance;
+
+ act(() => {
+ medplum = new MockClient({
+ storage,
+ mockFetchOverride: { router, repo, client },
+ });
+ dispatchEventSpy = jest.spyOn(medplum, 'dispatchEvent');
+ });
+
+ expect(medplum.isLoading()).toEqual(true);
+
+ act(() => {
+ render(
+ <MedplumProvider medplum={medplum}>
+ <MyComponent />
+ </MedplumProvider>
+ );
+ });
+
+ expect(screen.getByText('Loading...')).toBeInTheDocument();
+ expect(medplum.isLoading()).toEqual(true);
+
+ expect(await screen.findByText('Loaded!')).toBeInTheDocument();
+ expect(medplum.isLoading()).toEqual(false);
+ expect(mockFetchSpy).toHaveBeenCalledWith(`${baseUrl}auth/me`, expect.objectContaining({ method: 'GET' }));
+ expect(dispatchEventSpy).toHaveBeenCalledWith({ type: 'profileRefreshed' });
+
+ mockFetchSpy.mockClear();
+ dispatchEventSpy.mockClear();
+
+ let loginPromise!: Promise<void>;
+
+ act(() => {
+ // We clear the active login so that we can test what happens when we call `getProfileAsync()`
+ // Which we want to call `refreshProfile()`
+ // Which is only possible if `sessionDetails` is not defined
+ medplum.clearActiveLogin();
+ medplum.setAccessToken(
+ 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyLCJsb2dpbl9pZCI6InRlc3RpbmcxMjMifQ.lJGCbp2taTarRbamxaKFsTR_VRVgzvttKMmI5uFQSM0'
+ );
+ // This is what is testing that we go back to a loading state when profile is being refreshed
+ loginPromise = medplum.setActiveLogin({
+ accessToken:
+ 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwiaWF0IjoxNTE2MjM5MDIyLCJsb2dpbl9pZCI6InRlc3RpbmcxMjMifQ.lJGCbp2taTarRbamxaKFsTR_VRVgzvttKMmI5uFQSM0',
+ refreshToken: '456',
+ profile: {
+ reference: 'Practitioner/123',
+ },
+ project: {
+ reference: 'Project/123',
+ },
+ });
+ });
+
+ expect(medplum.isLoading()).toEqual(true);
+ expect(await screen.findByText('Loading...')).toBeInTheDocument();
+ expect(dispatchEventSpy).toHaveBeenCalledWith({ type: 'profileRefreshing' });
+
+ expect(await screen.findByText('Loaded!')).toBeInTheDocument();
+ expect(medplum.isLoading()).toEqual(false);
+ expect(dispatchEventSpy).toHaveBeenCalledWith({ type: 'profileRefreshed' });
+
+ await loginPromise;
+
+ expect(mockFetchSpy).toHaveBeenCalledWith(`${baseUrl}auth/me`, expect.objectContaining({ method: 'GET' }));
+ });
  });
 });

packages/react-hooks/src/MedplumProvider/MedplumProvider.tsx

@@ -28,23 +28,25 @@ export function MedplumProvider(props: MedplumProviderProps): JSX.Element {
 
  useEffect(() => {
  function eventListener(): void {
- setState({
- ...state,
+ setState((s) => ({
+ ...s,
  profile: medplum.getProfile(),
  loading: medplum.isLoading(),
- });
+ }));
  }
 
  medplum.addEventListener('change', eventListener);
  medplum.addEventListener('storageInitialized', eventListener);
+ medplum.addEventListener('profileRefreshing', eventListener);
  medplum.addEventListener('profileRefreshed', eventListener);
 
  return () => {
  medplum.removeEventListener('change', eventListener);
  medplum.removeEventListener('storageInitialized', eventListener);
+ medplum.removeEventListener('profileRefreshing', eventListener);
  medplum.removeEventListener('profileRefreshed', eventListener);
  };
- }, [medplum, state]);
+ }, [medplum]);
 
  const medplumContext = useMemo(
  () => ({