import React from 'react';
import {create} from 'react-test-renderer';

import {AccordionItem} from './AccordionItem';

const CONTENT_ID = 'test-content';

const Content = () => <div testId={CONTENT_ID}>CONTENT</div>;

describe('AccordionItem', () => {
    it('should render underlying content when collapsed if not lazy', () => {
        const tree = create(
            <AccordionItem title="COLLAPSED">
                <Content />
            </AccordionItem>
        );

        expect(
            tree.root.findByProps({
                testId: CONTENT_ID
            })
        ).toBeTruthy();

        expect(tree).toMatchSnapshot();
    });

    it('should not render underlying content when collapsed if lazy', () => {
        const tree = create(
            <AccordionItem lazy title="COLLAPSED">
                <Content />
            </AccordionItem>
        );

        expect(() =>
            tree.root.findByProps({
                testId: CONTENT_ID
            })
        ).toThrow();

        expect(tree).toMatchSnapshot();
    });

    it('should render correct layout when expanded', () => {
        const tree = create(
            <AccordionItem isExpanded title="EXPANDED">
                <Content />
            </AccordionItem>
        );

        expect(
            tree.root.findByProps({
                testId: CONTENT_ID
            })
        ).toBeTruthy();

        expect(tree).toMatchSnapshot();
    });
});
