Explore: Fix loading error for empty queries (#18488)

* Explore: Fix loading error for empty queries

* Explore: Render tests for QueryField

public/app/features/explore/QueryField.test.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { QueryField } from './QueryField';
+
+describe('<QueryField />', () => {
+  it('renders with null initial value', () => {
+    const wrapper = shallow(<QueryField initialQuery={null} />);
+    expect(wrapper.find('div').exists()).toBeTruthy();
+  });
+  it('renders with empty initial value', () => {
+    const wrapper = shallow(<QueryField initialQuery="" />);
+    expect(wrapper.find('div').exists()).toBeTruthy();
+  });
+  it('renders with initial value', () => {
+    const wrapper = shallow(<QueryField initialQuery="my query" />);
+    expect(wrapper.find('div').exists()).toBeTruthy();
+  });
+});

public/app/features/explore/QueryField.tsx

@@ -92,7 +92,7 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
       typeaheadIndex: 0,
       typeaheadPrefix: '',
       typeaheadText: '',
-      value: makeValue(props.initialQuery, props.syntax),
+      value: makeValue(props.initialQuery || '', props.syntax),
       lastExecutedValue: null,
     };
   }
@@ -420,6 +420,10 @@ export class QueryField extends React.PureComponent<QueryFieldProps, QueryFieldS
   updateMenu = () => {
     const { suggestions } = this.state;
     const menu = this.menuEl;
+    // Exit for unit tests
+    if (!window.getSelection) {
+      return;
+    }
     const selection = window.getSelection();
     const node = selection.anchorNode;