diff options
Diffstat (limited to 'spec/frontend/environments/deploy_board_wrapper_spec.js')
-rw-r--r-- | spec/frontend/environments/deploy_board_wrapper_spec.js | 124 |
1 files changed, 124 insertions, 0 deletions
diff --git a/spec/frontend/environments/deploy_board_wrapper_spec.js b/spec/frontend/environments/deploy_board_wrapper_spec.js new file mode 100644 index 00000000000..c8e6df4d324 --- /dev/null +++ b/spec/frontend/environments/deploy_board_wrapper_spec.js @@ -0,0 +1,124 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import { GlCollapse, GlIcon } from '@gitlab/ui'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; +import { stubTransition } from 'helpers/stub_transition'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import { __, s__ } from '~/locale'; +import DeployBoardWrapper from '~/environments/components/deploy_board_wrapper.vue'; +import DeployBoard from '~/environments/components/deploy_board.vue'; +import setEnvironmentToChangeCanaryMutation from '~/environments/graphql/mutations/set_environment_to_change_canary.mutation.graphql'; +import { resolvedEnvironment, rolloutStatus } from './graphql/mock_data'; + +Vue.use(VueApollo); + +describe('~/environments/components/deploy_board_wrapper.vue', () => { + let wrapper; + let mockApollo; + + const findDeployBoard = () => wrapper.findComponent(DeployBoard); + + const createWrapper = ({ propsData = {} } = {}) => { + mockApollo = createMockApollo(); + return mountExtended(DeployBoardWrapper, { + propsData: { environment: resolvedEnvironment, rolloutStatus, ...propsData }, + provide: { helpPagePath: '/help' }, + stubs: { transition: stubTransition() }, + apolloProvider: mockApollo, + }); + }; + + const expandCollapsedSection = async () => { + const button = wrapper.findByRole('button', { name: __('Expand') }); + await button.trigger('click'); + + return button; + }; + + afterEach(() => { + wrapper?.destroy(); + }); + + it('is labeled Kubernetes Pods', () => { + wrapper = createWrapper(); + + expect(wrapper.findByText(s__('DeployBoard|Kubernetes Pods')).exists()).toBe(true); + }); + + describe('collapse', () => { + let icon; + let collapse; + + beforeEach(() => { + wrapper = createWrapper(); + collapse = wrapper.findComponent(GlCollapse); + icon = wrapper.findComponent(GlIcon); + }); + + it('is collapsed by default', () => { + expect(collapse.attributes('visible')).toBeUndefined(); + expect(icon.props('name')).toBe('angle-right'); + }); + + it('opens on click', async () => { + const button = await expandCollapsedSection(); + + expect(button.attributes('aria-label')).toBe(__('Collapse')); + expect(collapse.attributes('visible')).toBe('visible'); + expect(icon.props('name')).toBe('angle-down'); + + const deployBoard = findDeployBoard(); + expect(deployBoard.exists()).toBe(true); + }); + }); + + describe('deploy board', () => { + it('passes the rollout status on and sets graphql to true', async () => { + wrapper = createWrapper(); + await expandCollapsedSection(); + + const deployBoard = findDeployBoard(); + expect(deployBoard.props('deployBoardData')).toEqual(rolloutStatus); + expect(deployBoard.props('graphql')).toBe(true); + }); + + it('sets the update to the canary via graphql', () => { + wrapper = createWrapper(); + jest.spyOn(mockApollo.defaultClient, 'mutate'); + const deployBoard = findDeployBoard(); + deployBoard.vm.$emit('changeCanaryWeight', 15); + expect(mockApollo.defaultClient.mutate).toHaveBeenCalledWith({ + mutation: setEnvironmentToChangeCanaryMutation, + variables: { environment: resolvedEnvironment, weight: 15 }, + }); + }); + + describe('is loading', () => { + it('should set the loading prop', async () => { + wrapper = createWrapper({ + propsData: { rolloutStatus: { ...rolloutStatus, status: 'loading' } }, + }); + + await expandCollapsedSection(); + + const deployBoard = findDeployBoard(); + + expect(deployBoard.props('isLoading')).toBe(true); + }); + }); + + describe('is empty', () => { + it('should set the empty prop', async () => { + wrapper = createWrapper({ + propsData: { rolloutStatus: { ...rolloutStatus, status: 'not_found' } }, + }); + + await expandCollapsedSection(); + + const deployBoard = findDeployBoard(); + + expect(deployBoard.props('isEmpty')).toBe(true); + }); + }); + }); +}); |