Add tests for Group item component

app/assets/javascripts/groups/components/group_item.vue

@@ -24,6 +24,9 @@ export default {
     },
   },
   computed: {
+    groupDomId() {
+      return `group-${this.group.id}`;
+    },
     rowClass() {
       return {
         'group-row': true,
@@ -50,7 +53,7 @@ export default {
           const length = bfn.length;
           const start = gfn.indexOf(bfn);
 
-          fullPath = gfn.substr(start + length + 2);
+          fullPath = gfn.substr(start + length + 3);
         } else {
           fullPath = this.group.fullName;
         }
@@ -67,28 +70,28 @@ export default {
 <template>
   <li
     @click.stop="toggleSubGroups"
-    :id="group.id"
+    :id="groupDomId"
     :class="rowClass"
     >
     <div class="controls">
-      <a class="btn" href="#edit">
+      <a class="edit-group btn" href="#edit">
         <i aria-hidden="true" class="fa fa-cogs"></i>
       </a>
-      <a class="btn" title="Leave this group" href="#leave">
+      <a class="leave-group btn" title="Leave this group" href="#leave">
         <i aria-hidden="true" class="fa fa-sign-out"></i>
       </a>
     </div>
 
     <div class="stats">
-      <span >
+      <span class="number-projects">
         <i aria-hidden="true" class="fa fa-bookmark"></i>
         {{group.numberProjects}}
       </span>
-      <span>
+      <span class="number-members">
         <i aria-hidden="true" class="fa fa-users"></i>
         {{group.numberMembers}}
       </span>
-      <span>
+      <span class="group-visibility">
         <i aria-hidden="true" class="fa fa-globe"></i>
       </span>
     </div>

app/assets/javascripts/groups/stores/groups_store.js

@@ -9,14 +9,15 @@ export default class GroupsStore {
 
   setGroups(rawGroups, parent = null) {
     const parentGroup = parent;
+    const tree = this.buildTree(rawGroups);
 
     if (parentGroup) {
-      parentGroup.subGroups = this.buildTree(rawGroups);
+      parentGroup.subGroups = tree;
     } else {
-      this.state.groups = this.buildTree(rawGroups);
+      this.state.groups = tree;
     }
 
-    return rawGroups;
+    return tree;
   }
 
   storePagination(pagination = {}) {

spec/javascripts/groups/group_item_spec.js

+import Vue from 'vue';
+import groupItemComponent from '~/groups/components/group_item.vue';
+import GroupsStore from '~/groups/stores/groups_store';
+import { group1 } from './mock_data';
+
+describe('Groups Component', () => {
+  let GroupItemComponent;
+  let component;
+  let group;
+
+  beforeEach((done) => {
+    GroupItemComponent = Vue.extend(groupItemComponent);
+    group = GroupsStore.decorateGroup(group1);
+
+    component = new GroupItemComponent({
+      propsData: {
+        group,
+      },
+    }).$mount();
+
+    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-members').textContent).toContain(group.numberMembers);
+    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
+});

spec/javascripts/groups/groups_spec.js

 import Vue from 'vue';
-import GroupFolder from '~/groups/components/group_folder.vue';
-import GroupItem from '~/groups/components/group_item.vue';
+import groupFolderComponent from '~/groups/components/group_folder.vue';
+import groupItemComponent from '~/groups/components/group_item.vue';
 import groupsComponent from '~/groups/components/groups.vue';
 import GroupsStore from '~/groups/stores/groups_store';
-import groupsData from './mock_data';
+import { groupsData } from './mock_data';
 
-describe('Groups', () => {
+describe('Groups Component', () => {
   let GroupsComponent;
   let store;
+  let component;
+  let groups;
 
-  beforeEach(() => {
-    Vue.component('group-folder', GroupFolder);
-    Vue.component('group-item', GroupItem);
+  beforeEach((done) => {
+    Vue.component('group-folder', groupFolderComponent);
+    Vue.component('group-item', groupItemComponent);
 
     store = new GroupsStore();
-    store.setGroups(groupsData.groups);
+    groups = store.setGroups(groupsData.groups);
+
     store.storePagination(groupsData.pagination);
 
     GroupsComponent = Vue.extend(groupsComponent);
+
+    component = new GroupsComponent({
+      propsData: {
+        groups: store.state.groups,
+        pageInfo: store.state.pageInfo,
+      },
+    }).$mount();
+
+    Vue.nextTick(() => {
+      done();
+    });
   });
 
   describe('with data', () => {
-    it('should render a list of groups', (done) => {
-      const component = new GroupsComponent({
-        propsData: {
-          groups: store.state.groups,
-          pageInfo: store.state.pageInfo,
-        },
-      }).$mount();
-
-      setTimeout(() => {
-        expect(component.$el.classList.contains('groups-list-tree-container')).toBe(true);
-        done();
-      });
+    it('should render a list of groups', () => {
+      expect(component.$el.classList.contains('groups-list-tree-container')).toBe(true);
+      expect(component.$el.querySelector('#group-12')).toBeDefined();
+      expect(component.$el.querySelector('#group-1119')).toBeDefined();
+      expect(component.$el.querySelector('#group-1120')).toBeDefined();
+    });
+
+    it('should render group and its subgroup', () => {
+      const lists = component.$el.querySelectorAll('.group-list-tree');
+
+      expect(lists.length).toBe(3); // one parent and two subgroups
+
+      expect(lists[0].querySelector('#group-1119').classList.contains('is-open')).toBe(true);
+      expect(lists[0].querySelector('#group-1119').classList.contains('is-expandable')).toBe(true);
+
+      expect(lists[2].querySelector('#group-1120').textContent).toContain(groups[1119].subGroups[1120].name);
+    });
+
+    it('should remove prefix of parent group', () => {
+      expect(component.$el.querySelector('#group-12 #group-1128 .title').textContent).toContain('level2 / level3 / level4');
     });
   });
 });

spec/javascripts/groups/mock_data.js

-export default {
-  groups: [{
-    id: '12',
-    name: 'level1',
-    path: 'level1',
-    description: '',
-    visibility: 'public',
-    avatar_url: null,
-    web_url: 'http://localhost:3000/groups/level1',
-    full_name: 'level1',
-    full_path: 'level1',
-    parent_id: null,
-    created_at: '2017-05-15T19:01:23.670Z',
-    updated_at: '2017-05-15T19:01:23.670Z',
-    permissions: {
-      group_access: 50,
-    },
+const group1 = {
+  id: '12',
+  name: 'level1',
+  path: 'level1',
+  description: '',
+  visibility: 'public',
+  avatar_url: null,
+  web_url: 'http://localhost:3000/groups/level1',
+  full_name: 'level1',
+  full_path: 'level1',
+  parent_id: null,
+  created_at: '2017-05-15T19:01:23.670Z',
+  updated_at: '2017-05-15T19:01:23.670Z',
+  permissions: {
+    group_access: 50,
   },
-  ],
+};
+
+// This group has no direct parent, should be placed as subgroup of group1
+const group14 = {
+  id: 1128,
+  name: 'level4',
+  path: 'level4',
+  description: '',
+  visibility: 'public',
+  avatar_url: null,
+  web_url: 'http://localhost:3000/groups/level1/level2/level3/level4',
+  full_name: 'level1 / level2 / level3 / level4',
+  full_path: 'level1/level2/level3/level4',
+  parent_id: 1127,
+  created_at: '2017-05-15T19:02:01.645Z',
+  updated_at: '2017-05-15T19:02:01.645Z',
+  permissions: {
+    group_access: 30,
+  },
+};
+
+const group2 = {
+  id: 1119,
+  name: 'devops',
+  path: 'devops',
+  description: '',
+  visibility: 'public',
+  avatar_url: null,
+  web_url: 'http://localhost:3000/groups/devops',
+  full_name: 'devops',
+  full_path: 'devops',
+  parent_id: null,
+  created_at: '2017-05-11T19:35:09.635Z',
+  updated_at: '2017-05-11T19:35:09.635Z',
+  permissions: {
+    group_access: 50,
+  },
+};
+
+const group21 = {
+  id: 1120,
+  name: 'chef',
+  path: 'chef',
+  description: '',
+  visibility: 'public',
+  avatar_url: null,
+  web_url: 'http://localhost:3000/groups/devops/chef',
+  full_name: 'devops / chef',
+  full_path: 'devops/chef',
+  parent_id: 1119,
+  created_at: '2017-05-11T19:51:04.060Z',
+  updated_at: '2017-05-11T19:51:04.060Z',
+  permissions: {
+    group_access: 50,
+  },
+};
+
+const groupsData = {
+  groups: [group1, group14, group2, group21],
   pagination: {
     Date: 'Mon, 22 May 2017 22:31:52 GMT',
     'X-Prev-Page': '1',
@@ -38,3 +94,5 @@ export default {
     'X-Page': '2',
   },
 };
+
+export { groupsData, group1 };