/**
 *
 * Tests for {{ name }}
 *
 */

import React from 'react';
import { render {{~#if useRedux}} as tlRender {{~/if}} } from '@testing-library/react';
import { ThemeProvider, lightTheme } from '@strapi/design-system';
{{#if useRedux}}
  import { Provider } from 'react-redux';
  import { createStore, combineReducers } from 'redux';
  import { initialState } from '../reducer';
  import reducers from '../../../reducers';
{{/if}}
{{#if useI18n}}
  import { IntlProvider } from 'react-intl';
{{/if}}
import {{ name }} from '../index';

{{#if useRedux}}
  const rootReducer = combineReducers(reducers);

  const render = (
    ui,
    {
      preloadedState = initialState,
      store = createStore(rootReducer, { '{{ plugin }}_{{ camelCase name }}': preloadedState }),
      ...renderOptions
    } = {},
  ) => {
    // eslint-disable-next-line react/prop-types
    const Wrapper = ({ children }) => (
      <Provider store={store}>{children}</Provider>
    );

    return tlRender(ui, { wrapper: Wrapper, ...renderOptions });
  };

{{/if}}
{{#if useI18n}}
  const messages = {
    '{{ plugin }}.component.name': '{{titleCase name}}',
  };

{{/if}}
describe('<{{ name }} />', () => {
  it('renders and matches the snapshot', () => {
    const {
      container: { firstChild },
    } = render(
      {{#if useI18n}}
        <ThemeProvider theme={lightTheme}>
          <IntlProvider locale="en" messages={messages} defaultLocale="en">
            <{{ name }} />
          </IntlProvider>
        </ThemeProvider>
      {{else}}
        <ThemeProvider theme={lightTheme}>
          <{{ name }} />
        </ThemeProvider>
      {{/if}}
    );

    expect(firstChild).toMatchInlineSnapshot();
  });
});