diff --git a/src/__tests__/pages/index.moduleLoad.test.js b/src/__tests__/pages/index.moduleLoad.test.js deleted file mode 100644 index c24b09dc..00000000 --- a/src/__tests__/pages/index.moduleLoad.test.js +++ /dev/null @@ -1,253 +0,0 @@ -// Tests for module loading, which require resetting modules -// between tests. - -import React from 'react' -import { shallow } from 'enzyme' -import getMockAuthUser from 'src/utils/testHelpers/getMockAuthUser' -import getMockNextJSContext from 'src/utils/testHelpers/getMockNextJSContext' - -jest.mock('tab-ads') -jest.mock('next-firebase-auth') -jest.mock('@material-ui/icons/Settings') -jest.mock('src/components/Link') -jest.mock('src/utils/navigation') -jest.mock('src/utils/adHelpers') -jest.mock('src/utils/ssr') -jest.mock('src/components/Logo') -jest.mock('src/components/MoneyRaisedContainer') -jest.mock('src/components/SearchInput') -jest.mock('src/utils/featureFlags') -jest.mock('src/components/Achievement', () => () => ( -
-)) -jest.mock('src/utils/pageWrappers/withRelay') -jest.mock('src/utils/hooks/useData') -jest.mock('src/components/FullPageLoader') -jest.mock('src/utils/pageWrappers/withDataSSR') -jest.mock('src/utils/pageWrappers/withSentry') -jest.mock('src/utils/pageWrappers/logUncaughtErrors') - -const getMockProps = () => ({ - data: { - app: {}, - user: { - tabs: 221, - vcCurrent: 78, - cause: { - onboarding: { - steps: [], - }, - }, - }, - }, -}) - -const setUpAds = () => { - const { getAdUnits } = require('src/utils/adHelpers') - const { getAvailableAdUnits } = require('tab-ads') - getAdUnits.mockReturnValue(getAvailableAdUnits()) -} - -beforeEach(() => { - setUpAds() - - // Default to the expected behavior of getServerSideProps functions - // composing each other's return props. - const returnComposedProps = async (ctx, getServerSidePropsFunc) => { - let composedProps = {} - if (getServerSidePropsFunc) { - composedProps = await getServerSidePropsFunc(ctx) - } - return { - ...composedProps, - props: { - ...composedProps.props, - }, - } - } - const logUncaughtErrors = - require('src/utils/pageWrappers/logUncaughtErrors').default - logUncaughtErrors.mockImplementation( - (getServerSidePropsFunc) => async (ctx) => - returnComposedProps(ctx, getServerSidePropsFunc) - ) - const { withAuthUserTokenSSR } = require('next-firebase-auth') - withAuthUserTokenSSR.mockImplementation( - () => (getServerSidePropsFunc) => async (ctx) => - returnComposedProps(ctx, getServerSidePropsFunc) - ) - const { withSentrySSR } = require('src/utils/pageWrappers/withSentry') - withSentrySSR.mockImplementation( - (getServerSidePropsFunc) => async (ctx) => - returnComposedProps(ctx, getServerSidePropsFunc) - ) - const withDataSSR = require('src/utils/pageWrappers/withDataSSR').default - withDataSSR.mockImplementation( - // eslint-disable-next-line no-unused-vars - (_relayQuery) => (getServerSidePropsFunc) => async (ctx) => - returnComposedProps(ctx, getServerSidePropsFunc) - ) -}) - -afterEach(() => { - jest.clearAllMocks() - jest.resetModules() -}) - -describe('index.js: HOC', () => { - it('calls `withAuthUser` and shows a loader then redirects if the user is unauthed', async () => { - expect.assertions(1) - const IndexPage = require('src/pages/index').default - const { withAuthUser, AuthAction } = require('next-firebase-auth') - const FullPageLoader = require('src/components/FullPageLoader').default - const mockProps = getMockProps() - shallow() - expect(withAuthUser).toHaveBeenCalledWith({ - whenUnauthedBeforeInit: AuthAction.SHOW_LOADER, - LoaderComponent: FullPageLoader, - whenUnauthedAfterInit: AuthAction.REDIRECT_TO_LOGIN, - }) - }) - - it('calls `withRelay`', async () => { - expect.assertions(1) - const IndexPage = require('src/pages/index').default - const withRelay = require('src/utils/pageWrappers/withRelay').default - const mockProps = getMockProps() - shallow() - expect(withRelay).toHaveBeenCalled() - }) -}) - -describe('index.js: getServerSideProps', () => { - it('calls `withAuthUserTokenSSR` shows a loader when unauthed', async () => { - expect.assertions(1) - const { getServerSideProps } = require('src/pages/index') - const { withAuthUserTokenSSR, AuthAction } = require('next-firebase-auth') - const FullPageLoader = require('src/components/FullPageLoader').default - await getServerSideProps() - expect(withAuthUserTokenSSR).toHaveBeenCalledWith({ - whenUnauthed: AuthAction.SHOW_LOADER, - LoaderComponent: FullPageLoader, - }) - }) - - it('calls `withDataSSR` with a function', async () => { - expect.assertions(1) - const { getServerSideProps } = require('src/pages/index') - const withDataSSR = require('src/utils/pageWrappers/withDataSSR').default - await getServerSideProps() - expect(withDataSSR).toHaveBeenCalledWith(expect.any(Function)) - }) - - it('returns query info from the "getRelayQuery" passed to `withDataSSR` when we call it with an AuthUser', async () => { - expect.assertions(1) - const { getServerSideProps } = require('src/pages/index') - const withDataSSR = require('src/utils/pageWrappers/withDataSSR').default - getServerSideProps() - const getRelayQueryFunc = withDataSSR.mock.calls[0][0] - const response = await getRelayQueryFunc({ AuthUser: getMockAuthUser() }) - expect(response).toEqual({ - query: expect.any(Object), - variables: { - userId: 'mock-user-id', - charityId: '6ce5ad8e-7dd4-4de5-ba4f-13868e7d212z', - }, - }) - }) - - it('returns an empty object from the "getRelayQuery" passed to `withDataSSR` when we call it with an *unauthed* AuthUser', async () => { - expect.assertions(1) - const { getServerSideProps } = require('src/pages/index') - const withDataSSR = require('src/utils/pageWrappers/withDataSSR').default - getServerSideProps() - const getRelayQueryFunc = withDataSSR.mock.calls[0][0] - const response = await getRelayQueryFunc({ - AuthUser: { ...getMockAuthUser(), id: null, email: null }, - }) - expect(response).toEqual({}) - }) - - it('returns an undefined "userAgent" prop value when the User-Agent header is not defined', async () => { - expect.assertions(1) - const { getServerSideProps } = require('src/pages/index') - const ctx = getMockNextJSContext() - ctx.req.headers['user-agent'] = undefined - const response = await getServerSideProps(ctx) - expect(response).toEqual({ - props: { - userAgent: undefined, - }, - }) - }) - - it('returns a set "userAgent" prop value when the User-Agent header is defined', async () => { - expect.assertions(1) - const { getServerSideProps } = require('src/pages/index') - const ctx = getMockNextJSContext() - const mockUserAgent = - 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:104.0) Gecko/20100101 Firefox/104.0' - ctx.req.headers['user-agent'] = mockUserAgent - const response = await getServerSideProps(ctx) - expect(response).toEqual({ - props: { - userAgent: mockUserAgent, - }, - }) - }) -}) - -describe('index.js: ads', () => { - it('calls `fetchAds` on the client side', async () => { - expect.assertions(1) - const { isClientSide } = require('src/utils/ssr') - isClientSide.mockReturnValue(true) - const { fetchAds } = require('tab-ads') - const IndexPage = require('src/pages/index').default - const mockProps = getMockProps() - shallow() - expect(fetchAds).toHaveBeenCalled() - }) - - it('sets the "v4=true" GAM key during fetchAds', async () => { - expect.assertions(1) - const { isClientSide } = require('src/utils/ssr') - isClientSide.mockReturnValue(true) - const { isGAMDevEnvironment } = require('src/utils/adHelpers') - isGAMDevEnvironment.mockReturnValue(false) - const { fetchAds } = require('tab-ads') - const IndexPage = require('src/pages/index').default - const mockProps = getMockProps() - shallow() - const config = fetchAds.mock.calls[0][0] - expect(config.pageLevelKeyValues.v4).toEqual('true') // should be a string - }) - - it('does not set the "dev" GAM key during fetchAds by default', async () => { - expect.assertions(1) - const { isClientSide } = require('src/utils/ssr') - isClientSide.mockReturnValue(true) - const { isGAMDevEnvironment } = require('src/utils/adHelpers') - isGAMDevEnvironment.mockReturnValue(false) - const { fetchAds } = require('tab-ads') - const IndexPage = require('src/pages/index').default - const mockProps = getMockProps() - shallow() - const config = fetchAds.mock.calls[0][0] - expect(config.pageLevelKeyValues.dev).toBeUndefined() - }) - - it('sets the "dev=true" GAM key during fetchAds when in a dev environment', async () => { - expect.assertions(1) - const { isClientSide } = require('src/utils/ssr') - isClientSide.mockReturnValue(true) - const { isGAMDevEnvironment } = require('src/utils/adHelpers') - isGAMDevEnvironment.mockReturnValue(true) - const { fetchAds } = require('tab-ads') - const IndexPage = require('src/pages/index').default - const mockProps = getMockProps() - shallow() - const config = fetchAds.mock.calls[0][0] - expect(config.pageLevelKeyValues.dev).toEqual('true') // should be a string - }) -}) diff --git a/src/pages/index.js b/src/pages/index.js index 5f76695c..810c01ba 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -6,7 +6,7 @@ import { isNil } from 'lodash/lang' import clsx from 'clsx' import dayjs from 'dayjs' import { graphql } from 'react-relay' -import { AdComponent, fetchAds } from 'tab-ads' +import { AdComponent } from 'tab-ads' import { v4 as uuid } from 'uuid' import { get } from 'lodash/object' import { @@ -17,6 +17,7 @@ import { import moment from 'moment' import { useGrowthBook } from '@growthbook/growthbook-react' import gtag from 'ga-gtag' +import { goTo } from 'src/utils/navigation' // custom components import Achievement from 'src/components/Achievement' @@ -53,14 +54,7 @@ import LogTabMutation from 'src/utils/mutations/LogTabMutation' import UpdateImpactMutation from 'src/utils/mutations/UpdateImpactMutation' import LogUserRevenueMutation from 'src/utils/mutations/LogUserRevenueMutation' import SetHasViewedIntroFlowMutation from 'src/utils/mutations/SetHasViewedIntroFlowMutation' -import { getCurrentURL, goTo } from 'src/utils/navigation' -import { - getAdUnits, - areAdsEnabled, - showMockAds, - isGAMDevEnvironment, - incrementTabsOpenedToday, -} from 'src/utils/adHelpers' +import { getAdUnits, incrementTabsOpenedToday } from 'src/utils/adHelpers' import { isClientSide } from 'src/utils/ssr' import { aboutURL, accountURL, achievementsURL } from 'src/utils/urls' import { @@ -478,6 +472,19 @@ const Index = ({ data: fallbackData, userAgent }) => { const showAchievements = showMockAchievements() const enableBackgroundImages = showBackgroundImages() + // No scolling on this home page. + useEffect(() => { + // Add the style when the component mounts + // eslint-disable-next-line no-undef + document.body.style.overflow = 'hidden' + + // Revert back to the initial style when the component unmounts + return () => { + // eslint-disable-next-line no-undef + document.body.style.overflow = '' + } + }, []) + // Determine which ad units we'll show only once, on mount, // because the ads have already been fetched and won't change. const [adUnits, setAdUnits] = useState([]) diff --git a/yarn.lock b/yarn.lock index 068fb214..4380961f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -15315,10 +15315,10 @@ synchronous-promise@^2.0.15: resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.16.tgz#669b75e86b4295fdcc1bb0498de9ac1af6fd51a9" integrity sha512-qImOD23aDfnIDNqlG1NOehdB9IYsn1V9oByPjKY1nakv2MQYCEMyX033/q+aEtYCpmYK1cv2+NTmlH+ra6GA5A== -tab-ads@^1.1.23: - version "1.1.23" - resolved "https://registry.yarnpkg.com/tab-ads/-/tab-ads-1.1.23.tgz#aa02b7ce727d42ef0310cbb56b56e1b982090cc1" - integrity sha512-hhWhLGoUiuZDokqMG37yDzgfUMZUuDh9K/AlU2yLSBWL/1ZIif5jqCISHp3P9NG6u8TGS1L/Lt/pBCF6oav3EA== +tab-ads@^1.1.24: + version "1.1.24" + resolved "https://registry.yarnpkg.com/tab-ads/-/tab-ads-1.1.24.tgz#11ed0dc5ea991f8239a1f2040f01eada44937998" + integrity sha512-xQqLIlGfQ6T7BxQj730L2arM+dQqUHYqtm52z9M0bykeo4C5hwkqXtu5cLYSp2ff4rdHw+tj7w6z/gDJUjM92w== dependencies: lodash "^4.17.21"