117 lines
3.1 KiB
JavaScript
117 lines
3.1 KiB
JavaScript
import { GlFormRadioGroup } from '@gitlab/ui';
|
|
import { mount } from '@vue/test-utils';
|
|
import RadioGroup from '~/ide/components/commit_sidebar/radio_group.vue';
|
|
import { createStore } from '~/ide/stores';
|
|
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
|
|
|
|
describe('IDE commit sidebar radio group', () => {
|
|
let wrapper;
|
|
let store;
|
|
|
|
const createComponent = (config = {}) => {
|
|
store = createStore();
|
|
|
|
store.state.commit.commitAction = '2';
|
|
store.state.commit.newBranchName = 'test-123';
|
|
|
|
wrapper = mount(RadioGroup, {
|
|
store,
|
|
propsData: config.props,
|
|
slots: config.slots,
|
|
directives: {
|
|
GlTooltip: createMockDirective(),
|
|
},
|
|
});
|
|
};
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
});
|
|
|
|
describe('without input', () => {
|
|
const props = {
|
|
value: '1',
|
|
label: 'test',
|
|
checked: true,
|
|
};
|
|
|
|
it('uses label if present', () => {
|
|
createComponent({ props });
|
|
|
|
expect(wrapper.text()).toContain('test');
|
|
});
|
|
|
|
it('uses slot if label is not present', () => {
|
|
createComponent({ props: { value: '1', checked: true }, slots: { default: 'Testing slot' } });
|
|
|
|
expect(wrapper.text()).toContain('Testing slot');
|
|
});
|
|
|
|
it('updates store when changing radio button', async () => {
|
|
createComponent({ props });
|
|
|
|
await wrapper.find('input').trigger('change');
|
|
|
|
expect(store.state.commit.commitAction).toBe('1');
|
|
});
|
|
});
|
|
|
|
describe('with input', () => {
|
|
const props = {
|
|
value: '2',
|
|
label: 'test',
|
|
checked: true,
|
|
showInput: true,
|
|
};
|
|
|
|
it('renders input box when commitAction matches value', () => {
|
|
createComponent({ props: { ...props, value: '2' } });
|
|
|
|
expect(wrapper.find('.form-control').exists()).toBe(true);
|
|
});
|
|
|
|
it('hides input when commitAction doesnt match value', () => {
|
|
createComponent({ props: { ...props, value: '1' } });
|
|
|
|
expect(wrapper.find('.form-control').exists()).toBe(false);
|
|
});
|
|
|
|
it('updates branch name in store on input', async () => {
|
|
createComponent({ props });
|
|
|
|
await wrapper.find('.form-control').setValue('testing-123');
|
|
|
|
expect(store.state.commit.newBranchName).toBe('testing-123');
|
|
});
|
|
|
|
it('renders newBranchName if present', () => {
|
|
createComponent({ props });
|
|
|
|
const input = wrapper.find('.form-control');
|
|
|
|
expect(input.element.value).toBe('test-123');
|
|
});
|
|
});
|
|
|
|
describe('tooltipTitle', () => {
|
|
it('returns title when disabled', () => {
|
|
createComponent({
|
|
props: { value: '1', label: 'test', disabled: true, title: 'test title' },
|
|
});
|
|
|
|
const tooltip = getBinding(wrapper.findComponent(GlFormRadioGroup).element, 'gl-tooltip');
|
|
expect(tooltip.value).toBe('test title');
|
|
});
|
|
|
|
it('returns blank when not disabled', () => {
|
|
createComponent({
|
|
props: { value: '1', label: 'test', title: 'test title' },
|
|
});
|
|
|
|
const tooltip = getBinding(wrapper.findComponent(GlFormRadioGroup).element, 'gl-tooltip');
|
|
|
|
expect(tooltip.value).toBe('');
|
|
});
|
|
});
|
|
});
|