diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-22 15:08:38 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-22 15:08:38 +0300 |
commit | ae567e129f79b561404fee0f99082975a8ece087 (patch) | |
tree | 06a9f9bff1a51c26dd2b2cf28ae68c48730f68b0 /spec/frontend/vue_shared/components/segmented_control_button_group_spec.js | |
parent | 748ab12e20f438ce1e72a35225dd59751d553cd5 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/vue_shared/components/segmented_control_button_group_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/segmented_control_button_group_spec.js | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/segmented_control_button_group_spec.js b/spec/frontend/vue_shared/components/segmented_control_button_group_spec.js new file mode 100644 index 00000000000..88445b6684c --- /dev/null +++ b/spec/frontend/vue_shared/components/segmented_control_button_group_spec.js @@ -0,0 +1,104 @@ +import { GlButtonGroup, GlButton } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import SegmentedControlButtonGroup from '~/vue_shared/components/segmented_control_button_group.vue'; + +const DEFAULT_OPTIONS = [ + { text: 'Lorem', value: 'abc' }, + { text: 'Ipsum', value: 'def' }, + { text: 'Foo', value: 'x', disabled: true }, + { text: 'Dolar', value: 'ghi' }, +]; + +describe('~/vue_shared/components/segmented_control_button_group.vue', () => { + let wrapper; + + const createComponent = (props = {}, scopedSlots = {}) => { + wrapper = shallowMount(SegmentedControlButtonGroup, { + propsData: { + value: DEFAULT_OPTIONS[0].value, + options: DEFAULT_OPTIONS, + ...props, + }, + scopedSlots, + }); + }; + + const findButtonGroup = () => wrapper.findComponent(GlButtonGroup); + const findButtons = () => findButtonGroup().findAllComponents(GlButton); + const findButtonsData = () => + findButtons().wrappers.map((x) => ({ + selected: x.props('selected'), + text: x.text(), + disabled: x.props('disabled'), + })); + const findButtonWithText = (text) => findButtons().wrappers.find((x) => x.text() === text); + + const optionsAsButtonData = (options) => + options.map(({ text, disabled = false }) => ({ + selected: false, + text, + disabled, + })); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('default', () => { + beforeEach(() => { + createComponent(); + }); + + it('renders button group', () => { + expect(findButtonGroup().exists()).toBe(true); + }); + + it('renders buttons', () => { + const expectation = optionsAsButtonData(DEFAULT_OPTIONS); + expectation[0].selected = true; + + expect(findButtonsData()).toEqual(expectation); + }); + + describe.each(DEFAULT_OPTIONS.filter((x) => !x.disabled))( + 'when button clicked %p', + ({ text, value }) => { + it('emits input with value', () => { + expect(wrapper.emitted('input')).toBeUndefined(); + + findButtonWithText(text).vm.$emit('click'); + + expect(wrapper.emitted('input')).toEqual([[value]]); + }); + }, + ); + }); + + const VALUE_TEST_CASES = [0, 1, 3].map((index) => [DEFAULT_OPTIONS[index].value, index]); + + describe.each(VALUE_TEST_CASES)('with value=%s', (value, index) => { + it(`renders selected button at ${index}`, () => { + createComponent({ value }); + + const expectation = optionsAsButtonData(DEFAULT_OPTIONS); + expectation[index].selected = true; + + expect(findButtonsData()).toEqual(expectation); + }); + }); + + describe('with button-content slot', () => { + it('renders button content based on slot', () => { + createComponent( + {}, + { + 'button-content': `<template #button-content="{ text }">In a slot - {{ text }}</template>`, + }, + ); + + expect(findButtonsData().map((x) => x.text)).toEqual( + DEFAULT_OPTIONS.map((x) => `In a slot - ${x.text}`), + ); + }); + }); +}); |