diff options
author | kushalpandya <kushal@gitlab.com> | 2017-08-01 12:08:09 +0300 |
---|---|---|
committer | kushalpandya <kushal@gitlab.com> | 2017-08-01 12:08:09 +0300 |
commit | 59377d54e91ba9acb309fe3cb1d4f942dbf43e54 (patch) | |
tree | 78675ad98796001abac4cb8a6c57e1d45d5d7125 /spec/javascripts/groups | |
parent | 53fb22bcc3458598de9cebd60ae64a5f96937d5e (diff) |
Tests for `group_identicon` component
Diffstat (limited to 'spec/javascripts/groups')
-rw-r--r-- | spec/javascripts/groups/group_identicon_spec.js | 82 |
1 files changed, 82 insertions, 0 deletions
diff --git a/spec/javascripts/groups/group_identicon_spec.js b/spec/javascripts/groups/group_identicon_spec.js new file mode 100644 index 00000000000..d9615646982 --- /dev/null +++ b/spec/javascripts/groups/group_identicon_spec.js @@ -0,0 +1,82 @@ +import Vue from 'vue'; +import groupIdenticonComponent from '~/groups/components/group_identicon.vue'; +import GroupsStore from '~/groups/stores/groups_store'; +import { group1 } from './mock_data'; + +const createComponent = () => { + const Component = Vue.extend(groupIdenticonComponent); + const store = new GroupsStore(); + const group = store.decorateGroup(group1); + + return new Component({ + el: document.createElement('div'), + propsData: { + entityId: group.id, + entityName: group.name, + }, + }); +}; + +describe('GroupIdenticonComponent', () => { + let vm; + let el; + + beforeEach(() => { + vm = createComponent(); + el = vm.$el; + }); + + describe('props', () => { + it('should have props with defined data types', (done) => { + const identiconProps = groupIdenticonComponent.props; + const EntityIdTypeClass = identiconProps.entityId.type; + const EntityNameTypeClass = identiconProps.entityName.type; + + Vue.nextTick(() => { + expect(identiconProps.entityId).toBeDefined(); + expect(new EntityIdTypeClass() instanceof Number).toBeTruthy(); + expect(identiconProps.entityId.required).toBeTruthy(); + + expect(identiconProps.entityName).toBeDefined(); + expect(new EntityNameTypeClass() instanceof String).toBeTruthy(); + expect(identiconProps.entityName.required).toBeTruthy(); + done(); + }); + }); + }); + + describe('computed', () => { + describe('identiconStyles', () => { + it('should return styles attribute value with `background-color` property', () => { + vm.entityId = 4; + + expect(vm.identiconStyles).toBeDefined(); + expect(vm.identiconStyles.indexOf('background-color: #E0F2F1;') > -1).toBeTruthy(); + }); + + it('should return styles attribute value with `color` property', () => { + vm.entityId = 4; + + expect(vm.identiconStyles).toBeDefined(); + expect(vm.identiconStyles.indexOf('color: #555;') > -1).toBeTruthy(); + }); + }); + + describe('identiconTitle', () => { + it('should return first letter of entity title in uppercase', () => { + vm.entityName = 'dummy-group'; + + expect(vm.identiconTitle).toBeDefined(); + expect(vm.identiconTitle).toBe('D'); + }); + }); + }); + + describe('template', () => { + it('should render identicon', () => { + expect(el.nodeName).toBe('DIV'); + expect(el.classList.contains('identicon')).toBeTruthy(); + expect(el.getAttribute('style').indexOf('background-color') > -1).toBeTruthy(); + }); + }); +}); |