1import React, { ComponentProps } from 'react';
2import { render, screen } from '@testing-library/react';
3import { UnconnectedReturnToDashboardButton as ReturnToDashboardButton } from './ReturnToDashboardButton';
4import { ExploreId } from 'app/types/explore';
5
6const createProps = (propsOverride?: Partial<ComponentProps<typeof ReturnToDashboardButton>>) => {
7  const defaultProps = {
8    originPanelId: 1,
9    splitted: false,
10    canEdit: true,
11    exploreId: ExploreId.left,
12    queries: [],
13    setDashboardQueriesToUpdateOnLoad: jest.fn(),
14  };
15
16  return Object.assign(defaultProps, propsOverride) as ComponentProps<typeof ReturnToDashboardButton>;
17};
18
19describe('ReturnToDashboardButton', () => {
20  it('should render 2 buttons if originPanelId is provided', () => {
21    render(<ReturnToDashboardButton {...createProps()} />);
22    expect(screen.getAllByTestId(/returnButton/i)).toHaveLength(2);
23  });
24
25  it('should not render any button if originPanelId is not provided', () => {
26    render(<ReturnToDashboardButton {...createProps({ originPanelId: undefined })} />);
27    expect(screen.queryByTestId(/returnButton/i)).toBeNull();
28  });
29
30  it('should not render any button if split view', () => {
31    render(<ReturnToDashboardButton {...createProps({ splitted: true })} />);
32    expect(screen.queryByTestId(/returnButton/i)).toBeNull();
33  });
34
35  it('should not render return to panel with changes button if user cannot edit panel', () => {
36    render(<ReturnToDashboardButton {...createProps({ canEdit: false })} />);
37    expect(screen.getAllByTestId(/returnButton/i)).toHaveLength(1);
38  });
39
40  it('should show option to return to dashboard with changes', () => {
41    render(<ReturnToDashboardButton {...createProps()} />);
42    const returnWithChangesButton = screen.getByTestId('returnButtonWithChanges');
43    returnWithChangesButton.click();
44    expect(screen.getAllByText('Return to panel with changes')).toHaveLength(1);
45  });
46});
47