chore(explore): Reorder dataset search results based on property relevance (#12770)

superset-frontend/spec/javascripts/explore/components/DatasourcePanel_spec.jsx

@@ -17,9 +17,11 @@
  * under the License.
  */
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { Simulate } from 'react-dom/test-utils';
+import { render, screen, fireEvent } from '@testing-library/react';
 import { supersetTheme, ThemeProvider } from '@superset-ui/core';
 import DatasourcePanel from 'src/explore/components/DatasourcePanel';
+import { columns, metrics } from 'spec/javascripts/datasource/fixtures';
 
 describe('datasourcepanel', () => {
   const datasource = {
@@ -27,8 +29,8 @@ describe('datasourcepanel', () => {
     type: 'table',
     uid: '1__table',
     id: 1,
-    columns: [],
-    metrics: [],
+    columns,
+    metrics,
     database: {
       backend: 'mysql',
       name: 'main',
@@ -47,6 +49,14 @@ describe('datasourcepanel', () => {
     },
     actions: {},
   };
+
+  function search(value, input) {
+    fireEvent.change(input, {
+      target: { value },
+    });
+    Simulate.change(input);
+  }
+
   it('should render', () => {
     const { container } = render(
       <ThemeProvider theme={supersetTheme}>
@@ -66,4 +76,46 @@ describe('datasourcepanel', () => {
     expect(screen.getByText('Columns')).toBeTruthy();
     expect(screen.getByText('Metrics')).toBeTruthy();
   });
+
+  it('should render search results', () => {
+    const { container } = render(
+      <ThemeProvider theme={supersetTheme}>
+        <DatasourcePanel {...props} />
+      </ThemeProvider>,
+    );
+    const c = container.getElementsByClassName('option-label');
+
+    expect(c).toHaveLength(5);
+  });
+
+  it('should render 0 search results', () => {
+    const { container } = render(
+      <ThemeProvider theme={supersetTheme}>
+        <DatasourcePanel {...props} />
+      </ThemeProvider>,
+    );
+    const c = container.getElementsByClassName('option-label');
+    const searchInput = screen.getByPlaceholderText('Search Metrics & Columns');
+
+    search('sssssssss', searchInput);
+    setTimeout(() => {
+      expect(c).toHaveLength(0);
+    }, 201);
+  });
+
+  it('should render and sort search results', () => {
+    const { container } = render(
+      <ThemeProvider theme={supersetTheme}>
+        <DatasourcePanel {...props} />
+      </ThemeProvider>,
+    );
+    const c = container.getElementsByClassName('option-label');
+    const searchInput = screen.getByPlaceholderText('Search Metrics & Columns');
+
+    search('end', searchInput);
+    setTimeout(() => {
+      expect(c).toHaveLength(4);
+      expect(c[0].value).toBe('metric_end_certified');
+    }, 201);
+  });
 });