Add latest changes from gitlab-org/gitlab@master

1 files changed, 51 insertions, 59 deletions

diff --git a/spec/frontend/projects/commits/components/author_select_spec.js b/spec/frontend/projects/commits/components/author_select_spec.js
index 630b8feafbc..50e3f2d0f37 100644
--- a/spec/frontend/projects/commits/components/author_select_spec.js
+++ b/spec/frontend/projects/commits/components/author_select_spec.js
@@ -1,12 +1,17 @@
-import { GlDropdown, GlDropdownSectionHeader, GlSearchBoxByType, GlDropdownItem } from '@gitlab/ui';
+import { GlCollapsibleListbox, GlListboxItem } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
-import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
+import { resetHTMLFixture, setHTMLFixture } from 'helpers/fixtures';
 import setWindowLocation from 'helpers/set_window_location_helper';
-import * as urlUtility from '~/lib/utils/url_utility';
 import AuthorSelect from '~/projects/commits/components/author_select.vue';
 import { createStore } from '~/projects/commits/store';
+import { visitUrl } from '~/lib/utils/url_utility';
+
+jest.mock('~/lib/utils/url_utility', () => ({
+  ...jest.requireActual('~/lib/utils/url_utility'),
+  visitUrl: jest.fn(),
+}));
 
 Vue.use(Vuex);
 
@@ -44,6 +49,10 @@ describe('Author Select', () => {
       propsData: {
         projectCommitsEl: document.querySelector('.js-project-commits-show'),
       },
+      stubs: {
+        GlCollapsibleListbox,
+        GlListboxItem,
+      },
     });
   };
 
@@ -58,11 +67,9 @@ describe('Author Select', () => {
     resetHTMLFixture();
   });
 
-  const findDropdownContainer = () => wrapper.findComponent({ ref: 'dropdownContainer' });
-  const findDropdown = () => wrapper.findComponent(GlDropdown);
-  const findDropdownHeader = () => wrapper.findComponent(GlDropdownSectionHeader);
-  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
-  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+  const findListboxContainer = () => wrapper.findComponent({ ref: 'listboxContainer' });
+  const findListbox = () => wrapper.findComponent(GlCollapsibleListbox);
+  const findListboxItems = () => wrapper.findAllComponents(GlListboxItem);
 
   describe('user is searching via "filter by commit message"', () => {
     beforeEach(() => {
@@ -70,24 +77,28 @@ describe('Author Select', () => {
       createComponent();
     });
 
-    it('does not disable dropdown container', () => {
-      expect(findDropdownContainer().attributes('disabled')).toBeUndefined();
+    it('does not disable listbox container', () => {
+      expect(findListboxContainer().attributes('disabled')).toBeUndefined();
     });
 
     it('has correct tooltip message', () => {
-      expect(findDropdownContainer().attributes('title')).toBe(
+      expect(findListboxContainer().attributes('title')).toBe(
         'Searching by both author and message is currently not supported.',
       );
     });
 
-    it('disables dropdown', () => {
-      expect(findDropdown().attributes('disabled')).toBeDefined();
+    it('disables listbox', () => {
+      expect(findListbox().attributes('disabled')).toBeDefined();
     });
   });
 
-  describe('dropdown', () => {
+  describe('listbox', () => {
+    beforeEach(() => {
+      store.state.commitsPath = commitsPath;
+    });
+
     it('displays correct default text', () => {
-      expect(findDropdown().attributes('text')).toBe('Author');
+      expect(findListbox().props('toggleText')).toBe('Author');
     });
 
     it('displays the current selected author', async () => {
@@ -95,81 +106,62 @@ describe('Author Select', () => {
       createComponent();
 
       await nextTick();
-      expect(findDropdown().attributes('text')).toBe(currentAuthor);
+      expect(findListbox().props('toggleText')).toBe(currentAuthor);
     });
 
     it('displays correct header text', () => {
-      expect(findDropdownHeader().text()).toBe('Search by author');
+      expect(findListbox().props('headerText')).toBe('Search by author');
     });
 
     it('does not have popover text by default', () => {
       expect(wrapper.attributes('title')).toBeUndefined();
     });
+
+    it('passes selected author to redirectPath', () => {
+      const redirectPath = `${commitsPath}?author=${currentAuthor}`;
+
+      findListbox().vm.$emit('select', currentAuthor);
+
+      expect(visitUrl).toHaveBeenCalledWith(redirectPath);
+    });
+
+    it('does not pass any author to redirectPath', () => {
+      const redirectPath = commitsPath;
+
+      findListbox().vm.$emit('select', '');
+
+      expect(visitUrl).toHaveBeenCalledWith(redirectPath);
+    });
   });
 
-  describe('dropdown search box', () => {
+  describe('listbox search box', () => {
     it('has correct placeholder', () => {
-      expect(findSearchBox().attributes('placeholder')).toBe('Search');
+      expect(findListbox().props('searchPlaceholder')).toBe('Search');
     });
 
     it('fetch authors on input change', () => {
       const authorName = 'lorem';
-      findSearchBox().vm.$emit('input', authorName);
+      findListbox().vm.$emit('search', authorName);
 
       expect(store.actions.fetchAuthors).toHaveBeenCalledWith(expect.anything(), authorName);
     });
   });
 
-  describe('dropdown list', () => {
+  describe('listbox list', () => {
     beforeEach(() => {
       store.state.commitsAuthors = authors;
-      store.state.commitsPath = commitsPath;
     });
 
     it('has a "Any Author" as the first list item', () => {
-      expect(findDropdownItems().at(0).text()).toBe('Any Author');
+      expect(findListboxItems().at(0).text()).toBe('Any Author');
     });
 
     it('displays the project authors', () => {
-      expect(findDropdownItems()).toHaveLength(authors.length + 1);
-    });
-
-    it('has the correct props', async () => {
-      setWindowLocation(`?author=${currentAuthor}`);
-      createComponent();
-
-      const [{ avatar_url: avatarUrl, username }] = authors;
-      const result = {
-        avatarUrl,
-        secondaryText: username,
-        isChecked: true,
-      };
-
-      await nextTick();
-      expect(findDropdownItems().at(1).props()).toEqual(expect.objectContaining(result));
+      expect(findListboxItems()).toHaveLength(authors.length + 1);
     });
 
     it("display the author's name", () => {
-      expect(findDropdownItems().at(1).text()).toBe(currentAuthor);
-    });
-
-    it('passes selected author to redirectPath', () => {
-      const redirectToUrl = `${commitsPath}?author=${currentAuthor}`;
-      const spy = jest.spyOn(urlUtility, 'redirectTo');
-      spy.mockImplementation(() => 'mock');
-
-      findDropdownItems().at(1).vm.$emit('click');
-
-      expect(spy).toHaveBeenCalledWith(redirectToUrl);
-    });
-
-    it('does not pass any author to redirectPath', () => {
-      const redirectToUrl = commitsPath;
-      const spy = jest.spyOn(urlUtility, 'redirectTo');
-      spy.mockImplementation();
-
-      findDropdownItems().at(0).vm.$emit('click');
-      expect(spy).toHaveBeenCalledWith(redirectToUrl);
+      expect(findListboxItems().at(1).text()).toContain(currentAuthor);
     });
   });
 });