diff options
Diffstat (limited to 'spec/frontend/ci/runner')
3 files changed, 261 insertions, 0 deletions
diff --git a/spec/frontend/ci/runner/admin_new_runner_app/admin_new_runner_app_spec.js b/spec/frontend/ci/runner/admin_new_runner_app/admin_new_runner_app_spec.js index a8486809cdc..9c254f43504 100644 --- a/spec/frontend/ci/runner/admin_new_runner_app/admin_new_runner_app_spec.js +++ b/spec/frontend/ci/runner/admin_new_runner_app/admin_new_runner_app_spec.js @@ -6,6 +6,8 @@ import { createMockDirective, getBinding } from 'helpers/vue_mock_directive'; import AdminNewRunnerApp from '~/ci/runner/admin_new_runner/admin_new_runner_app.vue'; import RunnerInstructionsModal from '~/vue_shared/components/runner_instructions/runner_instructions_modal.vue'; +import RunnerPlatformsRadioGroup from '~/ci/runner/components/runner_platforms_radio_group.vue'; +import { DEFAULT_PLATFORM } from '~/ci/runner/constants'; const mockLegacyRegistrationToken = 'LEGACY_REGISTRATION_TOKEN'; @@ -16,6 +18,7 @@ describe('AdminNewRunnerApp', () => { const findLegacyInstructionsLink = () => wrapper.findByTestId('legacy-instructions-link'); const findRunnerInstructionsModal = () => wrapper.findComponent(RunnerInstructionsModal); + const findRunnerPlatformsRadioGroup = () => wrapper.findComponent(RunnerPlatformsRadioGroup); const createComponent = ({ props = {}, mountFn = shallowMountExtended, ...options } = {}) => { wrapper = mountFn(AdminNewRunnerApp, { @@ -50,4 +53,12 @@ describe('AdminNewRunnerApp', () => { expect(findRunnerInstructionsModal().props('modalId')).toBe(modalId); }); }); + + describe('New runner form fields', () => { + describe('Platform', () => { + it('shows the platforms radio group', () => { + expect(findRunnerPlatformsRadioGroup().props('value')).toBe(DEFAULT_PLATFORM); + }); + }); + }); }); diff --git a/spec/frontend/ci/runner/components/runner_platforms_radio_group_spec.js b/spec/frontend/ci/runner/components/runner_platforms_radio_group_spec.js new file mode 100644 index 00000000000..12c9afe9758 --- /dev/null +++ b/spec/frontend/ci/runner/components/runner_platforms_radio_group_spec.js @@ -0,0 +1,96 @@ +import { nextTick } from 'vue'; +import { GlFormRadioGroup, GlIcon, GlLink } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import RunnerPlatformsRadio from '~/ci/runner/components/runner_platforms_radio.vue'; +import { + LINUX_PLATFORM, + MACOS_PLATFORM, + WINDOWS_PLATFORM, + AWS_PLATFORM, + DOCKER_HELP_URL, + KUBERNETES_HELP_URL, +} from '~/ci/runner/constants'; + +import RunnerPlatformsRadioGroup from '~/ci/runner/components/runner_platforms_radio_group.vue'; + +const mockProvide = { + awsImgPath: 'awsLogo.svg', + dockerImgPath: 'dockerLogo.svg', + kubernetesImgPath: 'kubernetesLogo.svg', +}; + +describe('RunnerPlatformsRadioGroup', () => { + let wrapper; + + const findFormRadioGroup = () => wrapper.findComponent(GlFormRadioGroup); + const findFormRadios = () => wrapper.findAllComponents(RunnerPlatformsRadio).wrappers; + const findFormRadioByText = (text) => + findFormRadios() + .filter((w) => w.text() === text) + .at(0); + + const createComponent = ({ props = {}, mountFn = shallowMountExtended, ...options } = {}) => { + wrapper = mountFn(RunnerPlatformsRadioGroup, { + propsData: { + value: null, + ...props, + }, + provide: mockProvide, + ...options, + }); + }; + + beforeEach(() => { + createComponent(); + }); + + it('contains expected options with images', () => { + const labels = findFormRadios().map((w) => [w.text(), w.props('image')]); + + expect(labels).toEqual([ + ['Linux', null], + ['macOS', null], + ['Windows', null], + ['AWS', mockProvide.awsImgPath], + ['Docker', mockProvide.dockerImgPath], + ['Kubernetes', mockProvide.kubernetesImgPath], + ]); + }); + + it('allows users to use radio group', async () => { + findFormRadioGroup().vm.$emit('input', MACOS_PLATFORM); + await nextTick(); + + expect(wrapper.emitted('input')[0]).toEqual([MACOS_PLATFORM]); + }); + + it.each` + text | value + ${'Linux'} | ${LINUX_PLATFORM} + ${'macOS'} | ${MACOS_PLATFORM} + ${'Windows'} | ${WINDOWS_PLATFORM} + ${'AWS'} | ${AWS_PLATFORM} + `('user can select "$text"', async ({ text, value }) => { + const radio = findFormRadioByText(text); + expect(radio.props('value')).toBe(value); + + radio.vm.$emit('input', value); + await nextTick(); + + expect(wrapper.emitted('input')[0]).toEqual([value]); + }); + + it.each` + text | href + ${'Docker'} | ${DOCKER_HELP_URL} + ${'Kubernetes'} | ${KUBERNETES_HELP_URL} + `('provides link to "$text" docs', async ({ text, href }) => { + const radio = findFormRadioByText(text); + + expect(radio.findComponent(GlLink).attributes()).toEqual({ + href, + target: '_blank', + }); + expect(radio.findComponent(GlIcon).props('name')).toBe('external-link'); + }); +}); diff --git a/spec/frontend/ci/runner/components/runner_platforms_radio_spec.js b/spec/frontend/ci/runner/components/runner_platforms_radio_spec.js new file mode 100644 index 00000000000..fb81edd1ae2 --- /dev/null +++ b/spec/frontend/ci/runner/components/runner_platforms_radio_spec.js @@ -0,0 +1,154 @@ +import { GlFormRadio } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; + +import RunnerPlatformsRadio from '~/ci/runner/components/runner_platforms_radio.vue'; + +const mockImg = 'mock.svg'; +const mockValue = 'value'; +const mockValue2 = 'value2'; +const mockSlot = '<div>a</div>'; + +describe('RunnerPlatformsRadio', () => { + let wrapper; + + const findDiv = () => wrapper.find('div'); + const findImg = () => wrapper.find('img'); + const findFormRadio = () => wrapper.findComponent(GlFormRadio); + + const createComponent = ({ props = {}, mountFn = shallowMountExtended, ...options } = {}) => { + wrapper = mountFn(RunnerPlatformsRadio, { + propsData: { + image: mockImg, + value: mockValue, + ...props, + }, + ...options, + }); + }; + + describe('when its selectable', () => { + beforeEach(() => { + createComponent({ + props: { value: mockValue }, + }); + }); + + it('shows the item is clickable', () => { + expect(wrapper.classes('gl-cursor-pointer')).toBe(true); + }); + + it('shows radio option', () => { + expect(findFormRadio().attributes('value')).toBe(mockValue); + }); + + it('emits when item is clicked', async () => { + findDiv().trigger('click'); + + expect(wrapper.emitted('input')).toEqual([[mockValue]]); + }); + + it.each(['input', 'change'])('emits radio "%s" event', (event) => { + findFormRadio().vm.$emit(event, mockValue2); + + expect(wrapper.emitted(event)).toEqual([[mockValue2]]); + }); + + it('shows image', () => { + expect(findImg().attributes()).toMatchObject({ + src: mockImg, + 'aria-hidden': 'true', + }); + }); + + it('shows slot', () => { + createComponent({ + slots: { + default: mockSlot, + }, + }); + + expect(wrapper.html()).toContain(mockSlot); + }); + + describe('with no image', () => { + beforeEach(() => { + createComponent({ + props: { value: mockValue, image: null }, + }); + }); + + it('shows no image', () => { + expect(findImg().exists()).toBe(false); + }); + }); + }); + + describe('when its not selectable', () => { + beforeEach(() => { + createComponent({ + props: { value: null }, + }); + }); + + it('shows the item is clickable', () => { + expect(wrapper.classes('gl-cursor-pointer')).toBe(false); + }); + + it('does not emit when item is clicked', async () => { + findDiv().trigger('click'); + + expect(wrapper.emitted('input')).toBe(undefined); + }); + + it('does not show a radio option', () => { + expect(findFormRadio().exists()).toBe(false); + }); + + it('shows image', () => { + expect(findImg().attributes()).toMatchObject({ + src: mockImg, + 'aria-hidden': 'true', + }); + }); + + it('shows slot', () => { + createComponent({ + slots: { + default: mockSlot, + }, + }); + + expect(wrapper.html()).toContain(mockSlot); + }); + + describe('with no image', () => { + beforeEach(() => { + createComponent({ + props: { value: null, image: null }, + }); + }); + + it('shows no image', () => { + expect(findImg().exists()).toBe(false); + }); + }); + }); + + describe('when selected', () => { + beforeEach(() => { + createComponent({ + props: { checked: mockValue }, + }); + }); + + it('highlights the item', () => { + expect(wrapper.classes('gl-bg-blue-50')).toBe(true); + expect(wrapper.classes('gl-border-blue-500')).toBe(true); + }); + + it('shows radio option as selected', () => { + expect(findFormRadio().attributes('value')).toBe(mockValue); + expect(findFormRadio().props('checked')).toBe(mockValue); + }); + }); +}); |