Commit 9d572c70 authored by Kushal Pandya's avatar Kushal Pandya

Add `headerTitle` prop for container header string

parent eeb957ec
<script> <script>
import { __ } from '~/locale';
export default { export default {
props: {
headerTitle: {
type: String,
required: false,
default: () => __('Create new label'),
},
},
created() { created() {
this.suggestedColors = gon.suggested_label_colors; this.suggestedColors = gon.suggested_label_colors;
}, },
...@@ -21,7 +30,7 @@ export default { ...@@ -21,7 +30,7 @@ export default {
> >
</i> </i>
</button> </button>
{{ __('Create new label') }} {{ headerTitle }}
<button <button
type="button" type="button"
class="dropdown-title-button dropdown-menu-close" class="dropdown-title-button dropdown-menu-close"
......
...@@ -6,10 +6,12 @@ import { mockSuggestedColors } from './mock_data'; ...@@ -6,10 +6,12 @@ import { mockSuggestedColors } from './mock_data';
import mountComponent from '../../../../helpers/vue_mount_component_helper'; import mountComponent from '../../../../helpers/vue_mount_component_helper';
const createComponent = () => { const createComponent = (headerTitle) => {
const Component = Vue.extend(dropdownCreateLabelComponent); const Component = Vue.extend(dropdownCreateLabelComponent);
return mountComponent(Component); return mountComponent(Component, {
headerTitle,
});
}; };
describe('DropdownCreateLabelComponent', () => { describe('DropdownCreateLabelComponent', () => {
...@@ -41,11 +43,19 @@ describe('DropdownCreateLabelComponent', () => { ...@@ -41,11 +43,19 @@ describe('DropdownCreateLabelComponent', () => {
expect(backButtonEl.querySelector('.fa-arrow-left')).not.toBe(null); 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'); const headerEl = vm.$el.querySelector('.dropdown-title');
expect(headerEl.innerText.trim()).toContain('Create new label'); 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', () => { it('renders `Close` button on component header', () => {
const closeButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close'); const closeButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close');
expect(closeButtonEl).not.toBe(null); expect(closeButtonEl).not.toBe(null);
......
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