Test de HOC

gistfile1.txt

import { shallowWithStore } from 'enzyme-redux';
import React, { PureComponent, ReactNode } from 'react';
import { MockedProvider } from 'react-apollo/test-utils';
import { View } from 'react-native';
import renderer from 'react-test-renderer';
import { createMockStore } from 'redux-test-utils';
import wait from 'waait';
 
import getPaymentStatus from '../../../queries/getPaymentStatus.gql';
 
import withPaymentStatus, { IProps } from '../withPaymentStatus';
 
jest.mock('../../../theme', () => ({
  images: {
    cutlery: 'mockedCutleryImage',
    thumb: 'mockedThumbImage',
  },
}));
 
const initialState = {
  authentication: {
    token: 'mySecretToken',
  },
};
const store = createMockStore(initialState);
 
const mocks = [
  {
    request: {
      query: getPaymentStatus,
      variables: {
        idRefill: 'idRefillForLoading',
        token: initialState.authentication.token,
      },
    },
  },
  {
    request: {
      query: getPaymentStatus,
      variables: {
        idRefill: 'idRefillForSuccess',
        token: initialState.authentication.token,
      },
    },
    result: {
      data: {
        mercanetV2Status: {
          amount: {
            amount: 324,
            currency: 'EUR',
          },
          date: 'Thu Oct 25 2018 00:57:54 GMT+0200',
          refillSuccess: true,
          success: true,
          transactionSuccess: true,
        },
      },
    },
  },
  {
    request: {
      query: getPaymentStatus,
      variables: {
        idRefill: 'idRefillForFailure',
        token: initialState.authentication.token,
      },
    },
    result: {
      data: {
        mercanetV2Status: {
          amount: {
            amount: 666,
            currency: 'EUR',
          },
          date: 'Thu Oct 25 2018 00:57:54 GMT+0200',
          refillSuccess: false,
          success: false,
          transactionSuccess: false,
        },
      },
    },
  },
];
 
type IDummyComponentProps = { navigation: { getParam: jest.Mock }; someProp: string } & IProps;
class DummyComponent extends PureComponent<IDummyComponentProps> {
  public render(): ReactNode {
    return <View />;
  }
}
 
describe('[HOC] withPaymentStatus', () => {
  let mockedNavigation: { getParam: jest.Mock };
 
  afterEach(() => {
    (mockedNavigation.getParam as jest.Mock).mockReset();
  });
 
  it('should decorate the given component with a isLoading prop while loading', async () => {
    mockedNavigation = {
      getParam: jest.fn(() => 'idRefillForLoading'),
    };
 
    const ComponentWithPaymentStatus = withPaymentStatus(DummyComponent);
 
    const component = renderer.create(
      <MockedProvider mocks={mocks} removeTypename>
        {shallowWithStore(
          <ComponentWithPaymentStatus someProp="anyProp" navigation={mockedNavigation} />,
          store
        )}
      </MockedProvider>
    );
 
    expect(component.root.findByType(DummyComponent).props).toMatchObject({
      isLoading: true,
      someProp: 'anyProp',
    });
  });
 
  it('should decorate the given component with a title & image props when query returns a transaction success', async () => {
    mockedNavigation = {
      getParam: jest.fn(() => 'idRefillForSuccess'),
    };
 
    const ComponentWithPaymentStatus = withPaymentStatus(DummyComponent);
 
    const component = renderer.create(
      <MockedProvider mocks={mocks} removeTypename>
        {shallowWithStore(
          <ComponentWithPaymentStatus someProp="anyProp" navigation={mockedNavigation} />,
          store
        )}
      </MockedProvider>
    );
 
    await wait(0); // wait for response
 
    expect(component.root.findByType(DummyComponent).props).toMatchObject({
      image: 'mockedThumbImage',
      isLoading: false,
      isSuccess: true,
      someProp: 'anyProp',
      title: 'dashboard.balance.topUp.callbackModal.successTitle',
    });
  });
 
  it('should decorate the given component with a title & image props when query returns a transaction failure', async () => {
    mockedNavigation = {
      getParam: jest.fn(() => 'idRefillForFailure'),
    };
 
    const ComponentWithPaymentStatus = withPaymentStatus(DummyComponent);
 
    const component = renderer.create(
      <MockedProvider mocks={mocks} removeTypename>
        {shallowWithStore(
          <ComponentWithPaymentStatus someProp="anyProp" navigation={mockedNavigation} />,
          store
        )}
      </MockedProvider>
    );
 
    await wait(0); // wait for response
 
    expect(component.root.findByType(DummyComponent).props).toMatchObject({
      image: 'mockedCutleryImage',
      isLoading: false,
      isSuccess: false,
      someProp: 'anyProp',
      title: 'dashboard.balance.topUp.callbackModal.failTitle',
    });
  });
});