import { render, screen } from '@testing-library/react';

import { ThemeProvider } from './ThemeProvider';

import {} from './const';

describe('ThemeProvider', () => {
  it('can nest theme providers', () => {
    render(
      <ThemeProvider theme="light">
        <div>light</div>
        <ThemeProvider theme="personal">
          <div>personal</div>
          <ThemeProvider theme="light">
            <div>light</div>
          </ThemeProvider>
        </ThemeProvider>
      </ThemeProvider>,
    );

    // The first provider will not have a className attached to it
    expect(screen.getAllByText('light')[0]).not.toHaveClass('np-theme-light');
    // eslint-disable-next-line testing-library/no-node-access
    expect(screen.getByText('personal').parentElement).toHaveClass('np-theme-personal');
    // eslint-disable-next-line testing-library/no-node-access
    expect(screen.getAllByText('light')[1].parentElement).toHaveClass('np-theme-light');
  });

  it('sets platform themes', () => {
    render(
      <ThemeProvider theme="personal">
        <div>personal</div>
        <ThemeProvider theme="platform">
          <div>platform</div>
        </ThemeProvider>
        <ThemeProvider theme="platform--forest-green">
          <div>platform--forest-green</div>
        </ThemeProvider>
      </ThemeProvider>,
    );

    // eslint-disable-next-line testing-library/no-node-access
    expect(screen.getByText('personal').parentElement).toHaveClass('np-theme-personal');
    // eslint-disable-next-line testing-library/no-node-access
    expect(screen.getByText('platform').parentElement).toHaveClass('np-theme-platform');
    // eslint-disable-next-line testing-library/no-node-access
    expect(screen.getByText('platform--forest-green').parentElement).toHaveClass(
      'np-theme-platform--forest-green',
    );
  });

  it('matches snapshot', () => {
    const { asFragment } = render(
      <ThemeProvider theme="light">
        <div>light</div>
        <ThemeProvider theme="personal">
          <div>personal</div>
          <ThemeProvider theme="light">
            <div>light</div>
          </ThemeProvider>
        </ThemeProvider>
      </ThemeProvider>,
    );

    expect(asFragment()).toMatchSnapshot();
  });
});