diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-12-06 15:08:19 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-12-06 15:08:19 +0300 |
commit | eaf41d710dd1ee39125f9dce75812f0b6247adba (patch) | |
tree | 031a83beaea241474d5f2bdd5670961309cff000 /spec/frontend/clusters_list | |
parent | 5bc6fcec0edaa4032afacce1aa5e5289e9ae07ac (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/clusters_list')
-rw-r--r-- | spec/frontend/clusters_list/components/agent_token_spec.js | 20 | ||||
-rw-r--r-- | spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js | 95 |
2 files changed, 66 insertions, 49 deletions
diff --git a/spec/frontend/clusters_list/components/agent_token_spec.js b/spec/frontend/clusters_list/components/agent_token_spec.js index e656a601699..a92a03fedb6 100644 --- a/spec/frontend/clusters_list/components/agent_token_spec.js +++ b/spec/frontend/clusters_list/components/agent_token_spec.js @@ -1,10 +1,12 @@ -import { GlAlert, GlFormInputGroup } from '@gitlab/ui'; +import { GlAlert, GlFormInputGroup, GlSprintf, GlLink, GlIcon } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import { sprintf } from '~/locale'; import AgentToken from '~/clusters_list/components/agent_token.vue'; import { I18N_AGENT_TOKEN, INSTALL_AGENT_MODAL_ID, NAME_MAX_LENGTH, + HELM_VERSION_POLICY_URL, } from '~/clusters_list/constants'; import { generateAgentRegistrationCommand } from '~/clusters_list/clusters_util'; import CodeBlock from '~/vue_shared/components/code_block.vue'; @@ -23,6 +25,8 @@ describe('InstallAgentModal', () => { const findCodeBlock = () => wrapper.findComponent(CodeBlock); const findCopyButton = () => wrapper.findComponent(ModalCopyButton); const findInput = () => wrapper.findComponent(GlFormInputGroup); + const findHelmVersionPolicyLink = () => wrapper.findComponent(GlLink); + const findHelmExternalLinkIcon = () => wrapper.findComponent(GlIcon); const createWrapper = (newAgentName = agentName) => { const provide = { @@ -39,6 +43,9 @@ describe('InstallAgentModal', () => { wrapper = shallowMountExtended(AgentToken, { provide, propsData, + stubs: { + GlSprintf, + }, }); }; @@ -56,6 +63,17 @@ describe('InstallAgentModal', () => { expect(wrapper.text()).toContain(I18N_AGENT_TOKEN.basicInstallBody); }); + it('shows Helm version policy text with an external link', () => { + expect(wrapper.text()).toContain( + sprintf(I18N_AGENT_TOKEN.helmVersionText, { linkStart: '', linkEnd: ' ' }), + ); + expect(findHelmVersionPolicyLink().attributes()).toMatchObject({ + href: HELM_VERSION_POLICY_URL, + target: '_blank', + }); + expect(findHelmExternalLinkIcon().props()).toMatchObject({ name: 'external-link', size: 12 }); + }); + it('shows advanced agent installation instructions', () => { expect(wrapper.text()).toContain(I18N_AGENT_TOKEN.advancedInstallTitle); }); diff --git a/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js b/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js index 197735d3c77..0a8447c5d80 100644 --- a/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js +++ b/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js @@ -1,34 +1,32 @@ -import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui'; +import { GlSearchBoxByType, GlCollapsibleListbox, GlButton } from '@gitlab/ui'; +import { nextTick } from 'vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import { ENTER_KEY } from '~/lib/utils/keys'; import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue'; import { I18N_AVAILABLE_AGENTS_DROPDOWN } from '~/clusters_list/constants'; describe('AvailableAgentsDropdown', () => { let wrapper; + const configuredAgent = 'configured-agent'; + const searchAgentName = 'search-agent'; + const newAgentName = 'new-agent'; + const i18n = I18N_AVAILABLE_AGENTS_DROPDOWN; - const findDropdown = () => wrapper.findComponent(GlDropdown); - const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); - const findFirstAgentItem = () => findDropdownItems().at(0); - const findSearchInput = () => wrapper.findComponent(GlSearchBoxByType); - const findCreateButton = () => wrapper.findByTestId('create-config-button'); + const findDropdown = () => wrapper.findComponent(GlCollapsibleListbox); + const findSearchInput = () => findDropdown().findComponent(GlSearchBoxByType); + const findCreateButton = () => wrapper.findComponent(GlButton); const createWrapper = ({ propsData }) => { wrapper = shallowMountExtended(AvailableAgentsDropdown, { propsData, - stubs: { GlDropdown }, + stubs: { GlCollapsibleListbox }, }); - wrapper.vm.$refs.dropdown.hide = jest.fn(); + wrapper.vm.$refs.dropdown.closeAndFocus = jest.fn(); }; - afterEach(() => { - wrapper.destroy(); - }); - describe('there are agents available', () => { const propsData = { - availableAgents: ['configured-agent', 'search-agent', 'test-agent'], + availableAgents: [configuredAgent, searchAgentName, 'test-agent'], isRegistering: false, }; @@ -37,91 +35,92 @@ describe('AvailableAgentsDropdown', () => { }); it('prompts to select an agent', () => { - expect(findDropdown().props('text')).toBe(i18n.selectAgent); + expect(findDropdown().props('toggleText')).toBe(i18n.selectAgent); }); describe('search agent', () => { it('renders search button', () => { - expect(findSearchInput().exists()).toBe(true); + expect(findDropdown().props('searchable')).toBe(true); }); it('renders all agents when search term is empty', () => { - expect(findDropdownItems()).toHaveLength(3); + expect(findDropdown().props('items')).toHaveLength(3); }); it('renders only the agent searched for when the search item exists', async () => { - await findSearchInput().vm.$emit('input', 'search-agent'); - - expect(findDropdownItems()).toHaveLength(1); - expect(findFirstAgentItem().text()).toBe('search-agent'); - }); + findSearchInput().vm.$emit('input', searchAgentName); + await nextTick(); - it('renders create button when search started', async () => { - await findSearchInput().vm.$emit('input', 'new-agent'); - - expect(findCreateButton().exists()).toBe(true); + expect(findDropdown().props('items')).toMatchObject([ + { text: searchAgentName, value: searchAgentName }, + ]); }); - it("doesn't render create button when search item is found", async () => { - await findSearchInput().vm.$emit('input', 'search-agent'); - - expect(findCreateButton().exists()).toBe(false); + describe('create button', () => { + it.each` + condition | search | createButtonRendered + ${'is rendered'} | ${newAgentName} | ${true} + ${'is not rendered'} | ${''} | ${false} + ${'is not rendered'} | ${searchAgentName} | ${false} + `('$condition when search is "$search"', async ({ search, createButtonRendered }) => { + findSearchInput().vm.$emit('input', search); + await nextTick(); + + expect(findCreateButton().exists()).toBe(createButtonRendered); + }); }); }); describe('select existing agent configuration', () => { beforeEach(() => { - findFirstAgentItem().vm.$emit('click'); + findDropdown().vm.$emit('select', configuredAgent); }); - it('emits agentSelected with the name of the clicked agent', () => { - expect(wrapper.emitted('agentSelected')).toEqual([['configured-agent']]); + it('emits `agentSelected` with the name of the clicked agent', () => { + expect(wrapper.emitted('agentSelected')).toEqual([[configuredAgent]]); }); it('marks the clicked item as selected', () => { - expect(findDropdown().props('text')).toBe('configured-agent'); - expect(findFirstAgentItem().props('isChecked')).toBe(true); + expect(findDropdown().props('toggleText')).toBe(configuredAgent); }); }); describe('create new agent configuration', () => { beforeEach(async () => { - await findSearchInput().vm.$emit('input', 'new-agent'); + findSearchInput().vm.$emit('input', newAgentName); + await nextTick(); findCreateButton().vm.$emit('click'); }); it('emits agentSelected with the name of the clicked agent', () => { - expect(wrapper.emitted('agentSelected')).toEqual([['new-agent']]); + expect(wrapper.emitted('agentSelected')).toEqual([[newAgentName]]); }); it('marks the clicked item as selected', () => { - expect(findDropdown().props('text')).toBe('new-agent'); + expect(findDropdown().props('toggleText')).toBe(newAgentName); }); }); describe('click enter to register new agent without configuration', () => { beforeEach(async () => { - await findSearchInput().vm.$emit('input', 'new-agent'); - await findSearchInput().vm.$emit('keydown', new KeyboardEvent({ key: ENTER_KEY })); + findSearchInput().vm.$emit('input', newAgentName); + await nextTick(); + await findDropdown().trigger('keydown.enter'); }); it('emits agentSelected with the name of the clicked agent', () => { - expect(wrapper.emitted('agentSelected')).toEqual([['new-agent']]); + expect(wrapper.emitted('agentSelected')).toEqual([[newAgentName]]); }); it('marks the clicked item as selected', () => { - expect(findDropdown().props('text')).toBe('new-agent'); - }); - - it('closes the dropdown', () => { - expect(wrapper.vm.$refs.dropdown.hide).toHaveBeenCalledTimes(1); + expect(findDropdown().props('toggleText')).toBe(newAgentName); }); }); }); describe('registration in progress', () => { const propsData = { - availableAgents: ['configured-agent'], + availableAgents: [configuredAgent], isRegistering: true, }; @@ -130,7 +129,7 @@ describe('AvailableAgentsDropdown', () => { }); it('updates the text in the dropdown', () => { - expect(findDropdown().props('text')).toBe(i18n.registeringAgent); + expect(findDropdown().props('toggleText')).toBe(i18n.registeringAgent); }); it('displays a loading icon', () => { |