From 81dc9ef725a756eaa8c2ef18e07ee8f29eb8eb5a Mon Sep 17 00:00:00 2001
From: Maria Alexandra <239999+axelavargas@users.noreply.github.com>
Date: Thu, 23 Jun 2022 12:14:30 +0200
Subject: [PATCH] SearchV2: Add unit test to SearchResultsGrid (#51296)

* SearchResultsGrid add unit test

* Fix linting issues
---
 .../features/search/components/SearchCard.tsx |  2 +-
 .../components/SearchResultsGrid.test.tsx     | 66 +++++++++++++++++++
 2 files changed, 67 insertions(+), 1 deletion(-)
 create mode 100644 public/app/features/search/page/components/SearchResultsGrid.test.tsx

diff --git a/public/app/features/search/components/SearchCard.tsx b/public/app/features/search/components/SearchCard.tsx
index f9b77ac4302..a095f31cd5d 100644
--- a/public/app/features/search/components/SearchCard.tsx
+++ b/public/app/features/search/components/SearchCard.tsx
@@ -122,7 +122,7 @@ export function SearchCard({ editable, item, onTagSelected, onToggleChecked }: P
       <div className={styles.imageContainer}>
         <SearchCheckbox
           className={styles.checkbox}
-          aria-label="Select dashboard"
+          aria-label={`Select dashboard ${item.title}`}
           editable={editable}
           checked={item.checked}
           onClick={onCheckboxClick}
diff --git a/public/app/features/search/page/components/SearchResultsGrid.test.tsx b/public/app/features/search/page/components/SearchResultsGrid.test.tsx
new file mode 100644
index 00000000000..3f7b34f606a
--- /dev/null
+++ b/public/app/features/search/page/components/SearchResultsGrid.test.tsx
@@ -0,0 +1,66 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import React from 'react';
+import { Observable } from 'rxjs';
+
+import { ArrayVector, DataFrame, DataFrameView, FieldType } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+
+import { DashboardQueryResult, QueryResponse } from '../../service';
+import { DashboardSearchItemType } from '../../types';
+
+import { SearchResultsGrid } from './SearchResultsGrid';
+
+describe('SearchResultsGrid', () => {
+  const dashboardsData: DataFrame = {
+    fields: [
+      {
+        name: 'kind',
+        type: FieldType.string,
+        config: {},
+        values: new ArrayVector([DashboardSearchItemType.DashDB]),
+      },
+      { name: 'name', type: FieldType.string, config: {}, values: new ArrayVector(['My dashboard 1', 'dash2']) },
+      { name: 'uid', type: FieldType.string, config: {}, values: new ArrayVector(['my-dashboard-1', 'dash-2']) },
+      { name: 'url', type: FieldType.string, config: {}, values: new ArrayVector(['/my-dashbaord-1', '/dash-2']) },
+    ],
+    length: 2,
+  };
+  const mockSearchResult: QueryResponse = {
+    isItemLoaded: jest.fn(),
+    loadMoreItems: jest.fn(),
+    totalRows: dashboardsData.length,
+    view: new DataFrameView<DashboardQueryResult>(dashboardsData),
+  };
+
+  const baseProps = {
+    response: mockSearchResult,
+    width: 800,
+    height: 600,
+    clearSelection: jest.fn(),
+    onTagSelected: jest.fn(),
+    keyboardEvents: new Observable<any>(),
+  };
+
+  it('should render grid of dashboards', () => {
+    render(<SearchResultsGrid {...baseProps} />);
+    expect(screen.getByTestId(selectors.components.Search.dashboardCard('My dashboard 1'))).toBeInTheDocument();
+    expect(screen.getByTestId(selectors.components.Search.dashboardCard('dash2'))).toBeInTheDocument();
+  });
+
+  it('should not render checkboxes for non-editable results', async () => {
+    render(<SearchResultsGrid {...baseProps} />);
+    expect(screen.queryByRole('checkbox')).toBeNull();
+    await waitFor(() => expect(screen.queryAllByRole('checkbox')).toHaveLength(0));
+  });
+
+  it('should render checkboxes for editable results ', async () => {
+    const mockSelectionToggle = jest.fn();
+    const mockSelection = jest.fn();
+    render(<SearchResultsGrid {...baseProps} selection={mockSelection} selectionToggle={mockSelectionToggle} />);
+
+    await waitFor(() => expect(screen.queryAllByRole('checkbox')).toHaveLength(2));
+    fireEvent.click(await screen.findByRole('checkbox', { name: /Select dashboard dash2/i }));
+    expect(mockSelectionToggle).toHaveBeenCalledWith('dashboard', 'dash-2');
+    expect(mockSelectionToggle).toHaveBeenCalledTimes(1);
+  });
+});