editor tests

Author: speakyourcode

src/editor.test.tsx

@@ -0,0 +1,56 @@
+import { getBackendSrv } from '@grafana/runtime';
+import { Button, Collapse, Field } from '@grafana/ui';
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+import { Editor, EditorProps } from './editor';
+jest.mock('@grafana/runtime');
+
+describe('editor', () => {
+  test('add button', () => {
+    const mockOnChange = jest.fn();
+    const props: EditorProps = {
+      buttons: [],
+      onChange: mockOnChange,
+    };
+    const wrapper = shallow(<Editor {...props} />);
+    expect(wrapper.find(Collapse)).toHaveLength(0);
+    const field = wrapper.find(Field);
+    expect(field).toHaveLength(1);
+    expect(field.children).toHaveLength(1);
+    const button = field.find(Button);
+    expect(button).toHaveLength(1);
+    expect(button.prop('variant')).toBe('secondary');
+    expect(button.text()).toBe('Add Button');
+    expect(button.prop('icon')).toBe('plus');
+    expect(button.prop('size')).toBe('sm');
+    button.simulate('click');
+    expect(mockOnChange).toHaveBeenCalledWith([
+      { text: '', datasource: '', query: '' },
+    ]);
+  });
+
+  test('button collapse', () => {
+    const mockOnChange = jest.fn();
+    const props: EditorProps = {
+      buttons: [{ text: 'a' }, { text: 'b' }],
+      onChange: mockOnChange,
+    };
+
+    const mockGet = jest.fn().mockReturnValue([{ name: 'a' }]);
+    getBackendSrv.mockImplementation(() => ({ get: mockGet }));
+
+    const wrapper = mount(<Editor {...props} />);
+    expect(wrapper.children()).toHaveLength(3);
+    const collapse = wrapper.find(Collapse);
+    expect(collapse).toHaveLength(2);
+
+    collapse.forEach((c, i) => {
+      expect(c.key()).toBe(i.toString());
+      expect(c.prop('label')).toBe('Button ' + (i + 1).toString());
+      expect(c.prop('collapsible')).toBeTruthy();
+      expect(c.prop('isOpen')).toBeFalsy();
+      // c.simulate('toggle');
+      // expect(c.prop('isOpen')).toBeTruthy();
+    });
+  });
+});

src/editor.tsx

@@ -12,14 +12,14 @@ import {
 import React from 'react';
 import { ButtonOptions, Options } from 'types';
 
-interface EditorProps {
+export interface EditorProps {
   buttons: ButtonOptions[];
   onChange: (buttons: ButtonOptions[]) => void;
 }
 
-const Editor: React.FC<EditorProps> = ({ buttons, onChange }) => {
+export const Editor: React.FC<EditorProps> = ({ buttons, onChange }) => {
   const [elems, setElems] = React.useState<SelectableValue<string>[]>();
-  const [isOpen, setOpen] = React.useState<boolean[]>([true]);
+  const [isOpen, setOpen] = React.useState<boolean[]>(buttons.map(e => false));
   React.useEffect(() => {
     let cancel = false;
     const fetchData = async () => {
@@ -53,12 +53,19 @@ const Editor: React.FC<EditorProps> = ({ buttons, onChange }) => {
     <React.Fragment>
       {buttons.map((b: ButtonOptions, i: number) => (
         <Collapse
+          key={i}
           label={'Button ' + (i + 1).toString()}
           isOpen={isOpen[i]}
           collapsible
-          onToggle={() =>
-            setOpen([...isOpen.slice(0, i), !isOpen[i], ...isOpen.slice(i + 1)])
-          }
+          onToggle={() => {
+            console.log('before', isOpen[i], i);
+            setOpen([
+              ...isOpen.slice(0, i),
+              !isOpen[i],
+              ...isOpen.slice(i + 1),
+            ]);
+            console.log('after', isOpen[i], i);
+          }}
         >
           <Field label="Text" description="Text to be displayed on the button">
             <Input