1 files changed, 11 insertions, 21 deletions

diff --git a/spec/frontend/boards/issue_card_spec.js b/spec/frontend/boards/issue_card_spec.js
index 1fd2b417aba..f78e4dad2c0 100644
--- a/spec/frontend/boards/issue_card_spec.js
+++ b/spec/frontend/boards/issue_card_spec.js
@@ -8,6 +8,7 @@ import '~/boards/models/list';
 import IssueCardInner from '~/boards/components/issue_card_inner.vue';
 import { listObj } from '../../javascripts/boards/mock_data';
 import store from '~/boards/stores';
+import { GlLabel } from '@gitlab/ui';
 
 describe('Issue card component', () => {
   const user = new ListAssignee({
@@ -20,7 +21,7 @@ describe('Issue card component', () => {
   const label1 = new ListLabel({
     id: 3,
     title: 'testing 123',
-    color: 'blue',
+    color: '#000CFF',
     text_color: 'white',
     description: 'test',
   });
@@ -50,6 +51,9 @@ describe('Issue card component', () => {
         rootPath: '/',
       },
       store,
+      stubs: {
+        GlLabel: true,
+      },
     });
   });
 
@@ -290,25 +294,11 @@ describe('Issue card component', () => {
     });
 
     it('does not render list label but renders all other labels', () => {
-      expect(wrapper.findAll('.badge').length).toBe(1);
-    });
-
-    it('renders label', () => {
-      const nodes = wrapper.findAll('.badge').wrappers.map(label => label.attributes('title'));
-
-      expect(nodes.includes(label1.description)).toBe(true);
-    });
-
-    it('sets label description as title', () => {
-      expect(wrapper.find('.badge').attributes('title')).toContain(label1.description);
-    });
-
-    it('sets background color of button', () => {
-      const nodes = wrapper
-        .findAll('.badge')
-        .wrappers.map(label => label.element.style.backgroundColor);
-
-      expect(nodes.includes(label1.color)).toBe(true);
+      expect(wrapper.findAll(GlLabel).length).toBe(1);
+      const label = wrapper.find(GlLabel);
+      expect(label.props('title')).toEqual(label1.title);
+      expect(label.props('description')).toEqual(label1.description);
+      expect(label.props('backgroundColor')).toEqual(label1.color);
     });
 
     it('does not render label if label does not have an ID', done => {
@@ -321,7 +311,7 @@ describe('Issue card component', () => {
       wrapper.vm
         .$nextTick()
         .then(() => {
-          expect(wrapper.findAll('.badge').length).toBe(1);
+          expect(wrapper.findAll(GlLabel).length).toBe(1);
           expect(wrapper.text()).not.toContain('closed');
           done();
         })