First enzyme tests

babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {presets: ['@babel/preset-env'
+  ]
+}

jest.config.js

@@ -5,4 +5,15 @@
 const standard = require('@grafana/toolkit/src/config/jest.plugin.config');
 
 // This process will use the same config that `yarn test` is using
-module.exports = standard.jestConfig();
+module.exports = {
+  roots: ['<rootDir>/src'],
+  testMatch: ['**/__tests__/**/*.+(ts|tsx|js)', '**/?(*.)+(spec|test).+(ts|tsx|js)'],
+  transform: {
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+  },
+  setupFilesAfterEnv: ['<rootDir>/src/setupTests.js'],
+  moduleNameMapper: {
+    '\\.(css|scss)$': '<rootDir>/src/__mocks__/styleMock.js',
+  },
+  collectCoverage: true,
+};

package.json

@@ -16,7 +16,12 @@
     "@grafana/runtime": "7.4.3",
     "@grafana/toolkit": "7.4.3",
     "@grafana/ui": "7.4.3",
-    "@types/lodash": "latest"
+    "@types/enzyme": "^3.10.8",
+    "@types/lodash": "latest",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "jest": "^26.6.3",
+    "ts-jest": "^26.5.4"
   },
   "resolutions": {
     "rxjs": "6.6.3"
@@ -26,6 +31,7 @@
   },
   "dependencies": {
     "@types/react-datepicker": "^3.1.2",
+    "babel-jest": "^26.6.3",
     "react-datepicker": "^3.3.0"
   }
 }

src/ErrorBoundary.tsx

@@ -0,0 +1,34 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  state: State = {
+    hasError: false,
+  };
+
+  static getDerivedStateFromError(_: Error): State {
+    // Update state so the next render will show the fallback UI.
+    return { hasError: true };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Uncaught error:', error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return <h1>Sorry.. there was an error {this.state.hasError}</h1>;
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

src/VariableQueryEditor.test.tsx

@@ -0,0 +1,31 @@
+import { Field, FieldSet, Switch } from '@grafana/ui';
+import { shallow } from 'enzyme';
+import * as React from 'react';
+
+import { VariableQueryEditor } from './VariableQueryEditor';
+
+describe('VariableQueryEditor', function () {
+  const fakeProps = {
+    query: {
+      builder: {
+        query: 'SELECT DISTINCT countryName FROM wikipedia WHERE countryName IS NOT NULL',
+        queryType: 'sql',
+      },
+      settings: { contextParameters: [{ name: 'AA', value: 'BB' }], format: 'wide' },
+      expr:
+        '{"builder":{"query":"SELECT DISTINCT countryName FROM wikipedia WHERE countryName IS NOT NULL","queryType":"sql"},"settings":{"contextParameters":[{"name":"AA","value":"BB"}],"format":"wide"}}',
+      refId: '',
+    },
+    onChange() {},
+    css: '',
+  };
+  describe('when initialized', () => {
+    it('should render without basic authentication', function () {
+      const wrapper = shallow(<VariableQueryEditor {...fakeProps} />);
+      console.log(wrapper.debug());
+      expect(wrapper.find(FieldSet)).toHaveLength(0);
+      expect(wrapper.find(Field)).toHaveLength(0);
+      expect(wrapper.find(Switch)).toHaveLength(0);
+    });
+  });
+});

src/VariableQueryEditor.tsx

@@ -6,6 +6,7 @@ import { DruidQuerySettings } from './configuration/QuerySettings';
 import { QuerySettingsOptions } from './configuration/QuerySettings/types';
 import { DruidQueryBuilder } from './builder/';
 import { QueryBuilderOptions } from './builder/types';
+import ErrorBoundary from './ErrorBoundary';
 
 enum Tabs {
   Builder,
@@ -31,7 +32,7 @@ export class VariableQueryEditor extends PureComponent<Props, State> {
   };
 
   onBuilderOptionsChange = (queryBuilderOptions: QueryBuilderOptions) => {
-    const { query, onChange } = this.props;
+    let { query, onChange } = this.props;
 
     //workaround: https://github.com/grafana/grafana/issues/30013
     if (typeof query === 'object') {
@@ -95,7 +96,9 @@ export class VariableQueryEditor extends PureComponent<Props, State> {
             />
           ))}
         </TabsBar>
-        <TabContent>{tabs.find((t) => t.value === activeTab)?.content}</TabContent>
+        <ErrorBoundary>
+          <TabContent>{tabs.find((t) => t.value === activeTab)?.content}</TabContent>
+        </ErrorBoundary>
       </>
     );
   }

