Add tests for Group item component

Also adds more tests fro groups folder component

[ci skip]

3 files changed, 157 insertions, 38 deletions

diff --git a/spec/javascripts/groups/group_item_spec.js b/spec/javascripts/groups/group_item_spec.js
new file mode 100644
index 00000000000..08e22728aba
--- /dev/null
+++ b/spec/javascripts/groups/group_item_spec.js
@@ -0,0 +1,39 @@
+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
+});
diff --git a/spec/javascripts/groups/groups_spec.js b/spec/javascripts/groups/groups_spec.js
index 1427095f21a..47ca90551c7 100644
--- a/spec/javascripts/groups/groups_spec.js
+++ b/spec/javascripts/groups/groups_spec.js
@@ -1,38 +1,60 @@
 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');
     });
   });
 });
diff --git a/spec/javascripts/groups/mock_data.js b/spec/javascripts/groups/mock_data.js
index 14fe9ef71d0..7d6910137fe 100644
--- a/spec/javascripts/groups/mock_data.js
+++ b/spec/javascripts/groups/mock_data.js
@@ -1,22 +1,78 @@
-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 };