Address feedback

3 files changed, 54 insertions, 29 deletions

diff --git a/spec/javascripts/groups/group_item_spec.js b/spec/javascripts/groups/group_item_spec.js
index 47af735f4b4..64b0f31e435 100644
--- a/spec/javascripts/groups/group_item_spec.js
+++ b/spec/javascripts/groups/group_item_spec.js
@@ -3,39 +3,64 @@ import groupItemComponent from '~/groups/components/group_item.vue';
 import GroupsStore from '~/groups/stores/groups_store';
 import { group1 } from './mock_data';
 
-fdescribe('Groups Component', () => {
+describe('Groups Component', () => {
   let GroupItemComponent;
   let component;
   let store;
   let group;
 
-  beforeEach((done) => {
-    GroupItemComponent = Vue.extend(groupItemComponent);
-    store = new GroupsStore();
-    group = store.decorateGroup(group1);
+  describe('group with default data', () => {
+    beforeEach((done) => {
+      GroupItemComponent = Vue.extend(groupItemComponent);
+      store = new GroupsStore();
+      group = store.decorateGroup(group1);
 
-    component = new GroupItemComponent({
-      propsData: {
-        group,
-      },
-    }).$mount();
+      component = new GroupItemComponent({
+        propsData: {
+          group,
+        },
+      }).$mount();
 
-    Vue.nextTick(() => {
-      done();
+      Vue.nextTick(() => {
+        done();
+      });
     });
-  });
 
-  it('should render the group item', () => {
-    expect(component.$el.classList.contains('group-row')).toBe(true);
-    expect(component.$el.querySelector('.number-projects').textContent).toContain(group.numberProjects);
-    expect(component.$el.querySelector('.number-users').textContent).toContain(group.numberUsers);
-    expect(component.$el.querySelector('.group-visibility')).toBeDefined();
-    expect(component.$el.querySelector('.avatar-container')).toBeDefined();
-    expect(component.$el.querySelector('.title').textContent).toContain(group.name);
-    expect(component.$el.querySelector('.description').textContent).toContain(group.description);
-    expect(component.$el.querySelector('.edit-group')).toBeDefined();
-    expect(component.$el.querySelector('.leave-group')).toBeDefined();
+    it('should render the group item correctly', () => {
+      expect(component.$el.classList.contains('group-row')).toBe(true);
+      expect(component.$el.classList.contains('.no-description')).toBe(false);
+      expect(component.$el.querySelector('.number-projects').textContent).toContain(group.numberProjects);
+      expect(component.$el.querySelector('.number-users').textContent).toContain(group.numberUsers);
+      expect(component.$el.querySelector('.group-visibility')).toBeDefined();
+      expect(component.$el.querySelector('.avatar-container')).toBeDefined();
+      expect(component.$el.querySelector('.title').textContent).toContain(group.name);
+      expect(component.$el.querySelector('.description').textContent).toContain(group.description);
+      expect(component.$el.querySelector('.edit-group')).toBeDefined();
+      expect(component.$el.querySelector('.leave-group')).toBeDefined();
+    });
   });
 
-  // TODO: check for no description class when group has no description
+  describe('group without description', () => {
+    beforeEach((done) => {
+      GroupItemComponent = Vue.extend(groupItemComponent);
+      store = new GroupsStore();
+      group1.description = '';
+      group = store.decorateGroup(group1);
+
+      component = new GroupItemComponent({
+        propsData: {
+          group,
+        },
+      }).$mount();
+
+      Vue.nextTick(() => {
+        done();
+      });
+    });
+
+    it('should render group item correctly', () => {
+      expect(component.$el.querySelector('.description').textContent).toBe('');
+      expect(component.$el.classList.contains('.no-description')).toBe(false);
+    });
+  });
 });
diff --git a/spec/javascripts/groups/groups_spec.js b/spec/javascripts/groups/groups_spec.js
index dc144914c60..d1f900df3d8 100644
--- a/spec/javascripts/groups/groups_spec.js
+++ b/spec/javascripts/groups/groups_spec.js
@@ -5,7 +5,7 @@ import groupsComponent from '~/groups/components/groups.vue';
 import GroupsStore from '~/groups/stores/groups_store';
 import { groupsData } from './mock_data';
 
-fdescribe('Groups Component', () => {
+describe('Groups Component', () => {
   let GroupsComponent;
   let store;
   let component;
diff --git a/spec/javascripts/groups/mock_data.js b/spec/javascripts/groups/mock_data.js
index 98f2aa52135..9951abcc2dc 100644
--- a/spec/javascripts/groups/mock_data.js
+++ b/spec/javascripts/groups/mock_data.js
@@ -2,7 +2,7 @@ const group1 = {
   id: '12',
   name: 'level1',
   path: 'level1',
-  description: '',
+  description: 'foo',
   visibility: 'public',
   avatar_url: null,
   web_url: 'http://localhost:3000/groups/level1',
@@ -24,7 +24,7 @@ const group14 = {
   id: 1128,
   name: 'level4',
   path: 'level4',
-  description: '',
+  description: 'foo',
   visibility: 'public',
   avatar_url: null,
   web_url: 'http://localhost:3000/groups/level1/level2/level3/level4',
@@ -45,7 +45,7 @@ const group2 = {
   id: 1119,
   name: 'devops',
   path: 'devops',
-  description: '',
+  description: 'foo',
   visibility: 'public',
   avatar_url: null,
   web_url: 'http://localhost:3000/groups/devops',
@@ -66,7 +66,7 @@ const group21 = {
   id: 1120,
   name: 'chef',
   path: 'chef',
-  description: '',
+  description: 'foo',
   visibility: 'public',
   avatar_url: null,
   web_url: 'http://localhost:3000/groups/devops/chef',