import mountWithState from 'Utils/Test/mountWithState';
import InvalidConfigurationNotice from './index';

describe('Modules/Creator/Containers/InvalidConfigurationNotice', () => {
    it('is not displayed if its visibility is set to false', () => {
        const state = {
            configurator: {
                validation: {
                    validationErrors: [],
                    errors: null,
                },
                configuration: {
                    optionclassifications: [],
                },
            },
            ui: {
                visibilityMap: {
                    validationResult: false,
                },
            },
        };

        const { wrapper } = mountWithState(InvalidConfigurationNotice, state);

        expect(wrapper.html()).toBeFalsy();
    });

    it('renders component titles and their error messages', () => {
        const state = {
            configurator: {
                configuration: {
                    optionclassifications: [
                        { identifier: 'id1', title: 'title1' },
                        { identifier: 'id2', title: 'title2' },
                    ],
                },
                validation: {
                    validationErrors: {
                        id1: { errors: [{ message: 'I am a message' }] },
                        id2: { errors: [{ message: 'Me, too' }] },
                    },
                    errors: null,
                },
            },
            ui: {
                visibilityMap: {
                    validationResult: true,
                },
            },
        };

        const { wrapper } = mountWithState(InvalidConfigurationNotice, state);

        const text = wrapper.text();
        expect(text.includes('title1')).toBeTruthy();
        expect(text.includes('title2')).toBeTruthy();
        expect(text.includes('I am a message')).toBeTruthy();
        expect(text.includes('Me, too')).toBeTruthy();
    });

    it('prefers rendering errors from validationErrors over errors', () => {
        const state = {
            configurator: {
                configuration: {
                    optionclassifications: [{ identifier: 'id1', title: 'title1' }],
                },
                validation: {
                    validationErrors: {
                        id1: { errors: [{ message: 'I am a message' }] },
                    },
                    errors: { id2: { errors: [{ message: 'Me, too' }] } },
                },
            },
            ui: {
                visibilityMap: {
                    validationResult: true,
                },
            },
        };

        const { wrapper } = mountWithState(InvalidConfigurationNotice, state);

        const text = wrapper.text();
        expect(text.includes('I am a message')).toBeTruthy();
        expect(text.includes('Me, too')).toBeFalsy();
    });

    it('renders errors from errors array if there are no validationErrors', () => {
        const state = {
            configurator: {
                configuration: {
                    optionclassifications: [{ identifier: 'id1', title: 'title1' }],
                },
                validation: {
                    validationErrors: null,
                    errors: { id1: { errors: [{ message: 'I am a message' }] } },
                },
            },
            ui: {
                visibilityMap: {
                    validationResult: true,
                },
            },
        };

        const { wrapper } = mountWithState(InvalidConfigurationNotice, state);

        const text = wrapper.text();
        expect(text.includes('I am a message')).toBeTruthy();
        expect(text.includes('Me, too')).toBeFalsy();
    });

    it('renders no errors if both errors and validationErrors are emptz', () => {
        const state = {
            configurator: {
                configuration: {
                    optionclassifications: [{ identifier: 'id1', title: 'title1' }],
                },
                validation: {
                    validationErrors: null,
                    errors: null,
                },
            },
            ui: {
                visibilityMap: {
                    validationResult: true,
                },
            },
        };

        const { wrapper } = mountWithState(InvalidConfigurationNotice, state);

        const text = wrapper.text();
        expect(text.includes('title1')).toBeFalsy();
    });
});
