diff options
Diffstat (limited to 'spec/frontend/ci/runner/components/runner_platforms_radio_group_spec.js')
-rw-r--r-- | spec/frontend/ci/runner/components/runner_platforms_radio_group_spec.js | 96 |
1 files changed, 96 insertions, 0 deletions
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..db6fd2c369b --- /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', expect.any(String)], + ['Docker', expect.any(String)], + ['Kubernetes', expect.any(String)], + ]); + }); + + 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'); + }); +}); |