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,95 @@
+/* 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 from './components/Login';
+import MainNav from './components/MainNav';
+import MainContainer from './components/MainContainer';
+import ModuleContainer from './components/ModuleContainer';
+import RootWithIntl from './RootWithIntl';
+import Stripes from './Stripes';
+
+jest.mock('./components/Login', () => () => '<Login>');
+jest.mock('./components/MainNav', () => () => '<MainNav>');
+jest.mock('./components/ModuleContainer', () => () => '<ModuleContainer>');
+jest.mock('./components/MainContainer', () => ({ children }) => children);
+
+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.getByText(/<ModuleContainer>/)).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.getByText(/<ModuleContainer>/)).toBeInTheDocument();
+    });
+  });
+});

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,