TFAC-354 Adding MoneyRaised to Auth

gladly-team · Sep 1, 2021 · a1da09a · a1da09a
1 parent aa3730d
commit a1da09a
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 2 deletions.
diff --git a/src/__tests__/pages/auth.test.js b/src/__tests__/pages/auth.test.js
@@ -3,6 +3,8 @@ import { shallow } from 'enzyme'
 import Typography from '@material-ui/core/Typography'
 import Logo from 'src/components/Logo'
 import FirebaseAuth from 'src/components/FirebaseAuth'
+import MoneyRaisedContainer from 'src/components/MoneyRaisedContainer'
+import useData from 'src/utils/hooks/useData'
 
 jest.mock('src/utils/pageWrappers/withRelay')
 jest.mock('src/components/FirebaseAuth', () => () => (
@@ -11,8 +13,12 @@ jest.mock('src/components/FirebaseAuth', () => () => (
 jest.mock('src/components/FullPageLoader', () => () => (
   <div data-test-id="full-page-loader-mock" />
 ))
+jest.mock('src/components/FullPageLoader', () => () => (
+  <div data-test-id="full-page-loader-mock" />
+))
 jest.mock('src/components/Logo')
 jest.mock('src/utils/pageWrappers/withSentry')
+jest.mock('src/utils/hooks/useData')
 
 afterEach(() => {
   jest.clearAllMocks()
@@ -63,4 +69,30 @@ describe('auth.js', () => {
     const wrapper = shallow(<AuthPage {...mockProps} />)
     expect(wrapper.find(FirebaseAuth).exists()).toBe(true)
   })
+
+  it('includes the MoneyRaisedContainer component', async () => {
+    expect.assertions(1)
+    const AuthPage = require('src/pages/auth.js').default
+    const mockProps = getMockProps()
+    const wrapper = shallow(<AuthPage {...mockProps} />)
+    expect(wrapper.find(MoneyRaisedContainer).exists()).toBe(true)
+  })
+
+  it('passes the expected getRelayQuery function to `useData`', async () => {
+    expect.assertions(1)
+    const IndexPage = require('src/pages/index').default
+    const mockProps = {
+      ...getMockProps(),
+      data: { ...getMockProps().data, some: 'stuff' },
+    }
+    shallow(<IndexPage {...mockProps} />)
+    const useDataArg = useData.mock.calls[0][0]
+    const queryInfo = await useDataArg.getRelayQuery({
+      AuthUser: getMockAuthUser(),
+    })
+    expect(queryInfo).toMatchObject({
+      query: expect.any(Object),
+      variables: expect.any(Object),
+    })
+  })
 })
diff --git a/src/pages/auth.js b/src/pages/auth.js
@@ -8,6 +8,8 @@ import grey from '@material-ui/core/colors/grey'
 import Typography from '@material-ui/core/Typography'
 import FirebaseAuth from 'src/components/FirebaseAuth'
 import Logo from 'src/components/Logo'
+import useData from 'src/utils/hooks/useData'
+import MoneyRaisedContainer from 'src/components/MoneyRaisedContainer'
 
 const useStyles = makeStyles((theme) => ({
   container: {
@@ -36,13 +38,38 @@ const useStyles = makeStyles((theme) => ({
     fontWeight: 'bold',
   },
   quoteAttribution: {},
+  topContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    alignContent: 'flex-start',
+  },
 }))
 
-const Auth = () => {
+const getRelayQuery = () => {
+  return {
+    query: graphql`
+      query authQuery() {
+        app {
+          ...MoneyRaisedContainer_app
+        }
+      }
+    `,
+  }
+}
+
+const Auth = ({ data: initialData }) => {
   const classes = useStyles()
+  const { data } = useData({ getRelayQuery, initialData })
+  const { app } = data
   return (
     <div className={classes.container}>
-      <Logo includeText className={classes.logo} />
+      <div className={classes.topContainer}>
+        <Logo includeText className={classes.logo} />
+        <Typography variant="h5">
+          <MoneyRaisedContainer app={app} />
+        </Typography>
+      </div>
       <div className={classes.loginContainer}>
         <FirebaseAuth />
       </div>