# User search component, MockProvider, select - week off Aug/Sept, 2020

I've been off this week, but in the interest of making some more progress with the app, J and I did some work building out sending flow components - a user search component for choosing multiple users to recognition to, and a single select type component where you choose the recognition card you want.

We used two packages, [faker](https://github.com/marak/Faker.js/) and [factory.ts](https://www.npmjs.com/package/factory.ts), to completely mock our GraphQL calls:

import * as Factory from 'factory.ts'
import faker from 'faker'
import { MockedResponse } from '@apollo/react-testing'

import { Query as EcardQuery, SrwEcard_Category, SrwEcard_Ecard } from '../apolloClient/services/ecard/ecard.types'
import { GET_ECARD_CATEGORIES } from '../apolloClient/services/ecard/ecard.queries'

export const SrwEcard_EcardMock = Factory.Sync.makeFactory<SrwEcard_Ecard>({
    __typename: 'SrwEcard_Ecard',
    id: Factory.each((i) => i + 1),
    title: Factory.each(() => faker.random.words()),
    imageUrl: Factory.each(() => faker.image.imageUrl(330, 210, undefined, true, true)),
    characterLimit: 1000,
})

export const SrwEcard_CategoryMock = Factory.Sync.makeFactory<SrwEcard_Category>({
    __typename: 'SrwEcard_Category',
    id: Factory.each((i) => i + 1),
    categoryName: Factory.each(() => faker.random.words()),
    ecards: Factory.each(() => SrwEcard_EcardMock.buildList(faker.random.number({ min: 3, max: 10 }))),
})

export const ecardQueryMock: MockedResponse<EcardQuery> = {
    request: {
        query: GET_ECARD_CATEGORIES,
    },
    result: {
        data: {
            srwEcardCategories: SrwEcard_CategoryMock.buildList(5),
        },
    },
}

The Apollo Client 3 exposes a much better `MockedResponse` type we can use in our mocks. Unfortunately, we are still using Apollo Client 2, so we were able to override the `MockedResponse` type with the better version, whilst still exporting all the other types properly still from that module:

import * as apolloTypes from '@apollo/react-testing'

declare module '@apollo/react-testing' {
    export interface MockedResponse<TData = Record<string, any>> {
        request: GraphQLRequest
        result?: FetchResult<TData> | ResultFunction<FetchResult<TData>>
        error?: Error
        delay?: number
        newData?: ResultFunction<FetchResult>
    }

    // eslint-disable-next-line import/no-default-export
    export default apolloTypes
}

Use `flex-grow: 1` to have containers fill remaining space.

###### tags: `programmingjournal` `2020` `C+` `mocks` `testing` `factory` `flexgrow` `decleration` `override` `select` `search`