# Edge case handling - Fri 23rd Oct, 2020

Friday was all about handling various use config edge cases in-app, such as when a user doesn't have the full feed enabled and only blogs.

It was straightforward enough, generally just a matter of hiding certain tabs / buttons for navigation.

I had to add a `MockedProvider` to the testing setup:

import React from 'react'
import { MockedProvider as ApolloMockedProvider } from '@apollo/client/testing'
import { MockedProviderProps } from '@apollo/client/utilities/testing/mocking/MockedProvider'

import { authStatusQuery } from '../../__mocks__/auth.mocks'
import { enabledFeaturesQuery } from '../../__mocks__/enabledFeatures.mocks'

export const MockedProvider: React.FC<MockedProviderProps> = ({ mocks, children, ...props }) => (
    <ApolloMockedProvider mocks={[authStatusQuery, enabledFeaturesQuery, ...(mocks ?? [])]} {...props}>
        <>{children}</>
    </ApolloMockedProvider>
)

const Stack = createStackNavigator()

interface MockedNavigatorProps {
    component: any
    screenName?: string
    params?: any
}
/**
 * Use in test whenever you have use a React Navigation hook in your component
 */
export const MockedNavigator: React.FC<MockedNavigatorProps> = ({
    component: Component,
    screenName = 'MockedScreen',
    params = {},
}) => (
    <MockedProvider>
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name={screenName} initialParams={params}>
                    {(props) => <Component {...props} />}
                </Stack.Screen>
            </Stack.Navigator>
        </NavigationContainer>
    </MockedProvider>
)

VERY useful here to already have the mocks setup for these queries.

###### tags: `programmingjournal` `2020` `C+` `edgecases` `mockedprovider` `mockednavigator`