1 files changed, 49 insertions, 24 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);
+    });
+  });
 });