button tests

Author: speakyourcode

package.json

@@ -20,6 +20,7 @@
     "@grafana/runtime": "next",
     "@grafana/toolkit": "next",
     "@grafana/ui": "next",
+    "@types/enzyme": "^3.10.5",
     "emotion": "10.0.27",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "1.15.2"

src/buttonPanel.test.tsx

@@ -1,17 +1,26 @@
 import {
+  AppEvents,
   DefaultTimeRange,
   DefaultTimeZone,
   LoadingState,
   PanelProps,
 } from '@grafana/data';
-import { mount } from 'enzyme';
+import { getBackendSrv, getDataSourceSrv, SystemJS } from '@grafana/runtime';
+import { Button, HorizontalGroup, VerticalGroup } from '@grafana/ui';
+import { shallow } from 'enzyme';
 import React from 'react';
-import { Options } from 'types';
+import { ButtonOptions, Options } from 'types';
 import { ButtonPanel } from './buttonPanel';
+jest.mock('@grafana/runtime');
 
 describe('button panel', () => {
-  test('panel', () => {
-    let props: PanelProps<Options> = {
+  const status = 200;
+  const statusError = 500;
+  const statusText = 'OKI';
+  let defaultProps: PanelProps<Options>;
+
+  beforeEach(() => {
+    defaultProps = {
       id: 1,
       data: {
         timeRange: DefaultTimeRange,
@@ -34,7 +43,89 @@ describe('button panel', () => {
         orientation: 'horizontal',
       } as Options,
     };
+  });
+
+  test('orientation', () => {
+    let wrapper = shallow(<ButtonPanel {...defaultProps} />);
+    expect(wrapper.find(HorizontalGroup)).toHaveLength(1);
+    expect(wrapper.find(VerticalGroup)).toHaveLength(0);
+    wrapper.setProps({ options: { buttons: [], orientation: 'vertical' } });
+    expect(wrapper.find(HorizontalGroup)).toHaveLength(0);
+    expect(wrapper.find(VerticalGroup)).toHaveLength(1);
+  });
+
+  test('buttons', () => {
+    const wrapper = shallow(<ButtonPanel {...defaultProps} />);
+    expect(wrapper.find(Button)).toHaveLength(0);
+
+    const buttons: ButtonOptions[] = [
+      { text: 'a', variant: 'destructive', datasource: 'a' },
+      { text: 'b', variant: 'primary', datasource: 'b' },
+    ];
+    wrapper.setProps({ options: { buttons: buttons } });
+
+    const mockGet = jest.fn().mockReturnValue({ id: 1 });
+    getDataSourceSrv.mockImplementation(() => ({ get: mockGet }));
+    const mockDataSourceRequest = jest.fn().mockReturnValue({
+      status: status,
+      statusText: statusText,
+    });
+    getBackendSrv.mockImplementation(() => ({
+      datasourceRequest: mockDataSourceRequest,
+    }));
+    const mockEmit = jest.fn();
+    SystemJS.load.mockImplementation(async () => ({
+      emit: mockEmit,
+    }));
+
+    const buttonWidgets = wrapper.find(Button);
+    expect(buttonWidgets).toHaveLength(buttons.length);
+    buttonWidgets.forEach((b: any, i: number) => {
+      expect(b.key()).toBe(i.toString());
+      expect(b.prop('variant')).toBe(buttons[i].variant);
+      expect(b.text()).toBe(buttons[i].text);
+      b.simulate('click');
+      setImmediate(() => {
+        expect(mockGet).toHaveBeenCalledWith(buttons[i].datasource);
+        expect(mockDataSourceRequest).toHaveBeenCalled();
+        expect(mockEmit).toHaveBeenCalledWith(AppEvents.alertSuccess, [
+          buttons[i].text + ': ' + status + ' (' + statusText + ')',
+        ]);
+      });
+    });
+  });
+
+  test('button error', () => {
+    const wrapper = shallow(<ButtonPanel {...defaultProps} />);
+    const buttons: ButtonOptions[] = [
+      { variant: 'destructive', datasource: 'a' },
+    ];
+    wrapper.setProps({ options: { buttons: buttons } });
+
+    const mockGet = jest.fn().mockReturnValue({ id: 1 });
+    getDataSourceSrv.mockImplementation(() => ({ get: mockGet }));
+    const msg = 'msg';
+    const mockDataSourceRequest = jest.fn().mockRejectedValue({
+      status: statusError,
+      statusText: statusText,
+      data: { message: msg },
+    });
+    getBackendSrv.mockImplementation(() => ({
+      datasourceRequest: mockDataSourceRequest,
+    }));
+    const mockEmit = jest.fn();
+    SystemJS.load.mockImplementation(async () => ({
+      emit: mockEmit,
+    }));
 
-    mount(<ButtonPanel {...props} />);
+    const widget = wrapper.find(Button);
+    expect(widget.text()).toBe('Button');
+    widget.simulate('click');
+    setImmediate(() => {
+      expect(mockEmit).toHaveBeenCalledWith(AppEvents.alertError, [
+        widget.text() + ': ' + statusError + ' (' + statusText + ')',
+        msg,
+      ]);
+    });
   });
 });

src/buttonPanel.tsx

@@ -8,45 +8,46 @@ interface Props extends PanelProps<Options> {}
 
 export const ButtonPanel: React.FC<Props> = ({ options }) => {
   const renderButtons = (buttons: ButtonOptions[]) => {
-    return buttons.map((b: ButtonOptions, index: number) => (
-      <Button
-        key={index}
-        variant={b.variant}
-        onClick={async () => {
-          const payload = JSON.parse(b.query || '');
-          const ds = await getDataSourceSrv().get(b.datasource);
-          try {
-            const resp = await getBackendSrv().datasourceRequest({
-              method: 'POST',
-              url: 'api/tsdb/query',
-              data: {
-                queries: [
-                  {
-                    datasourceId: ds.id,
-                    refId: '1',
-                    ...payload,
-                  },
-                ],
-              },
-            });
-            SystemJS.load('app/core/app_events').then((appEvents: any) => {
-              appEvents.emit(AppEvents.alertSuccess, [
-                b.text + ': ' + resp.status + ' (' + resp.statusText + ')',
+    return buttons.map((b: ButtonOptions, index: number) => {
+      const text = b.text || 'Button';
+      return (
+        <Button
+          key={index}
+          variant={b.variant}
+          onClick={async () => {
+            const payload = JSON.parse(b.query || '{}');
+            const ds = await getDataSourceSrv().get(b.datasource);
+            try {
+              const resp = await getBackendSrv().datasourceRequest({
+                method: 'POST',
+                url: 'api/tsdb/query',
+                data: {
+                  queries: [
+                    {
+                      datasourceId: ds.id,
+                      refId: '1',
+                      ...payload,
+                    },
+                  ],
+                },
+              });
+              const events = await SystemJS.load('app/core/app_events');
+              events.emit(AppEvents.alertSuccess, [
+                text + ': ' + resp.status + ' (' + resp.statusText + ')',
               ]);
-            });
-          } catch (error) {
-            SystemJS.load('app/core/app_events').then((appEvents: any) => {
-              appEvents.emit(AppEvents.alertError, [
-                b.text + ': ' + error.status + ' (' + error.statusText + ')',
+            } catch (error) {
+              const events = await SystemJS.load('app/core/app_events');
+              events.emit(AppEvents.alertError, [
+                text + ': ' + error.status + ' (' + error.statusText + ')',
                 error.data.message,
               ]);
-            });
-          }
-        }}
-      >
-        {b.text || 'Button'}
-      </Button>
-    ));
+            }
+          }}
+        >
+          {text}
+        </Button>
+      );
+    });
   };
 
   return (