Commit 8a645d43 authored by Florie Guibert's avatar Florie Guibert Committed by Natalia Tepluhina

Labels widget follow up

parent 14ab76f9
......@@ -195,12 +195,12 @@ export default {
>
<template #header>
<dropdown-header
v-if="!isStandalone"
ref="header"
v-model="searchKey"
:search-key="searchKey"
:labels-create-title="labelsCreateTitle"
:labels-list-title="labelsListTitle"
:show-dropdown-contents-create-view="showDropdownContentsCreateView"
:is-standalone="isStandalone"
@toggleDropdownContentsCreateView="toggleDropdownContent"
@closeDropdown="$emit('closeDropdown')"
@input="debouncedSearchKeyUpdate"
......
......@@ -6,9 +6,6 @@ export default {
GlButton,
GlSearchBoxByType,
},
model: {
prop: 'searchKey',
},
props: {
labelsCreateTitle: {
type: String,
......@@ -31,6 +28,11 @@ export default {
type: String,
required: true,
},
isStandalone: {
type: Boolean,
required: false,
default: false,
},
},
computed: {
dropdownTitle() {
......@@ -47,7 +49,11 @@ export default {
<template>
<div data-testid="dropdown-header">
<div class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!">
<div
v-if="!isStandalone"
class="dropdown-title gl-display-flex gl-align-items-center gl-pt-0 gl-pb-3!"
data-testid="dropdown-header-title"
>
<gl-button
v-if="showDropdownContentsCreateView"
:aria-label="__('Go back')"
......
......@@ -286,7 +286,7 @@ export default {
<template>
<div
class="labels-select-wrapper position-relative"
class="labels-select-wrapper gl-relative"
:class="{
'is-standalone': isDropdownVariantStandalone(variant),
'is-embedded': isDropdownVariantEmbedded(variant),
......
......@@ -124,19 +124,7 @@ describe('DropdownContent', () => {
expect(wrapper.emitted('setLabels')).toEqual([[[updatedLabel]]]);
});
it('does not render header on standalone variant', () => {
createComponent({ props: { variant: DropdownVariant.Standalone } });
expect(findDropdownHeader().exists()).toBe(false);
});
it('renders header on embedded variant', () => {
createComponent({ props: { variant: DropdownVariant.Embedded } });
expect(findDropdownHeader().exists()).toBe(true);
});
it('renders header on sidebar variant', () => {
it('renders header', () => {
createComponent();
expect(findDropdownHeader().exists()).toBe(true);
......
......@@ -9,6 +9,7 @@ describe('DropdownHeader', () => {
const createComponent = ({
showDropdownContentsCreateView = false,
labelsFetchInProgress = false,
isStandalone = false,
} = {}) => {
wrapper = extendedWrapper(
shallowMount(DropdownHeader, {
......@@ -18,6 +19,7 @@ describe('DropdownHeader', () => {
labelsCreateTitle: 'Create label',
labelsListTitle: 'Select label',
searchKey: '',
isStandalone,
},
stubs: {
GlSearchBoxByType,
......@@ -32,6 +34,7 @@ describe('DropdownHeader', () => {
const findSearchInput = () => wrapper.findComponent(GlSearchBoxByType);
const findGoBackButton = () => wrapper.findByTestId('go-back-button');
const findDropdownTitle = () => wrapper.findByTestId('dropdown-header-title');
beforeEach(() => {
createComponent();
......@@ -72,4 +75,18 @@ describe('DropdownHeader', () => {
},
);
});
describe('Standalone variant', () => {
beforeEach(() => {
createComponent({ isStandalone: true });
});
it('renders search input', () => {
expect(findSearchInput().exists()).toBe(true);
});
it('does not render title', async () => {
expect(findDropdownTitle().exists()).toBe(false);
});
});
});
......@@ -75,9 +75,9 @@ describe('LabelsSelectRoot', () => {
wrapper.destroy();
});
it('renders component with classes `labels-select-wrapper position-relative`', () => {
it('renders component with classes `labels-select-wrapper gl-relative`', () => {
createComponent();
expect(wrapper.classes()).toEqual(['labels-select-wrapper', 'position-relative']);
expect(wrapper.classes()).toEqual(['labels-select-wrapper', 'gl-relative']);
});
it.each`
......
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