Add `headerTitle` prop for container header string
This commit is contained in:
parent
eeb957ec35
commit
9d572c702a
|
@ -1,5 +1,14 @@
|
|||
<script>
|
||||
import { __ } from '~/locale';
|
||||
|
||||
export default {
|
||||
props: {
|
||||
headerTitle: {
|
||||
type: String,
|
||||
required: false,
|
||||
default: () => __('Create new label'),
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.suggestedColors = gon.suggested_label_colors;
|
||||
},
|
||||
|
@ -21,7 +30,7 @@ export default {
|
|||
>
|
||||
</i>
|
||||
</button>
|
||||
{{ __('Create new label') }}
|
||||
{{ headerTitle }}
|
||||
<button
|
||||
type="button"
|
||||
class="dropdown-title-button dropdown-menu-close"
|
||||
|
|
|
@ -6,10 +6,12 @@ import { mockSuggestedColors } from './mock_data';
|
|||
|
||||
import mountComponent from '../../../../helpers/vue_mount_component_helper';
|
||||
|
||||
const createComponent = () => {
|
||||
const createComponent = (headerTitle) => {
|
||||
const Component = Vue.extend(dropdownCreateLabelComponent);
|
||||
|
||||
return mountComponent(Component);
|
||||
return mountComponent(Component, {
|
||||
headerTitle,
|
||||
});
|
||||
};
|
||||
|
||||
describe('DropdownCreateLabelComponent', () => {
|
||||
|
@ -41,11 +43,19 @@ describe('DropdownCreateLabelComponent', () => {
|
|||
expect(backButtonEl.querySelector('.fa-arrow-left')).not.toBe(null);
|
||||
});
|
||||
|
||||
it('renders component header element', () => {
|
||||
it('renders component header element as `Create new label` when `headerTitle` prop is not provided', () => {
|
||||
const headerEl = vm.$el.querySelector('.dropdown-title');
|
||||
expect(headerEl.innerText.trim()).toContain('Create new label');
|
||||
});
|
||||
|
||||
it('renders component header element with value of `headerTitle` prop', () => {
|
||||
const headerTitle = 'Create project label';
|
||||
const vmWithHeaderTitle = createComponent(headerTitle);
|
||||
const headerEl = vmWithHeaderTitle.$el.querySelector('.dropdown-title');
|
||||
expect(headerEl.innerText.trim()).toContain(headerTitle);
|
||||
vmWithHeaderTitle.$destroy();
|
||||
});
|
||||
|
||||
it('renders `Close` button on component header', () => {
|
||||
const closeButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close');
|
||||
expect(closeButtonEl).not.toBe(null);
|
||||
|
|
Loading…
Reference in New Issue