diff options
Diffstat (limited to 'spec/frontend/jobs/bridge/app_spec.js')
-rw-r--r-- | spec/frontend/jobs/bridge/app_spec.js | 123 |
1 files changed, 119 insertions, 4 deletions
diff --git a/spec/frontend/jobs/bridge/app_spec.js b/spec/frontend/jobs/bridge/app_spec.js index 0e232ab240d..c0faab90552 100644 --- a/spec/frontend/jobs/bridge/app_spec.js +++ b/spec/frontend/jobs/bridge/app_spec.js @@ -1,27 +1,104 @@ -import { shallowMount } from '@vue/test-utils'; +import { nextTick } from 'vue'; +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { GlBreakpointInstance } from '@gitlab/ui/dist/utils'; +import { GlLoadingIcon } from '@gitlab/ui'; +import VueApollo from 'vue-apollo'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import getPipelineQuery from '~/jobs/bridge/graphql/queries/pipeline.query.graphql'; +import waitForPromises from 'helpers/wait_for_promises'; import BridgeApp from '~/jobs/bridge/app.vue'; import BridgeEmptyState from '~/jobs/bridge/components/empty_state.vue'; import BridgeSidebar from '~/jobs/bridge/components/sidebar.vue'; +import CiHeader from '~/vue_shared/components/header_ci_component.vue'; +import { + MOCK_BUILD_ID, + MOCK_PIPELINE_IID, + MOCK_PROJECT_FULL_PATH, + mockPipelineQueryResponse, +} from './mock_data'; + +const localVue = createLocalVue(); +localVue.use(VueApollo); describe('Bridge Show Page', () => { let wrapper; + let mockApollo; + let mockPipelineQuery; + + const createComponent = (options) => { + wrapper = shallowMount(BridgeApp, { + provide: { + buildId: MOCK_BUILD_ID, + projectFullPath: MOCK_PROJECT_FULL_PATH, + pipelineIid: MOCK_PIPELINE_IID, + }, + mocks: { + $apollo: { + queries: { + pipeline: { + loading: true, + }, + }, + }, + }, + ...options, + }); + }; - const createComponent = () => { - wrapper = shallowMount(BridgeApp, {}); + const createComponentWithApollo = () => { + const handlers = [[getPipelineQuery, mockPipelineQuery]]; + mockApollo = createMockApollo(handlers); + + createComponent({ + localVue, + apolloProvider: mockApollo, + mocks: {}, + }); }; + const findCiHeader = () => wrapper.findComponent(CiHeader); const findEmptyState = () => wrapper.findComponent(BridgeEmptyState); + const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); const findSidebar = () => wrapper.findComponent(BridgeSidebar); + beforeEach(() => { + mockPipelineQuery = jest.fn(); + }); + afterEach(() => { + mockPipelineQuery.mockReset(); wrapper.destroy(); }); - describe('template', () => { + describe('while pipeline query is loading', () => { beforeEach(() => { createComponent(); }); + it('renders loading icon', () => { + expect(findLoadingIcon().exists()).toBe(true); + }); + }); + + describe('after pipeline query is loaded', () => { + beforeEach(() => { + mockPipelineQuery.mockResolvedValue(mockPipelineQueryResponse); + createComponentWithApollo(); + waitForPromises(); + }); + + it('query is called with correct variables', async () => { + expect(mockPipelineQuery).toHaveBeenCalledTimes(1); + expect(mockPipelineQuery).toHaveBeenCalledWith({ + fullPath: MOCK_PROJECT_FULL_PATH, + iid: MOCK_PIPELINE_IID, + }); + }); + + it('renders CI header state', () => { + expect(findCiHeader().exists()).toBe(true); + }); + it('renders empty state', () => { expect(findEmptyState().exists()).toBe(true); }); @@ -30,4 +107,42 @@ describe('Bridge Show Page', () => { expect(findSidebar().exists()).toBe(true); }); }); + + describe('sidebar expansion', () => { + beforeEach(() => { + mockPipelineQuery.mockResolvedValue(mockPipelineQueryResponse); + createComponentWithApollo(); + waitForPromises(); + }); + + describe('on resize', () => { + it.each` + breakpoint | isSidebarExpanded + ${'xs'} | ${false} + ${'sm'} | ${false} + ${'md'} | ${true} + ${'lg'} | ${true} + ${'xl'} | ${true} + `( + 'sets isSidebarExpanded to `$isSidebarExpanded` when the breakpoint is "$breakpoint"', + async ({ breakpoint, isSidebarExpanded }) => { + jest.spyOn(GlBreakpointInstance, 'getBreakpointSize').mockReturnValue(breakpoint); + + window.dispatchEvent(new Event('resize')); + await nextTick(); + + expect(findSidebar().exists()).toBe(isSidebarExpanded); + }, + ); + }); + + it('toggles expansion on button click', async () => { + expect(findSidebar().exists()).toBe(true); + + wrapper.vm.toggleSidebar(); + await nextTick(); + + expect(findSidebar().exists()).toBe(false); + }); + }); }); |