STCOR-864 correctly evaluate typeof stripes.okapi

CHANGELOG.md

@@ -15,6 +15,7 @@
 * Avoid deprecated `getChildContext`. Refs STCOR-842.
 * Read locale from stripes-config before defaulting to `en-US`. Refs STCOR-851.
 * Correctly populate `stripes.user.user` on reload. Refs STCOR-860.
+* Correctly evaluate `stripes.okapi` before rendering `<RootWithIntl>`. Refs STCOR-864.
 
 ## [10.1.0](https://github.com/folio-org/stripes-core/tree/v10.1.0) (2024-03-12)
 [Full Changelog](https://github.com/folio-org/stripes-core/compare/v10.0.0...v10.1.0)

src/RootWithIntl.js

@@ -70,7 +70,7 @@ const RootWithIntl = ({ stripes, token = '', isAuthenticated = false, disableAut
                             event={events.LOGIN}
                             stripes={connectedStripes}
                           />
-                          { (connectedStripes.okapi !== 'object' || connectedStripes.discovery.isFinished) && (
+                          { (typeof connectedStripes.okapi !== 'object' || connectedStripes.discovery.isFinished) && (
                             <ModuleContainer id="content">
                               <OverlayContainer />
                               {connectedStripes.config.useSecureTokens && <SessionEventContainer history={history} />}

src/RootWithIntl.test.js

@@ -0,0 +1,123 @@
+/* shhhh, eslint, it's ok. we need "unused" imports for mocks */
+/* eslint-disable no-unused-vars */
+
+import { render, screen } from '@folio/jest-config-stripes/testing-library/react';
+import { Router as DefaultRouter } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+
+import {
+  Login,
+  MainNav,
+  MainContainer,
+  ModuleContainer,
+  OverlayContainer,
+  StaleBundleWarning,
+  SessionEventContainer,
+} from './components';
+
+import RootWithIntl from './RootWithIntl';
+import Stripes from './Stripes';
+
+jest.mock('./components/Login', () => () => '<Login>');
+jest.mock('./components/MainNav', () => () => '<MainNav>');
+jest.mock('./components/OverlayContainer', () => () => '<OverlayContainer>');
+jest.mock('./components/ModuleContainer', () => ({ children }) => children);
+jest.mock('./components/MainContainer', () => ({ children }) => children);
+jest.mock('./components/StaleBundleWarning', () => () => '<StaleBundleWarning>');
+jest.mock('./components/SessionEventContainer', () => () => '<SessionEventContainer>');
+
+const defaultHistory = createMemoryHistory();
+
+const Harness = ({
+  Router = DefaultRouter,
+  children,
+  history = defaultHistory,
+}) => {
+  return (
+    <Router history={history}>
+      {children}
+    </Router>
+  );
+};
+
+const store = {
+  getState: () => ({
+    okapi: {
+      token: '123',
+    },
+  }),
+  dispatch: () => {},
+  subscribe: () => {},
+  replaceReducer: () => {},
+};
+
+describe('RootWithIntl', () => {
+  it('renders login without one of (isAuthenticated, token, disableAuth)', async () => {
+    const stripes = new Stripes({ epics: {}, logger: {}, bindings: {}, config: {}, store, discovery: { isFinished: false } });
+    await render(<Harness><RootWithIntl stripes={stripes} history={defaultHistory} isAuthenticated={false} /></Harness>);
+
+    expect(screen.getByText(/<Login>/)).toBeInTheDocument();
+    expect(screen.queryByText(/<MainNav>/)).toBeNull();
+  });
+
+  describe('renders MainNav', () => {
+    it('given isAuthenticated', async () => {
+      const stripes = new Stripes({ epics: {}, logger: {}, bindings: {}, config: {}, store, discovery: { isFinished: false } });
+      await render(<Harness><RootWithIntl stripes={stripes} history={defaultHistory} isAuthenticated /></Harness>);
+
+      expect(screen.queryByText(/<Login>/)).toBeNull();
+      expect(screen.queryByText(/<MainNav>/)).toBeInTheDocument();
+    });
+
+    it('given token', async () => {
+      const stripes = new Stripes({ epics: {}, logger: {}, bindings: {}, config: {}, store, discovery: { isFinished: false } });
+      await render(<Harness><RootWithIntl stripes={stripes} history={defaultHistory} token /></Harness>);
+
+      expect(screen.queryByText(/<Login>/)).toBeNull();
+      expect(screen.queryByText(/<MainNav>/)).toBeInTheDocument();
+    });
+
+    it('given disableAuth', async () => {
+      const stripes = new Stripes({ epics: {}, logger: {}, bindings: {}, config: {}, store, discovery: { isFinished: false } });
+      await render(<Harness><RootWithIntl stripes={stripes} history={defaultHistory} disableAuth /></Harness>);
+
+      expect(screen.queryByText(/<Login>/)).toBeNull();
+      expect(screen.queryByText(/<MainNav>/)).toBeInTheDocument();
+    });
+  });
+
+  describe('renders ModuleContainer', () => {
+    it('if config.okapi is not an object', async () => {
+      const stripes = new Stripes({ epics: {}, logger: {}, bindings: {}, config: {}, store, discovery: { isFinished: true } });
+      await render(<Harness><RootWithIntl stripes={stripes} history={defaultHistory} isAuthenticated /></Harness>);
+
+      expect(screen.queryByText(/<Login>/)).toBeNull();
+      expect(screen.queryByText(/<MainNav>/)).toBeInTheDocument();
+      expect(screen.getByText(/<OverlayContainer>/)).toBeInTheDocument();
+    });
+
+    it('if discovery is finished', async () => {
+      const stripes = new Stripes({ epics: {}, logger: {}, bindings: {}, config: {}, store, okapi: {}, discovery: { isFinished: true } });
+      await render(<Harness><RootWithIntl stripes={stripes} history={defaultHistory} isAuthenticated /></Harness>);
+
+      expect(screen.queryByText(/<Login>/)).toBeNull();
+      expect(screen.queryByText(/<MainNav>/)).toBeInTheDocument();
+      expect(screen.getByText(/<OverlayContainer>/)).toBeInTheDocument();
+    });
+  });
+
+  it('renders StaleBundleWarning', async () => {
+    const stripes = new Stripes({ epics: {}, logger: {}, bindings: {}, config: { staleBundleWarning: {} }, store, okapi: {}, discovery: { isFinished: true } });
+    await render(<Harness><RootWithIntl stripes={stripes} history={defaultHistory} isAuthenticated /></Harness>);
+
+    expect(screen.getByText(/<StaleBundleWarning>/)).toBeInTheDocument();
+  });
+
+  it('renders SessionEventContainer', async () => {
+    const stripes = new Stripes({ epics: {}, logger: {}, bindings: {}, config: { useSecureTokens: true }, store, okapi: {}, discovery: { isFinished: true } });
+    await render(<Harness><RootWithIntl stripes={stripes} history={defaultHistory} isAuthenticated /></Harness>);
+
+    expect(screen.getByText(/<SessionEventContainer>/)).toBeInTheDocument();
+  });
+
+});

src/components/index.js

@@ -31,6 +31,7 @@ export { default as BadRequestScreen } from './BadRequestScreen';
 export { default as NoPermissionScreen } from './NoPermissionScreen';
 export { default as ResetPasswordNotAvailableScreen } from './ResetPasswordNotAvailableScreen';
 export { default as SessionEventContainer } from './SessionEventContainer';
+export { default as StaleBundleWarning } from './StaleBundleWarning';
 
 export * from './ModuleHierarchy';
 export * from './Namespace';

test/bigtest/helpers/setup-application.js

@@ -54,6 +54,9 @@ export default function setupApplication({
         currentPerms: permissions,
         isAuthenticated: true,
       };
+      initialState.discovery = {
+        isFinished: true,
+      };
     } else {
       initialState.okapi = {
         ssoEnabled: true,

test/jest/__mock__/stripesComponents.mock.js

@@ -49,6 +49,7 @@ jest.mock('@folio/stripes-components', () => ({
     <span>{children}</span>
   )),
   Headline: jest.fn(({ children }) => <div>{ children }</div>),
+  HotKeys: jest.fn(({ children }) => <>{ children }</>),
   Icon: jest.fn((props) => (props && props.children ? props.children : <span />)),
   IconButton: jest.fn(({
     buttonProps,