1import React from 'react';
2import { CustomHeadersSettings, Props } from './CustomHeadersSettings';
3import { render, screen } from '@testing-library/react';
4import userEvent from '@testing-library/user-event';
5
6const setup = (propOverrides?: object) => {
7  const onChange = jest.fn();
8  const props: Props = {
9    dataSourceConfig: {
10      id: 4,
11      uid: 'x',
12      orgId: 1,
13      name: 'gdev-influxdb',
14      type: 'influxdb',
15      typeName: 'Influxdb',
16      typeLogoUrl: '',
17      access: 'direct',
18      url: 'http://localhost:8086',
19      password: '',
20      user: 'grafana',
21      database: 'site',
22      basicAuth: false,
23      basicAuthUser: '',
24      basicAuthPassword: '',
25      withCredentials: false,
26      isDefault: false,
27      jsonData: {
28        timeInterval: '15s',
29        httpMode: 'GET',
30        keepCookies: ['cookie1', 'cookie2'],
31      },
32      secureJsonData: {
33        password: true,
34      },
35      secureJsonFields: {},
36      readOnly: true,
37    },
38    onChange,
39    ...propOverrides,
40  };
41
42  render(<CustomHeadersSettings {...props} />);
43  return { onChange };
44};
45
46function assertRowCount(configuredInputCount: number, passwordInputCount: number) {
47  const inputs = screen.queryAllByPlaceholderText('X-Custom-Header');
48  const passwordInputs = screen.queryAllByPlaceholderText('Header Value');
49  const configuredInputs = screen.queryAllByDisplayValue('configured');
50  expect(inputs.length).toBe(passwordInputs.length + configuredInputs.length);
51
52  expect(passwordInputs).toHaveLength(passwordInputCount);
53  expect(configuredInputs).toHaveLength(configuredInputCount);
54}
55
56describe('Render', () => {
57  it('should add a new header', () => {
58    setup();
59    const b = screen.getByRole('button', { name: 'Add header' });
60    expect(b).toBeInTheDocument();
61    assertRowCount(0, 0);
62
63    userEvent.click(b);
64    assertRowCount(0, 1);
65  });
66
67  it('add header button should not submit the form', () => {
68    setup();
69    const b = screen.getByRole('button', { name: 'Add header' });
70    expect(b).toBeInTheDocument();
71    expect(b.getAttribute('type')).toBe('button');
72  });
73
74  it('should remove a header', () => {
75    const { onChange } = setup({
76      dataSourceConfig: {
77        jsonData: {
78          httpHeaderName1: 'X-Custom-Header',
79        },
80        secureJsonFields: {
81          httpHeaderValue1: true,
82        },
83      },
84    });
85    const b = screen.getByRole('button', { name: 'Remove header' });
86    expect(b).toBeInTheDocument();
87
88    assertRowCount(1, 0);
89
90    userEvent.click(b);
91    assertRowCount(0, 0);
92
93    expect(onChange).toHaveBeenCalledTimes(1);
94    expect(onChange.mock.calls[0][0].jsonData).toStrictEqual({});
95  });
96
97  it('when removing a just-created header, it should clean up secureJsonData', () => {
98    const { onChange } = setup({
99      dataSourceConfig: {
100        jsonData: {
101          httpHeaderName1: 'name1',
102        },
103        secureJsonData: {
104          httpHeaderValue1: 'value1',
105        },
106      },
107    });
108
109    // we remove the row
110    const removeButton = screen.getByRole('button', { name: 'Remove header' });
111    expect(removeButton).toBeInTheDocument();
112    userEvent.click(removeButton);
113    assertRowCount(0, 0);
114    expect(onChange).toHaveBeenCalled();
115
116    // and we verify the onChange-data
117    const lastCall = onChange.mock.calls[onChange.mock.calls.length - 1];
118    expect(lastCall[0].jsonData).not.toHaveProperty('httpHeaderName1');
119    expect(lastCall[0].secureJsonData).not.toHaveProperty('httpHeaderValue1');
120  });
121
122  it('should reset a header', () => {
123    setup({
124      dataSourceConfig: {
125        jsonData: {
126          httpHeaderName1: 'X-Custom-Header',
127        },
128        secureJsonFields: {
129          httpHeaderValue1: true,
130        },
131      },
132    });
133
134    const b = screen.getByRole('button', { name: 'Reset' });
135    expect(b).toBeInTheDocument();
136
137    assertRowCount(1, 0);
138    userEvent.click(b);
139    assertRowCount(0, 1);
140  });
141});
142