diff options
Diffstat (limited to 'spec/frontend/runner/components/cells')
4 files changed, 227 insertions, 98 deletions
diff --git a/spec/frontend/runner/components/cells/runner_stacked_summary_cell_spec.js b/spec/frontend/runner/components/cells/runner_stacked_summary_cell_spec.js new file mode 100644 index 00000000000..21ec9f61f37 --- /dev/null +++ b/spec/frontend/runner/components/cells/runner_stacked_summary_cell_spec.js @@ -0,0 +1,164 @@ +import { __ } from '~/locale'; +import { mountExtended } from 'helpers/vue_test_utils_helper'; +import RunnerStackedSummaryCell from '~/runner/components/cells/runner_stacked_summary_cell.vue'; +import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; +import RunnerTags from '~/runner/components/runner_tags.vue'; +import RunnerSummaryField from '~/runner/components/cells/runner_summary_field.vue'; +import { getIdFromGraphQLId } from '~/graphql_shared/utils'; + +import { INSTANCE_TYPE, I18N_INSTANCE_TYPE, PROJECT_TYPE } from '~/runner/constants'; + +import { allRunnersData } from '../../mock_data'; + +const mockRunner = allRunnersData.data.runners.nodes[0]; + +describe('RunnerTypeCell', () => { + let wrapper; + + const findLockIcon = () => wrapper.findByTestId('lock-icon'); + const findRunnerTags = () => wrapper.findComponent(RunnerTags); + const findRunnerSummaryField = (icon) => + wrapper.findAllComponents(RunnerSummaryField).filter((w) => w.props('icon') === icon) + .wrappers[0]; + + const createComponent = (runner, options) => { + wrapper = mountExtended(RunnerStackedSummaryCell, { + propsData: { + runner: { + ...mockRunner, + ...runner, + }, + }, + stubs: { + RunnerSummaryField, + }, + ...options, + }); + }; + + beforeEach(() => { + createComponent(); + }); + + afterEach(() => { + wrapper.destroy(); + }); + + it('Displays the runner name as id and short token', () => { + expect(wrapper.text()).toContain( + `#${getIdFromGraphQLId(mockRunner.id)} (${mockRunner.shortSha})`, + ); + }); + + it('Does not display the locked icon', () => { + expect(findLockIcon().exists()).toBe(false); + }); + + it('Displays the locked icon for locked runners', () => { + createComponent({ + runnerType: PROJECT_TYPE, + locked: true, + }); + + expect(findLockIcon().exists()).toBe(true); + }); + + it('Displays the runner type', () => { + createComponent({ + runnerType: INSTANCE_TYPE, + locked: true, + }); + + expect(wrapper.text()).toContain(I18N_INSTANCE_TYPE); + }); + + it('Displays the runner version', () => { + expect(wrapper.text()).toContain(mockRunner.version); + }); + + it('Displays the runner description', () => { + expect(wrapper.text()).toContain(mockRunner.description); + }); + + it('Displays last contact', () => { + createComponent({ + contactedAt: '2022-01-02', + }); + + expect(findRunnerSummaryField('clock').find(TimeAgo).props('time')).toBe('2022-01-02'); + }); + + it('Displays empty last contact', () => { + createComponent({ + contactedAt: null, + }); + + expect(findRunnerSummaryField('clock').find(TimeAgo).exists()).toBe(false); + expect(findRunnerSummaryField('clock').text()).toContain(__('Never')); + }); + + it('Displays ip address', () => { + createComponent({ + ipAddress: '127.0.0.1', + }); + + expect(findRunnerSummaryField('disk').text()).toContain('127.0.0.1'); + }); + + it('Displays no ip address', () => { + createComponent({ + ipAddress: null, + }); + + expect(findRunnerSummaryField('disk')).toBeUndefined(); + }); + + it('Displays job count', () => { + expect(findRunnerSummaryField('pipeline').text()).toContain(`${mockRunner.jobCount}`); + }); + + it('Formats large job counts', () => { + createComponent({ + jobCount: 1000, + }); + + expect(findRunnerSummaryField('pipeline').text()).toContain('1,000'); + }); + + it('Formats large job counts with a plus symbol', () => { + createComponent({ + jobCount: 1001, + }); + + expect(findRunnerSummaryField('pipeline').text()).toContain('1,000+'); + }); + + it('Displays created at', () => { + expect(findRunnerSummaryField('calendar').find(TimeAgo).props('time')).toBe( + mockRunner.createdAt, + ); + }); + + it('Displays tag list', () => { + createComponent({ + tagList: ['shell', 'linux'], + }); + + expect(findRunnerTags().props('tagList')).toEqual(['shell', 'linux']); + }); + + it('Displays a custom slot', () => { + const slotContent = 'My custom runner name'; + + createComponent( + {}, + { + slots: { + 'runner-name': slotContent, + }, + }, + ); + + expect(wrapper.text()).toContain(slotContent); + }); +}); diff --git a/spec/frontend/runner/components/cells/runner_status_cell_spec.js b/spec/frontend/runner/components/cells/runner_status_cell_spec.js index 0f5133d0ae2..1d4e3762c91 100644 --- a/spec/frontend/runner/components/cells/runner_status_cell_spec.js +++ b/spec/frontend/runner/components/cells/runner_status_cell_spec.js @@ -3,7 +3,14 @@ import RunnerStatusCell from '~/runner/components/cells/runner_status_cell.vue'; import RunnerStatusBadge from '~/runner/components/runner_status_badge.vue'; import RunnerPausedBadge from '~/runner/components/runner_paused_badge.vue'; -import { INSTANCE_TYPE, STATUS_ONLINE, STATUS_OFFLINE } from '~/runner/constants'; +import { + I18N_PAUSED, + I18N_STATUS_ONLINE, + I18N_STATUS_OFFLINE, + INSTANCE_TYPE, + STATUS_ONLINE, + STATUS_OFFLINE, +} from '~/runner/constants'; describe('RunnerStatusCell', () => { let wrapper; @@ -31,8 +38,8 @@ describe('RunnerStatusCell', () => { it('Displays online status', () => { createComponent(); - expect(wrapper.text()).toMatchInterpolatedText('online'); - expect(findStatusBadge().text()).toBe('online'); + expect(wrapper.text()).toContain(I18N_STATUS_ONLINE); + expect(findStatusBadge().text()).toBe(I18N_STATUS_ONLINE); }); it('Displays offline status', () => { @@ -42,8 +49,8 @@ describe('RunnerStatusCell', () => { }, }); - expect(wrapper.text()).toMatchInterpolatedText('offline'); - expect(findStatusBadge().text()).toBe('offline'); + expect(wrapper.text()).toMatchInterpolatedText(I18N_STATUS_OFFLINE); + expect(findStatusBadge().text()).toBe(I18N_STATUS_OFFLINE); }); it('Displays paused status', () => { @@ -54,8 +61,8 @@ describe('RunnerStatusCell', () => { }, }); - expect(wrapper.text()).toMatchInterpolatedText('online paused'); - expect(findPausedBadge().text()).toBe('paused'); + expect(wrapper.text()).toMatchInterpolatedText(`${I18N_STATUS_ONLINE} ${I18N_PAUSED}`); + expect(findPausedBadge().text()).toBe(I18N_PAUSED); }); it('Is empty when data is missing', () => { diff --git a/spec/frontend/runner/components/cells/runner_summary_cell_spec.js b/spec/frontend/runner/components/cells/runner_summary_cell_spec.js deleted file mode 100644 index b06ab652212..00000000000 --- a/spec/frontend/runner/components/cells/runner_summary_cell_spec.js +++ /dev/null @@ -1,91 +0,0 @@ -import { __ } from '~/locale'; -import { mountExtended } from 'helpers/vue_test_utils_helper'; -import RunnerSummaryCell from '~/runner/components/cells/runner_summary_cell.vue'; -import { INSTANCE_TYPE, PROJECT_TYPE } from '~/runner/constants'; - -const mockId = '1'; -const mockShortSha = '2P6oDVDm'; -const mockDescription = 'runner-1'; -const mockIpAddress = '0.0.0.0'; - -describe('RunnerTypeCell', () => { - let wrapper; - - const findLockIcon = () => wrapper.findByTestId('lock-icon'); - - const createComponent = (runner, options) => { - wrapper = mountExtended(RunnerSummaryCell, { - propsData: { - runner: { - id: `gid://gitlab/Ci::Runner/${mockId}`, - shortSha: mockShortSha, - description: mockDescription, - ipAddress: mockIpAddress, - runnerType: INSTANCE_TYPE, - ...runner, - }, - }, - ...options, - }); - }; - - beforeEach(() => { - createComponent(); - }); - - afterEach(() => { - wrapper.destroy(); - }); - - it('Displays the runner name as id and short token', () => { - expect(wrapper.text()).toContain(`#${mockId} (${mockShortSha})`); - }); - - it('Displays the runner type', () => { - expect(wrapper.text()).toContain('shared'); - }); - - it('Does not display the locked icon', () => { - expect(findLockIcon().exists()).toBe(false); - }); - - it('Displays the locked icon for locked runners', () => { - createComponent({ - runnerType: PROJECT_TYPE, - locked: true, - }); - - expect(findLockIcon().exists()).toBe(true); - }); - - it('Displays the runner description', () => { - expect(wrapper.text()).toContain(mockDescription); - }); - - it('Displays ip address', () => { - expect(wrapper.text()).toContain(`${__('IP Address')} ${mockIpAddress}`); - }); - - it('Displays no ip address', () => { - createComponent({ - ipAddress: null, - }); - - expect(wrapper.text()).not.toContain(__('IP Address')); - }); - - it('Displays a custom slot', () => { - const slotContent = 'My custom runner summary'; - - createComponent( - {}, - { - slots: { - 'runner-name': slotContent, - }, - }, - ); - - expect(wrapper.text()).toContain(slotContent); - }); -}); diff --git a/spec/frontend/runner/components/cells/runner_summary_field_spec.js b/spec/frontend/runner/components/cells/runner_summary_field_spec.js new file mode 100644 index 00000000000..b49addf112f --- /dev/null +++ b/spec/frontend/runner/components/cells/runner_summary_field_spec.js @@ -0,0 +1,49 @@ +import { GlIcon } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import RunnerSummaryField from '~/runner/components/cells/runner_summary_field.vue'; +import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; + +describe('RunnerSummaryField', () => { + let wrapper; + + const findIcon = () => wrapper.findComponent(GlIcon); + const getTooltipValue = () => getBinding(wrapper.element, 'gl-tooltip').value; + + const createComponent = ({ props, ...options } = {}) => { + wrapper = shallowMount(RunnerSummaryField, { + propsData: { + icon: '', + tooltip: '', + ...props, + }, + directives: { + GlTooltip: createMockDirective(), + }, + ...options, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + it('shows content in slot', () => { + createComponent({ + slots: { default: 'content' }, + }); + + expect(wrapper.text()).toBe('content'); + }); + + it('shows icon', () => { + createComponent({ props: { icon: 'git' } }); + + expect(findIcon().props('name')).toBe('git'); + }); + + it('shows tooltip', () => { + createComponent({ props: { tooltip: 'tooltip' } }); + + expect(getTooltipValue()).toBe('tooltip'); + }); +}); |