import { render, screen } from '@testing-library/react';
import { StoreType } from '@/redux/store';
import { initialMapStateFixture } from '@/redux/map/map.fixtures';
import { BACKGROUND_INITIAL_STATE_MOCK } from '@/redux/backgrounds/background.mock';
import { getReduxWrapperWithStore } from '@/utils/testing/getReduxWrapperWithStore';
import { MapVectorViewer } from './MapVectorViewer.component';
import { MAP_VECTOR_VIEWER_ROLE } from './MapVectorViewer.constants';

const renderComponent = (): { store: StoreType } => {
  const { Wrapper, store } = getReduxWrapperWithStore({
    map: initialMapStateFixture,
    backgrounds: BACKGROUND_INITIAL_STATE_MOCK,
  });

  return (
    render(
      <Wrapper>
        <MapVectorViewer />
      </Wrapper>,
    ),
    {
      store,
    }
  );
};

describe('MapVectorViewer - component', () => {
  it('should render component container', () => {
    renderComponent();

    expect(screen.getByRole(MAP_VECTOR_VIEWER_ROLE)).toBeInTheDocument();
  });

  it('should render openlayers map inside the component', () => {
    renderComponent();

    const FIRST_NODE = 0;

    expect(screen.getByRole(MAP_VECTOR_VIEWER_ROLE).childNodes[FIRST_NODE]).toHaveClass(
      'ol-viewport',
    );
  });
});