src/__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

src/builder/query/Sql.test.tsx

@@ -0,0 +1,37 @@
+// import { Field, FieldSet, Switch } from '@grafana/ui';
+import { shallow } from 'enzyme';
+import * as React from 'react';
+
+import { Sql } from './Sql';
+
+describe('Sql', function () {
+  const fakeProps = {
+    options: {
+      builder: {
+        query: 'SELECT DISTINCT countryName FROM wikipedia WHERE countryName IS NOT NULL',
+        queryType: 'sql',
+      },
+      settings: {
+        contextParameters: [
+          {
+            name: 'AA',
+            value: 'BB',
+          },
+        ],
+        format: 'wide',
+      },
+    },
+    onchange() {},
+    onOptionsChange() {},
+  };
+  describe('when initialized', () => {
+    it('should render without basic authentication', function () {
+      const wrapper = shallow(<Sql {...fakeProps} />);
+      console.log(wrapper.debug());
+      // expect(wrapper.find(FieldSet)).toHaveLength(1);
+      // expect(wrapper.find(Field)).toHaveLength(1);
+      // expect(wrapper.find(Switch)).toHaveLength(1);
+      // expect(wrapper.find(Switch).prop('value')).toBe(false);
+    });
+  });
+});

src/configuration/ConnectionSettings/DruidAuthSettings.test.tsx

@@ -0,0 +1,29 @@
+import { Field, FieldSet, Switch } from '@grafana/ui';
+import { shallow } from 'enzyme';
+import * as React from 'react';
+
+import { DruidAuthSettings } from './DruidAuthSettings';
+import { ConnectionSettingsProps } from './types';
+
+describe('A suite', function () {
+  const fakeProps: ConnectionSettingsProps = {
+    options: {
+      settings: {
+        basicAuth: true,
+      },
+      secretSettings: {},
+      secretSettingsFields: {},
+    },
+    onOptionsChange() {},
+  };
+  it('should render without throwing an error', function () {
+    const wrapper = shallow(<DruidAuthSettings {...fakeProps} />);
+    console.log(wrapper.debug());
+
+    expect(wrapper.find(FieldSet)).toHaveLength(1);
+    expect(wrapper.find(Field)).toHaveLength(2);
+    expect(wrapper.find(Switch)).toHaveLength(2);
+    const x = wrapper.find(Switch);
+    expect(x.find('.value')).toBeTruthy();
+  });
+});

src/configuration/ConnectionSettings/DruidConnectionSettings.test.tsx

@@ -0,0 +1,26 @@
+import { shallow } from 'enzyme';
+import * as React from 'react';
+
+import { DruidConnectionSettings } from './DruidConnectionSettings';
+import { ConnectionSettingsProps } from './types';
+
+describe('DruidConnectionSettings', function () {
+  const fakeProps: ConnectionSettingsProps = {
+    options: {
+      settings: {
+        basicAuth: false,
+        basicAuthUser: 'fakeUser',
+      },
+      secretSettings: {},
+      secretSettingsFields: {},
+    },
+    onOptionsChange() {},
+  };
+  describe('when initialized', () => {
+    it('should render without basic authentication', function () {
+      const wrapper = shallow(<DruidConnectionSettings {...fakeProps} />);
+      console.log(wrapper.debug());
+      expect(wrapper.children()).toHaveLength(2);
+    });
+  });
+});

src/setupTests.js

@@ -0,0 +1,5 @@
+// setup file
+var enzyme = require('enzyme');
+var Adapter = require('enzyme-adapter-react-16');
+
+enzyme.configure({ adapter: new Adapter() });