Add support for `sizeClass`, defaults to `s40`
This commit is contained in:
parent
c47e1c3975
commit
8c70224d18
|
@ -9,6 +9,11 @@ export default {
|
||||||
type: String,
|
type: String,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
sizeClass: {
|
||||||
|
type: String,
|
||||||
|
required: false,
|
||||||
|
default: 's40',
|
||||||
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
/**
|
/**
|
||||||
|
@ -38,7 +43,8 @@ export default {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
class="avatar s40 identicon"
|
class="avatar identicon"
|
||||||
|
:class="sizeClass"
|
||||||
:style="identiconStyles">
|
:style="identiconStyles">
|
||||||
{{identiconTitle}}
|
{{identiconTitle}}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,25 +1,30 @@
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import identiconComponent from '~/vue_shared/components/identicon.vue';
|
import identiconComponent from '~/vue_shared/components/identicon.vue';
|
||||||
|
|
||||||
const createComponent = () => {
|
const createComponent = (sizeClass) => {
|
||||||
const Component = Vue.extend(identiconComponent);
|
const Component = Vue.extend(identiconComponent);
|
||||||
|
|
||||||
return new Component({
|
return new Component({
|
||||||
propsData: {
|
propsData: {
|
||||||
entityId: 1,
|
entityId: 1,
|
||||||
entityName: 'entity-name',
|
entityName: 'entity-name',
|
||||||
|
sizeClass,
|
||||||
},
|
},
|
||||||
}).$mount();
|
}).$mount();
|
||||||
};
|
};
|
||||||
|
|
||||||
describe('IdenticonComponent', () => {
|
describe('IdenticonComponent', () => {
|
||||||
let vm;
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
vm = createComponent();
|
|
||||||
});
|
|
||||||
|
|
||||||
describe('computed', () => {
|
describe('computed', () => {
|
||||||
|
let vm;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
vm = createComponent();
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
vm.$destroy();
|
||||||
|
});
|
||||||
|
|
||||||
describe('identiconStyles', () => {
|
describe('identiconStyles', () => {
|
||||||
it('should return styles attribute value with `background-color` property', () => {
|
it('should return styles attribute value with `background-color` property', () => {
|
||||||
vm.entityId = 4;
|
vm.entityId = 4;
|
||||||
|
@ -48,9 +53,20 @@ describe('IdenticonComponent', () => {
|
||||||
|
|
||||||
describe('template', () => {
|
describe('template', () => {
|
||||||
it('should render identicon', () => {
|
it('should render identicon', () => {
|
||||||
|
const vm = createComponent();
|
||||||
|
|
||||||
expect(vm.$el.nodeName).toBe('DIV');
|
expect(vm.$el.nodeName).toBe('DIV');
|
||||||
expect(vm.$el.classList.contains('identicon')).toBeTruthy();
|
expect(vm.$el.classList.contains('identicon')).toBeTruthy();
|
||||||
|
expect(vm.$el.classList.contains('s40')).toBeTruthy();
|
||||||
expect(vm.$el.getAttribute('style').indexOf('background-color') > -1).toBeTruthy();
|
expect(vm.$el.getAttribute('style').indexOf('background-color') > -1).toBeTruthy();
|
||||||
|
vm.$destroy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should render identicon with provided sizing class', () => {
|
||||||
|
const vm = createComponent('s32');
|
||||||
|
|
||||||
|
expect(vm.$el.classList.contains('s32')).toBeTruthy();
|
||||||
|
vm.$destroy();
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in New Issue