import { fireEvent, getByText } from '@testing-library/react';
import * as React from 'react';
import { render } from '@testing-library/react';
import Menu from '.';

describe('<Menu />', () => {
  it('sublevels work when nested in a Fragment', () => {
    const { container } = render(
      <Menu>
        <Menu.Item>Item 1</Menu.Item>
        <Menu.Item>Item 2</Menu.Item>
        {true && (
          <>
            {true && (
              <Menu.Sublevel label="Sublevel 1">
                <Menu.Item>Subitem 1-1</Menu.Item>
                <Menu.Item>Subitem 1-2</Menu.Item>
              </Menu.Sublevel>
            )}
          </>
        )}
      </Menu>,
    );

    expect(container.textContent).toMatchInlineSnapshot(`"Item 1Item 2Sublevel 1"`);

    fireEvent.click(getByText(container, 'Sublevel 1'));

    expect(container.textContent).toMatchInlineSnapshot(`"Subitem 1-1Subitem 1-2"`);
  });
});