diff options
Diffstat (limited to 'spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js')
-rw-r--r-- | spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js | 129 |
1 files changed, 129 insertions, 0 deletions
diff --git a/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js b/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js new file mode 100644 index 00000000000..40c2c59e187 --- /dev/null +++ b/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js @@ -0,0 +1,129 @@ +import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { createLocalVue, mount } from '@vue/test-utils'; +import VueApollo from 'vue-apollo'; +import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue'; +import { I18N_AVAILABLE_AGENTS_DROPDOWN } from '~/clusters_list/constants'; +import agentConfigurationsQuery from '~/clusters_list/graphql/queries/agent_configurations.query.graphql'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import { agentConfigurationsResponse } from './mock_data'; + +const localVue = createLocalVue(); +localVue.use(VueApollo); + +describe('AvailableAgentsDropdown', () => { + let wrapper; + + const i18n = I18N_AVAILABLE_AGENTS_DROPDOWN; + const findDropdown = () => wrapper.findComponent(GlDropdown); + const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); + const findConfiguredAgentItem = () => findDropdownItems().at(0); + + const createWrapper = ({ propsData = {}, isLoading = false }) => { + const provide = { + projectPath: 'path/to/project', + }; + + wrapper = (() => { + if (isLoading) { + const mocks = { + $apollo: { + queries: { + agents: { + loading: true, + }, + }, + }, + }; + + return mount(AvailableAgentsDropdown, { mocks, provide, propsData }); + } + + const apolloProvider = createMockApollo([ + [agentConfigurationsQuery, jest.fn().mockResolvedValue(agentConfigurationsResponse)], + ]); + + return mount(AvailableAgentsDropdown, { + localVue, + apolloProvider, + provide, + propsData, + }); + })(); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('there are agents available', () => { + const propsData = { + isRegistering: false, + }; + + beforeEach(() => { + createWrapper({ propsData }); + }); + + it('prompts to select an agent', () => { + expect(findDropdown().props('text')).toBe(i18n.selectAgent); + }); + + it('shows only agents that are not yet installed', () => { + expect(findDropdownItems()).toHaveLength(1); + expect(findConfiguredAgentItem().text()).toBe('configured-agent'); + expect(findConfiguredAgentItem().props('isChecked')).toBe(false); + }); + + describe('click events', () => { + beforeEach(() => { + findConfiguredAgentItem().vm.$emit('click'); + }); + + it('emits agentSelected with the name of the clicked agent', () => { + expect(wrapper.emitted('agentSelected')).toEqual([['configured-agent']]); + }); + + it('marks the clicked item as selected', () => { + expect(findDropdown().props('text')).toBe('configured-agent'); + expect(findConfiguredAgentItem().props('isChecked')).toBe(true); + }); + }); + }); + + describe('registration in progress', () => { + const propsData = { + isRegistering: true, + }; + + beforeEach(() => { + createWrapper({ propsData }); + }); + + it('updates the text in the dropdown', () => { + expect(findDropdown().props('text')).toBe(i18n.registeringAgent); + }); + + it('displays a loading icon', () => { + expect(findDropdown().props('loading')).toBe(true); + }); + }); + + describe('agents query is loading', () => { + const propsData = { + isRegistering: false, + }; + + beforeEach(() => { + createWrapper({ propsData, isLoading: true }); + }); + + it('updates the text in the dropdown', () => { + expect(findDropdown().text()).toBe(i18n.selectAgent); + }); + + it('displays a loading icon', () => { + expect(findDropdown().props('loading')).toBe(true); + }); + }); +}); |