diff options
Diffstat (limited to 'spec/frontend/boards/components')
-rw-r--r-- | spec/frontend/boards/components/__snapshots__/board_blocked_icon_spec.js.snap | 30 | ||||
-rw-r--r-- | spec/frontend/boards/components/board_blocked_icon_spec.js | 264 |
2 files changed, 0 insertions, 294 deletions
diff --git a/spec/frontend/boards/components/__snapshots__/board_blocked_icon_spec.js.snap b/spec/frontend/boards/components/__snapshots__/board_blocked_icon_spec.js.snap deleted file mode 100644 index 34e4f996ff0..00000000000 --- a/spec/frontend/boards/components/__snapshots__/board_blocked_icon_spec.js.snap +++ /dev/null @@ -1,30 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`BoardBlockedIcon on mouseenter on blocked icon with more than three blocking issues matches the snapshot 1`] = ` -"<div class=\\"gl-display-inline\\"><svg data-testid=\\"issue-blocked-icon\\" role=\\"img\\" aria-hidden=\\"true\\" class=\\"issue-blocked-icon gl-mr-2 gl-cursor-pointer gl-text-red-500 gl-icon s16\\" id=\\"blocked-icon-uniqueId\\"> - <use href=\\"#issue-block\\"></use> - </svg> - <div class=\\"gl-popover\\"> - <ul class=\\"gl-list-style-none gl-p-0\\"> - <li><a href=\\"http://gdk.test:3000/gitlab-org/my-project-1/-/issues/6\\" class=\\"gl-link gl-text-blue-500! gl-font-sm\\">my-project-1#6</a> - <p data-testid=\\"issuable-title\\" class=\\"gl-mb-3 gl-display-block!\\"> - blocking issue title 1 - </p> - </li> - <li><a href=\\"http://gdk.test:3000/gitlab-org/my-project-1/-/issues/5\\" class=\\"gl-link gl-text-blue-500! gl-font-sm\\">my-project-1#5</a> - <p data-testid=\\"issuable-title\\" class=\\"gl-mb-3 gl-display-block!\\"> - blocking issue title 2 + blocking issue title 2 + blocking issue title 2 + bloc… - </p> - </li> - <li><a href=\\"http://gdk.test:3000/gitlab-org/my-project-1/-/issues/4\\" class=\\"gl-link gl-text-blue-500! gl-font-sm\\">my-project-1#4</a> - <p data-testid=\\"issuable-title\\" class=\\"gl-mb-3 gl-display-block!\\"> - blocking issue title 3 - </p> - </li> - </ul> - <div class=\\"gl-mt-4\\"> - <p data-testid=\\"hidden-blocking-count\\" class=\\"gl-mb-3\\">+ 1 more issue</p> <a data-testid=\\"view-all-issues\\" href=\\"http://gdk.test:3000/gitlab-org/my-project-1/-/issues/0#related-issues\\" class=\\"gl-link gl-text-blue-500! gl-font-sm\\">View all blocking issues</a> - </div><span data-testid=\\"popover-title\\">Blocked by 4 issues</span> - </div> -</div>" -`; diff --git a/spec/frontend/boards/components/board_blocked_icon_spec.js b/spec/frontend/boards/components/board_blocked_icon_spec.js deleted file mode 100644 index ffdc0a7cecc..00000000000 --- a/spec/frontend/boards/components/board_blocked_icon_spec.js +++ /dev/null @@ -1,264 +0,0 @@ -import { GlIcon, GlLink, GlPopover, GlLoadingIcon } from '@gitlab/ui'; -import { shallowMount, mount } from '@vue/test-utils'; -import Vue, { nextTick } from 'vue'; -import VueApollo from 'vue-apollo'; -import createMockApollo from 'helpers/mock_apollo_helper'; -import { extendedWrapper } from 'helpers/vue_test_utils_helper'; -import waitForPromises from 'helpers/wait_for_promises'; -import BoardBlockedIcon from '~/boards/components/board_blocked_icon.vue'; -import { blockingIssuablesQueries, issuableTypes } from '~/boards/constants'; -import { truncate } from '~/lib/utils/text_utility'; -import { - mockIssue, - mockEpic, - mockBlockingIssue1, - mockBlockingIssue2, - mockBlockingEpic1, - mockBlockingIssuablesResponse1, - mockBlockingIssuablesResponse2, - mockBlockingIssuablesResponse3, - mockBlockedIssue1, - mockBlockedIssue2, - mockBlockedEpic1, - mockBlockingEpicIssuablesResponse1, -} from '../mock_data'; - -describe('BoardBlockedIcon', () => { - let wrapper; - let mockApollo; - - const findGlIcon = () => wrapper.findComponent(GlIcon); - const findGlPopover = () => wrapper.findComponent(GlPopover); - const findGlLink = () => wrapper.findComponent(GlLink); - const findPopoverTitle = () => wrapper.findByTestId('popover-title'); - const findIssuableTitle = () => wrapper.findByTestId('issuable-title'); - const findHiddenBlockingCount = () => wrapper.findByTestId('hidden-blocking-count'); - const findViewAllIssuableLink = () => wrapper.findByTestId('view-all-issues'); - - const waitForApollo = async () => { - jest.runOnlyPendingTimers(); - await waitForPromises(); - }; - - const mouseenter = async () => { - findGlIcon().vm.$emit('mouseenter'); - - await nextTick(); - await waitForApollo(); - }; - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - const createWrapperWithApollo = ({ - item = mockBlockedIssue1, - blockingIssuablesSpy = jest.fn().mockResolvedValue(mockBlockingIssuablesResponse1), - issuableItem = mockIssue, - issuableType = issuableTypes.issue, - } = {}) => { - mockApollo = createMockApollo([ - [blockingIssuablesQueries[issuableType].query, blockingIssuablesSpy], - ]); - - Vue.use(VueApollo); - wrapper = extendedWrapper( - mount(BoardBlockedIcon, { - apolloProvider: mockApollo, - propsData: { - item: { - ...issuableItem, - ...item, - }, - uniqueId: 'uniqueId', - issuableType, - }, - attachTo: document.body, - }), - ); - }; - - const createWrapper = ({ - item = {}, - queries = {}, - data = {}, - loading = false, - mockIssuable = mockIssue, - issuableType = issuableTypes.issue, - } = {}) => { - wrapper = extendedWrapper( - shallowMount(BoardBlockedIcon, { - propsData: { - item: { - ...mockIssuable, - ...item, - }, - uniqueId: 'uniqueid', - issuableType, - }, - data() { - return { - ...data, - }; - }, - mocks: { - $apollo: { - queries: { - blockingIssuables: { loading }, - ...queries, - }, - }, - }, - stubs: { - GlPopover, - }, - attachTo: document.body, - }), - ); - }; - - it.each` - mockIssuable | issuableType | expectedIcon - ${mockIssue} | ${issuableTypes.issue} | ${'issue-block'} - ${mockEpic} | ${issuableTypes.epic} | ${'entity-blocked'} - `( - 'should render blocked icon for $issuableType', - ({ mockIssuable, issuableType, expectedIcon }) => { - createWrapper({ - mockIssuable, - issuableType, - }); - - expect(findGlIcon().exists()).toBe(true); - const icon = findGlIcon(); - expect(icon.exists()).toBe(true); - expect(icon.props('name')).toBe(expectedIcon); - }, - ); - - it('should display a loading spinner while loading', () => { - createWrapper({ loading: true }); - - expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); - }); - - it('should not query for blocking issuables by default', async () => { - createWrapperWithApollo(); - - expect(findGlPopover().text()).not.toContain(mockBlockingIssue1.title); - }); - - describe('on mouseenter on blocked icon', () => { - it.each` - item | issuableType | mockBlockingIssuable | issuableItem | blockingIssuablesSpy - ${mockBlockedIssue1} | ${issuableTypes.issue} | ${mockBlockingIssue1} | ${mockIssue} | ${jest.fn().mockResolvedValue(mockBlockingIssuablesResponse1)} - ${mockBlockedEpic1} | ${issuableTypes.epic} | ${mockBlockingEpic1} | ${mockEpic} | ${jest.fn().mockResolvedValue(mockBlockingEpicIssuablesResponse1)} - `( - 'should query for blocking issuables and render the result for $issuableType', - async ({ item, issuableType, issuableItem, mockBlockingIssuable, blockingIssuablesSpy }) => { - createWrapperWithApollo({ - item, - issuableType, - issuableItem, - blockingIssuablesSpy, - }); - - expect(findGlPopover().text()).not.toContain(mockBlockingIssuable.title); - - await mouseenter(); - - expect(findGlPopover().exists()).toBe(true); - expect(findIssuableTitle().text()).toContain(mockBlockingIssuable.title); - expect(wrapper.vm.skip).toBe(true); - }, - ); - - it('should emit "blocking-issuables-error" event on query error', async () => { - const mockError = new Error('mayday'); - createWrapperWithApollo({ blockingIssuablesSpy: jest.fn().mockRejectedValue(mockError) }); - - await mouseenter(); - - const [ - [ - { - message, - error: { networkError }, - }, - ], - ] = wrapper.emitted('blocking-issuables-error'); - expect(message).toBe('Failed to fetch blocking issues'); - expect(networkError).toBe(mockError); - }); - - describe('with a single blocking issue', () => { - beforeEach(async () => { - createWrapperWithApollo(); - - await mouseenter(); - }); - - it('should render a title of the issuable', async () => { - expect(findIssuableTitle().text()).toBe(mockBlockingIssue1.title); - }); - - it('should render issuable reference and link to the issuable', async () => { - const formattedRef = mockBlockingIssue1.reference.split('/')[1]; - - expect(findGlLink().text()).toBe(formattedRef); - expect(findGlLink().attributes('href')).toBe(mockBlockingIssue1.webUrl); - }); - - it('should render popover title with correct blocking issuable count', async () => { - expect(findPopoverTitle().text()).toBe('Blocked by 1 issue'); - }); - }); - - describe('when issue has a long title', () => { - it('should render a truncated title', async () => { - createWrapperWithApollo({ - blockingIssuablesSpy: jest.fn().mockResolvedValue(mockBlockingIssuablesResponse2), - }); - - await mouseenter(); - - const truncatedTitle = truncate( - mockBlockingIssue2.title, - wrapper.vm.$options.textTruncateWidth, - ); - expect(findIssuableTitle().text()).toBe(truncatedTitle); - }); - }); - - describe('with more than three blocking issues', () => { - beforeEach(async () => { - createWrapperWithApollo({ - item: mockBlockedIssue2, - blockingIssuablesSpy: jest.fn().mockResolvedValue(mockBlockingIssuablesResponse3), - }); - - await mouseenter(); - }); - - it('matches the snapshot', () => { - expect(wrapper.html()).toMatchSnapshot(); - }); - - it('should render popover title with correct blocking issuable count', async () => { - expect(findPopoverTitle().text()).toBe('Blocked by 4 issues'); - }); - - it('should render the number of hidden blocking issuables', () => { - expect(findHiddenBlockingCount().text()).toBe('+ 1 more issue'); - }); - - it('should link to the blocked issue page at the related issue anchor', async () => { - expect(findViewAllIssuableLink().text()).toBe('View all blocking issues'); - expect(findViewAllIssuableLink().attributes('href')).toBe( - `${mockBlockedIssue2.webUrl}#related-issues`, - ); - }); - }); - }); -}); |