Commit 667cd625 authored by Tim Zallmann's avatar Tim Zallmann

Improved Var Caching, Line Setup, Specs

parent 8e828bef
......@@ -39,7 +39,8 @@
computed: {
cssClass() {
return `${gl.text.dasherize(this.actionIcon)} js-icon-${gl.text.dasherize(this.actionIcon)}`;
const actionIconDash = gl.text.dasherize(this.actionIcon)
return `${actionIconDash} js-icon-${actionIconDash}`;
},
},
};
......@@ -53,7 +54,6 @@
class="ci-action-icon-container ci-action-icon-wrapper"
:class="cssClass"
data-container="body">
<icon
:name="actionIcon"/>
<icon :name="actionIcon"/>
</a>
</template>
......@@ -48,7 +48,6 @@
class="ci-action-icon-wrapper js-ci-status-icon"
data-container="body"
aria-label="Job's action">
<icon
:name="actionIcon"/>
<icon :name="actionIcon"/>
</a>
</template>
import Vue from 'vue';
import Icon from '~/vue_shared/components/icon.vue';
const IconComponent = Vue.extend(Icon);
import mountComponent from '../../helpers/vue_mount_component_helper';
describe('Sprite Icon Component', function () {
describe('Initialization', function () {
let icon;
beforeEach(function () {
this.propsData = {
const IconComponent = Vue.extend(Icon);
icon = mountComponent(IconComponent, {
name: 'test',
size: 99,
cssClasses: 'extraclasses',
};
});
});
this.icon = new IconComponent({
propsData: this.propsData,
}).$mount();
afterEach(() => {
icon.$destroy();
});
it('should return a defined Vue component', function () {
expect(this.icon).toBeDefined();
expect(icon).toBeDefined();
});
it('should have <svg> as a child element', function () {
expect(this.icon.$el.tagName).toBe('svg');
expect(icon.$el.tagName).toBe('svg');
});
it('should have <use> as a child element with the correct href', function () {
expect(this.icon.$el.firstChild.tagName).toBe('use');
expect(this.icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_icons}#test`);
expect(icon.$el.firstChild.tagName).toBe('use');
expect(icon.$el.firstChild.getAttribute('xlink:href')).toBe(`${gon.sprite_icons}#test`);
});
it('should properly compute iconSizeClass', function () {
expect(this.icon.iconSizeClass).toBe('s99');
expect(icon.iconSizeClass).toBe('s99');
});
it('should properly render img css', function () {
const classList = this.icon.$el.classList;
const classList = icon.$el.classList;
const containsSizeClass = classList.contains('s99');
const containsCustomClass = classList.contains('extraclasses');
expect(containsSizeClass).toBe(true);
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment