diff options
Diffstat (limited to 'spec/frontend/clusters/agents/components/integration_status_spec.js')
-rw-r--r-- | spec/frontend/clusters/agents/components/integration_status_spec.js | 111 |
1 files changed, 111 insertions, 0 deletions
diff --git a/spec/frontend/clusters/agents/components/integration_status_spec.js b/spec/frontend/clusters/agents/components/integration_status_spec.js new file mode 100644 index 00000000000..36f0e622452 --- /dev/null +++ b/spec/frontend/clusters/agents/components/integration_status_spec.js @@ -0,0 +1,111 @@ +import { GlCollapse, GlButton, GlIcon } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import IntegrationStatus from '~/clusters/agents/components/integration_status.vue'; +import AgentIntegrationStatusRow from '~/clusters/agents/components/agent_integration_status_row.vue'; +import { ACTIVE_CONNECTION_TIME } from '~/clusters_list/constants'; +import { + INTEGRATION_STATUS_VALID_TOKEN, + INTEGRATION_STATUS_NO_TOKEN, + INTEGRATION_STATUS_RESTRICTED_CI_CD, +} from '~/clusters/agents/constants'; + +const connectedTimeNow = new Date(); +const connectedTimeInactive = new Date(connectedTimeNow.getTime() - ACTIVE_CONNECTION_TIME); + +describe('IntegrationStatus', () => { + let wrapper; + + const createWrapper = (tokens = []) => { + wrapper = shallowMountExtended(IntegrationStatus, { + propsData: { tokens }, + }); + }; + + const findCollapseButton = () => wrapper.findComponent(GlButton); + const findCollapse = () => wrapper.findComponent(GlCollapse); + const findStatusIcon = () => wrapper.findComponent(GlIcon); + const findAgentStatus = () => wrapper.findByTestId('agent-status'); + const findAgentIntegrationStatusRows = () => wrapper.findAllComponents(AgentIntegrationStatusRow); + + afterEach(() => { + wrapper.destroy(); + }); + + it.each` + lastUsedAt | status | iconName + ${null} | ${'Never connected'} | ${'status-neutral'} + ${connectedTimeNow} | ${'Connected'} | ${'status-success'} + ${connectedTimeInactive} | ${'Not connected'} | ${'status-alert'} + `( + 'displays correct text and icon when agent connection status is "$status"', + ({ lastUsedAt, status, iconName }) => { + const tokens = [{ lastUsedAt }]; + createWrapper(tokens); + + expect(findStatusIcon().props('name')).toBe(iconName); + expect(findAgentStatus().text()).toBe(status); + }, + ); + + describe('default', () => { + beforeEach(() => { + createWrapper(); + }); + + it('shows the collapse toggle button', () => { + expect(findCollapseButton().text()).toBe(wrapper.vm.$options.i18n.title); + expect(findCollapseButton().attributes()).toMatchObject({ + variant: 'link', + icon: 'chevron-right', + size: 'small', + }); + }); + + it('sets collapse component as invisible by default', () => { + expect(findCollapse().props('visible')).toBeUndefined(); + }); + }); + + describe('when user clicks collapse toggle', () => { + beforeEach(() => { + createWrapper(); + findCollapseButton().vm.$emit('click'); + }); + + it('changes the collapse button icon', () => { + expect(findCollapseButton().props('icon')).toBe('chevron-down'); + }); + + it('sets collapse component as visible', () => { + expect(findCollapse().attributes('visible')).toBe('true'); + }); + }); + + describe('integration status details', () => { + it.each` + agentStatus | tokens | integrationStatuses + ${'active'} | ${[{ lastUsedAt: connectedTimeNow }]} | ${[INTEGRATION_STATUS_VALID_TOKEN, INTEGRATION_STATUS_RESTRICTED_CI_CD]} + ${'inactive'} | ${[{ lastUsedAt: connectedTimeInactive }]} | ${[INTEGRATION_STATUS_RESTRICTED_CI_CD]} + ${'inactive'} | ${[]} | ${[INTEGRATION_STATUS_NO_TOKEN, INTEGRATION_STATUS_RESTRICTED_CI_CD]} + ${'unused'} | ${[{ lastUsedAt: null }]} | ${[INTEGRATION_STATUS_RESTRICTED_CI_CD]} + ${'unused'} | ${[]} | ${[INTEGRATION_STATUS_NO_TOKEN, INTEGRATION_STATUS_RESTRICTED_CI_CD]} + `( + 'displays AgentIntegrationStatusRow component with correct properties when agent status is $agentStatus and agent has $tokens.length tokens', + ({ tokens, integrationStatuses }) => { + createWrapper(tokens); + + expect(findAgentIntegrationStatusRows().length).toBe(integrationStatuses.length); + + integrationStatuses.forEach((integrationStatus, index) => { + expect(findAgentIntegrationStatusRows().at(index).props()).toMatchObject({ + icon: integrationStatus.icon, + iconClass: integrationStatus.iconClass, + text: integrationStatus.text, + helpUrl: integrationStatus.helpUrl || null, + featureName: integrationStatus.featureName || null, + }); + }); + }, + ); + }); +}); |