diff options
Diffstat (limited to 'spec/frontend/clusters_list/components')
8 files changed, 99 insertions, 199 deletions
diff --git a/spec/frontend/clusters_list/components/agent_empty_state_spec.js b/spec/frontend/clusters_list/components/agent_empty_state_spec.js index ed2a0d0b97b..22775aa6603 100644 --- a/spec/frontend/clusters_list/components/agent_empty_state_spec.js +++ b/spec/frontend/clusters_list/components/agent_empty_state_spec.js @@ -1,8 +1,6 @@ -import { GlEmptyState, GlSprintf, GlLink, GlButton } from '@gitlab/ui'; +import { GlEmptyState, GlSprintf, GlLink } from '@gitlab/ui'; import AgentEmptyState from '~/clusters_list/components/agent_empty_state.vue'; -import { INSTALL_AGENT_MODAL_ID } from '~/clusters_list/constants'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { helpPagePath } from '~/helpers/help_page_helper'; const emptyStateImage = '/path/to/image'; @@ -15,16 +13,12 @@ describe('AgentEmptyStateComponent', () => { }; const findInstallDocsLink = () => wrapper.findComponent(GlLink); - const findIntegrationButton = () => wrapper.findComponent(GlButton); const findEmptyState = () => wrapper.findComponent(GlEmptyState); beforeEach(() => { wrapper = shallowMountExtended(AgentEmptyState, { provide: provideData, - directives: { - GlModalDirective: createMockDirective(), - }, - stubs: { GlEmptyState, GlSprintf }, + stubs: { GlSprintf }, }); }); @@ -38,17 +32,7 @@ describe('AgentEmptyStateComponent', () => { expect(findEmptyState().exists()).toBe(true); }); - it('renders button for the agent registration', () => { - expect(findIntegrationButton().exists()).toBe(true); - }); - it('renders correct href attributes for the docs link', () => { expect(findInstallDocsLink().attributes('href')).toBe(installDocsUrl); }); - - it('renders correct modal id for the agent registration modal', () => { - const binding = getBinding(findIntegrationButton().element, 'gl-modal-directive'); - - expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID); - }); }); diff --git a/spec/frontend/clusters_list/components/agent_table_spec.js b/spec/frontend/clusters_list/components/agent_table_spec.js index db723622a51..a466a35428a 100644 --- a/spec/frontend/clusters_list/components/agent_table_spec.js +++ b/spec/frontend/clusters_list/components/agent_table_spec.js @@ -9,7 +9,7 @@ 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'; + '/help/user/clusters/agent/install/index#create-an-agent-configuration-file'; const provideData = { gitlabVersion: '14.8', diff --git a/spec/frontend/clusters_list/components/agent_token_spec.js b/spec/frontend/clusters_list/components/agent_token_spec.js index a80c8ffaad4..7f6ec2eb3a2 100644 --- a/spec/frontend/clusters_list/components/agent_token_spec.js +++ b/spec/frontend/clusters_list/components/agent_token_spec.js @@ -53,7 +53,7 @@ describe('InstallAgentModal', () => { }); it('shows agent token as an input value', () => { - expect(findInput().props('value')).toBe('agent-token'); + expect(findInput().props('value')).toBe(agentToken); }); it('renders a copy button', () => { @@ -65,12 +65,12 @@ describe('InstallAgentModal', () => { }); it('shows warning alert', () => { - expect(findAlert().props('title')).toBe(I18N_AGENT_TOKEN.tokenSingleUseWarningTitle); + expect(findAlert().text()).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'); + expect(findCodeBlock().props('code')).toContain(`--set config.token=${agentToken}`); + expect(findCodeBlock().props('code')).toContain(`--set config.kasAddress=${kasAddress}`); }); }); }); diff --git a/spec/frontend/clusters_list/components/agents_spec.js b/spec/frontend/clusters_list/components/agents_spec.js index 3cfa4b92bc0..92cfff7d490 100644 --- a/spec/frontend/clusters_list/components/agents_spec.js +++ b/spec/frontend/clusters_list/components/agents_spec.js @@ -308,7 +308,7 @@ describe('Agents', () => { }); it('displays an alert message', () => { - expect(findAlert().text()).toBe('An error occurred while loading your Agents'); + expect(findAlert().text()).toBe('An error occurred while loading your agents'); }); }); 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 eca2b1f5cb1..197735d3c77 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,6 @@ import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui'; 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'; @@ -18,6 +19,7 @@ describe('AvailableAgentsDropdown', () => { propsData, stubs: { GlDropdown }, }); + wrapper.vm.$refs.dropdown.hide = jest.fn(); }; afterEach(() => { @@ -96,6 +98,25 @@ describe('AvailableAgentsDropdown', () => { expect(findDropdown().props('text')).toBe('new-agent'); }); }); + + 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 })); + }); + + 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'); + }); + + it('closes the dropdown', () => { + expect(wrapper.vm.$refs.dropdown.hide).toHaveBeenCalledTimes(1); + }); + }); }); describe('registration in progress', () => { diff --git a/spec/frontend/clusters_list/components/clusters_actions_spec.js b/spec/frontend/clusters_list/components/clusters_actions_spec.js index 312df12ab5f..21dcc66c639 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, GlButton } from '@gitlab/ui'; +import { GlDropdown, GlDropdownItem, GlTooltip } 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'; @@ -7,12 +7,14 @@ import { INSTALL_AGENT_MODAL_ID, CLUSTERS_ACTIONS } from '~/clusters_list/consta describe('ClustersActionsComponent', () => { let wrapper; - const newClusterPath = 'path/to/create/cluster'; + const newClusterPath = 'path/to/add/cluster'; const addClusterPath = 'path/to/connect/existing/cluster'; + const newClusterDocsPath = 'path/to/create/new/cluster'; const defaultProvide = { newClusterPath, addClusterPath, + newClusterDocsPath, canAddCluster: true, displayClusterAgents: true, certificateBasedClustersEnabled: true, @@ -20,12 +22,13 @@ describe('ClustersActionsComponent', () => { const findDropdown = () => wrapper.findComponent(GlDropdown); const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem); + const findTooltip = () => wrapper.findComponent(GlTooltip); const findDropdownItemIds = () => findDropdownItems().wrappers.map((x) => x.attributes('data-testid')); + const findDropdownItemTexts = () => findDropdownItems().wrappers.map((x) => x.text()); const findNewClusterLink = () => wrapper.findByTestId('new-cluster-link'); + const findNewClusterDocsLink = () => wrapper.findByTestId('create-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, { @@ -35,7 +38,6 @@ describe('ClustersActionsComponent', () => { }, directives: { GlModalDirective: createMockDirective(), - GlTooltip: createMockDirective(), }, }); }; @@ -49,12 +51,15 @@ describe('ClustersActionsComponent', () => { }); describe('when the certificate based clusters are enabled', () => { it('renders actions menu', () => { - expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.actionsButton); + expect(findDropdown().exists()).toBe(true); }); - it('renders correct href attributes for the links', () => { - expect(findNewClusterLink().attributes('href')).toBe(newClusterPath); - expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath); + it('shows split button in dropdown', () => { + expect(findDropdown().props('split')).toBe(true); + }); + + it("doesn't show the tooltip", () => { + expect(findTooltip().exists()).toBe(false); }); describe('when user cannot add clusters', () => { @@ -67,8 +72,7 @@ describe('ClustersActionsComponent', () => { }); it('shows tooltip explaining why dropdown is disabled', () => { - const tooltip = getBinding(findDropdown().element, 'gl-tooltip'); - expect(tooltip.value).toBe(CLUSTERS_ACTIONS.dropdownDisabledHint); + expect(findTooltip().attributes('title')).toBe(CLUSTERS_ACTIONS.dropdownDisabledHint); }); it('does not bind split dropdown button', () => { @@ -79,33 +83,36 @@ describe('ClustersActionsComponent', () => { }); 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(`displays default action as ${CLUSTERS_ACTIONS.connectWithAgent}`, () => { + expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.connectWithAgent); }); - it('renders correct modal id for the agent link', () => { - const binding = getBinding(findConnectNewAgentLink().element, 'gl-modal-directive'); + it('renders correct modal id for the default action', () => { + const binding = getBinding(findDropdown().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('renders a dropdown with 3 actions items', () => { + expect(findDropdownItemIds()).toEqual([ + 'create-cluster-link', + 'new-cluster-link', + 'connect-cluster-link', + ]); }); - it('shows split button in dropdown', () => { - expect(findDropdown().props('split')).toBe(true); + it('renders correct texts for the dropdown items', () => { + expect(findDropdownItemTexts()).toEqual([ + CLUSTERS_ACTIONS.createCluster, + CLUSTERS_ACTIONS.createClusterCertificate, + CLUSTERS_ACTIONS.connectClusterCertificate, + ]); }); - it('binds split button with modal id', () => { - const binding = getBinding(findDropdown().element, 'gl-modal-directive'); - - expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID); + it('renders correct href attributes for the links', () => { + expect(findNewClusterDocsLink().attributes('href')).toBe(newClusterDocsPath); + expect(findNewClusterLink().attributes('href')).toBe(newClusterPath); + expect(findConnectClusterLink().attributes('href')).toBe(addClusterPath); }); }); @@ -114,17 +121,20 @@ describe('ClustersActionsComponent', () => { createWrapper({ displayClusterAgents: false }); }); - it('renders a dropdown with 2 actions items', () => { - expect(findDropdownItemIds()).toEqual(['new-cluster-link', 'connect-cluster-link']); + it(`displays default action as ${CLUSTERS_ACTIONS.connectClusterDeprecated}`, () => { + expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.connectClusterDeprecated); }); - it('shows tooltip', () => { - const tooltip = getBinding(findDropdown().element, 'gl-tooltip'); - expect(tooltip.value).toBe(CLUSTERS_ACTIONS.connectExistingCluster); + it('renders a dropdown with 1 action item', () => { + expect(findDropdownItemIds()).toEqual(['new-cluster-link']); }); - it('does not show split button in dropdown', () => { - expect(findDropdown().props('split')).toBe(false); + it('renders correct text for the dropdown item', () => { + expect(findDropdownItemTexts()).toEqual([CLUSTERS_ACTIONS.createClusterDeprecated]); + }); + + it('renders correct href attributes for the links', () => { + expect(findNewClusterLink().attributes('href')).toBe(newClusterPath); }); it('does not bind dropdown button to modal', () => { @@ -140,17 +150,26 @@ describe('ClustersActionsComponent', () => { createWrapper({ certificateBasedClustersEnabled: false }); }); - it('it does not show the the dropdown', () => { - expect(findDropdown().exists()).toBe(false); + it(`displays default action as ${CLUSTERS_ACTIONS.connectCluster}`, () => { + expect(findDropdown().props('text')).toBe(CLUSTERS_ACTIONS.connectCluster); }); - 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); + it('renders correct modal id for the default action', () => { + const binding = getBinding(findDropdown().element, 'gl-modal-directive'); + + expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID); + }); + + it('renders a dropdown with 1 action item', () => { + expect(findDropdownItemIds()).toEqual(['create-cluster-link']); + }); + + it('renders correct text for the dropdown item', () => { + expect(findDropdownItemTexts()).toEqual([CLUSTERS_ACTIONS.createCluster]); + }); + + it('renders correct href attributes for the links', () => { + expect(findNewClusterDocsLink().attributes('href')).toBe(newClusterDocsPath); }); }); }); 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 fe2189296a6..2c3a224f3c8 100644 --- a/spec/frontend/clusters_list/components/clusters_empty_state_spec.js +++ b/spec/frontend/clusters_list/components/clusters_empty_state_spec.js @@ -1,10 +1,8 @@ -import { GlEmptyState, GlButton } from '@gitlab/ui'; +import { GlEmptyState } from '@gitlab/ui'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import ClustersEmptyState from '~/clusters_list/components/clusters_empty_state.vue'; -import ClusterStore from '~/clusters_list/store'; const clustersEmptyStateImage = 'path/to/svg'; -const addClusterPath = '/path/to/connect/cluster'; const emptyStateHelpText = 'empty state text'; describe('ClustersEmptyStateComponent', () => { @@ -12,52 +10,28 @@ describe('ClustersEmptyStateComponent', () => { const defaultProvideData = { clustersEmptyStateImage, - addClusterPath, }; - const findButton = () => wrapper.findComponent(GlButton); const findEmptyStateText = () => wrapper.findByTestId('clusters-empty-state-text'); - const createWrapper = ({ - provideData = { emptyStateHelpText: null }, - isChildComponent = false, - canAddCluster = true, - } = {}) => { + const createWrapper = ({ provideData = { emptyStateHelpText: null } } = {}) => { wrapper = shallowMountExtended(ClustersEmptyState, { - store: ClusterStore({ canAddCluster }), - propsData: { isChildComponent }, provide: { ...defaultProvideData, ...provideData }, stubs: { GlEmptyState }, }); }; - beforeEach(() => { - createWrapper(); - }); - afterEach(() => { wrapper.destroy(); }); - describe('when the component is loaded independently', () => { - it('should render the action button', () => { - expect(findButton().exists()).toBe(true); - }); - }); - describe('when the help text is not provided', () => { - it('should not render the empty state text', () => { - expect(findEmptyStateText().exists()).toBe(false); - }); - }); - - describe('when the component is loaded as a child component', () => { beforeEach(() => { - createWrapper({ isChildComponent: true }); + createWrapper(); }); - it('should not render the action button', () => { - expect(findButton().exists()).toBe(false); + it('should not render the empty state text', () => { + expect(findEmptyStateText().exists()).toBe(false); }); }); @@ -70,13 +44,4 @@ describe('ClustersEmptyStateComponent', () => { expect(findEmptyStateText().text()).toBe(emptyStateHelpText); }); }); - - describe('when the user cannot add clusters', () => { - beforeEach(() => { - createWrapper({ canAddCluster: false }); - }); - it('should disable the button', () => { - expect(findButton().props('disabled')).toBe(true); - }); - }); }); diff --git a/spec/frontend/clusters_list/components/clusters_view_all_spec.js b/spec/frontend/clusters_list/components/clusters_view_all_spec.js index 2c1e3d909cc..b4eb9242003 100644 --- a/spec/frontend/clusters_list/components/clusters_view_all_spec.js +++ b/spec/frontend/clusters_list/components/clusters_view_all_spec.js @@ -1,24 +1,21 @@ -import { GlCard, GlLoadingIcon, GlButton, GlSprintf, GlBadge } from '@gitlab/ui'; +import { GlCard, GlLoadingIcon, GlSprintf, GlBadge } from '@gitlab/ui'; import Vue from 'vue'; import Vuex from 'vuex'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import ClustersViewAll from '~/clusters_list/components/clusters_view_all.vue'; import Agents from '~/clusters_list/components/agents.vue'; import Clusters from '~/clusters_list/components/clusters.vue'; -import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import { AGENT, CERTIFICATE_BASED, AGENT_CARD_INFO, CERTIFICATE_BASED_CARD_INFO, MAX_CLUSTERS_LIST, - INSTALL_AGENT_MODAL_ID, } from '~/clusters_list/constants'; import { sprintf } from '~/locale'; Vue.use(Vuex); -const addClusterPath = '/path/to/add/cluster'; const defaultBranchName = 'default-branch'; describe('ClustersViewAllComponent', () => { @@ -32,11 +29,6 @@ describe('ClustersViewAllComponent', () => { defaultBranchName, }; - const defaultProvide = { - addClusterPath, - canAddCluster: true, - }; - const entryData = { loadingClusters: false, totalClusters: 0, @@ -46,37 +38,20 @@ describe('ClustersViewAllComponent', () => { const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon); const findAgentsComponent = () => wrapper.findComponent(Agents); const findClustersComponent = () => wrapper.findComponent(Clusters); - const findInstallAgentButtonTooltip = () => wrapper.findByTestId('install-agent-button-tooltip'); - const findConnectExistingClusterButtonTooltip = () => - wrapper.findByTestId('connect-existing-cluster-button-tooltip'); const findCardsContainer = () => wrapper.findByTestId('clusters-cards-container'); const findAgentCardTitle = () => wrapper.findByTestId('agent-card-title'); const findRecommendedBadge = () => wrapper.findComponent(GlBadge); const findClustersCardTitle = () => wrapper.findByTestId('clusters-card-title'); - const findFooterButton = (line) => findCards().at(line).findComponent(GlButton); - const getTooltipText = (el) => { - const binding = getBinding(el, 'gl-tooltip'); - - return binding.value; - }; const createStore = (initialState) => new Vuex.Store({ state: initialState, }); - const createWrapper = ({ initialState = entryData, provideData } = {}) => { + const createWrapper = ({ initialState = entryData } = {}) => { wrapper = shallowMountExtended(ClustersViewAll, { store: createStore(initialState), propsData, - provide: { - ...defaultProvide, - ...provideData, - }, - directives: { - GlModalDirective: createMockDirective(), - GlTooltip: createMockDirective(), - }, stubs: { GlCard, GlSprintf }, }); }; @@ -138,25 +113,10 @@ describe('ClustersViewAllComponent', () => { expect(findAgentsComponent().props('defaultBranchName')).toBe(defaultBranchName); }); - it('should show install new Agent button in the footer', () => { - expect(findFooterButton(0).exists()).toBe(true); - expect(findFooterButton(0).props('disabled')).toBe(false); - }); - - it('does not show tooltip for install new Agent button', () => { - expect(getTooltipText(findInstallAgentButtonTooltip().element)).toBe(''); - }); - describe('when there are no agents', () => { it('should show the empty title', () => { expect(findAgentCardTitle().text()).toBe(AGENT_CARD_INFO.emptyTitle); }); - - it('should render correct modal id for the agent link', () => { - const binding = getBinding(findFooterButton(0).element, 'gl-modal-directive'); - - expect(binding.value).toBe(INSTALL_AGENT_MODAL_ID); - }); }); describe('when the agents are present', () => { @@ -191,22 +151,6 @@ describe('ClustersViewAllComponent', () => { }); }); }); - - describe('when the user cannot add clusters', () => { - beforeEach(() => { - createWrapper({ provideData: { canAddCluster: false } }); - }); - - it('should disable the button', () => { - expect(findFooterButton(0).props('disabled')).toBe(true); - }); - - it('should show a tooltip explaining why the button is disabled', () => { - expect(getTooltipText(findInstallAgentButtonTooltip().element)).toBe( - AGENT_CARD_INFO.installAgentDisabledHint, - ); - }); - }); }); describe('clusters tab', () => { @@ -214,43 +158,10 @@ describe('ClustersViewAllComponent', () => { expect(findClustersComponent().props('limit')).toBe(MAX_CLUSTERS_LIST); }); - it('should pass the is-child-component prop', () => { - expect(findClustersComponent().props('isChildComponent')).toBe(true); - }); - describe('when there are no clusters', () => { it('should show the empty title', () => { expect(findClustersCardTitle().text()).toBe(CERTIFICATE_BASED_CARD_INFO.emptyTitle); }); - - it('should show install new cluster button in the footer', () => { - expect(findFooterButton(1).exists()).toBe(true); - expect(findFooterButton(1).props('disabled')).toBe(false); - }); - - it('should render correct href for the button in the footer', () => { - expect(findFooterButton(1).attributes('href')).toBe(addClusterPath); - }); - - it('does not show tooltip for install new cluster button', () => { - expect(getTooltipText(findConnectExistingClusterButtonTooltip().element)).toBe(''); - }); - }); - - describe('when the user cannot add clusters', () => { - beforeEach(() => { - createWrapper({ provideData: { canAddCluster: false } }); - }); - - it('should disable the button', () => { - expect(findFooterButton(1).props('disabled')).toBe(true); - }); - - it('should show a tooltip explaining why the button is disabled', () => { - expect(getTooltipText(findConnectExistingClusterButtonTooltip().element)).toBe( - CERTIFICATE_BASED_CARD_INFO.connectExistingClusterDisabledHint, - ); - }); }); describe('when the clusters are present', () => { |