refactor: Improve createContext setup

BREAKING CHANGE: Typescript users might not expect the Context to be 'null'. Now you have to check it.
bjerkio · May 15, 2020 · 6b715f5 · 6b715f5
1 parent 893eeb9
commit 6b715f5
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 44 deletions.
diff --git a/src/AuthContext.tsx b/src/AuthContext.tsx
@@ -7,10 +7,7 @@ import {
   AuthProviderSignOutProps,
 } from './AuthContextInterface';
 
-export const AuthContext = React.createContext<AuthContextProps>({
-  signIn: /* istanbul ignore next */ () => {},
-  signOut: /* istanbul ignore next */ () => {},
-});
+export const AuthContext = React.createContext<AuthContextProps|null>(null);
 
 /**
  * @private

diff --git a/src/__tests__/AuthContext.test.tsx b/src/__tests__/AuthContext.test.tsx
@@ -32,7 +32,7 @@ describe('AuthContext', () => {
         <AuthProvider userManager={u} autoSignIn={false}>
           <AuthContext.Consumer>
             {(value) => {
-              value.signIn();
+              value?.signIn();
               return <p>Bjerk</p>;
             }}
           </AuthContext.Consumer>
@@ -74,7 +74,7 @@ describe('AuthContext', () => {
         <AuthProvider userManager={userManager}>
           <AuthContext.Consumer>
             {(value) =>
-              value.userData && (
+              value?.userData && (
                 <span>Received: {value.userData.access_token}</span>
               )
             }
@@ -126,7 +126,7 @@ describe('AuthContext', () => {
       >
         <AuthContext.Consumer>
           {(value) => {
-            value.signOut();
+            value?.signOut();
             return <p>Bjerk</p>;
           }}
         </AuthContext.Consumer>
@@ -151,9 +151,7 @@ describe('AuthContext', () => {
       >
         <AuthContext.Consumer>
           {(value) => {
-            value.signOut({
-              signoutRedirect: true
-            });
+            value?.signOutRedirect();
             return <p>Bjerk</p>;
           }}
         </AuthContext.Consumer>
@@ -162,37 +160,35 @@ describe('AuthContext', () => {
     await waitFor(() => expect(onSignOut).toHaveBeenCalled());
     await waitFor(() => expect(userManager.signoutRedirect).toHaveBeenCalled());
   });
-    it('should end session and logout the user when signoutRedirect is an object', async () => {
-      const userManager = {
-        getUser: async () => ({
-          access_token: 'token',
-        }),
-        signoutRedirect: jest.fn(),
-      } as any;
-      const onSignOut = jest.fn();
-      render(
-        <AuthProvider
-          onSignOut={onSignOut}
-          userManager={userManager}
-          location={location}
-        >
-          <AuthContext.Consumer>
-            {(value) => {
-              value.signOut({
-                signoutRedirect: {
-                  state: 'thebranches'
-                },
-              });
-              return <p>Bjerk</p>;
-            }}
-          </AuthContext.Consumer>
-        </AuthProvider>,
-      );
-      await waitFor(() => expect(onSignOut).toHaveBeenCalled());
-      await waitFor(() =>
-        expect(userManager.signoutRedirect).toHaveBeenCalledWith({
-          state: 'thebranches'
-        }),
-      );
-    });
+  it('should end session and logout the user when signoutRedirect is an object', async () => {
+    const userManager = {
+      getUser: async () => ({
+        access_token: 'token',
+      }),
+      signoutRedirect: jest.fn(),
+    } as any;
+    const onSignOut = jest.fn();
+    render(
+      <AuthProvider
+        onSignOut={onSignOut}
+        userManager={userManager}
+        location={location}
+      >
+        <AuthContext.Consumer>
+          {(value) => {
+            value?.signOutRedirect({
+              state: 'thebranches',
+            });
+            return <p>Bjerk</p>;
+          }}
+        </AuthContext.Consumer>
+      </AuthProvider>,
+    );
+    await waitFor(() => expect(onSignOut).toHaveBeenCalled());
+    await waitFor(() =>
+      expect(userManager.signoutRedirect).toHaveBeenCalledWith({
+        state: 'thebranches',
+      }),
+    );
+  });
 });
diff --git a/src/useAuth.ts b/src/useAuth.ts
@@ -4,5 +4,5 @@ import { AuthContextProps } from './AuthContextInterface';
 import { AuthContext } from './AuthContext';
 
 export const useAuth = () => {
-  return useContext<AuthContextProps>(AuthContext);
+  return useContext<AuthContextProps|null>(AuthContext);
 };