From cbefbd3ff784b6989d60d96c8fc6808dc9950eef Mon Sep 17 00:00:00 2001
From: Joao Silva <100691367+JoaoSilvaGrafana@users.noreply.github.com>
Date: Wed, 22 Jun 2022 17:20:57 +0100
Subject: [PATCH] Search: Adds tests to SearchView (#51248)

---
 .../page/components/SearchView.test.tsx       | 91 +++++++++++++++++++
 .../search/page/components/SearchView.tsx     |  2 +-
 2 files changed, 92 insertions(+), 1 deletion(-)
 create mode 100644 public/app/features/search/page/components/SearchView.test.tsx

diff --git a/public/app/features/search/page/components/SearchView.test.tsx b/public/app/features/search/page/components/SearchView.test.tsx
new file mode 100644
index 00000000000..0fefcbae7ba
--- /dev/null
+++ b/public/app/features/search/page/components/SearchView.test.tsx
@@ -0,0 +1,91 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
+import { Observable } from 'rxjs';
+
+import { ArrayVector, DataFrame, DataFrameView, FieldType } from '@grafana/data';
+
+import { DashboardQueryResult, getGrafanaSearcher, QueryResponse } from '../../service';
+import { DashboardSearchItemType } from '../../types';
+
+import { SearchView, SearchViewProps } from './SearchView';
+
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  reportInteraction: jest.fn(),
+}));
+
+describe('SearchView', () => {
+  const folderData: DataFrame = {
+    fields: [
+      {
+        name: 'kind',
+        type: FieldType.string,
+        config: {},
+        values: new ArrayVector([DashboardSearchItemType.DashFolder]),
+      },
+      { name: 'name', type: FieldType.string, config: {}, values: new ArrayVector(['My folder 1']) },
+      { name: 'uid', type: FieldType.string, config: {}, values: new ArrayVector(['my-folder-1']) },
+      { name: 'url', type: FieldType.string, config: {}, values: new ArrayVector(['/my-folder-1']) },
+    ],
+    length: 1,
+  };
+  const mockSearchResult: QueryResponse = {
+    isItemLoaded: jest.fn(),
+    loadMoreItems: jest.fn(),
+    totalRows: folderData.length,
+    view: new DataFrameView<DashboardQueryResult>(folderData),
+  };
+
+  const baseProps: SearchViewProps = {
+    showManage: false,
+    queryText: '',
+    onQueryTextChange: jest.fn(),
+    includePanels: false,
+    setIncludePanels: jest.fn(),
+    keyboardEvents: {} as Observable<React.KeyboardEvent>,
+  };
+
+  beforeAll(() => {
+    jest.spyOn(getGrafanaSearcher(), 'search').mockResolvedValue(mockSearchResult);
+  });
+
+  it('does not show checkboxes or manage actions if showManage is false', async () => {
+    render(<SearchView {...baseProps} />);
+    await waitFor(() => expect(screen.queryAllByRole('checkbox')).toHaveLength(0));
+    expect(screen.queryByTestId('manage-actions')).not.toBeInTheDocument();
+  });
+
+  it('shows checkboxes if showManage is true', async () => {
+    render(<SearchView {...baseProps} showManage={true} />);
+    await waitFor(() => expect(screen.queryAllByRole('checkbox')).toHaveLength(2));
+  });
+
+  it('shows the manage actions if show manage is true and the user clicked a checkbox', async () => {
+    //Mock store
+    const mockStore = configureMockStore();
+    const store = mockStore({ dashboard: { panels: [] } });
+
+    render(
+      <Provider store={store}>
+        <SearchView {...baseProps} showManage={true} />
+      </Provider>
+    );
+    await waitFor(() => userEvent.click(screen.getAllByRole('checkbox')[0]));
+
+    expect(screen.queryByTestId('manage-actions')).toBeInTheDocument();
+  });
+
+  it('shows an empty state if no data returned', async () => {
+    jest.spyOn(getGrafanaSearcher(), 'search').mockResolvedValue({
+      ...mockSearchResult,
+      totalRows: 0,
+      view: new DataFrameView<DashboardQueryResult>({ fields: [], length: 0 }),
+    });
+    render(<SearchView {...baseProps} queryText={'asdfasdfasdf'} />);
+    await waitFor(() => expect(screen.queryByText('No results found for your query.')).toBeInTheDocument());
+    expect(screen.getByRole('button', { name: 'Remove search constraints' })).toBeInTheDocument();
+  });
+});
diff --git a/public/app/features/search/page/components/SearchView.tsx b/public/app/features/search/page/components/SearchView.tsx
index 4bec2b71242..cb9553b9b10 100644
--- a/public/app/features/search/page/components/SearchView.tsx
+++ b/public/app/features/search/page/components/SearchView.tsx
@@ -24,7 +24,7 @@ import { ManageActions } from './ManageActions';
 import { SearchResultsGrid } from './SearchResultsGrid';
 import { SearchResultsTable, SearchResultsProps } from './SearchResultsTable';
 
-type SearchViewProps = {
+export type SearchViewProps = {
   queryText: string; // odd that it is not from query.query
   showManage: boolean;
   folderDTO?: FolderDTO;