import React, { ReactElement } from 'react';
import { ThemeProvider } from 'styled-components';
import { render, RenderOptions } from '@testing-library/react'; // eslint-disable-line import/no-extraneous-dependencies

import theme from '../theme';
import { fromArray, fromPromiseOfArray } from './UnsafeArray';
import { flow } from '../fp/function';

const renderWithTheme = (ui: ReactElement, options?: RenderOptions) => {
  const renderResult = render(
    <ThemeProvider theme={theme}>{ui}</ThemeProvider>,
    options
  );
  return {
    ...renderResult,
    getAllByText: flow(renderResult.getAllByText, fromArray),
    getAllByDisplayValue: flow(renderResult.getAllByDisplayValue, fromArray),
    findAllByText: flow(renderResult.findAllByText, fromPromiseOfArray),
  };
};

export default renderWithTheme;