1import React from 'react';
2import { render, screen } from '@testing-library/react';
3import userEvent from '@testing-library/user-event';
4import { selectOptionInTest } from '@grafana/ui';
5
6import { byRole } from 'testing-library-selector';
7import { GeneralSettingsUnconnected as GeneralSettings, Props } from './GeneralSettings';
8import { DashboardModel } from '../../state';
9import { selectors } from '@grafana/e2e-selectors';
10
11const setupTestContext = (options: Partial<Props>) => {
12  const defaults: Props = {
13    dashboard: ({
14      title: 'test dashboard title',
15      description: 'test dashboard description',
16      timepicker: {
17        refresh_intervals: ['5s', '10s', '30s', '1m', '5m', '15m', '30m', '1h', '2h', '1d', '2d'],
18        time_options: ['5m', '15m', '1h', '6h', '12h', '24h', '2d', '7d', '30d'],
19      },
20      meta: {
21        folderId: 1,
22        folderTitle: 'test',
23      },
24      timezone: 'utc',
25    } as unknown) as DashboardModel,
26    updateTimeZone: jest.fn(),
27    updateWeekStart: jest.fn(),
28  };
29
30  const props = { ...defaults, ...options };
31  const { rerender } = render(<GeneralSettings {...props} />);
32
33  return { rerender, props };
34};
35
36describe('General Settings', () => {
37  describe('when component is mounted with timezone', () => {
38    it('should render correctly', () => {
39      setupTestContext({});
40      screen.getByDisplayValue('test dashboard title');
41      screen.getByDisplayValue('test dashboard description');
42      expect(screen.getByTestId(selectors.components.TimeZonePicker.containerV2)).toHaveTextContent(
43        'Coordinated Universal Time'
44      );
45    });
46  });
47
48  describe('when timezone is changed', () => {
49    it('should call update function', async () => {
50      const { props } = setupTestContext({});
51      userEvent.click(screen.getByTestId(selectors.components.TimeZonePicker.containerV2));
52      const timeZonePicker = screen.getByTestId(selectors.components.TimeZonePicker.containerV2);
53      userEvent.click(byRole('textbox').get(timeZonePicker));
54      await selectOptionInTest(timeZonePicker, 'Browser Time');
55      expect(props.updateTimeZone).toHaveBeenCalledWith('browser');
56      expect(props.dashboard.timezone).toBe('browser');
57    });
58  });
59});
60