diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-13 12:10:22 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-06-13 12:10:22 +0300 |
commit | 10e15ac3c2798956ff6a43d7b36bdf86c68aa817 (patch) | |
tree | 491a448439d1c2f43258d0418c53e8cc00b51039 /spec/frontend | |
parent | 1cd5d53f92b07b0be71b6c2d9fdfa7cf07221890 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
13 files changed, 335 insertions, 88 deletions
diff --git a/spec/frontend/boards/project_select_spec.js b/spec/frontend/boards/project_select_spec.js index 74ce4b6b786..b4308b38947 100644 --- a/spec/frontend/boards/project_select_spec.js +++ b/spec/frontend/boards/project_select_spec.js @@ -1,17 +1,11 @@ -import { - GlDropdown, - GlDropdownItem, - GlFormInput, - GlSearchBoxByType, - GlLoadingIcon, -} from '@gitlab/ui'; +import { GlCollapsibleListbox, GlListboxItem, GlLoadingIcon } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; import Vue, { nextTick } from 'vue'; import Vuex from 'vuex'; import ProjectSelect from '~/boards/components/project_select.vue'; import defaultState from '~/boards/stores/state'; -import { mockList, mockActiveGroupProjects } from './mock_data'; +import { mockActiveGroupProjects, mockList } from './mock_data'; const mockProjectsList1 = mockActiveGroupProjects.slice(0, 1); @@ -20,14 +14,17 @@ describe('ProjectSelect component', () => { let store; const findLabel = () => wrapper.find("[data-testid='header-label']"); - const findGlDropdown = () => wrapper.findComponent(GlDropdown); + const findGlCollapsibleListBox = () => wrapper.findComponent(GlCollapsibleListbox); const findGlDropdownLoadingIcon = () => - findGlDropdown().find('button:first-child').findComponent(GlLoadingIcon); - const findGlSearchBoxByType = () => wrapper.findComponent(GlSearchBoxByType); - const findGlDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); - const findFirstGlDropdownItem = () => findGlDropdownItems().at(0); - const findInMenuLoadingIcon = () => wrapper.find("[data-testid='dropdown-text-loading-icon']"); - const findEmptySearchMessage = () => wrapper.find("[data-testid='empty-result-message']"); + findGlCollapsibleListBox() + .find("[data-testid='base-dropdown-toggle'") + .findComponent(GlLoadingIcon); + const findGlListboxSearchInput = () => + wrapper.find("[data-testid='listbox-search-input'] > .gl-listbox-search-input"); + const findGlListboxItem = () => wrapper.findAllComponents(GlListboxItem); + const findFirstGlDropdownItem = () => findGlListboxItem().at(0); + const findInMenuLoadingIcon = () => wrapper.find("[data-testid='listbox-search-loader']"); + const findEmptySearchMessage = () => wrapper.find("[data-testid='listbox-no-results-text']"); const createStore = ({ state, activeGroupProjects }) => { Vue.use(Vuex); @@ -80,8 +77,8 @@ describe('ProjectSelect component', () => { it('renders a default dropdown text', () => { createWrapper(); - expect(findGlDropdown().exists()).toBe(true); - expect(findGlDropdown().text()).toContain('Select a project'); + expect(findGlCollapsibleListBox().exists()).toBe(true); + expect(findGlCollapsibleListBox().text()).toContain('Select a project'); }); describe('when mounted', () => { @@ -102,12 +99,9 @@ describe('ProjectSelect component', () => { createWrapper({ activeGroupProjects: mockActiveGroupProjects }); }); - it('shows GlSearchBoxByType with default attributes', () => { - expect(findGlSearchBoxByType().exists()).toBe(true); - expect(findGlSearchBoxByType().vm.$attrs).toMatchObject({ - placeholder: 'Search projects', - debounce: '250', - }); + it('shows GlListboxSearchInput with placeholder text', () => { + expect(findGlListboxSearchInput().exists()).toBe(true); + expect(findGlListboxSearchInput().attributes('placeholder')).toBe('Search projects'); }); it("displays the fetched project's name", () => { @@ -116,23 +110,12 @@ describe('ProjectSelect component', () => { }); it("doesn't render loading icon in the menu", () => { - expect(findInMenuLoadingIcon().isVisible()).toBe(false); + expect(findInMenuLoadingIcon().exists()).toBe(false); }); it('does not render empty search result message', () => { expect(findEmptySearchMessage().exists()).toBe(false); }); - - it('focuses on the search input', async () => { - const dropdownToggle = findGlDropdown().find('.dropdown-toggle'); - - await dropdownToggle.trigger('click'); - jest.runOnlyPendingTimers(); - await nextTick(); - - const searchInput = findGlDropdown().findComponent(GlFormInput).element; - expect(document.activeElement).toBe(searchInput); - }); }); describe('when no projects are being returned', () => { @@ -147,11 +130,11 @@ describe('ProjectSelect component', () => { beforeEach(() => { createWrapper({ activeGroupProjects: mockProjectsList1 }); - findFirstGlDropdownItem().find('button').trigger('click'); + findFirstGlDropdownItem().find('li').trigger('click'); }); it('renders the name of the selected project', () => { - expect(findGlDropdown().find('.gl-dropdown-button-text').text()).toBe( + expect(findGlCollapsibleListBox().find('.gl-new-dropdown-button-text').text()).toBe( mockProjectsList1[0].name, ); }); diff --git a/spec/frontend/contribution_events/components/contribution_event/contribution_event_approved_spec.js b/spec/frontend/contribution_events/components/contribution_event/contribution_event_approved_spec.js new file mode 100644 index 00000000000..6672d3eb18b --- /dev/null +++ b/spec/frontend/contribution_events/components/contribution_event/contribution_event_approved_spec.js @@ -0,0 +1,47 @@ +import events from 'test_fixtures/controller/users/activity.json'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; +import { EVENT_TYPE_APPROVED } from '~/contribution_events/constants'; +import ContributionEventApproved from '~/contribution_events/components/contribution_event/contribution_event_approved.vue'; +import ContributionEventBase from '~/contribution_events/components/contribution_event/contribution_event_base.vue'; +import TargetLink from '~/contribution_events/components/target_link.vue'; +import ResourceParentLink from '~/contribution_events/components/resource_parent_link.vue'; + +const eventApproved = events.find((event) => event.action === EVENT_TYPE_APPROVED); + +describe('ContributionEventApproved', () => { + let wrapper; + + const createComponent = () => { + wrapper = mountExtended(ContributionEventApproved, { + propsData: { + event: eventApproved, + }, + }); + }; + + beforeEach(() => { + createComponent(); + }); + + it('renders `ContributionEventBase`', () => { + expect(wrapper.findComponent(ContributionEventBase).props()).toEqual({ + event: eventApproved, + iconName: 'approval-solid', + iconClass: 'gl-text-green-500', + }); + }); + + it('renders message', () => { + expect(wrapper.findByTestId('event-body').text()).toBe( + `Approved merge request ${eventApproved.target.reference_link_text} in ${eventApproved.resource_parent.full_name}.`, + ); + }); + + it('renders target link', () => { + expect(wrapper.findComponent(TargetLink).props('event')).toEqual(eventApproved); + }); + + it('renders resource parent link', () => { + expect(wrapper.findComponent(ResourceParentLink).props('event')).toEqual(eventApproved); + }); +}); diff --git a/spec/frontend/contribution_events/components/contribution_event/contribution_event_base_spec.js b/spec/frontend/contribution_events/components/contribution_event/contribution_event_base_spec.js new file mode 100644 index 00000000000..8c951e20bed --- /dev/null +++ b/spec/frontend/contribution_events/components/contribution_event/contribution_event_base_spec.js @@ -0,0 +1,62 @@ +import { GlAvatarLabeled, GlAvatarLink, GlIcon } from '@gitlab/ui'; +import events from 'test_fixtures/controller/users/activity.json'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import ContributionEventBase from '~/contribution_events/components/contribution_event/contribution_event_base.vue'; +import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; + +const [event] = events; + +describe('ContributionEventBase', () => { + let wrapper; + + const defaultPropsData = { + event, + iconName: 'approval-solid', + iconClass: 'gl-text-green-500', + }; + + const createComponent = () => { + wrapper = shallowMountExtended(ContributionEventBase, { + propsData: defaultPropsData, + scopedSlots: { + default: '<div data-testid="default-slot"></div>', + 'additional-info': '<div data-testid="additional-info-slot"></div>', + }, + }); + }; + + beforeEach(() => { + createComponent(); + }); + + it('renders avatar', () => { + const avatarLink = wrapper.findComponent(GlAvatarLink); + + expect(avatarLink.attributes('href')).toBe(event.author.web_url); + expect(avatarLink.findComponent(GlAvatarLabeled).attributes()).toMatchObject({ + label: event.author.name, + sublabel: `@${event.author.username}`, + src: event.author.avatar_url, + size: '32', + }); + }); + + it('renders time ago tooltip', () => { + expect(wrapper.findComponent(TimeAgoTooltip).props('time')).toBe(event.created_at); + }); + + it('renders icon', () => { + const icon = wrapper.findComponent(GlIcon); + + expect(icon.props('name')).toBe(defaultPropsData.iconName); + expect(icon.classes()).toContain(defaultPropsData.iconClass); + }); + + it('renders `default` slot', () => { + expect(wrapper.findByTestId('default-slot').exists()).toBe(true); + }); + + it('renders `additional-info` slot', () => { + expect(wrapper.findByTestId('additional-info-slot').exists()).toBe(true); + }); +}); diff --git a/spec/frontend/contribution_events/components/contribution_events_spec.js b/spec/frontend/contribution_events/components/contribution_events_spec.js new file mode 100644 index 00000000000..4bc354c393f --- /dev/null +++ b/spec/frontend/contribution_events/components/contribution_events_spec.js @@ -0,0 +1,31 @@ +import events from 'test_fixtures/controller/users/activity.json'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { EVENT_TYPE_APPROVED } from '~/contribution_events/constants'; +import ContributionEvents from '~/contribution_events/components/contribution_events.vue'; +import ContributionEventApproved from '~/contribution_events/components/contribution_event/contribution_event_approved.vue'; + +const eventApproved = events.find((event) => event.action === EVENT_TYPE_APPROVED); + +describe('ContributionEvents', () => { + let wrapper; + + const createComponent = () => { + wrapper = shallowMountExtended(ContributionEvents, { + propsData: { + events, + }, + }); + }; + + it.each` + expectedComponent | expectedEvent + ${ContributionEventApproved} | ${eventApproved} + `( + 'renders `$expectedComponent.name` component and passes expected event', + ({ expectedComponent, expectedEvent }) => { + createComponent(); + + expect(wrapper.findComponent(expectedComponent).props('event')).toEqual(expectedEvent); + }, + ); +}); diff --git a/spec/frontend/contribution_events/components/resource_parent_link_spec.js b/spec/frontend/contribution_events/components/resource_parent_link_spec.js new file mode 100644 index 00000000000..8d586db2a30 --- /dev/null +++ b/spec/frontend/contribution_events/components/resource_parent_link_spec.js @@ -0,0 +1,30 @@ +import { GlLink } from '@gitlab/ui'; +import events from 'test_fixtures/controller/users/activity.json'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { EVENT_TYPE_APPROVED } from '~/contribution_events/constants'; +import ResourceParentLink from '~/contribution_events/components/resource_parent_link.vue'; + +const eventApproved = events.find((event) => event.action === EVENT_TYPE_APPROVED); + +describe('ResourceParentLink', () => { + let wrapper; + + const createComponent = () => { + wrapper = shallowMountExtended(ResourceParentLink, { + propsData: { + event: eventApproved, + }, + }); + }; + + beforeEach(() => { + createComponent(); + }); + + it('renders link', () => { + const link = wrapper.findComponent(GlLink); + + expect(link.attributes('href')).toBe(eventApproved.resource_parent.web_url); + expect(link.text()).toBe(eventApproved.resource_parent.full_name); + }); +}); diff --git a/spec/frontend/contribution_events/components/target_link_spec.js b/spec/frontend/contribution_events/components/target_link_spec.js new file mode 100644 index 00000000000..7944375487b --- /dev/null +++ b/spec/frontend/contribution_events/components/target_link_spec.js @@ -0,0 +1,33 @@ +import { GlLink } from '@gitlab/ui'; +import events from 'test_fixtures/controller/users/activity.json'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { EVENT_TYPE_APPROVED } from '~/contribution_events/constants'; +import TargetLink from '~/contribution_events/components/target_link.vue'; + +const eventApproved = events.find((event) => event.action === EVENT_TYPE_APPROVED); + +describe('TargetLink', () => { + let wrapper; + + const createComponent = () => { + wrapper = shallowMountExtended(TargetLink, { + propsData: { + event: eventApproved, + }, + }); + }; + + beforeEach(() => { + createComponent(); + }); + + it('renders link', () => { + const link = wrapper.findComponent(GlLink); + + expect(link.attributes()).toMatchObject({ + href: eventApproved.target.web_url, + title: eventApproved.target.title, + }); + expect(link.text()).toBe(eventApproved.target.reference_link_text); + }); +}); diff --git a/spec/frontend/issuable/components/csv_import_export_buttons_spec.js b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js index 0e2f71fa3ee..4b4deafcabd 100644 --- a/spec/frontend/issuable/components/csv_import_export_buttons_spec.js +++ b/spec/frontend/issuable/components/csv_import_export_buttons_spec.js @@ -32,9 +32,9 @@ describe('CsvImportExportButtons', () => { }); } - const findExportCsvButton = () => wrapper.findByRole('menuitem', { name: 'Export as CSV' }); - const findImportCsvButton = () => wrapper.findByRole('menuitem', { name: 'Import CSV' }); - const findImportFromJiraLink = () => wrapper.findByRole('menuitem', { name: 'Import from Jira' }); + const findExportCsvButton = () => wrapper.findByTestId('export-as-csv-button'); + const findImportCsvButton = () => wrapper.findByTestId('import-from-csv-button'); + const findImportFromJiraLink = () => wrapper.findByTestId('import-from-jira-link'); const findExportCsvModal = () => wrapper.findComponent(CsvExportModal); const findImportCsvModal = () => wrapper.findComponent(CsvImportModal); @@ -111,7 +111,7 @@ describe('CsvImportExportButtons', () => { }); it('passes the proper path to the link', () => { - expect(findImportFromJiraLink().attributes('href')).toBe(projectImportJiraPath); + expect(findImportFromJiraLink().props('item').href).toBe(projectImportJiraPath); }); }); diff --git a/spec/frontend/issues/list/components/empty_state_without_any_issues_spec.js b/spec/frontend/issues/list/components/empty_state_without_any_issues_spec.js index 4ea3a39f15b..a61e7ed1e86 100644 --- a/spec/frontend/issues/list/components/empty_state_without_any_issues_spec.js +++ b/spec/frontend/issues/list/components/empty_state_without_any_issues_spec.js @@ -1,4 +1,4 @@ -import { GlDropdown, GlEmptyState, GlLink } from '@gitlab/ui'; +import { GlDisclosureDropdown, GlEmptyState, GlLink } from '@gitlab/ui'; import { mountExtended } from 'helpers/vue_test_utils_helper'; import CsvImportExportButtons from '~/issuable/components/csv_import_export_buttons.vue'; import EmptyStateWithoutAnyIssues from '~/issues/list/components/empty_state_without_any_issues.vue'; @@ -26,7 +26,7 @@ describe('EmptyStateWithoutAnyIssues component', () => { }; const findCsvImportExportButtons = () => wrapper.findComponent(CsvImportExportButtons); - const findCsvImportExportDropdown = () => wrapper.findComponent(GlDropdown); + const findCsvImportExportDropdown = () => wrapper.findComponent(GlDisclosureDropdown); const findGlEmptyState = () => wrapper.findComponent(GlEmptyState); const findGlLink = () => wrapper.findComponent(GlLink); const findIssuesHelpPageLink = () => @@ -136,7 +136,7 @@ describe('EmptyStateWithoutAnyIssues component', () => { it('renders', () => { mountComponent({ props: { showCsvButtons: true } }); - expect(findCsvImportExportDropdown().props('text')).toBe('Import issues'); + expect(findCsvImportExportDropdown().props('toggleText')).toBe('Import issues'); expect(findCsvImportExportButtons().props()).toMatchObject({ exportCsvPath: defaultProps.exportCsvPathWithQuery, issuableCount: 0, diff --git a/spec/frontend/issues/list/components/issues_list_app_spec.js b/spec/frontend/issues/list/components/issues_list_app_spec.js index 4f37717c933..0e87e5e6595 100644 --- a/spec/frontend/issues/list/components/issues_list_app_spec.js +++ b/spec/frontend/issues/list/components/issues_list_app_spec.js @@ -1,4 +1,4 @@ -import { GlButton, GlDropdown } from '@gitlab/ui'; +import { GlButton, GlDisclosureDropdown } from '@gitlab/ui'; import * as Sentry from '@sentry/browser'; import { mount, shallowMount } from '@vue/test-utils'; import AxiosMockAdapter from 'axios-mock-adapter'; @@ -15,10 +15,10 @@ import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_help import { stubComponent } from 'helpers/stub_component'; import waitForPromises from 'helpers/wait_for_promises'; import { + filteredTokens, getIssuesCountsQueryResponse, - getIssuesQueryResponse, getIssuesQueryEmptyResponse, - filteredTokens, + getIssuesQueryResponse, locationSearch, setSortPreferenceMutationResponse, setSortPreferenceMutationResponseWithErrors, @@ -129,10 +129,8 @@ describe('CE IssuesListApp component', () => { const mockIssuesQueryResponse = jest.fn().mockResolvedValue(defaultQueryResponse); const mockIssuesCountsQueryResponse = jest.fn().mockResolvedValue(getIssuesCountsQueryResponse); - const findCalendarButton = () => - wrapper.findByRole('menuitem', { name: IssuesListApp.i18n.calendarLabel }); const findCsvImportExportButtons = () => wrapper.findComponent(CsvImportExportButtons); - const findDropdown = () => wrapper.findComponent(GlDropdown); + const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown); const findIssuableByEmail = () => wrapper.findComponent(IssuableByEmail); const findGlButton = () => wrapper.findComponent(GlButton); const findGlButtons = () => wrapper.findAllComponents(GlButton); @@ -141,7 +139,8 @@ describe('CE IssuesListApp component', () => { const findGridtViewTypeBtn = () => wrapper.findByTestId('grid-view-type'); const findViewTypeLocalStorageSync = () => wrapper.findAllComponents(LocalStorageSync).at(0); const findNewResourceDropdown = () => wrapper.findComponent(NewResourceDropdown); - const findRssButton = () => wrapper.findByRole('menuitem', { name: IssuesListApp.i18n.rssLabel }); + const findCalendarButton = () => wrapper.findByTestId('subscribe-calendar'); + const findRssButton = () => wrapper.findByTestId('subscribe-rss'); const findLabelsToken = () => findIssuableList() @@ -250,7 +249,7 @@ describe('CE IssuesListApp component', () => { expect(findDropdown().props()).toMatchObject({ category: 'tertiary', icon: 'ellipsis_v', - text: 'Actions', + toggleText: 'Actions', textSrOnly: true, }); }); diff --git a/spec/frontend/profile/components/overview_tab_spec.js b/spec/frontend/profile/components/overview_tab_spec.js index aeab24cb730..0122735e8a3 100644 --- a/spec/frontend/profile/components/overview_tab_spec.js +++ b/spec/frontend/profile/components/overview_tab_spec.js @@ -1,27 +1,47 @@ import { GlLoadingIcon, GlTab, GlLink } from '@gitlab/ui'; +import AxiosMockAdapter from 'axios-mock-adapter'; import projects from 'test_fixtures/api/users/projects/get.json'; +import events from 'test_fixtures/controller/users/activity.json'; import { s__ } from '~/locale'; import OverviewTab from '~/profile/components/overview_tab.vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import ActivityCalendar from '~/profile/components/activity_calendar.vue'; import ProjectsList from '~/vue_shared/components/projects_list/projects_list.vue'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; +import axios from '~/lib/utils/axios_utils'; +import ContributionEvents from '~/contribution_events/components/contribution_events.vue'; +import { createAlert } from '~/alert'; +import waitForPromises from 'helpers/wait_for_promises'; + +jest.mock('~/alert'); describe('OverviewTab', () => { let wrapper; + let axiosMock; const defaultPropsData = { personalProjects: convertObjectPropsToCamelCase(projects, { deep: true }), personalProjectsLoading: false, }; + const defaultProvide = { userActivityPath: '/users/root/activity.json' }; + const createComponent = ({ propsData = {} } = {}) => { wrapper = shallowMountExtended(OverviewTab, { propsData: { ...defaultPropsData, ...propsData }, + provide: defaultProvide, }); }; + beforeEach(() => { + axiosMock = new AxiosMockAdapter(axios); + }); + + afterEach(() => { + axiosMock.restore(); + }); + it('renders `GlTab` and sets `title` prop', () => { createComponent(); @@ -70,4 +90,50 @@ describe('OverviewTab', () => { ).toMatchObject(defaultPropsData.personalProjects); }); }); + + describe('when activity API request is loading', () => { + beforeEach(() => { + axiosMock.onGet(defaultProvide.userActivityPath).reply(200, events); + + createComponent(); + }); + + it('shows loading icon', () => { + expect(wrapper.findByTestId('activity-section').findComponent(GlLoadingIcon).exists()).toBe( + true, + ); + }); + }); + + describe('when activity API request is successful', () => { + beforeEach(() => { + axiosMock.onGet(defaultProvide.userActivityPath).reply(200, events); + + createComponent(); + }); + + it('renders `ContributionEvents` component', async () => { + await waitForPromises(); + + expect(wrapper.findComponent(ContributionEvents).props('events')).toEqual(events); + }); + }); + + describe('when activity API request is not successful', () => { + beforeEach(() => { + axiosMock.onGet(defaultProvide.userActivityPath).networkError(); + + createComponent(); + }); + + it('calls `createAlert`', async () => { + await waitForPromises(); + + expect(createAlert).toHaveBeenCalledWith({ + message: OverviewTab.i18n.eventsErrorMessage, + error: new Error('Network Error'), + captureError: true, + }); + }); + }); }); diff --git a/spec/frontend/search/sidebar/components/scope_sidebar_navigation_spec.js b/spec/frontend/search/sidebar/components/scope_sidebar_navigation_spec.js index f31a7c8fa5d..4b71ff0bedc 100644 --- a/spec/frontend/search/sidebar/components/scope_sidebar_navigation_spec.js +++ b/spec/frontend/search/sidebar/components/scope_sidebar_navigation_spec.js @@ -42,7 +42,7 @@ describe('ScopeSidebarNavigation', () => { const findNavItems = () => wrapper.findAllComponents(NavItem); const findNavItemActive = () => wrapper.find('[aria-current=page]'); const findNavItemActiveLabel = () => - findNavItemActive().find('[class="gl-pr-8 gl-text-gray-900 gl-truncate-end"]'); + findNavItemActive().find('[class="gl-flex-grow-1 gl-text-gray-900 gl-truncate-end"]'); describe('scope navigation', () => { beforeEach(() => { diff --git a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap index 30e15595193..0d0e45b64b2 100644 --- a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap +++ b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap @@ -1,28 +1,24 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Clone Dropdown Button rendering matches the snapshot 1`] = ` -<gl-dropdown-stub +<gl-disclosure-dropdown-stub + autoclose="true" category="primary" - clearalltext="Clear all" - clearalltextclass="gl-px-5" - headertext="" - hideheaderborder="true" - highlighteditemstitle="Selected" - highlighteditemstitleclass="gl-px-5" - right="true" + icon="" + items="" + placement="right" + positioningstrategy="absolute" size="medium" - text="Clone" + toggleid="dropdown-toggle-btn-2" + toggletext="Clone" variant="confirm" > - <div - class="pb-2 mx-1" - > - <gl-dropdown-section-header-stub> - Clone with SSH - </gl-dropdown-section-header-stub> - - <div - class="mx-3" + <gl-disclosure-dropdown-item-stub> + <gl-form-group-stub + class="gl-px-3 gl-my-3" + label="Clone with SSH" + labeldescription="" + optionaltext="(optional)" > <b-input-group-stub readonly="" @@ -46,7 +42,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = ` aria-label="Copy URL" buttontextclasses="" category="primary" - class="d-inline-flex" + class="gl-display-inline-flex" data-clipboard-text="ssh://foo.bar" data-qa-selector="copy_ssh_url_button" icon="copy-to-clipboard" @@ -56,14 +52,15 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = ` /> </b-input-group-append-stub> </b-input-group-stub> - </div> - - <gl-dropdown-section-header-stub> - Clone with HTTP - </gl-dropdown-section-header-stub> - - <div - class="mx-3" + </gl-form-group-stub> + </gl-disclosure-dropdown-item-stub> + + <gl-disclosure-dropdown-item-stub> + <gl-form-group-stub + class="gl-px-3 gl-mb-3" + label="Clone with HTTP" + labeldescription="" + optionaltext="(optional)" > <b-input-group-stub readonly="" @@ -87,7 +84,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = ` aria-label="Copy URL" buttontextclasses="" category="primary" - class="d-inline-flex" + class="gl-display-inline-flex" data-clipboard-text="http://foo.bar" data-qa-selector="copy_http_url_button" icon="copy-to-clipboard" @@ -97,7 +94,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = ` /> </b-input-group-append-stub> </b-input-group-stub> - </div> - </div> -</gl-dropdown-stub> + </gl-form-group-stub> + </gl-disclosure-dropdown-item-stub> +</gl-disclosure-dropdown-stub> `; diff --git a/spec/frontend/vue_shared/components/clone_dropdown_spec.js b/spec/frontend/vue_shared/components/clone_dropdown_spec.js index 584e29d94c4..bcc1a4352d8 100644 --- a/spec/frontend/vue_shared/components/clone_dropdown_spec.js +++ b/spec/frontend/vue_shared/components/clone_dropdown_spec.js @@ -1,4 +1,4 @@ -import { GlFormInputGroup, GlDropdownSectionHeader } from '@gitlab/ui'; +import { GlFormGroup, GlFormInputGroup } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import CloneDropdown from '~/vue_shared/components/clone_dropdown.vue'; @@ -46,7 +46,6 @@ describe('Clone Dropdown Button', () => { createComponent({ [name]: value }); expect(wrapper.findComponent(GlFormInputGroup).props('value')).toBe(value); - expect(wrapper.findAllComponents(GlDropdownSectionHeader).length).toBe(1); }); }); @@ -58,12 +57,12 @@ describe('Clone Dropdown Button', () => { `('allows null values for the props', ({ name, value }) => { createComponent({ ...defaultPropsData, [name]: value }); - expect(wrapper.findAllComponents(GlDropdownSectionHeader).length).toBe(1); + expect(wrapper.findAllComponents(GlFormGroup).length).toBe(1); }); it('correctly calculates httpLabel for HTTPS protocol', () => { createComponent({ httpLink: httpsLink }); - expect(wrapper.findComponent(GlDropdownSectionHeader).text()).toContain('HTTPS'); + expect(wrapper.findComponent(GlFormGroup).attributes('label')).toContain('HTTPS'); }); }); }); |