1 files changed, 140 insertions, 0 deletions
diff --git a/spec/frontend/labels/labels_select_spec.js b/spec/frontend/labels/labels_select_spec.js
new file mode 100644
index 00000000000..f6e280564cc
--- /dev/null
+++ b/spec/frontend/labels/labels_select_spec.js
@@ -0,0 +1,140 @@
+import $ from 'jquery';
+import LabelsSelect from '~/labels/labels_select';
+
+const mockUrl = '/foo/bar/url';
+
+const mockLabels = [
+  {
+    id: 26,
+    title: 'Foo Label',
+    description: 'Foobar',
+    color: '#BADA55',
+    text_color: '#FFFFFF',
+  },
+];
+
+const mockScopedLabels = [
+  {
+    id: 27,
+    title: 'Foo::Bar',
+    description: 'Foobar',
+    color: '#333ABC',
+    text_color: '#FFFFFF',
+  },
+];
+
+const mockScopedLabels2 = [
+  {
+    id: 28,
+    title: 'Foo::Bar2',
+    description: 'Foobar2',
+    color: '#FFFFFF',
+    text_color: '#333333',
+  },
+];
+
+describe('LabelsSelect', () => {
+  describe('getLabelTemplate', () => {
+    describe('when normal label is present', () => {
+      const label = mockLabels[0];
+      let $labelEl;
+
+      beforeEach(() => {
+        $labelEl = $(
+          LabelsSelect.getLabelTemplate({
+            labels: mockLabels,
+            issueUpdateURL: mockUrl,
+            enableScopedLabels: true,
+          }),
+        );
+      });
+
+      it('generated label item template has correct label URL', () => {
+        expect($labelEl.find('a').attr('href')).toBe('/foo/bar?label_name[]=Foo%20Label');
+      });
+
+      it('generated label item template has correct label title', () => {
+        expect($labelEl.find('span.gl-label-text').text()).toBe(label.title);
+      });
+
+      it('generated label item template has label description as title attribute', () => {
+        expect($labelEl.find('a').attr('title')).toBe(label.description);
+      });
+
+      it('generated label item template has correct label styles and classes', () => {
+        expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
+          `background-color: ${label.color};`,
+        );
+        expect($labelEl.find('span.gl-label-text')).toHaveClass('gl-label-text-light');
+      });
+
+      it('generated label item has a gl-label-text class', () => {
+        expect($labelEl.find('span').hasClass('gl-label-text')).toEqual(true);
+      });
+    });
+
+    describe('when scoped label is present', () => {
+      const label = mockScopedLabels[0];
+      let $labelEl;
+
+      beforeEach(() => {
+        $labelEl = $(
+          LabelsSelect.getLabelTemplate({
+            labels: mockScopedLabels,
+            issueUpdateURL: mockUrl,
+            enableScopedLabels: true,
+          }),
+        );
+      });
+
+      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', () => {
+        const scopedTitle = label.title.split('::');
+        expect($labelEl.find('span.gl-label-text').text()).toContain(scopedTitle[0]);
+        expect($labelEl.find('span.gl-label-text').text()).toContain(scopedTitle[1]);
+      });
+
+      it('generated label item template has html flag as true', () => {
+        expect($labelEl.find('a').attr('data-html')).toBe('true');
+      });
+
+      it('generated label item template has correct label styles and classes', () => {
+        expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
+          `background-color: ${label.color};`,
+        );
+        expect($labelEl.find('span.gl-label-text')).toHaveClass('gl-label-text-light');
+        expect($labelEl.find('span.gl-label-text').last()).not.toHaveClass('gl-label-text-light');
+      });
+
+      it('generated label item has a badge class', () => {
+        expect($labelEl.find('span').hasClass('gl-label-text')).toEqual(true);
+      });
+    });
+
+    describe('when scoped label is present, with text color not white', () => {
+      const label = mockScopedLabels2[0];
+      let $labelEl;
+
+      beforeEach(() => {
+        $labelEl = $(
+          LabelsSelect.getLabelTemplate({
+            labels: mockScopedLabels2,
+            issueUpdateURL: mockUrl,
+            enableScopedLabels: true,
+          }),
+        );
+      });
+
+      it('generated label item template has correct label styles and classes', () => {
+        expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
+          `background-color: ${label.color};`,
+        );
+        expect($labelEl.find('span.gl-label-text')).toHaveClass('gl-label-text-dark');
+        expect($labelEl.find('span.gl-label-text').last()).toHaveClass('gl-label-text-dark');
+      });
+    });
+  });
+});