Filter groups and projects dropdowns of search page on backend

app/assets/javascripts/pages/search/show/search.js

@@ -15,6 +15,7 @@ export default class Search {
     $groupDropdown.glDropdown({
       selectable: true,
       filterable: true,
+      filterRemote: true,
       fieldName: 'group_id',
       search: {
         fields: ['full_name'],
@@ -43,6 +44,7 @@ export default class Search {
     $projectDropdown.glDropdown({
       selectable: true,
       filterable: true,
+      filterRemote: true,
       fieldName: 'project_id',
       search: {
         fields: ['name'],

changelogs/unreleased/winh-search-page-filters.yml

+---
+title: Filter groups and projects dropdowns of search page on backend
+merge_request: 16336
+author:
+type: fixed

spec/javascripts/fixtures/search.rb

+require 'spec_helper'
+
+describe SearchController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  render_views
+
+  before(:all) do
+    clean_frontend_fixtures('search/')
+  end
+
+  it 'search/show.html.raw' do |example|
+    get :show
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end

spec/javascripts/search_spec.js

+import Api from '~/api';
+import Search from '~/pages/search/show/search';
+
+describe('Search', () => {
+  const fixturePath = 'search/show.html.raw';
+  const searchTerm = 'some search';
+  const fillDropdownInput = (dropdownSelector) => {
+    const dropdownElement = document.querySelector(dropdownSelector).parentNode;
+    const inputElement = dropdownElement.querySelector('.dropdown-input-field');
+    inputElement.value = searchTerm;
+    return inputElement;
+  };
+
+  preloadFixtures(fixturePath);
+
+  beforeEach(() => {
+    loadFixtures(fixturePath);
+    new Search(); // eslint-disable-line no-new
+  });
+
+  it('requests groups from backend when filtering', (done) => {
+    spyOn(Api, 'groups').and.callFake((term) => {
+      expect(term).toBe(searchTerm);
+      done();
+    });
+    const inputElement = fillDropdownInput('.js-search-group-dropdown');
+
+    $(inputElement).trigger('input');
+  });
+
+  it('requests projects from backend when filtering', (done) => {
+    spyOn(Api, 'projects').and.callFake((term) => {
+      expect(term).toBe(searchTerm);
+      done();
+    });
+    const inputElement = fillDropdownInput('.js-search-project-dropdown');
+
+    $(inputElement).trigger('input');
+  });
+});