diff options
Diffstat (limited to 'spec/frontend/ci/runner/components')
4 files changed, 95 insertions, 35 deletions
diff --git a/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js b/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js index 27fb288c462..2504458efff 100644 --- a/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js +++ b/spec/frontend/ci/runner/components/cells/runner_summary_cell_spec.js @@ -4,6 +4,7 @@ import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_help import RunnerSummaryCell from '~/ci/runner/components/cells/runner_summary_cell.vue'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import RunnerCreatedAt from '~/ci/runner/components/runner_created_at.vue'; +import RunnerJobCount from '~/ci/runner/components/runner_job_count.vue'; import RunnerManagersBadge from '~/ci/runner/components/runner_managers_badge.vue'; import RunnerTags from '~/ci/runner/components/runner_tags.vue'; import RunnerSummaryField from '~/ci/runner/components/cells/runner_summary_field.vue'; @@ -157,23 +158,9 @@ describe('RunnerTypeCell', () => { }); it('Displays job count', () => { - expect(findRunnerSummaryField('pipeline').text()).toContain(`${mockRunner.jobCount}`); - }); - - it('Formats large job counts', () => { - createComponent({ - runner: { jobCount: 1000 }, - }); - - expect(findRunnerSummaryField('pipeline').text()).toContain('1,000'); - }); - - it('Formats large job counts with a plus symbol', () => { - createComponent({ - runner: { jobCount: 1001 }, - }); - - expect(findRunnerSummaryField('pipeline').text()).toContain('1,000+'); + expect( + findRunnerSummaryField('pipeline').findComponent(RunnerJobCount).props('runner'), + ).toEqual(mockRunner); }); it('Displays creation info', () => { diff --git a/spec/frontend/ci/runner/components/runner_filtered_search_bar_spec.js b/spec/frontend/ci/runner/components/runner_filtered_search_bar_spec.js index ffc19d66cac..62ab40b2ebb 100644 --- a/spec/frontend/ci/runner/components/runner_filtered_search_bar_spec.js +++ b/spec/frontend/ci/runner/components/runner_filtered_search_bar_spec.js @@ -1,4 +1,4 @@ -import { GlFilteredSearch, GlDropdown, GlDropdownItem } from '@gitlab/ui'; +import { GlFilteredSearch, GlSorting } from '@gitlab/ui'; import { nextTick } from 'vue'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import { assertProps } from 'helpers/assert_props'; @@ -32,7 +32,12 @@ describe('RunnerList', () => { const findFilteredSearch = () => wrapper.findComponent(FilteredSearch); const findGlFilteredSearch = () => wrapper.findComponent(GlFilteredSearch); - const findSortOptions = () => wrapper.findAllComponents(GlDropdownItem); + const findGlSorting = () => wrapper.findComponent(GlSorting); + const getSortOptions = () => findGlSorting().props('sortOptions'); + const getSelectedSortOption = () => { + const sortBy = findGlSorting().props('sortBy'); + return getSortOptions().find(({ value }) => sortBy === value)?.text; + }; const mockOtherSort = CONTACTED_DESC; const mockFilters = [ @@ -56,8 +61,6 @@ describe('RunnerList', () => { stubs: { FilteredSearch, GlFilteredSearch, - GlDropdown, - GlDropdownItem, }, ...options, }); @@ -74,9 +77,10 @@ describe('RunnerList', () => { it('sets sorting options', () => { const SORT_OPTIONS_COUNT = 2; - expect(findSortOptions()).toHaveLength(SORT_OPTIONS_COUNT); - expect(findSortOptions().at(0).text()).toBe('Created date'); - expect(findSortOptions().at(1).text()).toBe('Last contact'); + const sortOptionsProp = getSortOptions(); + expect(sortOptionsProp).toHaveLength(SORT_OPTIONS_COUNT); + expect(sortOptionsProp[0].text).toBe('Created date'); + expect(sortOptionsProp[1].text).toBe('Last contact'); }); it('sets tokens to the filtered search', () => { @@ -141,12 +145,7 @@ describe('RunnerList', () => { }); it('sort option is selected', () => { - expect( - findSortOptions() - .filter((w) => w.props('isChecked')) - .at(0) - .text(), - ).toEqual('Last contact'); + expect(getSelectedSortOption()).toBe('Last contact'); }); it('when the user sets a filter, the "search" preserves the other filters', async () => { @@ -181,7 +180,7 @@ describe('RunnerList', () => { }); it('when the user sets a sorting method, the "search" is emitted with the sort', () => { - findSortOptions().at(1).vm.$emit('click'); + findGlSorting().vm.$emit('sortByChange', 2); expectToHaveLastEmittedInput({ runnerType: null, diff --git a/spec/frontend/ci/runner/components/runner_job_count_spec.js b/spec/frontend/ci/runner/components/runner_job_count_spec.js new file mode 100644 index 00000000000..01b5ca5332e --- /dev/null +++ b/spec/frontend/ci/runner/components/runner_job_count_spec.js @@ -0,0 +1,74 @@ +import Vue from 'vue'; +import VueApollo from 'vue-apollo'; +import createMockApollo from 'helpers/mock_apollo_helper'; +import waitForPromises from 'helpers/wait_for_promises'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import runnerJobCountQuery from '~/ci/runner/graphql/list/runner_job_count.query.graphql'; + +import RunnerJobCount from '~/ci/runner/components/runner_job_count.vue'; + +import { runnerJobCountData } from '../mock_data'; + +const mockRunner = runnerJobCountData.data.runner; + +Vue.use(VueApollo); + +describe('RunnerJobCount', () => { + let wrapper; + let runnerJobCountHandler; + + const createComponent = ({ props = {}, ...options } = {}, mountFn = shallowMountExtended) => { + wrapper = mountFn(RunnerJobCount, { + apolloProvider: createMockApollo([[runnerJobCountQuery, runnerJobCountHandler]]), + propsData: { + runner: mockRunner, + ...props, + }, + ...options, + }); + }; + + beforeEach(() => { + runnerJobCountHandler = jest.fn().mockReturnValue(new Promise(() => {})); + }); + + it('Loads data while it displays empty content', () => { + createComponent(); + + expect(runnerJobCountHandler).toHaveBeenCalledWith({ id: mockRunner.id }); + expect(wrapper.text()).toBe('-'); + }); + + it('Sets a batch key for the "jobCount" query', () => { + createComponent(); + + expect(wrapper.vm.$apollo.queries.jobCount.options.context.batchKey).toBe('RunnerJobCount'); + }); + + it('Displays job count', async () => { + runnerJobCountHandler.mockResolvedValue(runnerJobCountData); + + createComponent(); + + await waitForPromises(); + + expect(wrapper.text()).toBe('999'); + }); + + it('Displays formatted job count', async () => { + runnerJobCountHandler.mockResolvedValue({ + data: { + runner: { + ...mockRunner, + jobCount: 1001, + }, + }, + }); + + createComponent(); + + await waitForPromises(); + + expect(wrapper.text()).toBe('1,000+'); + }); +}); diff --git a/spec/frontend/ci/runner/components/runner_managers_detail_spec.js b/spec/frontend/ci/runner/components/runner_managers_detail_spec.js index 3435292394f..6db9bb1d091 100644 --- a/spec/frontend/ci/runner/components/runner_managers_detail_spec.js +++ b/spec/frontend/ci/runner/components/runner_managers_detail_spec.js @@ -85,7 +85,7 @@ describe('RunnerJobs', () => { }); it('is collapsed', () => { - expect(findCollapse().attributes('visible')).toBeUndefined(); + expect(findCollapse().props('visible')).toBe(false); }); describe('when expanded', () => { @@ -99,7 +99,7 @@ describe('RunnerJobs', () => { }); it('shows loading state', () => { - expect(findCollapse().attributes('visible')).toBe('true'); + expect(findCollapse().props('visible')).toBe(true); expect(findSkeletonLoader().exists()).toBe(true); }); @@ -156,14 +156,14 @@ describe('RunnerJobs', () => { }); it('shows rows', () => { - expect(findCollapse().attributes('visible')).toBe('true'); + expect(findCollapse().props('visible')).toBe(true); expect(findRunnerManagersTable().props('items')).toEqual(mockRunnerManagers); }); it('collapses when clicked', async () => { await findHideDetails().trigger('click'); - expect(findCollapse().attributes('visible')).toBeUndefined(); + expect(findCollapse().props('visible')).toBe(false); }); }); }); |