modify tests to see more than one element since we render the label itself now24685_view_self

2 files changed, 18 insertions, 13 deletions

diff --git a/app/views/projects/boards/components/_board.html.haml b/app/views/projects/boards/components/_board.html.haml
index f011e2622fa..012e6fa5838 100644
--- a/app/views/projects/boards/components/_board.html.haml
+++ b/app/views/projects/boards/components/_board.html.haml
@@ -16,7 +16,7 @@
           ":title" => '(list.label ? list.label.description : "")',
           data: { container: "body", placement: "bottom" },
           class: "label color-label title",
-          ":style" => "{ backgroundColor: (list.label && list.label.color ? list.label.color : null), color: (list.label && list.label.color ? \"$gl-white\" : \"#2e2e2e\"), fontWeight: 600, fontSize: \"1em\" }" }
+          ":style" => "{ backgroundColor: (list.label && list.label.color ? list.label.color : null), color: (list.label && list.label.color ? list.label.text_color : \"#2e2e2e\"), fontWeight: 600, fontSize: \"1em\" }" }
           {{ list.title }}
         .issue-count-badge.pull-right.clearfix{ "v-if" => 'list.type !== "blank"' }
           %span.issue-count-badge-count.pull-left{ ":class" => '{ "has-btn": list.type !== "closed" && !disabled }' }
diff --git a/spec/javascripts/boards/issue_card_spec.js b/spec/javascripts/boards/issue_card_spec.js
index bd9b4fbfdd3..683169f5c75 100644
--- a/spec/javascripts/boards/issue_card_spec.js
+++ b/spec/javascripts/boards/issue_card_spec.js
@@ -238,12 +238,6 @@ describe('Issue card component', () => {
   });
 
   describe('labels', () => {
-    it('does not render any', () => {
-      expect(
-        component.$el.querySelector('.label'),
-      ).toBeNull();
-    });
-
     describe('exists', () => {
       beforeEach((done) => {
         component.issue.addLabel(label1);
@@ -251,16 +245,22 @@ describe('Issue card component', () => {
         Vue.nextTick(() => done());
       });
 
-      it('does not render list label', () => {
+      it('renders list label', () => {
         expect(
           component.$el.querySelectorAll('.label').length,
-        ).toBe(1);
+        ).toBe(2);
       });
 
       it('renders label', () => {
+        const nodes = [];
+        component.$el.querySelectorAll('.label').forEach((label) => {
+          console.log(label)
+          nodes.push(label.title);
+        });
+
         expect(
-          component.$el.querySelector('.label').textContent,
-        ).toContain(label1.title);
+          nodes.includes(label1.description),
+        ).toBe(true);
       });
 
       it('sets label description as title', () => {
@@ -270,9 +270,14 @@ describe('Issue card component', () => {
       });
 
       it('sets background color of button', () => {
+        const nodes = [];
+        component.$el.querySelectorAll('.label').forEach((label) => {
+          nodes.push(label.style.backgroundColor);
+        });
+
         expect(
-          component.$el.querySelector('.label').style.backgroundColor,
-        ).toContain(label1.color);
+          nodes.includes(label1.color),
+        ).toBe(true);
       });
     });
   });