Add tests for Group item component

Also adds more tests fro groups folder component

[ci skip]

1 files changed, 42 insertions, 20 deletions

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');
     });
   });
 });