Add latest changes from gitlab-org/gitlab@15-7-stable-eev15.7.0-rc42

1 files changed, 104 insertions, 0 deletions

diff --git a/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_value_spec.js b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_value_spec.js
new file mode 100644
index 00000000000..585048983c9
--- /dev/null
+++ b/spec/frontend/sidebar/components/labels/labels_select_widget/dropdown_value_spec.js
@@ -0,0 +1,104 @@
+import { GlLabel } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+
+import DropdownValue from '~/sidebar/components/labels/labels_select_widget/dropdown_value.vue';
+
+import { mockRegularLabel, mockScopedLabel } from './mock_data';
+
+describe('DropdownValue', () => {
+  let wrapper;
+
+  const findAllLabels = () => wrapper.findAllComponents(GlLabel);
+  const findRegularLabel = () => findAllLabels().at(1);
+  const findScopedLabel = () => findAllLabels().at(0);
+  const findWrapper = () => wrapper.find('[data-testid="value-wrapper"]');
+  const findEmptyPlaceholder = () => wrapper.find('[data-testid="empty-placeholder"]');
+
+  const createComponent = (props = {}, slots = {}) => {
+    wrapper = shallowMount(DropdownValue, {
+      slots,
+      propsData: {
+        selectedLabels: [mockRegularLabel, mockScopedLabel],
+        allowLabelRemove: true,
+        labelsFilterBasePath: '/gitlab-org/my-project/issues',
+        labelsFilterParam: 'label_name',
+        ...props,
+      },
+      provide: {
+        allowScopedLabels: true,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when there are no labels', () => {
+    beforeEach(() => {
+      createComponent(
+        {
+          selectedLabels: [],
+        },
+        {
+          default: 'None',
+        },
+      );
+    });
+
+    it('does not apply `has-labels` class to the wrapping container', () => {
+      expect(findWrapper().classes()).not.toContain('has-labels');
+    });
+
+    it('renders an empty placeholder', () => {
+      expect(findEmptyPlaceholder().exists()).toBe(true);
+      expect(findEmptyPlaceholder().text()).toBe('None');
+    });
+
+    it('does not render any labels', () => {
+      expect(findAllLabels().length).toBe(0);
+    });
+  });
+
+  describe('when there are labels', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('applies `has-labels` class to the wrapping container', () => {
+      expect(findWrapper().classes()).toContain('has-labels');
+    });
+
+    it('does not render an empty placeholder', () => {
+      expect(findEmptyPlaceholder().exists()).toBe(false);
+    });
+
+    it('renders a list of two labels', () => {
+      expect(findAllLabels().length).toBe(2);
+    });
+
+    it('passes correct props to the regular label', () => {
+      expect(findRegularLabel().props('target')).toBe(
+        '/gitlab-org/my-project/issues?label_name[]=Foo%20Label',
+      );
+      expect(findRegularLabel().props('scoped')).toBe(false);
+    });
+
+    it('passes correct props to the scoped label', () => {
+      expect(findScopedLabel().props('target')).toBe(
+        '/gitlab-org/my-project/issues?label_name[]=Foo%3A%3ABar',
+      );
+      expect(findScopedLabel().props('scoped')).toBe(true);
+    });
+
+    it('emits `onLabelRemove` event with the correct ID', () => {
+      findRegularLabel().vm.$emit('close');
+      expect(wrapper.emitted('onLabelRemove')).toEqual([[mockRegularLabel.id]]);
+    });
+
+    it('emits `onCollapsedValueClick` when clicking on collapsed value', () => {
+      wrapper.find('.sidebar-collapsed-icon').trigger('click');
+      expect(wrapper.emitted('onCollapsedValueClick')).toEqual([[]]);
+    });
+  });
+});