Merge branch 'winh-dequarantine-labels-autocomplete' into 'master'

Move gfm_autocomplete_spec.rb out of quarantine

Closes #57995 and #56843

See merge request gitlab-org/gitlab-ce!25958

4 files changed, 162 insertions, 85 deletions

diff --git a/spec/features/issues/gfm_autocomplete_spec.rb b/spec/features/issues/gfm_autocomplete_spec.rb
index 986f3823275..8eb413bdd8d 100644
--- a/spec/features/issues/gfm_autocomplete_spec.rb
+++ b/spec/features/issues/gfm_autocomplete_spec.rb
@@ -278,12 +278,7 @@ describe 'GFM autocomplete', :js do
     end
   end
 
-  # This context has just one example in each contexts in order to improve spec performance.
-  context 'labels', :quarantine do
-    let!(:backend)          { create(:label, project: project, title: 'backend') }
-    let!(:bug)              { create(:label, project: project, title: 'bug') }
-    let!(:feature_proposal) { create(:label, project: project, title: 'feature proposal') }
-
+  context 'labels' do
     it 'opens autocomplete menu for Labels when field starts with text with item escaping HTML characters' do
       create(:label, project: project, title: label_xss_title)
 
@@ -298,83 +293,6 @@ describe 'GFM autocomplete', :js do
         expect(find('.atwho-view-ul').text).to have_content('alert label')
       end
     end
-
-    context 'when no labels are assigned' do
-      it 'shows labels' do
-        note = find('#note-body')
-
-        # It should show all the labels on "~".
-        type(note, '~')
-        wait_for_requests
-        expect_labels(shown: [backend, bug, feature_proposal])
-
-        # It should show all the labels on "/label ~".
-        type(note, '/label ~')
-        expect_labels(shown: [backend, bug, feature_proposal])
-
-        # It should show all the labels on "/relabel ~".
-        type(note, '/relabel ~')
-        expect_labels(shown: [backend, bug, feature_proposal])
-
-        # It should show no labels on "/unlabel ~".
-        type(note, '/unlabel ~')
-        expect_labels(not_shown: [backend, bug, feature_proposal])
-      end
-    end
-
-    context 'when some labels are assigned' do
-      before do
-        issue.labels << [backend]
-      end
-
-      it 'shows labels' do
-        note = find('#note-body')
-
-        # It should show all the labels on "~".
-        type(note, '~')
-        wait_for_requests
-        expect_labels(shown: [backend, bug, feature_proposal])
-
-        # It should show only unset labels on "/label ~".
-        type(note, '/label ~')
-        expect_labels(shown: [bug, feature_proposal], not_shown: [backend])
-
-        # It should show all the labels on "/relabel ~".
-        type(note, '/relabel ~')
-        expect_labels(shown: [backend, bug, feature_proposal])
-
-        # It should show only set labels on "/unlabel ~".
-        type(note, '/unlabel ~')
-        expect_labels(shown: [backend], not_shown: [bug, feature_proposal])
-      end
-    end
-
-    context 'when all labels are assigned' do
-      before do
-        issue.labels << [backend, bug, feature_proposal]
-      end
-
-      it 'shows labels' do
-        note = find('#note-body')
-
-        # It should show all the labels on "~".
-        type(note, '~')
-        wait_for_requests
-        expect_labels(shown: [backend, bug, feature_proposal])
-
-        # It should show no labels on "/label ~".
-        type(note, '/label ~')
-        expect_labels(not_shown: [backend, bug, feature_proposal])
-
-        # It should show all the labels on "/relabel ~".
-        type(note, '/relabel ~')
-        expect_labels(shown: [backend, bug, feature_proposal])
-
-        # It should show all the labels on "/unlabel ~".
-        type(note, '/unlabel ~')
-        expect_labels(shown: [backend, bug, feature_proposal])
-      end
-    end
   end
 
   shared_examples 'autocomplete suggestions' do
diff --git a/spec/frontend/gfm_auto_complete_spec.js b/spec/frontend/gfm_auto_complete_spec.js
index 27c679c749b..ed12af925f1 100644
--- a/spec/frontend/gfm_auto_complete_spec.js
+++ b/spec/frontend/gfm_auto_complete_spec.js
@@ -6,17 +6,26 @@ import GfmAutoComplete from '~/gfm_auto_complete';
 import 'jquery.caret';
 import 'at.js';
 
