diff options
author | Bryce Johnson <bryce@gitlab.com> | 2017-04-16 02:38:07 +0300 |
---|---|---|
committer | Bryce Johnson <bryce@gitlab.com> | 2017-05-18 23:37:48 +0300 |
commit | 3c668fa04fd7e0a1d925e9666eb727ed3e83d145 (patch) | |
tree | 556d553c9b8915eee0337527f6f8feae0217d3e9 /spec/javascripts/vue_shared | |
parent | a3eabcc20c422db7032e31397c21dbc6ca3166de (diff) |
Consolidate user avatar Vue logic
Diffstat (limited to 'spec/javascripts/vue_shared')
6 files changed, 193 insertions, 3 deletions
diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js index 242010ba688..0638483e7aa 100644 --- a/spec/javascripts/vue_shared/components/commit_spec.js +++ b/spec/javascripts/vue_shared/components/commit_spec.js @@ -86,7 +86,7 @@ describe('Commit component', () => { it('Should render the author avatar with title and alt attributes', () => { expect( - component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('title'), + component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('data-original-title'), ).toContain(props.author.username); expect( component.$el.querySelector('.commit-title .avatar-image-container img').getAttribute('alt'), diff --git a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js index 14280751053..286118917e8 100644 --- a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js +++ b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js @@ -79,7 +79,7 @@ describe('Pipelines Table Row', () => { ).toEqual(pipeline.user.web_url); expect( - component.$el.querySelector('td:nth-child(2) img').getAttribute('title'), + component.$el.querySelector('td:nth-child(2) img').getAttribute('data-original-title'), ).toEqual(pipeline.user.name); }); }); @@ -102,7 +102,7 @@ describe('Pipelines Table Row', () => { } const commitAuthorLink = commitAuthorElement.getAttribute('href'); - const commitAuthorName = commitAuthorElement.querySelector('img.avatar').getAttribute('title'); + const commitAuthorName = commitAuthorElement.querySelector('img.avatar').getAttribute('data-original-title'); return { commitAuthorElement, commitAuthorLink, commitAuthorName }; }; diff --git a/spec/javascripts/vue_shared/components/user_avatar_image_spec.js b/spec/javascripts/vue_shared/components/user_avatar_image_spec.js new file mode 100644 index 00000000000..0b5ec736b1e --- /dev/null +++ b/spec/javascripts/vue_shared/components/user_avatar_image_spec.js @@ -0,0 +1,60 @@ +import Vue from 'vue'; +import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; + +const UserAvatarImageComponent = Vue.extend(UserAvatarImage); + +describe('User Avatar Image Component', function () { + describe('Initialization', function () { + beforeEach(function () { + this.propsData = { + size: 99, + imgSrc: 'myavatarurl.com', + imgAlt: 'mydisplayname', + cssClasses: 'myextraavatarclass', + tooltipText: 'tooltip text', + tooltipPlacement: 'bottom', + }; + + this.userAvatarImage = new UserAvatarImageComponent({ + propsData: this.propsData, + }).$mount(); + + this.imageElement = this.userAvatarImage.$el.outerHTML; + }); + + it('should return a defined Vue component', function () { + expect(this.userAvatarImage).toBeDefined(); + }); + + it('should have <img> as a child element', function () { + const componentImgTag = this.userAvatarImage.$el.outerHTML; + expect(componentImgTag).toContain('<img'); + }); + + it('should return neccessary props as defined', function () { + _.each(this.propsData, (val, key) => { + expect(this.userAvatarImage[key]).toBeDefined(); + }); + }); + + it('should properly compute tooltipContainer', function () { + expect(this.userAvatarImage.tooltipContainer).toBe('body'); + }); + + it('should properly render tooltipContainer', function () { + expect(this.imageElement).toContain('data-container="body"'); + }); + + it('should properly compute avatarSizeClass', function () { + expect(this.userAvatarImage.avatarSizeClass).toBe('s99'); + }); + + it('should properly compute imgCssClasses', function () { + expect(this.userAvatarImage.imgCssClasses).toBe('avatar s99 myextraavatarclass'); + }); + + it('should properly render imgCssClasses', function () { + expect(this.imageElement).toContain('avatar s99 myextraavatarclass'); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/user_avatar_link_spec.js b/spec/javascripts/vue_shared/components/user_avatar_link_spec.js new file mode 100644 index 00000000000..770daa9f0de --- /dev/null +++ b/spec/javascripts/vue_shared/components/user_avatar_link_spec.js @@ -0,0 +1,58 @@ +import Vue from 'vue'; +import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; + +describe('User Avatar Link Component', function () { + beforeEach(function () { + this.propsData = { + linkHref: 'myavatarurl.com', + imgSize: 99, + imgSrc: 'myavatarurl.com', + imgAlt: 'mydisplayname', + imgCssClasses: 'myextraavatarclass', + tooltipText: 'tooltip text', + tooltipPlacement: 'bottom', + }; + + const UserAvatarLinkComponent = Vue.extend(UserAvatarLink); + + this.userAvatarLink = new UserAvatarLinkComponent({ + propsData: this.propsData, + }).$mount(); + + this.userAvatarImage = this.userAvatarLink.$children[0]; + }); + + it('should return a defined Vue component', function () { + expect(this.userAvatarLink).toBeDefined(); + }); + + it('should have user-avatar-image registered as child component', function () { + expect(this.userAvatarLink.$options.components.userAvatarImage).toBeDefined(); + }); + + it('user-avatar-link should have user-avatar-image as child component', function () { + expect(this.userAvatarImage).toBeDefined(); + }); + + it('should render <a> as a child element', function () { + const componentLinkTag = this.userAvatarLink.$el.outerHTML; + expect(componentLinkTag).toContain('<a'); + }); + + it('should have <img> as a child element', function () { + const componentImgTag = this.userAvatarLink.$el.outerHTML; + expect(componentImgTag).toContain('<img'); + }); + + it('should return neccessary props as defined', function () { + _.each(this.propsData, (val, key) => { + expect(this.userAvatarLink[key]).toBeDefined(); + }); + }); + + it('should include props in the rendered output', function () { + _.each(this.propsData, (val) => { + expect(this.userAvatarLink.$el.outerHTML).toContain(val); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js b/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js new file mode 100644 index 00000000000..b37813cdb3d --- /dev/null +++ b/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js @@ -0,0 +1,37 @@ +import Vue from 'vue'; +import UserAvatarSizeMixin from '~/vue_shared/components/user_avatar/user_avatar_size_mixin'; + +describe('User Avatar Size Mixin', () => { + beforeEach(() => { + this.vueInstance = new Vue({ + data: { + size: 99, + }, + mixins: [UserAvatarSizeMixin], + }); + }); + + describe('#avatarSizeClass', () => { + it('should be a defined computed value', () => { + expect(this.vueInstance.avatarSizeClass).toBeDefined(); + }); + + it('should correctly transform size into the class name', () => { + expect(this.vueInstance.avatarSizeClass).toBe('s99'); + }); + }); + + describe('#avatarSizeStylesMap', () => { + it('should be a defined computed value', () => { + expect(this.vueInstance.avatarSizeStylesMap).toBeDefined(); + }); + + it('should return a correctly formatted styles width', () => { + expect(this.vueInstance.avatarSizeStylesMap.width).toBe('99px'); + }); + + it('should return a correctly formatted styles height', () => { + expect(this.vueInstance.avatarSizeStylesMap.height).toBe('99px'); + }); + }); +}); diff --git a/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js b/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js new file mode 100644 index 00000000000..809886c5dbd --- /dev/null +++ b/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js @@ -0,0 +1,35 @@ +import Vue from 'vue'; +import UserAvatarSvg from '~/vue_shared/components/user_avatar/user_avatar_svg.vue'; +import avatarSvg from 'icons/_icon_random.svg'; + +const UserAvatarSvgComponent = Vue.extend(UserAvatarSvg); + +describe('User Avatar Svg Component', function () { + describe('Initialization', function () { + beforeEach(function () { + this.propsData = { + size: 99, + svg: avatarSvg, + }; + + this.userAvatarSvg = new UserAvatarSvgComponent({ + propsData: this.propsData, + }).$mount(); + }); + + it('should return a defined Vue component', function () { + expect(this.userAvatarSvg).toBeDefined(); + }); + + it('should have <svg> as a child element', function () { + expect(this.userAvatarSvg.$el.tagName).toEqual('svg'); + expect(this.userAvatarSvg.$el.innerHTML).toContain('<path'); + }); + + it('should return neccessary props as defined', function () { + _.each(this.propsData, (val, key) => { + expect(this.userAvatarSvg[key]).toBeDefined(); + }); + }); + }); +}); |