Filter groups and projects dropdowns of search page on backend

2 files changed, 58 insertions, 0 deletions

diff --git a/spec/javascripts/fixtures/search.rb b/spec/javascripts/fixtures/search.rb
new file mode 100644
index 00000000000..703cd3d49fa
--- /dev/null
+++ b/spec/javascripts/fixtures/search.rb
@@ -0,0 +1,18 @@
+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
diff --git a/spec/javascripts/search_spec.js b/spec/javascripts/search_spec.js
new file mode 100644
index 00000000000..38e94d45e55
--- /dev/null
+++ b/spec/javascripts/search_spec.js
@@ -0,0 +1,40 @@
+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');
+  });
+});