Annotations: Add basic tests, expose inputId on TagFilter

public/app/core/components/TagFilter/TagFilter.tsx

@@ -17,6 +17,7 @@ export interface Props {
   allowCustomValue?: boolean;
   /** Do not show selected values inside Select. Useful when the values need to be shown in some other components */
   hideValues?: boolean;
+  inputId?: string;
   isClearable?: boolean;
   onChange: (tags: string[]) => void;
   placeholder?: string;
@@ -33,6 +34,7 @@ const filterOption = (option: any, searchQuery: string) => {
 export const TagFilter: FC<Props> = ({
   allowCustomValue = false,
   hideValues,
+  inputId,
   isClearable,
   onChange,
   placeholder = 'Filter by tag',
@@ -67,6 +69,7 @@ export const TagFilter: FC<Props> = ({
     filterOption,
     getOptionLabel: (i: any) => i.label,
     getOptionValue: (i: any) => i.value,
+    inputId,
     isMulti: true,
     loadOptions: onLoadOptions,
     loadingMessage: 'Loading...',

public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.test.tsx

@@ -0,0 +1,61 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+import { GrafanaAnnotationType, GrafanaAnnotationQuery } from '../types';
+import AnnotationQueryEditor from './AnnotationQueryEditor';
+
+describe('AnnotationQuery', () => {
+  const mockOnChange = jest.fn();
+  let mockQuery: GrafanaAnnotationQuery;
+
+  beforeEach(() => {
+    mockQuery = {
+      refId: 'Anno',
+      type: GrafanaAnnotationType.Tags,
+      limit: 100,
+    };
+  });
+
+  it('has a "Filter by" input', () => {
+    render(<AnnotationQueryEditor query={mockQuery} onChange={mockOnChange} />);
+    const filterBy = screen.getByLabelText('Filter by');
+    expect(filterBy).toBeInTheDocument();
+  });
+
+  it('has a "Max limit" input', () => {
+    render(<AnnotationQueryEditor query={mockQuery} onChange={mockOnChange} />);
+    const maxLimit = screen.getByLabelText('Max limit');
+    expect(maxLimit).toBeInTheDocument();
+  });
+
+  describe('when the query type is "Dashboard"', () => {
+    beforeEach(() => {
+      mockQuery.type = GrafanaAnnotationType.Dashboard;
+    });
+
+    it('does not have a "Match any" toggle', () => {
+      render(<AnnotationQueryEditor query={mockQuery} onChange={mockOnChange} />);
+      const matchAny = screen.queryByLabelText('Match any');
+      expect(matchAny).toBeNull();
+    });
+
+    it('does not have a "Tags" input', () => {
+      render(<AnnotationQueryEditor query={mockQuery} onChange={mockOnChange} />);
+      const tags = screen.queryByLabelText('Tags');
+      expect(tags).toBeNull();
+    });
+  });
+
+  describe('when the query type is "Tags"', () => {
+    it('has a "Match any" toggle', () => {
+      render(<AnnotationQueryEditor query={mockQuery} onChange={mockOnChange} />);
+      const matchAny = screen.getByLabelText('Match any');
+      expect(matchAny).toBeInTheDocument();
+    });
+
+    it('has a "Tags" input', () => {
+      render(<AnnotationQueryEditor query={mockQuery} onChange={mockOnChange} />);
+      const tags = screen.getByLabelText('Tags');
+      expect(tags).toBeInTheDocument();
+    });
+  });
+});

public/app/plugins/datasource/grafana/components/AnnotationQueryEditor.tsx

@@ -47,7 +47,7 @@ interface Props {
   onChange: (newValue: GrafanaAnnotationQuery) => void;
 }
 
-export default function AnnotationQuery({ query, onChange }: Props) {
+export default function AnnotationQueryEditor({ query, onChange }: Props) {
   const { limit = 100, matchAny = false, tags = [], type = GrafanaAnnotationType.Tags } = query;
 
   const onFilterByChange = (newValue: SelectableValue<GrafanaAnnotationType>) =>
@@ -78,19 +78,37 @@ export default function AnnotationQuery({ query, onChange }: Props) {
     <div className="gf-form-group">
       <InlineFieldRow>
         <InlineField label="Filter by" labelWidth={18} tooltip={filterTooltipContent}>
-          <Select width={16} options={annotationTypes} value={type} onChange={onFilterByChange} />
+          <Select
+            inputId="grafana-annotations__filter-by"
+            width={16}
+            options={annotationTypes}
+            value={type}
+            onChange={onFilterByChange}
+          />
         </InlineField>
         <InlineField label="Max limit">
-          <Select width={16} options={limitOptions} value={limit} onChange={onMaxLimitChange} />
+          <Select
+            inputId="grafana-annotations__limit"
+            width={16}
+            options={limitOptions}
+            value={limit}
+            onChange={onMaxLimitChange}
+          />
         </InlineField>
       </InlineFieldRow>
       {type === GrafanaAnnotationType.Tags && (
         <InlineFieldRow>
           <InlineField label="Match any" labelWidth={18} tooltip={matchTooltipContent}>
-            <InlineSwitch value={matchAny} onChange={onMatchAnyChange} />
+            <InlineSwitch id="grafana-annotations__match-any" value={matchAny} onChange={onMatchAnyChange} />
           </InlineField>
           <InlineField label="Tags" labelWidth="auto" tooltip={tagsTooltipContent}>
-            <TagFilter allowCustomValue onChange={onTagsChange} tagOptions={getAnnotationTags} tags={tags} />
+            <TagFilter
+              inputId="grafana-annotations__tags"
+              allowCustomValue
+              onChange={onTagsChange}
+              tagOptions={getAnnotationTags}
+              tags={tags}
+            />
           </InlineField>
         </InlineFieldRow>
       )}

public/app/plugins/datasource/grafana/datasource.ts

@@ -14,7 +14,7 @@ import { GrafanaQuery, GrafanaAnnotationQuery, GrafanaAnnotationType, GrafanaQue
 import { getBackendSrv, getGrafanaLiveSrv, getTemplateSrv, toDataQueryResponse } from '@grafana/runtime';
 import { Observable, of, merge } from 'rxjs';
 import { map, catchError } from 'rxjs/operators';
-import AnnotationQuery from './components/AnnotationQuery';
+import AnnotationQueryEditor from './components/AnnotationQueryEditor';
 
 let counter = 100;
 
@@ -22,7 +22,7 @@ export class GrafanaDatasource extends DataSourceApi<GrafanaQuery> {
   constructor(instanceSettings: DataSourceInstanceSettings) {
     super(instanceSettings);
     this.annotations = {
-      QueryEditor: AnnotationQuery,
+      QueryEditor: AnnotationQueryEditor,
     };
   }