Add loadingComponent prop to LoginCallback component

OKTA-404404
<<<Jenkins Check-In of Tested SHA: c8ca121 for [email protected]>>>
Artifact: okta-react
Files changed count: 7
PR Link: "okta#144"

CHANGELOG.md

@@ -1,3 +1,9 @@
+# 6.1.0
+
+### Features
+
+- [#67](https://github.com/okta/okta-react/pull/67) Adds `loadingComponent` prop to `LoginCallback` component
+
 # 6.0.1
 
 ### Bug Fixes

src/LoginCallback.tsx

@@ -14,10 +14,13 @@ import * as React from 'react';
 import { useOktaAuth, OnAuthResumeFunction } from './OktaContext';
 import OktaError from './OktaError';
 
-const LoginCallback: React.FC<{ 
-  errorComponent?: React.ComponentType<{ error: Error }>,
-  onAuthResume?: OnAuthResumeFunction,
-}> = ({ errorComponent, onAuthResume }) => { 
+interface LoginCallbackProps {
+  errorComponent?: React.ComponentType<{ error: Error }>;
+  onAuthResume?: OnAuthResumeFunction;
+  loadingComponent?: React.ReactElement;
+}
+
+const LoginCallback: React.FC<LoginCallbackProps> = ({ errorComponent, loadingComponent = null, onAuthResume }) => { 
   const { oktaAuth, authState } = useOktaAuth();
   const [callbackError, setCallbackError] = React.useState(null);
 
@@ -43,7 +46,7 @@ const LoginCallback: React.FC<{
     return <ErrorReporter error={displayError}/>;
   }
 
-  return null;
+  return loadingComponent;
 };
 
 export default LoginCallback;

test/e2e/harness/e2e/App.test.js

@@ -15,20 +15,23 @@ import {
   AppPage,
   OktaSignInPage,
   ProtectedPage,
-  SessionTokenSignInPage
+  SessionTokenSignInPage,
+  LoginCallbackPage
 } from './page-objects';
 
 describe('React + Okta App', () => {
   let appPage;
   let oktaLoginPage;
   let protectedPage;
   let sessionTokenSignInPage;
+  let loginCallbackPage;
 
   beforeEach(() => {
     appPage = new AppPage();
     oktaLoginPage = new OktaSignInPage();
     protectedPage = new ProtectedPage();
     sessionTokenSignInPage = new SessionTokenSignInPage();
+    loginCallbackPage = new LoginCallbackPage();
   });
 
   describe('implicit flow', () => {
@@ -95,6 +98,7 @@ describe('React + Okta App', () => {
         password: process.env.PASSWORD
       });
 
+      loginCallbackPage.waitUntilVisible();
       protectedPage.waitUntilVisible('?pkce=1&state=bar#baz');
       expect(protectedPage.getLogoutButton().isPresent()).toBeTruthy();
 
@@ -125,6 +129,7 @@ describe('React + Okta App', () => {
         password: process.env.PASSWORD
       });
 
+      loginCallbackPage.waitUntilVisible();
       appPage.waitUntilVisible();
       expect(protectedPage.getLogoutButton().isPresent()).toBeTruthy();
 

test/e2e/harness/e2e/page-objects.js

@@ -14,3 +14,4 @@ export { AppPage } from './page-objects/app.po';
 export { OktaSignInPage } from './page-objects/okta-signin.po';
 export { ProtectedPage } from './page-objects/protected.po';
 export { SessionTokenSignInPage } from './page-objects/sessionToken-signin.po';
+export { LoginCallbackPage } from './page-objects/login-callback.po';

test/e2e/harness/e2e/page-objects/login-callback.po.js

@@ -0,0 +1,25 @@
+/*!
+ * Copyright (c) 2017-Present, Okta, Inc. and/or its affiliates. All rights reserved.
+ * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
+ *
+ * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *
+ * See the License for the specific language governing permissions and limitations under the License.
+ */
+
+import { by, element } from 'protractor';
+import { Util } from '../util';
+
+export class LoginCallbackPage {
+    waitUntilVisible() {
+      Util.waitElement(this.loadingComponent());
+    }
+
+    loadingComponent() {
+      return element(by.id('login-callback-loading'));
+    }
+
+}

test/e2e/harness/src/App.tsx

@@ -48,11 +48,19 @@ const App: React.FC<{
       >
         <Switch>
           <Route path='/login' component={CustomLogin} />
-          <Route path='/widget-login' render={ (props) => <WidgetLogin {...props} baseUrl={baseUrl} /> }/>
+          <Route path='/widget-login' render={ (props) => 
+            <WidgetLogin {...props} baseUrl={baseUrl} />
+          } />
           <Route path='/sessionToken-login' component={SessionTokenLogin} />
           <SecureRoute exact path='/protected' component={Protected} />
           <Route path='/implicit/callback' component={LoginCallback} />
-          <Route path='/pkce/callback' render={ (props) => <LoginCallback {...props} onAuthResume={ onAuthResume } /> } />
+          <Route path='/pkce/callback' render={ (props) => 
+            <LoginCallback 
+              {...props} 
+              onAuthResume={ onAuthResume } 
+              loadingComponent={ <p id='login-callback-loading'>Loading...</p> }
+            />
+          } />
           <Route path='/' component={Home} />
         </Switch>
       </Security>

test/jest/loginCallback.test.tsx

@@ -97,7 +97,7 @@ describe('<LoginCallback />', () => {
       };
 
       const MyErrorComponent = ({ error }) => { 
-      return (<p>Override: {error.has}</p>);
+        return (<p>Override: {error.has}</p>);
       };
 
       const wrapper = mount(
@@ -175,4 +175,56 @@ describe('<LoginCallback />', () => {
     });
   });
 
+  describe('shows loading', () => {
+    it('does not render loading by default', () => { 
+      const wrapper = mount(
+        <Security {...mockProps}>
+          <LoginCallback />
+        </Security>
+      );
+      expect(wrapper.text()).toBe('');
+    });
+
+    it('custom loading component can be passed to render during loading', () => {
+      const MyLoadingComponent = (<p>loading...</p>);
+
+      const wrapper = mount(
+        <Security {...mockProps}>
+          <LoginCallback loadingComponent={MyLoadingComponent}/>
+        </Security>
+      );
+      expect(wrapper.text()).toBe('loading...');
+    });
+
+    it('does not render loading component on error', () => {
+      authState = {
+        isAuthenticated: true,
+        error: new Error('oh drat!')
+      };
+      const MyLoadingComponent = (<p>loading...</p>);
+
+      const wrapper = mount(
+        <Security {...mockProps}>
+          <LoginCallback loadingComponent={MyLoadingComponent}/>
+        </Security>
+      );
+      expect(wrapper.text()).toBe('Error: oh drat!');
+    });
+
+    it('renders loading component if onAuthResume is passed', async () => { 
+      oktaAuth.isInteractionRequired = jest.fn().mockImplementation( () => true );
+      const resumeFunction = jest.fn();
+      const MyLoadingComponent = (<p>loading...</p>);
+      jest.spyOn(React, 'useEffect').mockImplementation(f => f())
+
+      const wrapper = mount(
+        <Security {...mockProps}>
+          <LoginCallback onAuthResume={resumeFunction} loadingComponent={MyLoadingComponent}/>
+        </Security>
+      );
+      expect(resumeFunction).toHaveBeenCalled();
+      expect(wrapper.text()).toBe('loading...');
+    });
+  });
+
 });