+import { TEST_HOST } from 'helpers/test_constants';
+import { setTestTimeout } from 'helpers/timeout';
+import { getJSONFixture } from 'helpers/fixtures';
+
+setTestTimeout(500);
+
+const labelsFixture = getJSONFixture('autocomplete_sources/labels.json');
+
 describe('GfmAutoComplete', () => {
   const gfmAutoCompleteCallbacks = GfmAutoComplete.prototype.getDefaultCallbacks.call({
     fetchData: () => {},
   });
 
   let atwhoInstance;
-  let items;
   let sorterValue;
 
   describe('DefaultOptions.sorter', () => {
     describe('assets loading', () => {
+      let items;
+
       beforeEach(() => {
         jest.spyOn(GfmAutoComplete, 'isLoading').mockReturnValue(true);
 
@@ -61,7 +70,7 @@ describe('GfmAutoComplete', () => {
         atwhoInstance = { setting: {} };
 
         const query = 'query';
-        items = [];
+        const items = [];
         const searchKey = 'searchKey';
 
         gfmAutoCompleteCallbacks.sorter.call(atwhoInstance, query, items, searchKey);
@@ -250,4 +259,90 @@ describe('GfmAutoComplete', () => {
       ).toBe('<li><small>grp/proj#5</small> Some Issue</li>');
     });
   });
+
+  describe('labels', () => {
+    const dataSources = {
+      labels: `${TEST_HOST}/autocomplete_sources/labels`,
+    };
+
+    const allLabels = labelsFixture;
+    const assignedLabels = allLabels.filter(label => label.set);
+    const unassignedLabels = allLabels.filter(label => !label.set);
+
+    let autocomplete;
+    let $textarea;
+
+    beforeEach(() => {
+      autocomplete = new GfmAutoComplete(dataSources);
+      $textarea = $('<textarea></textarea>');
+      autocomplete.setup($textarea, { labels: true });
+    });
+
+    afterEach(() => {
+      autocomplete.destroy();
+    });
+
+    const triggerDropdown = text => {
+      $textarea
+        .trigger('focus')
+        .val(text)
+        .caret('pos', -1);
+      $textarea.trigger('keyup');
+
+      return new Promise(window.requestAnimationFrame);
+    };
+
+    const getDropdownItems = () => {
+      const dropdown = document.getElementById('at-view-labels');
+      const items = dropdown.getElementsByTagName('li');
+      return [].map.call(items, item => item.textContent.trim());
+    };
+
+    const expectLabels = ({ input, output }) =>
+      triggerDropdown(input).then(() => {
+        expect(getDropdownItems()).toEqual(output.map(label => label.title));
+      });
+
+    describe('with no labels assigned', () => {
+      beforeEach(() => {
+        autocomplete.cachedData['~'] = [...unassignedLabels];
+      });
+
+      it.each`
+        input           | output
+        ${'~'}          | ${unassignedLabels}
+        ${'/label ~'}   | ${unassignedLabels}
+        ${'/relabel ~'} | ${unassignedLabels}
+        ${'/unlabel ~'} | ${[]}
+      `('$input shows $output.length labels', expectLabels);
+    });
+
+    describe('with some labels assigned', () => {
+      beforeEach(() => {
+        autocomplete.cachedData['~'] = allLabels;
+      });
+
+      it.each`
+        input           | output
+        ${'~'}          | ${allLabels}
+        ${'/label ~'}   | ${unassignedLabels}
+        ${'/relabel ~'} | ${allLabels}
+        ${'/unlabel ~'} | ${assignedLabels}
+      `('$input shows $output.length labels', expectLabels);
+    });
+
+    describe('with all labels assigned', () => {
+      beforeEach(() => {
+        autocomplete.cachedData['~'] = [...assignedLabels];
+      });
+
+      it.each`
+        input           | output
+        ${'~'}          | ${assignedLabels}
+        ${'/label ~'}   | ${[]}
+        ${'/relabel ~'} | ${assignedLabels}
+        ${'/unlabel ~'} | ${assignedLabels}
+      `('$input shows $output.length labels', expectLabels);
+    });
+  });
 });
diff --git a/spec/frontend/helpers/fixtures.js b/spec/frontend/helpers/fixtures.js
new file mode 100644
index 00000000000..f96f27c4d80
--- /dev/null
+++ b/spec/frontend/helpers/fixtures.js
@@ -0,0 +1,24 @@
+/* eslint-disable import/prefer-default-export, global-require, import/no-dynamic-require */
+
+import fs from 'fs';
+import path from 'path';
+
+// jest-util is part of Jest
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { ErrorWithStack } from 'jest-util';
+
+const fixturesBasePath = path.join(process.cwd(), 'spec', 'javascripts', 'fixtures');
+
+export function getJSONFixture(relativePath, ee = false) {
+  const absolutePath = path.join(fixturesBasePath, ee ? 'ee' : '', relativePath);
+  if (!fs.existsSync(absolutePath)) {
+    throw new ErrorWithStack(
+      `Fixture file ${relativePath} does not exist.
+
+Did you run bin/rake karma:fixtures?`,
+      getJSONFixture,
+    );
+  }
+
+  return require(absolutePath);
+}
diff --git a/spec/javascripts/fixtures/autocomplete_sources.rb b/spec/javascripts/fixtures/autocomplete_sources.rb
new file mode 100644
index 00000000000..c117fb7cd24
--- /dev/null
+++ b/spec/javascripts/fixtures/autocomplete_sources.rb
@@ -0,0 +1,40 @@
+# frozen_string_literal: true
+
+require 'spec_helper'
+
+describe Projects::AutocompleteSourcesController, '(JavaScript fixtures)', type: :controller do
+  include JavaScriptFixturesHelpers
+
+  set(:admin) { create(:admin) }
+  set(:group) { create(:group, name: 'frontend-fixtures') }
+  set(:project) { create(:project, namespace: group, path: 'autocomplete-sources-project') }
+  set(:issue) { create(:issue, project: project) }
+
+  before(:all) do
+    clean_frontend_fixtures('autocomplete_sources/')
+  end
+
+  before do
+    sign_in(admin)
+  end
+
+  it 'autocomplete_sources/labels.json' do |example|
+    issue.labels << create(:label, project: project, title: 'bug')
+    issue.labels << create(:label, project: project, title: 'critical')
+
+    create(:label, project: project, title: 'feature')
+    create(:label, project: project, title: 'documentation')
+
+    get :labels,
+        format: :json,
+        params: {
+            namespace_id: group.path,
+            project_id: project.path,
+            type: issue.class.name,
+            type_id: issue.id
+        }
+
+    expect(response).to be_success
+    store_frontend_fixture(response, example.description)
+  end
+end