[frontend] backport of scoped labels

Scoped labels in EE require additional changes in CE code.

1 files changed, 90 insertions, 26 deletions

diff --git a/spec/frontend/labels_select_spec.js b/spec/frontend/labels_select_spec.js
index acfdc885032..d54e0eab845 100644
--- a/spec/frontend/labels_select_spec.js
+++ b/spec/frontend/labels_select_spec.js
@@ -13,40 +13,104 @@ const mockLabels = [
   },
 ];
 
+const mockScopedLabels = [
+  {
+    id: 27,
+    title: 'Foo::Bar',
+    description: 'Foobar',
+    color: '#333ABC',
+    text_color: '#FFFFFF',
+  },
+];
+
 describe('LabelsSelect', () => {
   describe('getLabelTemplate', () => {
-    const label = mockLabels[0];
-    let $labelEl;
-
-    beforeEach(() => {
-      $labelEl = $(
-        LabelsSelect.getLabelTemplate({
-          labels: mockLabels,
-          issueUpdateURL: mockUrl,
-        }),
-      );
-    });
+    describe('when normal label is present', () => {
+      const label = mockLabels[0];
+      let $labelEl;
 
-    it('generated label item template has correct label URL', () => {
-      expect($labelEl.attr('href')).toBe('/foo/bar?label_name[]=Foo%20Label');
-    });
+      beforeEach(() => {
+        $labelEl = $(
+          LabelsSelect.getLabelTemplate({
+            labels: mockLabels,
+            issueUpdateURL: mockUrl,
+            enableScopedLabels: true,
+            scopedLabelsDocumentationLink: 'docs-link',
+          }),
+        );
+      });
 
-    it('generated label item template has correct label title', () => {
-      expect($labelEl.find('span.label').text()).toBe(label.title);
-    });
+      it('generated label item template has correct label URL', () => {
+        expect($labelEl.attr('href')).toBe('/foo/bar?label_name[]=Foo%20Label');
+      });
 
-    it('generated label item template has label description as title attribute', () => {
-      expect($labelEl.find('span.label').attr('title')).toBe(label.description);
-    });
+      it('generated label item template has correct label title', () => {
+        expect($labelEl.find('span.label').text()).toBe(label.title);
+      });
+
+      it('generated label item template has label description as title attribute', () => {
+        expect($labelEl.find('span.label').attr('title')).toBe(label.description);
+      });
 
-    it('generated label item template has correct label styles', () => {
-      expect($labelEl.find('span.label').attr('style')).toBe(
-        `background-color: ${label.color}; color: ${label.text_color};`,
-      );
+      it('generated label item template has correct label styles', () => {
+        expect($labelEl.find('span.label').attr('style')).toBe(
+          `background-color: ${label.color}; color: ${label.text_color};`,
+        );
+      });
+
+      it('generated label item has a badge class', () => {
+        expect($labelEl.find('span').hasClass('badge')).toEqual(true);
+      });
+
+      it('generated label item template does not have scoped-label class', () => {
+        expect($labelEl.find('.scoped-label')).toHaveLength(0);
+      });
     });
 
-    it('generated label item has a badge class', () => {
-      expect($labelEl.find('span').hasClass('badge')).toEqual(true);
+    describe('when scoped label is present', () => {
+      const label = mockScopedLabels[0];
+      let $labelEl;
+
+      beforeEach(() => {
+        $labelEl = $(
+          LabelsSelect.getLabelTemplate({
+            labels: mockScopedLabels,
+            issueUpdateURL: mockUrl,
+            enableScopedLabels: true,
+            scopedLabelsDocumentationLink: 'docs-link',
+          }),
+        );
+      });
+
+      it('generated label item template has correct label URL', () => {
+        expect($labelEl.find('a').attr('href')).toBe('/foo/bar?label_name[]=Foo%3A%3ABar');
+      });
+
+      it('generated label item template has correct label title', () => {
+        expect($labelEl.find('span.label').text()).toBe(label.title);
+      });
+
+      it('generated label item template has html flag as true', () => {
+        expect($labelEl.find('span.label').attr('data-html')).toBe('true');
+      });
+
+      it('generated label item template has question icon', () => {
+        expect($labelEl.find('i.fa-question-circle')).toHaveLength(1);
+      });
+
+      it('generated label item template has scoped-label class', () => {
+        expect($labelEl.find('.scoped-label')).toHaveLength(1);
+      });
+
+      it('generated label item template has correct label styles', () => {
+        expect($labelEl.find('span.label').attr('style')).toBe(
+          `background-color: ${label.color}; color: ${label.text_color};`,
+        );
+      });
+
+      it('generated label item has a badge class', () => {
+        expect($labelEl.find('span').hasClass('badge')).toEqual(true);
+      });
     });
   });
 });