feat: review updates

bcgov · Apr 16, 2021 · f3cc819 · f3cc819
1 parent 610608a
commit f3cc819
Show file tree

Hide file tree

Showing 6 changed files with 321 additions and 39 deletions.
diff --git a/app/components/Layout/Header.tsx b/app/components/Layout/Header.tsx
@@ -6,11 +6,17 @@ import {faBars, faUser} from '@fortawesome/free-solid-svg-icons';
 
 const DESKTOP_BREAKPOINT_QUERY = '(min-width: 992px)';
 
-const HeaderLayout = ({
+interface Props {
+  isLoggedIn?: boolean;
+  isRegistered?: boolean;
+  fixed?: boolean;
+  userProfileDropdown?: React.ReactNode;
+}
+const HeaderLayout: React.FunctionComponent<Props> = ({
   isLoggedIn = false,
   isRegistered = false,
   fixed = false,
-  userProfileDropdown = null,
+  userProfileDropdown,
   children
 }) => {
   let mediaMatch;
@@ -87,7 +93,7 @@ const HeaderLayout = ({
               </li>
             ) : null}
             {isLoggedIn ? (
-              <>{isRegistered && <>{userProfileDropdown}</>}</>
+              isRegistered && userProfileDropdown
             ) : (
               <>
                 <li>

diff --git a/app/layouts/default-layout.tsx b/app/layouts/default-layout.tsx
@@ -4,7 +4,7 @@ import {graphql, createFragmentContainer} from 'react-relay';
 import {defaultLayout_session} from '__generated__/defaultLayout_session.graphql';
 import getConfig from 'next/config';
 import Header from 'components/Layout/Header';
-import UserProfileDropdownContainer from 'containers/User/UserProfileDropdown';
+import UserProfileDropdown from 'containers/User/UserProfileDropdown';
 import Footer from 'components/Layout/Footer';
 import Subheader from 'components/Layout/Subheader';
 import Help from 'components/helpers/Help';
@@ -51,9 +51,7 @@ const DefaultLayout: React.FunctionComponent<Props> = ({
         isLoggedIn={Boolean(session)}
         isRegistered={Boolean(session?.ciipUserBySub)}
         userProfileDropdown={
-          <UserProfileDropdownContainer
-            user={session ? session.ciipUserBySub : null}
-          />
+          <UserProfileDropdown user={session ? session.ciipUserBySub : null} />
         }
       >
         {runtimeConfig.SITEWIDE_NOTICE && (
@@ -201,7 +199,6 @@ export default createFragmentContainer(DefaultLayout, {
   session: graphql`
     fragment defaultLayout_session on JwtToken {
       ciipUserBySub {
-        __typename
         ...UserProfileDropdown_user
       }
       userGroups

diff --git a/app/tests/unit/containers/User/UserProfileDropdown.test.tsx b/app/tests/unit/containers/User/UserProfileDropdown.test.tsx
@@ -1,19 +1,27 @@
 import React from 'react';
 import {shallow} from 'enzyme';
 import {UserProfileDropdownComponent} from 'containers/User/UserProfileDropdown';
+import {UserProfileDropdown_user} from '__generated__/UserProfileDropdown_user.graphql';
 
-// https://github.com/facebook/relay/issues/2394#issuecomment-379590645
-const mockRefType: any = null;
 const user = {
-  firstName: 'Hamza',
-  lastName: 'Javed',
-  emailAddress: 'hamza@button.is',
-  ' $refType': mockRefType
+  firstName: 'Test',
+  lastName: 'Tester',
+  emailAddress: 'really-long-email-to-see-wrapping@button.is',
+  ' $refType': 'UserProfileDropdown_user'
 };
 let render;
 describe('UserProfileDropdown', () => {
-  it('matches snapshot', () => {
-    render = shallow(<UserProfileDropdownComponent user={user} />);
+  it('matches mobile snapshot', () => {
+    render = shallow(
+      <UserProfileDropdownComponent user={user as UserProfileDropdown_user} />
+    );
+    expect(render).toMatchSnapshot();
+  });
+
+  it('matches desktop snapshot', () => {
+    render = shallow(
+      <UserProfileDropdownComponent user={user as UserProfileDropdown_user} />
+    );
     expect(render).toMatchSnapshot();
   });
 });