Commit 3dcccdce authored by Fatih Acet's avatar Fatih Acet

Merge branch 'rk4bir-master-patch-97031' into 'master'

Resolve "Migrate '.fa-spinner' to '.spinner' for 'app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title.vue'"

See merge request gitlab-org/gitlab!24914
parents 7677dcf9 cf38ef16
<script>
import { GlLoadingIcon } from '@gitlab/ui';
export default {
components: {
GlLoadingIcon,
},
props: {
canEdit: {
type: Boolean,
......@@ -13,7 +18,7 @@ export default {
<div class="title hide-collapsed append-bottom-10">
{{ __('Labels') }}
<template v-if="canEdit">
<i aria-hidden="true" class="fa fa-spinner fa-spin block-loading" data-hidden="true"> </i>
<gl-loading-icon inline class="align-text-top block-loading" />
<button
type="button"
class="edit-link btn btn-blank float-right js-sidebar-dropdown-toggle"
......
---
title: Migrated the sidebar label select dropdown title component spinner to utilize GlLoadingIcon
merge_request: 24914
author: Raihan Kabir
type: changed
import Vue from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import { shallowMount } from '@vue/test-utils';
import { GlLoadingIcon } from '@gitlab/ui';
import dropdownTitleComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_title.vue';
const createComponent = (canEdit = true) => {
const Component = Vue.extend(dropdownTitleComponent);
return mountComponent(Component, {
canEdit,
const createComponent = (canEdit = true) =>
shallowMount(dropdownTitleComponent, {
propsData: {
canEdit,
},
});
};
describe('DropdownTitleComponent', () => {
let vm;
let wrapper;
beforeEach(() => {
vm = createComponent();
wrapper = createComponent();
});
afterEach(() => {
vm.$destroy();
wrapper.destroy();
wrapper = null;
});
describe('template', () => {
it('renders title text', () => {
expect(vm.$el.classList.contains('title', 'hide-collapsed')).toBe(true);
expect(vm.$el.innerText.trim()).toContain('Labels');
expect(wrapper.vm.$el.classList.contains('title', 'hide-collapsed')).toBe(true);
expect(wrapper.vm.$el.innerText.trim()).toContain('Labels');
});
it('renders spinner icon element', () => {
expect(vm.$el.querySelector('.fa-spinner.fa-spin.block-loading')).not.toBeNull();
expect(wrapper.find(GlLoadingIcon)).not.toBeNull();
});
it('renders `Edit` button element', () => {
const editBtnEl = vm.$el.querySelector('button.edit-link.js-sidebar-dropdown-toggle');
const editBtnEl = wrapper.vm.$el.querySelector('button.edit-link.js-sidebar-dropdown-toggle');
expect(editBtnEl).not.toBeNull();
expect(editBtnEl.innerText.trim()).toBe('Edit');
......
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