diff options
Diffstat (limited to 'spec/frontend/issue_show/components/app_spec.js')
-rw-r--r-- | spec/frontend/issue_show/components/app_spec.js | 122 |
1 files changed, 89 insertions, 33 deletions
diff --git a/spec/frontend/issue_show/components/app_spec.js b/spec/frontend/issue_show/components/app_spec.js index f76f42cb9ae..f4095d4de96 100644 --- a/spec/frontend/issue_show/components/app_spec.js +++ b/spec/frontend/issue_show/components/app_spec.js @@ -1,14 +1,22 @@ import { GlIntersectionObserver } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; import MockAdapter from 'axios-mock-adapter'; -import { TEST_HOST } from 'helpers/test_constants'; import { useMockIntersectionObserver } from 'helpers/mock_dom_observer'; import axios from '~/lib/utils/axios_utils'; import { visitUrl } from '~/lib/utils/url_utility'; import '~/behaviors/markdown/render_gfm'; import IssuableApp from '~/issue_show/components/app.vue'; import eventHub from '~/issue_show/event_hub'; -import { initialRequest, secondRequest } from '../mock_data'; +import { + appProps, + initialRequest, + publishedIncidentUrl, + secondRequest, + zoomMeetingUrl, +} from '../mock_data'; +import IncidentTabs from '~/issue_show/components/incidents/incident_tabs.vue'; +import DescriptionComponent from '~/issue_show/components/description.vue'; +import PinnedLinks from '~/issue_show/components/pinned_links.vue'; function formatText(text) { return text.trim().replace(/\s\s+/g, ' '); @@ -19,9 +27,6 @@ jest.mock('~/issue_show/event_hub'); const REALTIME_REQUEST_STACK = [initialRequest, secondRequest]; -const zoomMeetingUrl = 'https://gitlab.zoom.us/j/95919234811'; -const publishedIncidentUrl = 'https://status.com/'; - describe('Issuable output', () => { useMockIntersectionObserver(); @@ -31,6 +36,21 @@ describe('Issuable output', () => { const findStickyHeader = () => wrapper.find('[data-testid="issue-sticky-header"]'); + const mountComponent = (props = {}, options = {}) => { + wrapper = mount(IssuableApp, { + propsData: { ...appProps, ...props }, + provide: { + fullPath: 'gitlab-org/incidents', + iid: '19', + }, + stubs: { + HighlightBar: true, + IncidentTabs: true, + }, + ...options, + }); + }; + beforeEach(() => { setFixtures(` <div> @@ -57,28 +77,9 @@ describe('Issuable output', () => { return res; }); - wrapper = mount(IssuableApp, { - propsData: { - canUpdate: true, - canDestroy: true, - endpoint: '/gitlab-org/gitlab-shell/-/issues/9/realtime_changes', - updateEndpoint: TEST_HOST, - issuableRef: '#1', - issuableStatus: 'opened', - initialTitleHtml: '', - initialTitleText: '', - initialDescriptionHtml: 'test', - initialDescriptionText: 'test', - lockVersion: 1, - markdownPreviewPath: '/', - markdownDocsPath: '/', - projectNamespace: '/', - projectPath: '/', - issuableTemplateNamesPath: '/issuable-templates-path', - zoomMeetingUrl, - publishedIncidentUrl, - }, - }); + mountComponent(); + + jest.advanceTimersByTime(2); }); afterEach(() => { @@ -134,7 +135,7 @@ describe('Issuable output', () => { wrapper.vm.showForm = true; return wrapper.vm.$nextTick().then(() => { - expect(wrapper.contains('.markdown-selector')).toBe(true); + expect(wrapper.find('.markdown-selector').exists()).toBe(true); }); }); @@ -143,7 +144,7 @@ describe('Issuable output', () => { wrapper.setProps({ canUpdate: false }); return wrapper.vm.$nextTick().then(() => { - expect(wrapper.contains('.markdown-selector')).toBe(false); + expect(wrapper.find('.markdown-selector').exists()).toBe(false); }); }); @@ -403,7 +404,7 @@ describe('Issuable output', () => { .then(() => { expect(wrapper.vm.formState.lockedWarningVisible).toEqual(true); expect(wrapper.vm.formState.lock_version).toEqual(1); - expect(wrapper.contains('.alert')).toBe(true); + expect(wrapper.find('.alert').exists()).toBe(true); }); }); }); @@ -441,14 +442,14 @@ describe('Issuable output', () => { describe('show inline edit button', () => { it('should not render by default', () => { - expect(wrapper.contains('.btn-edit')).toBe(true); + expect(wrapper.find('.btn-edit').exists()).toBe(true); }); it('should render if showInlineEditButton', () => { wrapper.setProps({ showInlineEditButton: true }); return wrapper.vm.$nextTick(() => { - expect(wrapper.contains('.btn-edit')).toBe(true); + expect(wrapper.find('.btn-edit').exists()).toBe(true); }); }); }); @@ -531,7 +532,7 @@ describe('Issuable output', () => { describe('sticky header', () => { describe('when title is in view', () => { it('is not shown', () => { - expect(wrapper.contains('.issue-sticky-header')).toBe(false); + expect(wrapper.find('.issue-sticky-header').exists()).toBe(false); }); }); @@ -562,4 +563,59 @@ describe('Issuable output', () => { }); }); }); + + describe('Composable description component', () => { + const findIncidentTabs = () => wrapper.find(IncidentTabs); + const findDescriptionComponent = () => wrapper.find(DescriptionComponent); + const findPinnedLinks = () => wrapper.find(PinnedLinks); + const borderClass = 'gl-border-b-1 gl-border-b-gray-100 gl-border-b-solid gl-mb-6'; + + describe('when using description component', () => { + it('renders the description component', () => { + expect(findDescriptionComponent().exists()).toBe(true); + }); + + it('does not render incident tabs', () => { + expect(findIncidentTabs().exists()).toBe(false); + }); + + it('adds a border below the header', () => { + expect(findPinnedLinks().attributes('class')).toContain(borderClass); + }); + }); + + describe('when using incident tabs description wrapper', () => { + beforeEach(() => { + mountComponent( + { + descriptionComponent: IncidentTabs, + showTitleBorder: false, + }, + { + mocks: { + $apollo: { + queries: { + alert: { + loading: false, + }, + }, + }, + }, + }, + ); + }); + + it('renders the description component', () => { + expect(findDescriptionComponent().exists()).toBe(true); + }); + + it('renders incident tabs', () => { + expect(findIncidentTabs().exists()).toBe(true); + }); + + it('does not add a border below the header', () => { + expect(findPinnedLinks().attributes('class')).not.toContain(borderClass); + }); + }); + }); }); |