diff options
author | Alfredo Sumaran <alfredo@gitlab.com> | 2017-05-26 03:49:46 +0300 |
---|---|---|
committer | Alfredo Sumaran <alfredo@gitlab.com> | 2017-05-26 03:50:16 +0300 |
commit | b3666a7829951b028eab5b56e9b914bcb8cda835 (patch) | |
tree | 4e51d6438c82c5bb6cdd59748461c03616f82a29 /spec/javascripts/groups | |
parent | a472f078e236dfcf7dafcb9c1e4488f0baffc02e (diff) |
Add tests for Group item component
Also adds more tests fro groups folder component
[ci skip]
Diffstat (limited to 'spec/javascripts/groups')
-rw-r--r-- | spec/javascripts/groups/group_item_spec.js | 39 | ||||
-rw-r--r-- | spec/javascripts/groups/groups_spec.js | 62 | ||||
-rw-r--r-- | spec/javascripts/groups/mock_data.js | 94 |
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 }; |