diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-18 23:02:30 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-03-18 23:02:30 +0300 |
commit | 41fe97390ceddf945f3d967b8fdb3de4c66b7dea (patch) | |
tree | 9c8d89a8624828992f06d892cd2f43818ff5dcc8 /spec/frontend/clusters_list/components | |
parent | 0804d2dc31052fb45a1efecedc8e06ce9bc32862 (diff) |
Add latest changes from gitlab-org/gitlab@14-9-stable-eev14.9.0-rc42
Diffstat (limited to 'spec/frontend/clusters_list/components')
8 files changed, 369 insertions, 147 deletions
diff --git a/spec/frontend/clusters_list/components/agent_table_spec.js b/spec/frontend/clusters_list/components/agent_table_spec.js index dc7f0ebae74..db723622a51 100644 --- a/spec/frontend/clusters_list/components/agent_table_spec.js +++ b/spec/frontend/clusters_list/components/agent_table_spec.js @@ -8,6 +8,9 @@ import { stubComponent } from 'helpers/stub_component'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import { clusterAgents, connectedTimeNow, connectedTimeInactive } from './mock_data'; +const defaultConfigHelpUrl = + '/help/user/clusters/agent/install/index#create-an-agent-without-configuration-file'; + const provideData = { gitlabVersion: '14.8', }; @@ -31,8 +34,8 @@ describe('AgentTable', () => { let wrapper; const findAgentLink = (at) => wrapper.findAllByTestId('cluster-agent-name-link').at(at); - const findStatusIcon = (at) => wrapper.findAllComponents(GlIcon).at(at); const findStatusText = (at) => wrapper.findAllByTestId('cluster-agent-connection-status').at(at); + const findStatusIcon = (at) => findStatusText(at).find(GlIcon); const findLastContactText = (at) => wrapper.findAllByTestId('cluster-agent-last-contact').at(at); const findVersionText = (at) => wrapper.findAllByTestId('cluster-agent-version').at(at); const findConfiguration = (at) => @@ -141,16 +144,16 @@ describe('AgentTable', () => { ); it.each` - agentPath | hasLink | lineNumber - ${'.gitlab/agents/agent-1'} | ${true} | ${0} - ${'.gitlab/agents/agent-2'} | ${false} | ${1} + agentConfig | link | lineNumber + ${'.gitlab/agents/agent-1'} | ${'/agent/full/path'} | ${0} + ${'Default configuration'} | ${defaultConfigHelpUrl} | ${1} `( 'displays config file path as "$agentPath" at line $lineNumber', - ({ agentPath, hasLink, lineNumber }) => { + ({ agentConfig, link, lineNumber }) => { const findLink = findConfiguration(lineNumber).find(GlLink); - expect(findLink.exists()).toBe(hasLink); - expect(findConfiguration(lineNumber).text()).toBe(agentPath); + expect(findLink.attributes('href')).toBe(link); + expect(findConfiguration(lineNumber).text()).toBe(agentConfig); }, ); diff --git a/spec/frontend/clusters_list/components/agent_token_spec.js b/spec/frontend/clusters_list/components/agent_token_spec.js new file mode 100644 index 00000000000..a80c8ffaad4 --- /dev/null +++ b/spec/frontend/clusters_list/components/agent_token_spec.js @@ -0,0 +1,76 @@ +import { GlAlert, GlFormInputGroup } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import AgentToken from '~/clusters_list/components/agent_token.vue'; +import { I18N_AGENT_TOKEN, INSTALL_AGENT_MODAL_ID } from '~/clusters_list/constants'; +import { generateAgentRegistrationCommand } from '~/clusters_list/clusters_util'; +import CodeBlock from '~/vue_shared/components/code_block.vue'; +import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue'; + +const kasAddress = 'kas.example.com'; +const agentToken = 'agent-token'; +const modalId = INSTALL_AGENT_MODAL_ID; + +describe('InstallAgentModal', () => { + let wrapper; + + const findAlert = () => wrapper.findComponent(GlAlert); + const findCodeBlock = () => wrapper.findComponent(CodeBlock); + const findCopyButton = () => wrapper.findComponent(ModalCopyButton); + const findInput = () => wrapper.findComponent(GlFormInputGroup); + + const createWrapper = () => { + const provide = { + kasAddress, + }; + + const propsData = { + agentToken, + modalId, + }; + + wrapper = shallowMountExtended(AgentToken, { + provide, + propsData, + }); + }; + + beforeEach(() => { + createWrapper(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('initial state', () => { + it('shows basic agent installation instructions', () => { + expect(wrapper.text()).toContain(I18N_AGENT_TOKEN.basicInstallTitle); + expect(wrapper.text()).toContain(I18N_AGENT_TOKEN.basicInstallBody); + }); + + it('shows advanced agent installation instructions', () => { + expect(wrapper.text()).toContain(I18N_AGENT_TOKEN.advancedInstallTitle); + }); + + it('shows agent token as an input value', () => { + expect(findInput().props('value')).toBe('agent-token'); + }); + + it('renders a copy button', () => { + expect(findCopyButton().props()).toMatchObject({ + title: 'Copy command', + text: generateAgentRegistrationCommand(agentToken, kasAddress), + modalId, + }); + }); + + it('shows warning alert', () => { + expect(findAlert().props('title')).toBe(I18N_AGENT_TOKEN.tokenSingleUseWarningTitle); + }); + + it('shows code block with agent installation command', () => { + expect(findCodeBlock().props('code')).toContain('--agent-token=agent-token'); + expect(findCodeBlock().props('code')).toContain('--kas-address=kas.example.com'); + }); + }); +}); 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 bcc1d4e8b9e..eca2b1f5cb1 100644 --- a/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js +++ b/spec/frontend/clusters_list/components/available_agents_dropwdown_spec.js @@ -1,5 +1,5 @@ -import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; +import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue'; import { I18N_AVAILABLE_AGENTS_DROPDOWN } from '~/clusters_list/constants'; @@ -9,11 +9,14 @@ describe('AvailableAgentsDropdown', () => { const i18n = I18N_AVAILABLE_AGENTS_DROPDOWN; const findDropdown = () => wrapper.findComponent(GlDropdown); const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); - const findConfiguredAgentItem = () => findDropdownItems().at(0); + const findFirstAgentItem = () => findDropdownItems().at(0); + const findSearchInput = () => wrapper.findComponent(GlSearchBoxByType); + const findCreateButton = () => wrapper.findByTestId('create-config-button'); const createWrapper = ({ propsData }) => { - wrapper = shallowMount(AvailableAgentsDropdown, { + wrapper = shallowMountExtended(AvailableAgentsDropdown, { propsData, + stubs: { GlDropdown }, }); }; @@ -23,7 +26,7 @@ describe('AvailableAgentsDropdown', () => { describe('there are agents available', () => { const propsData = { - availableAgents: ['configured-agent'], + availableAgents: ['configured-agent', 'search-agent', 'test-agent'], isRegistering: false, }; @@ -35,9 +38,38 @@ describe('AvailableAgentsDropdown', () => { expect(findDropdown().props('text')).toBe(i18n.selectAgent); }); - describe('click events', () => { + describe('search agent', () => { + it('renders search button', () => { + expect(findSearchInput().exists()).toBe(true); + }); + + it('renders all agents when search term is empty', () => { + expect(findDropdownItems()).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'); + }); + + it('renders create button when search started', async () => { + await findSearchInput().vm.$emit('input', 'new-agent'); + + expect(findCreateButton().exists()).toBe(true); + }); + + 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('select existing agent configuration', () => { beforeEach(() => { - findConfiguredAgentItem().vm.$emit('click'); + findFirstAgentItem().vm.$emit('click'); }); it('emits agentSelected with the name of the clicked agent', () => { @@ -46,7 +78,22 @@ describe('AvailableAgentsDropdown', () => { it('marks the clicked item as selected', () => { expect(findDropdown().props('text')).toBe('configured-agent'); - expect(findConfiguredAgentItem().props('isChecked')).toBe(true); + expect(findFirstAgentItem().props('isChecked')).toBe(true); + }); + }); + + describe('create new agent configuration', () => { + beforeEach(async () => { + await findSearchInput().vm.$emit('input', 'new-agent'); + findCreateButton().vm.$emit('click'); + }); + + it('emits agentSelected with the name of the clicked agent', () => { + expect(wrapper.emitted('agentSelected')).toEqual([['new-agent']]); + }); + + it('marks the clicked item as selected', () => { + expect(findDropdown().props('text')).toBe('new-agent'); }); }); }); diff --git a/spec/frontend/clusters_list/components/clusters_actions_spec.js b/spec/frontend/clusters_list/components/clusters_actions_spec.js index 331690fc642..312df12ab5f 100644 --- a/spec/frontend/clusters_list/components/clusters_actions_spec.js +++ b/spec/frontend/clusters_list/components/clusters_actions_spec.js @@ -1,4 +1,4 @@ -import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { GlDropdown, GlDropdownItem, GlButton } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import ClustersActions from '~/clusters_list/components/clusters_actions.vue'; import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; @@ -14,13 +14,18 @@ describe('ClustersActionsComponent', () => { newClusterPath, addClusterPath, canAddCluster: true, + displayClusterAgents: true, + certificateBasedClustersEnabled: true, }; const findDropdown = () => wrapper.findComponent(GlDropdown); const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); + const findDropdownItemIds = () => + findDropdownItems().wrappers.map((x) => x.attributes('data-testid')); const findNewClusterLink = () => wrapper.findByTestId('new-cluster-link'); const findConnectClusterLink = () => wrapper.findByTestId('connect-cluster-link'); const findConnectNewAgentLink = () => wrapper.findByTestId('connect-new-agent-link'); + const findConnectWithAgentButton = () => wrapper.findComponent(GlButton); const createWrapper = (provideData = {}) => { wrapper = shallowMountExtended(ClustersActions, { @@ -42,43 +47,110 @@ describe('ClustersActionsComponent', () => { afterEach(() => { wrapper.destroy(); }); + describe('when the certificate based clusters are enabled', () => { + it('renders actions menu', () => { + expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.actionsButton); + }); - it('renders actions menu', () => { - expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.actionsButton); - }); + it('renders correct href attributes for the links', () => { + expect(findNewClusterLink().attributes('href')).toBe(newClusterPath); + expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath); + }); - it('renders a dropdown with 3 actions items', () => { - expect(findDropdownItems()).toHaveLength(3); - }); + describe('when user cannot add clusters', () => { + beforeEach(() => { + createWrapper({ canAddCluster: false }); + }); - it('renders correct href attributes for the links', () => { - expect(findNewClusterLink().attributes('href')).toBe(newClusterPath); - expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath); - }); + it('disables dropdown', () => { + expect(findDropdown().props('disabled')).toBe(true); + }); - it('renders correct modal id for the agent link', () => { - const binding = getBinding(findConnectNewAgentLink().element, 'gl-modal-directive'); + it('shows tooltip explaining why dropdown is disabled', () => { + const tooltip = getBinding(findDropdown().element, 'gl-tooltip'); + expect(tooltip.value).toBe(CLUSTERS_ACTIONS.dropdownDisabledHint); + }); - expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID); - }); + it('does not bind split dropdown button', () => { + const binding = getBinding(findDropdown().element, 'gl-modal-directive'); + + expect(binding.value).toBe(false); + }); + }); + + describe('when on project level', () => { + it('renders a dropdown with 3 actions items', () => { + expect(findDropdownItemIds()).toEqual([ + 'connect-new-agent-link', + 'new-cluster-link', + 'connect-cluster-link', + ]); + }); + + it('renders correct modal id for the agent link', () => { + const binding = getBinding(findConnectNewAgentLink().element, 'gl-modal-directive'); + + expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID); + }); - it('shows tooltip', () => { - const tooltip = getBinding(findDropdown().element, 'gl-tooltip'); - expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectWithAgent); + it('shows tooltip', () => { + const tooltip = getBinding(findDropdown().element, 'gl-tooltip'); + expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectWithAgent); + }); + + it('shows split button in dropdown', () => { + expect(findDropdown().props('split')).toBe(true); + }); + + it('binds split button with modal id', () => { + const binding = getBinding(findDropdown().element, 'gl-modal-directive'); + + expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID); + }); + }); + + describe('when on group or admin level', () => { + beforeEach(() => { + createWrapper({ displayClusterAgents: false }); + }); + + it('renders a dropdown with 2 actions items', () => { + expect(findDropdownItemIds()).toEqual(['new-cluster-link', 'connect-cluster-link']); + }); + + it('shows tooltip', () => { + const tooltip = getBinding(findDropdown().element, 'gl-tooltip'); + expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectExistingCluster); + }); + + it('does not show split button in dropdown', () => { + expect(findDropdown().props('split')).toBe(false); + }); + + it('does not bind dropdown button to modal', () => { + const binding = getBinding(findDropdown().element, 'gl-modal-directive'); + + expect(binding.value).toBe(false); + }); + }); }); - describe('when user cannot add clusters', () => { + describe('when the certificate based clusters not enabled', () => { beforeEach(() => { - createWrapper({ canAddCluster: false }); + createWrapper({ certificateBasedClustersEnabled: false }); }); - it('disables dropdown', () => { - expect(findDropdown().props('disabled')).toBe(true); + it('it does not show the the dropdown', () => { + expect(findDropdown().exists()).toBe(false); }); - it('shows tooltip explaining why dropdown is disabled', () => { - const tooltip = getBinding(findDropdown().element, 'gl-tooltip'); - expect(tooltip.value).toBe(CLUSTERS_ACTIONS.dropdownDisabledHint); + it('shows the connect with agent button', () => { + expect(findConnectWithAgentButton().props()).toMatchObject({ + disabled: !defaultProvide.canAddCluster, + category: 'primary', + variant: 'confirm', + }); + expect(findConnectWithAgentButton().text()).toBe(CLUSTERS_ACTIONS.connectWithAgent); }); }); }); diff --git a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js index cf0f6881960..fe2189296a6 100644 --- a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js +++ b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js @@ -4,7 +4,7 @@ import ClustersEmptyState from '~/clusters_list/components/clusters_empty_state. import ClusterStore from '~/clusters_list/store'; const clustersEmptyStateImage = 'path/to/svg'; -const newClusterPath = '/path/to/connect/cluster'; +const addClusterPath = '/path/to/connect/cluster'; const emptyStateHelpText = 'empty state text'; describe('ClustersEmptyStateComponent', () => { @@ -12,7 +12,7 @@ describe('ClustersEmptyStateComponent', () => { const defaultProvideData = { clustersEmptyStateImage, - newClusterPath, + addClusterPath, }; const findButton = () => wrapper.findComponent(GlButton); diff --git a/spec/frontend/clusters_list/components/clusters_main_view_spec.js b/spec/frontend/clusters_list/components/clusters_main_view_spec.js index 37665bf7abd..218463b9adf 100644 --- a/spec/frontend/clusters_list/components/clusters_main_view_spec.js +++ b/spec/frontend/clusters_list/components/clusters_main_view_spec.js @@ -6,7 +6,9 @@ import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vu import { AGENT, CERTIFICATE_BASED, + AGENT_TAB, CLUSTERS_TABS, + CERTIFICATE_TAB, MAX_CLUSTERS_LIST, MAX_LIST_COUNT, EVENT_LABEL_TABS, @@ -23,12 +25,20 @@ describe('ClustersMainViewComponent', () => { defaultBranchName, }; - beforeEach(() => { + const defaultProvide = { + certificateBasedClustersEnabled: true, + displayClusterAgents: true, + }; + + const createWrapper = (extendedProvide = {}) => { wrapper = shallowMountExtended(ClustersMainView, { propsData, + provide: { + ...defaultProvide, + ...extendedProvide, + }, }); - trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); - }); + }; afterEach(() => { wrapper.destroy(); @@ -39,57 +49,110 @@ describe('ClustersMainViewComponent', () => { const findGlTabAtIndex = (index) => findAllTabs().at(index); const findComponent = () => wrapper.findByTestId('clusters-tab-component'); const findModal = () => wrapper.findComponent(InstallAgentModal); + describe('when the certificate based clusters are enabled', () => { + describe('when on project level', () => { + beforeEach(() => { + createWrapper({ displayClusterAgents: true }); + trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn); + }); - it('renders `GlTabs` with `syncActiveTabWithQueryParams` and `queryParamName` props set', () => { - expect(findTabs().exists()).toBe(true); - expect(findTabs().props('syncActiveTabWithQueryParams')).toBe(true); - }); + it('renders `GlTabs` with `syncActiveTabWithQueryParams` and `queryParamName` props set', () => { + expect(findTabs().exists()).toBe(true); + expect(findTabs().props('syncActiveTabWithQueryParams')).toBe(true); + }); - it('renders correct number of tabs', () => { - expect(findAllTabs()).toHaveLength(CLUSTERS_TABS.length); - }); + it('renders correct number of tabs', () => { + expect(findAllTabs()).toHaveLength(CLUSTERS_TABS.length); + }); - it('passes child-component param to the component', () => { - expect(findComponent().props('defaultBranchName')).toBe(defaultBranchName); - }); + describe('tabs', () => { + it.each` + tabTitle | queryParamValue | lineNumber + ${'All'} | ${'all'} | ${0} + ${'Agent'} | ${AGENT} | ${1} + ${'Certificate'} | ${CERTIFICATE_BASED} | ${2} + `( + 'renders correct tab title and query param value', + ({ tabTitle, queryParamValue, lineNumber }) => { + expect(findGlTabAtIndex(lineNumber).attributes('title')).toBe(tabTitle); + expect(findGlTabAtIndex(lineNumber).props('queryParamValue')).toBe(queryParamValue); + }, + ); + }); - it('passes correct max-agents param to the modal', () => { - expect(findModal().props('maxAgents')).toBe(MAX_CLUSTERS_LIST); - }); + describe.each` + tab | tabName + ${'1'} | ${AGENT} + ${'2'} | ${CERTIFICATE_BASED} + `( + 'when the child component emits the tab change event for $tabName tab', + ({ tab, tabName }) => { + beforeEach(() => { + findComponent().vm.$emit('changeTab', tabName); + }); - describe('tabs', () => { - it.each` - tabTitle | queryParamValue | lineNumber - ${'All'} | ${'all'} | ${0} - ${'Agent'} | ${AGENT} | ${1} - ${'Certificate'} | ${CERTIFICATE_BASED} | ${2} - `( - 'renders correct tab title and query param value', - ({ tabTitle, queryParamValue, lineNumber }) => { - expect(findGlTabAtIndex(lineNumber).attributes('title')).toBe(tabTitle); - expect(findGlTabAtIndex(lineNumber).props('queryParamValue')).toBe(queryParamValue); - }, - ); - }); + it(`changes the tab value to ${tab}`, () => { + expect(findTabs().attributes('value')).toBe(tab); + }); + }, + ); - describe('when the child component emits the tab change event', () => { - beforeEach(() => { - findComponent().vm.$emit('changeTab', AGENT); - }); + describe.each` + tab | tabName | maxAgents + ${1} | ${AGENT} | ${MAX_LIST_COUNT} + ${2} | ${CERTIFICATE_BASED} | ${MAX_CLUSTERS_LIST} + `('when the active tab is $tabName', ({ tab, tabName, maxAgents }) => { + beforeEach(() => { + findTabs().vm.$emit('input', tab); + }); + + it('passes child-component param to the component', () => { + expect(findComponent().props('defaultBranchName')).toBe(defaultBranchName); + }); + + it(`sets max-agents param to ${maxAgents} and passes it to the modal`, () => { + expect(findModal().props('maxAgents')).toBe(maxAgents); + }); - it('changes the tab', () => { - expect(findTabs().attributes('value')).toBe('1'); + it(`sends the correct tracking event with the property '${tabName}'`, () => { + expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_CHANGE, { + label: EVENT_LABEL_TABS, + property: tabName, + }); + }); + }); }); - it('passes correct max-agents param to the modal', () => { - expect(findModal().props('maxAgents')).toBe(MAX_LIST_COUNT); + describe('when on group or admin level', () => { + beforeEach(() => { + createWrapper({ displayClusterAgents: false }); + }); + + it('renders correct number of tabs', () => { + expect(findAllTabs()).toHaveLength(1); + }); + + it('renders correct tab title', () => { + expect(findGlTabAtIndex(0).attributes('title')).toBe(CERTIFICATE_TAB.title); + }); }); - it('sends the correct tracking event', () => { - findTabs().vm.$emit('input', 1); - expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_CHANGE, { - label: EVENT_LABEL_TABS, - property: AGENT, + describe('when the certificate based clusters not enabled', () => { + beforeEach(() => { + createWrapper({ certificateBasedClustersEnabled: false }); + }); + + it('it displays only the Agent tab', () => { + expect(findAllTabs()).toHaveLength(1); + const agentTab = findGlTabAtIndex(0); + + expect(agentTab.props()).toMatchObject({ + queryParamValue: AGENT_TAB.queryParamValue, + titleLinkClass: '', + }); + expect(agentTab.attributes()).toMatchObject({ + title: AGENT_TAB.title, + }); }); }); }); diff --git a/spec/frontend/clusters_list/components/clusters_spec.js b/spec/frontend/clusters_list/components/clusters_spec.js index 82e667093aa..3f3f5e0daf6 100644 --- a/spec/frontend/clusters_list/components/clusters_spec.js +++ b/spec/frontend/clusters_list/components/clusters_spec.js @@ -2,7 +2,7 @@ import { GlLoadingIcon, GlPagination, GlDeprecatedSkeletonLoading as GlSkeletonLoading, - GlTable, + GlTableLite, } from '@gitlab/ui'; import * as Sentry from '@sentry/browser'; import { mount } from '@vue/test-utils'; @@ -23,7 +23,7 @@ describe('Clusters', () => { const totalClustersNumber = 6; const clustersEmptyStateImage = 'path/to/svg'; const emptyStateHelpText = null; - const newClusterPath = '/path/to/new/cluster'; + const addClusterPath = '/path/to/new/cluster'; const entryData = { endpoint, @@ -36,12 +36,12 @@ describe('Clusters', () => { const provideData = { clustersEmptyStateImage, emptyStateHelpText, - newClusterPath, + addClusterPath, }; const findLoader = () => wrapper.findComponent(GlLoadingIcon); const findPaginatedButtons = () => wrapper.findComponent(GlPagination); - const findTable = () => wrapper.findComponent(GlTable); + const findTable = () => wrapper.findComponent(GlTableLite); const findStatuses = () => findTable().findAll('.js-status'); const findEmptyState = () => wrapper.findComponent(ClustersEmptyState); @@ -51,7 +51,7 @@ describe('Clusters', () => { const createWrapper = ({ propsData = {} }) => { store = ClusterStore(entryData); - wrapper = mount(Clusters, { propsData, provide: provideData, store, stubs: { GlTable } }); + wrapper = mount(Clusters, { propsData, provide: provideData, store, stubs: { GlTableLite } }); return axios.waitForAll(); }; diff --git a/spec/frontend/clusters_list/components/install_agent_modal_spec.js b/spec/frontend/clusters_list/components/install_agent_modal_spec.js index 37432ed0193..38f653509a8 100644 --- a/spec/frontend/clusters_list/components/install_agent_modal_spec.js +++ b/spec/frontend/clusters_list/components/install_agent_modal_spec.js @@ -6,6 +6,7 @@ import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { mockTracking } from 'helpers/tracking_helper'; import AvailableAgentsDropdown from '~/clusters_list/components/available_agents_dropdown.vue'; import InstallAgentModal from '~/clusters_list/components/install_agent_modal.vue'; +import AgentToken from '~/clusters_list/components/agent_token.vue'; import { I18N_AGENT_MODAL, MAX_LIST_COUNT, @@ -21,7 +22,6 @@ import createAgentMutation from '~/clusters_list/graphql/mutations/create_agent. import createAgentTokenMutation from '~/clusters_list/graphql/mutations/create_agent_token.mutation.graphql'; import createMockApollo from 'helpers/mock_apollo_helper'; import waitForPromises from 'helpers/wait_for_promises'; -import CodeBlock from '~/vue_shared/components/code_block.vue'; import { createAgentResponse, createAgentErrorResponse, @@ -39,6 +39,7 @@ const kasAddress = 'kas.example.com'; const emptyStateImage = 'path/to/image'; const defaultBranchName = 'default'; const maxAgents = MAX_LIST_COUNT; +const i18n = I18N_AGENT_MODAL; describe('InstallAgentModal', () => { let wrapper; @@ -60,6 +61,7 @@ describe('InstallAgentModal', () => { const findModal = () => wrapper.findComponent(ModalStub); const findAgentDropdown = () => findModal().findComponent(AvailableAgentsDropdown); const findAlert = () => findModal().findComponent(GlAlert); + const findAgentInstructions = () => findModal().findComponent(AgentToken); const findButtonByVariant = (variant) => findModal() .findAll(GlButton) @@ -67,7 +69,7 @@ describe('InstallAgentModal', () => { const findActionButton = () => findButtonByVariant('confirm'); const findCancelButton = () => findButtonByVariant('default'); const findPrimaryButton = () => wrapper.findByTestId('agent-primary-button'); - const findImage = () => wrapper.findByRole('img', { alt: I18N_AGENT_MODAL.empty_state.altText }); + const findImage = () => wrapper.findByRole('img', { alt: i18n.altText }); const expectDisabledAttribute = (element, disabled) => { if (disabled) { @@ -140,16 +142,16 @@ describe('InstallAgentModal', () => { apolloProvider = null; }); - describe('when agent configurations are present', () => { - const i18n = I18N_AGENT_MODAL.agent_registration; - + describe('when KAS is enabled', () => { describe('initial state', () => { it('renders the dropdown for available agents', () => { expect(findAgentDropdown().isVisible()).toBe(true); + }); + + it("doesn't render agent installation instructions", () => { expect(findModal().text()).not.toContain(i18n.basicInstallTitle); expect(findModal().findComponent(GlFormInputGroup).exists()).toBe(false); expect(findModal().findComponent(GlAlert).exists()).toBe(false); - expect(findModal().findComponent(CodeBlock).exists()).toBe(false); }); it('renders a cancel button', () => { @@ -220,19 +222,7 @@ describe('InstallAgentModal', () => { }); it('shows agent instructions', () => { - const modalText = findModal().text(); - expect(modalText).toContain(i18n.basicInstallTitle); - expect(modalText).toContain(i18n.basicInstallBody); - - const token = findModal().findComponent(GlFormInputGroup); - expect(token.props('value')).toBe('mock-agent-token'); - - const alert = findModal().findComponent(GlAlert); - expect(alert.props('title')).toBe(i18n.tokenSingleUseWarningTitle); - - const code = findModal().findComponent(CodeBlock).props('code'); - expect(code).toContain('--agent-token=mock-agent-token'); - expect(code).toContain('--kas-address=kas.example.com'); + expect(findAgentInstructions().exists()).toBe(true); }); describe('error creating agent', () => { @@ -272,44 +262,7 @@ describe('InstallAgentModal', () => { }); }); - describe('when there are no agent configurations present', () => { - const i18n = I18N_AGENT_MODAL.empty_state; - const apolloQueryEmptyResponse = { - data: { - project: { - clusterAgents: { nodes: [] }, - agentConfigurations: { nodes: [] }, - }, - }, - }; - - beforeEach(() => { - apolloProvider = createMockApollo([ - [getAgentConfigurations, jest.fn().mockResolvedValue(apolloQueryEmptyResponse)], - ]); - createWrapper(); - }); - - it('renders empty state image', () => { - expect(findImage().attributes('src')).toBe(emptyStateImage); - }); - - it('renders a primary button', () => { - expect(findPrimaryButton().isVisible()).toBe(true); - expect(findPrimaryButton().text()).toBe(i18n.primaryButton); - }); - - it('sends the event with the modalType', () => { - findModal().vm.$emit('show'); - expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_OPEN, { - label: EVENT_LABEL_MODAL, - property: MODAL_TYPE_EMPTY, - }); - }); - }); - describe('when KAS is disabled', () => { - const i18n = I18N_AGENT_MODAL.empty_state; beforeEach(async () => { apolloProvider = createMockApollo([ [getAgentConfigurations, jest.fn().mockResolvedValue(kasDisabledErrorResponse)], @@ -331,11 +284,19 @@ describe('InstallAgentModal', () => { it('renders a cancel button', () => { expect(findCancelButton().isVisible()).toBe(true); - expect(findCancelButton().text()).toBe(i18n.done); + expect(findCancelButton().text()).toBe(i18n.close); }); it("doesn't render a secondary button", () => { expect(findPrimaryButton().exists()).toBe(false); }); + + it('sends the event with the modalType', () => { + findModal().vm.$emit('show'); + expect(trackingSpy).toHaveBeenCalledWith(undefined, EVENT_ACTIONS_OPEN, { + label: EVENT_LABEL_MODAL, + property: MODAL_TYPE_EMPTY, + }); + }); }); }); |