2021-11-15 15:10:57 +00:00
import { GlLink , GlIcon } from '@gitlab/ui' ;
2022-02-04 09:14:46 +00:00
import { sprintf } from '~/locale' ;
2021-10-08 18:13:02 +00:00
import AgentTable from '~/clusters_list/components/agent_table.vue' ;
2022-01-28 00:14:06 +00:00
import DeleteAgentButton from '~/clusters_list/components/delete_agent_button.vue' ;
2022-02-04 09:14:46 +00:00
import { I18N _AGENT _TABLE } from '~/clusters_list/constants' ;
2021-10-08 18:13:02 +00:00
import { mountExtended } from 'helpers/vue_test_utils_helper' ;
2021-12-29 18:13:42 +00:00
import { stubComponent } from 'helpers/stub_component' ;
2021-10-08 18:13:02 +00:00
import timeagoMixin from '~/vue_shared/mixins/timeago' ;
2022-02-04 09:14:46 +00:00
import { clusterAgents , connectedTimeNow , connectedTimeInactive } from './mock_data' ;
2021-10-08 18:13:02 +00:00
2022-03-16 12:07:24 +00:00
const defaultConfigHelpUrl =
2022-04-01 15:08:40 +00:00
'/help/user/clusters/agent/install/index#create-an-agent-configuration-file' ;
2022-03-16 12:07:24 +00:00
2021-12-29 18:13:42 +00:00
const provideData = {
2022-02-04 09:14:46 +00:00
gitlabVersion : '14.8' ,
2022-05-12 18:08:38 +00:00
kasVersion : '14.8' ,
2021-12-29 18:13:42 +00:00
} ;
2021-10-08 18:13:02 +00:00
const propsData = {
2022-02-04 09:14:46 +00:00
agents : clusterAgents ,
2021-10-08 18:13:02 +00:00
} ;
2022-01-28 00:14:06 +00:00
const DeleteAgentButtonStub = stubComponent ( DeleteAgentButton , {
2021-12-29 18:13:42 +00:00
template : ` <div></div> ` ,
} ) ;
2022-02-04 09:14:46 +00:00
const outdatedTitle = I18N _AGENT _TABLE . versionOutdatedTitle ;
const mismatchTitle = I18N _AGENT _TABLE . versionMismatchTitle ;
const mismatchOutdatedTitle = I18N _AGENT _TABLE . versionMismatchOutdatedTitle ;
const outdatedText = sprintf ( I18N _AGENT _TABLE . versionOutdatedText , {
2022-05-12 18:08:38 +00:00
version : provideData . kasVersion ,
2022-02-04 09:14:46 +00:00
} ) ;
const mismatchText = I18N _AGENT _TABLE . versionMismatchText ;
2021-10-08 18:13:02 +00:00
describe ( 'AgentTable' , ( ) => {
let wrapper ;
const findAgentLink = ( at ) => wrapper . findAllByTestId ( 'cluster-agent-name-link' ) . at ( at ) ;
const findStatusText = ( at ) => wrapper . findAllByTestId ( 'cluster-agent-connection-status' ) . at ( at ) ;
2022-03-16 12:07:24 +00:00
const findStatusIcon = ( at ) => findStatusText ( at ) . find ( GlIcon ) ;
2021-10-08 18:13:02 +00:00
const findLastContactText = ( at ) => wrapper . findAllByTestId ( 'cluster-agent-last-contact' ) . at ( at ) ;
2022-02-04 09:14:46 +00:00
const findVersionText = ( at ) => wrapper . findAllByTestId ( 'cluster-agent-version' ) . at ( at ) ;
2021-10-08 18:13:02 +00:00
const findConfiguration = ( at ) =>
wrapper . findAllByTestId ( 'cluster-agent-configuration-link' ) . at ( at ) ;
2022-01-28 00:14:06 +00:00
const findDeleteAgentButton = ( ) => wrapper . findAllComponents ( DeleteAgentButton ) ;
2021-10-08 18:13:02 +00:00
beforeEach ( ( ) => {
2021-12-29 18:13:42 +00:00
wrapper = mountExtended ( AgentTable , {
propsData ,
provide : provideData ,
stubs : {
2022-01-28 00:14:06 +00:00
DeleteAgentButton : DeleteAgentButtonStub ,
2021-12-29 18:13:42 +00:00
} ,
} ) ;
2021-10-08 18:13:02 +00:00
} ) ;
afterEach ( ( ) => {
if ( wrapper ) {
wrapper . destroy ( ) ;
}
} ) ;
describe ( 'agent table' , ( ) => {
it . each `
agentName | link | lineNumber
$ { 'agent-1' } | $ { '/agent-1' } | $ { 0 }
$ { 'agent-2' } | $ { '/agent-2' } | $ { 1 }
2022-02-04 09:14:46 +00:00
` ('displays agent link for $ agentName', ({ agentName, link, lineNumber }) => {
2021-10-08 18:13:02 +00:00
expect ( findAgentLink ( lineNumber ) . text ( ) ) . toBe ( agentName ) ;
expect ( findAgentLink ( lineNumber ) . attributes ( 'href' ) ) . toBe ( link ) ;
} ) ;
it . each `
status | iconName | lineNumber
$ { 'Never connected' } | $ { 'status-neutral' } | $ { 0 }
$ { 'Connected' } | $ { 'status-success' } | $ { 1 }
$ { 'Not connected' } | $ { 'severity-critical' } | $ { 2 }
2022-02-04 09:14:46 +00:00
` (
'displays agent connection status as "$status" at line $lineNumber' ,
( { status , iconName , lineNumber } ) => {
expect ( findStatusText ( lineNumber ) . text ( ) ) . toBe ( status ) ;
expect ( findStatusIcon ( lineNumber ) . props ( 'name' ) ) . toBe ( iconName ) ;
} ,
) ;
2021-10-08 18:13:02 +00:00
it . each `
lastContact | lineNumber
$ { 'Never' } | $ { 0 }
$ { timeagoMixin . methods . timeFormatted ( connectedTimeNow ) } | $ { 1 }
$ { timeagoMixin . methods . timeFormatted ( connectedTimeInactive ) } | $ { 2 }
2022-02-04 09:14:46 +00:00
` (
'displays agent last contact time as "$lastContact" at line $lineNumber' ,
( { lastContact , lineNumber } ) => {
expect ( findLastContactText ( lineNumber ) . text ( ) ) . toBe ( lastContact ) ;
} ,
) ;
describe . each `
agent | version | podsNumber | versionMismatch | versionOutdated | title | texts | lineNumber
$ { 'agent-1' } | $ { '' } | $ { 1 } | $ { false } | $ { false } | $ { '' } | $ { '' } | $ { 0 }
$ { 'agent-2' } | $ { '14.8' } | $ { 2 } | $ { false } | $ { false } | $ { '' } | $ { '' } | $ { 1 }
$ { 'agent-3' } | $ { '14.5' } | $ { 1 } | $ { false } | $ { true } | $ { outdatedTitle } | $ { [ outdatedText ] } | $ { 2 }
$ { 'agent-4' } | $ { '14.7' } | $ { 2 } | $ { true } | $ { false } | $ { mismatchTitle } | $ { [ mismatchText ] } | $ { 3 }
$ { 'agent-5' } | $ { '14.3' } | $ { 2 } | $ { true } | $ { true } | $ { mismatchOutdatedTitle } | $ { [ mismatchText , outdatedText ] } | $ { 4 }
` (
'agent version column at line $lineNumber' ,
( {
agent ,
version ,
podsNumber ,
versionMismatch ,
versionOutdated ,
title ,
texts ,
lineNumber ,
} ) => {
const findIcon = ( ) => findVersionText ( lineNumber ) . find ( GlIcon ) ;
const findPopover = ( ) => wrapper . findByTestId ( ` popover- ${ agent } ` ) ;
const versionWarning = versionMismatch || versionOutdated ;
it ( 'shows the correct agent version' , ( ) => {
expect ( findVersionText ( lineNumber ) . text ( ) ) . toBe ( version ) ;
} ) ;
if ( versionWarning ) {
it ( ` shows a warning icon when agent versions mismatch is ${ versionMismatch } and outdated is ${ versionOutdated } and the number of pods is ${ podsNumber } ` , ( ) => {
expect ( findIcon ( ) . props ( 'name' ) ) . toBe ( 'warning' ) ;
} ) ;
it ( ` renders correct title for the popover when agent versions mismatch is ${ versionMismatch } and outdated is ${ versionOutdated } ` , ( ) => {
expect ( findPopover ( ) . props ( 'title' ) ) . toBe ( title ) ;
} ) ;
it ( ` renders correct text for the popover when agent versions mismatch is ${ versionMismatch } and outdated is ${ versionOutdated } ` , ( ) => {
texts . forEach ( ( text ) => {
expect ( findPopover ( ) . text ( ) ) . toContain ( text ) ;
} ) ;
} ) ;
} else {
it ( ` doesn't show a warning icon with a popover when agent versions mismatch is ${ versionMismatch } and outdated is ${ versionOutdated } and the number of pods is ${ podsNumber } ` , ( ) => {
expect ( findIcon ( ) . exists ( ) ) . toBe ( false ) ;
expect ( findPopover ( ) . exists ( ) ) . toBe ( false ) ;
} ) ;
}
} ,
) ;
2021-10-08 18:13:02 +00:00
it . each `
2022-03-16 12:07:24 +00:00
agentConfig | link | lineNumber
$ { '.gitlab/agents/agent-1' } | $ { '/agent/full/path' } | $ { 0 }
$ { 'Default configuration' } | $ { defaultConfigHelpUrl } | $ { 1 }
2022-02-04 09:14:46 +00:00
` (
'displays config file path as "$agentPath" at line $lineNumber' ,
2022-03-16 12:07:24 +00:00
( { agentConfig , link , lineNumber } ) => {
2022-02-04 09:14:46 +00:00
const findLink = findConfiguration ( lineNumber ) . find ( GlLink ) ;
2021-10-08 18:13:02 +00:00
2022-03-16 12:07:24 +00:00
expect ( findLink . attributes ( 'href' ) ) . toBe ( link ) ;
expect ( findConfiguration ( lineNumber ) . text ( ) ) . toBe ( agentConfig ) ;
2022-02-04 09:14:46 +00:00
} ,
) ;
2021-12-29 18:13:42 +00:00
it ( 'displays actions menu for each agent' , ( ) => {
2022-02-04 09:14:46 +00:00
expect ( findDeleteAgentButton ( ) ) . toHaveLength ( 5 ) ;
2021-12-29 18:13:42 +00:00
} ) ;
2021-10-08 18:13:02 +00:00
} ) ;
} ) ;