Add latest changes from gitlab-org/gitlab@master

1 files changed, 79 insertions, 0 deletions

diff --git a/spec/frontend/vue_shared/components/dropdown/dropdown_widget_spec.js b/spec/frontend/vue_shared/components/dropdown/dropdown_widget_spec.js
new file mode 100644
index 00000000000..929bd34c10f
--- /dev/null
+++ b/spec/frontend/vue_shared/components/dropdown/dropdown_widget_spec.js
@@ -0,0 +1,79 @@
+import { GlDropdown, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+
+import DropdownWidget from '~/vue_shared/components/dropdown/dropdown_widget/dropdown_widget.vue';
+
+describe('DropdownWidget component', () => {
+  let wrapper;
+
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
+  const findSearch = () => wrapper.findComponent(GlSearchBoxByType);
+
+  const createComponent = ({ props = {} } = {}) => {
+    wrapper = shallowMount(DropdownWidget, {
+      propsData: {
+        ...props,
+        options: [
+          {
+            id: '1',
+            title: 'Option 1',
+          },
+          {
+            id: '2',
+            title: 'Option 2',
+          },
+        ],
+      },
+      stubs: {
+        GlDropdown,
+      },
+    });
+
+    // We need to mock out `showDropdown` which
+    // invokes `show` method of BDropdown used inside GlDropdown.
+    // Context: https://gitlab.com/gitlab-org/gitlab/-/merge_requests/54895#note_524281679
+    jest.spyOn(wrapper.vm, 'showDropdown').mockImplementation();
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('passes default selectText prop to dropdown', () => {
+    expect(findDropdown().props('text')).toBe('Select');
+  });
+
+  describe('when dropdown is open', () => {
+    beforeEach(async () => {
+      findDropdown().vm.$emit('show');
+      await wrapper.vm.$nextTick();
+    });
+
+    it('emits search event when typing in search box', () => {
+      const searchTerm = 'searchTerm';
+      findSearch().vm.$emit('input', searchTerm);
+
+      expect(wrapper.emitted('set-search')).toEqual([[searchTerm]]);
+    });
+
+    it('renders one selectable item per passed option', async () => {
+      expect(findDropdownItems()).toHaveLength(2);
+    });
+
+    it('emits set-option event when clicking on an option', async () => {
+      wrapper
+        .findAll('[data-testid="unselected-option"]')
+        .at(1)
+        .vm.$emit('click', new Event('click'));
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.emitted('set-option')).toEqual([[wrapper.props().options[1]]]);
+    });
+  });
+});