import { locationService } from '@grafana/runtime';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import React from 'react';
import { Provider } from 'react-redux';
import createMockStore from 'redux-mock-store';
import { PanelNotSupported, Props } from './PanelNotSupported';
import { PanelEditorTabId } from './types';

const setupTestContext = (options: Partial<Props>) => {
  const defaults: Props = {
    message: '',
    dispatch: jest.fn(),
  };
  const store = createMockStore();

  const props = { ...defaults, ...options };
  render(
    <Provider store={store()}>
      <PanelNotSupported {...props} />
    </Provider>
  );

  return { props };
};

describe('PanelNotSupported', () => {
  describe('when component is mounted', () => {
    it('then the supplied message should be shown', () => {
      setupTestContext({ message: 'Expected message' });

      expect(screen.getByRole('heading', { name: /expected message/i })).toBeInTheDocument();
    });

    it('then the back to queries button should exist', () => {
      setupTestContext({ message: 'Expected message' });
      expect(screen.getByRole('button', { name: /go back to queries/i })).toBeInTheDocument();
    });
  });

  describe('when the back to queries button is clicked', () => {
    it('then correct action should be dispatched', () => {
      setupTestContext({});
      userEvent.click(screen.getByRole('button', { name: /go back to queries/i }));
      expect(locationService.getSearchObject().tab).toBe(PanelEditorTabId.Query);
    });
  });
});