import * as React from 'react';
import { Text } from '../Text/index';
import { render } from '../../utils/testUtils';
import Accordion from '.';

describe('<Accordion />', () => {
  it('accordion items work even when nested', () => {
    const { container } = render(
      <Accordion>
        <Accordion.Item
          header={
            <Text weight="bold" color="Blue">
              This is a custom header
            </Text>
          }
          content="text"
        />
        <Accordion.Item
          header={({ open }) => <div>This is {!open && 'Open'}</div>}
          content={<Text color="Red">Content</Text>}
        />
        <Accordion.Item
          header="This is a simple pure text header"
          content="Some transformed content!"
        />
      </Accordion>,
    );

    expect(container.textContent).toMatchInlineSnapshot(
      `"This is a custom headerThis is OpenThis is a simple pure text header"`,
    );
  });
});