Add basic tests for groups component

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

@@ -16,6 +16,6 @@ export default {
 
 <template>
   <ul class="content-list group-list-tree" v-show="hasGroups">
-    <group-item v-for="group in groups" :group="group" />
+    <group-item v-for="(group, index) in groups" :key="index" :group="group" />
   </ul>
 </template>

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

@@ -27,7 +27,7 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div class="groups-list-tree-container">
     <group-folder :groups="groups" />
     <gl-pagination
       :change="change"

app/assets/javascripts/pipelines/pipelines.js

@@ -277,9 +277,7 @@ export default {
 
         <gl-pagination
           v-if="shouldRenderPagination"
-          :pagenum="pagenum"
           :change="change"
-          :count="state.count.all"
           :pageInfo="state.pageInfo"/>
       </div>
     </div>

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 groupsComponent from '~/groups/components/groups.vue';
+import GroupsStore from '~/groups/stores/groups_store';
+import groupsData from './mock_data';
+
+describe('Groups', () => {
+  let GroupsComponent;
+  let store;
+
+  beforeEach(() => {
+    Vue.component('group-folder', GroupFolder);
+    Vue.component('group-item', GroupItem);
+
+    store = new GroupsStore();
+    store.setGroups(groupsData.groups);
+    store.storePagination(groupsData.pagination);
+
+    GroupsComponent = Vue.extend(groupsComponent);
+  });
+
+  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();
+      });
+    });
+  });
+});

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,
+    },
+  },
+  ],
+  pagination: {
+    Date: 'Mon, 22 May 2017 22:31:52 GMT',
+    'X-Prev-Page': '1',
+    'X-Content-Type-Options': 'nosniff',
+    'X-Total': '31',
+    'Transfer-Encoding': 'chunked',
+    'X-Runtime': '0.611144',
+    'X-Xss-Protection': '1; mode=block',
+    'X-Request-Id': 'f5db8368-3ce5-4aa4-89d2-a125d9dead09',
+    'X-Ua-Compatible': 'IE=edge',
+    'X-Per-Page': '20',
+    Link: '<http://localhost:3000/dashboard/groups.json?page=1&per_page=20>; rel="prev", <http://localhost:3000/dashboard/groups.json?page=1&per_page=20>; rel="first", <http://localhost:3000/dashboard/groups.json?page=2&per_page=20>; rel="last"',
+    'X-Next-Page': '',
+    Etag: 'W/"a82f846947136271cdb7d55d19ef33d2"',
+    'X-Frame-Options': 'DENY',
+    'Content-Type': 'application/json; charset=utf-8',
+    'Cache-Control': 'max-age=0, private, must-revalidate',
+    'X-Total-Pages': '2',
+    'X-Page': '2',
+  },
+};