import React from 'react';
import { mount } from 'enzyme';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import OptionsList from './index';
import DefaultThemeProvider from '../../../../Screens/Configurator/ThemeProvider';

const reducer = (state = {}, action) => {
    return { ...action, ...state };
};
const store = createStore(reducer, {
    i18n: {
        locale: 'en-GB',
    },
});

jest.mock('Shared/Components/CustomDialog', () => {
    return {
        __esModule: true,
        // eslint-disable-next-line react/prop-types,react/display-name
        default: ({ children }) => {
            return <div>{children}</div>;
        },
    };
});

describe('OptionList', () => {
    it('rendered component contains the custom-css-options class', () => {
        const props = {
            optionclassification: {
                identifier: 'hood',
            },
            show: true,
        };
        const wrapper = mount(
            <Provider store={store}>
                <DefaultThemeProvider>
                    <OptionsList {...props} />
                </DefaultThemeProvider>
            </Provider>
        );
        expect(wrapper.find('.custom-css-options')).toHaveLength(1);
    });
});
