diff options
Diffstat (limited to 'spec/frontend')
5 files changed, 68 insertions, 146 deletions
diff --git a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js index 4fd7957674d..dd70fca9dd2 100644 --- a/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js +++ b/spec/frontend/packages_and_registries/dependency_proxy/app_spec.js @@ -1,12 +1,12 @@ import { GlAlert, - GlDropdown, - GlDropdownItem, GlFormInputGroup, GlFormGroup, GlModal, GlSprintf, GlSkeletonLoader, + GlDisclosureDropdown, + GlDisclosureDropdownItem, } from '@gitlab/ui'; import Vue, { nextTick } from 'vue'; import VueApollo from 'vue-apollo'; @@ -63,8 +63,6 @@ describe('DependencyProxyApp', () => { router, stubs: { GlAlert, - GlDropdown, - GlDropdownItem, GlFormGroup, GlModal, GlSprintf, @@ -82,7 +80,7 @@ describe('DependencyProxyApp', () => { const findProxyCountText = () => wrapper.findByTestId('proxy-count'); const findManifestList = () => wrapper.findComponent(ManifestsList); const findLoader = () => wrapper.findComponent(GlSkeletonLoader); - const findClearCacheDropdownList = () => wrapper.findComponent(GlDropdown); + const findClearCacheDropdownList = () => wrapper.findComponent(GlDisclosureDropdown); const findClearCacheModal = () => wrapper.findComponent(GlModal); const findClearCacheAlert = () => wrapper.findComponent(GlAlert); const findSettingsLink = () => wrapper.findByTestId('settings-link'); @@ -283,7 +281,7 @@ describe('DependencyProxyApp', () => { expect(findClearCacheDropdownList().exists()).toBe(true); const clearCacheDropdownItem = findClearCacheDropdownList().findComponent( - GlDropdownItem, + GlDisclosureDropdownItem, ); expect(clearCacheDropdownItem.text()).toBe('Clear cache'); diff --git a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js deleted file mode 100644 index e289569f8ce..00000000000 --- a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js +++ /dev/null @@ -1,136 +0,0 @@ -import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import AxiosMockAdapter from 'axios-mock-adapter'; -import waitForPromises from 'helpers/wait_for_promises'; -import { createAlert } from '~/alert'; -import axios from '~/lib/utils/axios_utils'; -import { HTTP_STATUS_NOT_FOUND, HTTP_STATUS_OK } from '~/lib/utils/http_status'; -import RevisionDropdown from '~/projects/compare/components/revision_dropdown_legacy.vue'; - -const defaultProps = { - refsProjectPath: 'some/refs/path', - revisionText: 'Target', - paramsName: 'from', - paramsBranch: 'main', -}; - -jest.mock('~/alert'); - -describe('RevisionDropdown component', () => { - let wrapper; - let axiosMock; - - const createComponent = (props = {}) => { - wrapper = shallowMount(RevisionDropdown, { - propsData: { - ...defaultProps, - ...props, - }, - }); - }; - - beforeEach(() => { - axiosMock = new AxiosMockAdapter(axios); - createComponent(); - }); - - afterEach(() => { - axiosMock.restore(); - }); - - const findGlDropdown = () => wrapper.findComponent(GlDropdown); - const findBranchesDropdownItem = () => - wrapper.findAllComponents('[data-testid="branches-dropdown-item"]'); - const findTagsDropdownItem = () => - wrapper.findAllComponents('[data-testid="tags-dropdown-item"]'); - - it('sets hidden input', () => { - expect(wrapper.find('input[type="hidden"]').attributes('value')).toBe( - defaultProps.paramsBranch, - ); - }); - - it('update the branches on success', async () => { - const Branches = ['branch-1', 'branch-2']; - const Tags = ['tag-1', 'tag-2', 'tag-3']; - - axiosMock.onGet(defaultProps.refsProjectPath).replyOnce(HTTP_STATUS_OK, { - Branches, - Tags, - }); - - createComponent(); - - expect(findBranchesDropdownItem()).toHaveLength(0); - expect(findTagsDropdownItem()).toHaveLength(0); - - await waitForPromises(); - - Branches.forEach((branch, index) => { - expect(findBranchesDropdownItem().at(index).text()).toBe(branch); - }); - - Tags.forEach((tag, index) => { - expect(findTagsDropdownItem().at(index).text()).toBe(tag); - }); - - expect(findBranchesDropdownItem()).toHaveLength(Branches.length); - expect(findTagsDropdownItem()).toHaveLength(Tags.length); - }); - - it('sets branches and tags to be an empty array when no tags or branches are given', async () => { - axiosMock.onGet(defaultProps.refsProjectPath).replyOnce(HTTP_STATUS_OK, { - Branches: undefined, - Tags: undefined, - }); - - await waitForPromises(); - - expect(findBranchesDropdownItem()).toHaveLength(0); - expect(findTagsDropdownItem()).toHaveLength(0); - }); - - it('shows an alert on error', async () => { - axiosMock.onGet('some/invalid/path').replyOnce(HTTP_STATUS_NOT_FOUND); - - await waitForPromises(); - - expect(createAlert).toHaveBeenCalled(); - }); - - describe('GlDropdown component', () => { - it('renders props', () => { - expect(wrapper.props()).toEqual(expect.objectContaining(defaultProps)); - }); - - it('display default text', () => { - createComponent({ - paramsBranch: null, - }); - expect(findGlDropdown().props('text')).toBe('Select branch/tag'); - }); - - it('display params branch text', () => { - expect(findGlDropdown().props('text')).toBe(defaultProps.paramsBranch); - }); - - it('emits a "selectRevision" event when a revision is selected', async () => { - const findGlDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); - const findFirstGlDropdownItem = () => findGlDropdownItems().at(0); - const branchName = 'some-branch'; - - axiosMock.onGet(defaultProps.refsProjectPath).replyOnce(HTTP_STATUS_OK, { - Branches: [branchName], - }); - - createComponent(); - await waitForPromises(); - - findFirstGlDropdownItem().vm.$emit('click'); - - expect(wrapper.emitted()).toEqual({ - selectRevision: [[{ direction: 'from', revision: branchName }]], - }); - }); - }); -}); diff --git a/spec/frontend/super_sidebar/components/nav_item_spec.js b/spec/frontend/super_sidebar/components/nav_item_spec.js index f41f6954ed1..589db349dc6 100644 --- a/spec/frontend/super_sidebar/components/nav_item_spec.js +++ b/spec/frontend/super_sidebar/components/nav_item_spec.js @@ -1,5 +1,6 @@ -import { GlBadge } from '@gitlab/ui'; +import { GlBadge, GlButton } from '@gitlab/ui'; import { RouterLinkStub } from '@vue/test-utils'; +import { nextTick } from 'vue'; import { mountExtended, extendedWrapper } from 'helpers/vue_test_utils_helper'; import NavItem from '~/super_sidebar/components/nav_item.vue'; import NavItemRouterLink from '~/super_sidebar/components/nav_item_router_link.vue'; @@ -15,6 +16,7 @@ describe('NavItem component', () => { const findLink = () => wrapper.findByTestId('nav-item-link'); const findPill = () => wrapper.findComponent(GlBadge); + const findPinButton = () => wrapper.findComponent(GlButton); const findNavItemRouterLink = () => extendedWrapper(wrapper.findComponent(NavItemRouterLink)); const findNavItemLink = () => extendedWrapper(wrapper.findComponent(NavItemLink)); @@ -59,6 +61,62 @@ describe('NavItem component', () => { ); }); + describe('pins', () => { + describe('when pins are not supported', () => { + it('does not render pin button', () => { + createWrapper({ + item: { title: 'Foo' }, + provide: { + panelSupportsPins: false, + }, + }); + + expect(findPinButton().exists()).toBe(false); + }); + }); + + describe('when pins are supported', () => { + beforeEach(() => { + createWrapper({ + item: { title: 'Foo' }, + provide: { + panelSupportsPins: true, + }, + }); + }); + + it('renders pin button', () => { + expect(findPinButton().exists()).toBe(true); + }); + + it('toggles pointer events on after CSS fade-in', async () => { + const pinButton = findPinButton(); + + expect(pinButton.classes()).toContain('gl-pointer-events-none'); + + wrapper.trigger('mouseenter'); + pinButton.vm.$emit('transitionend'); + await nextTick(); + + expect(pinButton.classes()).not.toContain('gl-pointer-events-none'); + }); + + it('does not toggle pointer events if mouse leaves before CSS fade-in ends', async () => { + const pinButton = findPinButton(); + + expect(pinButton.classes()).toContain('gl-pointer-events-none'); + + wrapper.trigger('mouseenter'); + wrapper.trigger('mousemove'); + wrapper.trigger('mouseleave'); + pinButton.vm.$emit('transitionend'); + await nextTick(); + + expect(pinButton.classes()).toContain('gl-pointer-events-none'); + }); + }); + }); + it('applies custom link classes', () => { const customClass = 'customClass'; createWrapper({ diff --git a/spec/frontend/tracing/components/tracing_details_span_chart_spec.js b/spec/frontend/tracing/components/tracing_details_span_chart_spec.js index 0ca4288333b..aaa02aef406 100644 --- a/spec/frontend/tracing/components/tracing_details_span_chart_spec.js +++ b/spec/frontend/tracing/components/tracing_details_span_chart_spec.js @@ -1,4 +1,4 @@ -import { GlButton } from '@gitlab/ui'; +import { GlButton, GlTruncate } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import TracingDetailsSpansChart from '~/tracing/components/tracing_details_spans_chart.vue'; @@ -111,7 +111,9 @@ describe('TracingDetailsSpansChart', () => { }); it('renders span operation and service name', () => { - expect(getSpanDetails(0).text()).toBe('operation-1 service-1'); + const textContents = getSpanDetails(0).findAllComponents(GlTruncate); + expect(textContents.at(0).props('text')).toBe('operation-1'); + expect(textContents.at(1).props('text')).toBe('service-1'); }); it('renders the expanded button', () => { diff --git a/spec/frontend/tracing/components/tracing_table_list_spec.js b/spec/frontend/tracing/components/tracing_table_list_spec.js index b05d152599b..1930ebe6b4e 100644 --- a/spec/frontend/tracing/components/tracing_table_list_spec.js +++ b/spec/frontend/tracing/components/tracing_table_list_spec.js @@ -49,7 +49,7 @@ describe('TracingTableList', () => { mockTraces.forEach((trace, i) => { expect(getCells(i).length).toBe(4); - expect(getCell(i, 0).text()).toBe(trace.timestamp); + expect(getCell(i, 0).text()).toBe('Jul 10, 2023 3:02pm UTC'); expect(getCell(i, 1).text()).toBe(trace.service_name); expect(getCell(i, 2).text()).toBe(trace.operation); expect(getCell(i, 3).text()).toBe(`${trace.duration_nano / 1000} ms`); |