/**
 * @jest-environment jsdom
 */
import React from 'react';
import renderer from 'react-test-renderer';
import { AppRouteSections } from '../../../reducers/RouteReducer';
import MainSection from '../MainSection';

describe('MainSection Component - ', () => {
    it('Renders correctly with all params - Title, description (with descriptionClassName), children renders', () => {
        const item = renderer.create(<MainSection
            section={AppRouteSections.PRODUCT_SELECTOR}
            activeSection={AppRouteSections.OPEN_CASE}
            title="Product Selector"
            description="Select a product to troubleshoot"
            isLoading={false}
            descriptionClassName="test-desc-class-name" >
                <span>Product Selector Here</span>
            </ MainSection>).toJSON();
        expect(item).toMatchSnapshot();
    });
    it('Shows spinner when isLoading is true', () => {
        const item = renderer.create(<MainSection
            section={AppRouteSections.PRODUCT_SELECTOR}
            activeSection={AppRouteSections.OPEN_CASE}
            title="Product Selector"
            description="Select a product to troubleshoot"
            isLoading={true}
            descriptionClassName="test-desc-class-name" >
                <span>Product Selector Here</span>
            </ MainSection>).toJSON();
        expect(item).toMatchSnapshot();
    });
    it('Should render without isLoading (should render children)', () => {
        const item = renderer.create(<MainSection
            section={AppRouteSections.PRODUCT_SELECTOR}
            activeSection={AppRouteSections.OPEN_CASE}
            title="Product Selector"
            description="Select a product to troubleshoot"
            descriptionClassName="test-desc-class-name" >
                <span>Product Selector Here</span>
            </ MainSection>).toJSON();
        expect(item).toMatchSnapshot();
    });
    it('Should render correctly without isLoading and descriptionClassName (No classname on description)', () => {
        const item = renderer.create(<MainSection
            section={AppRouteSections.PRODUCT_SELECTOR}
            activeSection={AppRouteSections.OPEN_CASE}
            title="Product Selector"
            description="Select a product to troubleshoot">
                <span>Product Selector Here</span>
            </ MainSection>).toJSON();
        expect(item).toMatchSnapshot();
    });
    it('Should render correctly without description', () => {
        const item = renderer.create(<MainSection
            section={AppRouteSections.PRODUCT_SELECTOR}
            activeSection={AppRouteSections.OPEN_CASE}
            title="Product Selector">
                <span>Product Selector Here</span>
            </ MainSection>).toJSON();
        expect(item).toMatchSnapshot();
    });
    it('descriptionClassName should make no difference when description is not passed', () => {
        const item = renderer.create(<MainSection
            section={AppRouteSections.PRODUCT_SELECTOR}
            activeSection={AppRouteSections.OPEN_CASE}
            title="Product Selector"
            descriptionClassName="test-desc-class-name" >
                <span>Product Selector Here</span>
            </ MainSection>).toJSON();
        expect(item).toMatchSnapshot();
    });
    it('Should add wizard-main-active-section to <section> when section and activeSection are same', () => {
        const item = renderer.create(<MainSection
            section={AppRouteSections.PRODUCT_SELECTOR}
            activeSection={AppRouteSections.PRODUCT_SELECTOR}
            title="Product Selector" >
                <span>Product Selector Here</span>
            </ MainSection>).toJSON();
        expect(item).toMatchSnapshot();
    });
});
