74 lines
2 KiB
JavaScript
74 lines
2 KiB
JavaScript
import { GlButton } from '@gitlab/ui';
|
|
import { shallowMount } from '@vue/test-utils';
|
|
import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
|
|
import component from '~/registry/explorer/components/delete_button.vue';
|
|
|
|
describe('delete_button', () => {
|
|
let wrapper;
|
|
|
|
const defaultProps = {
|
|
title: 'Foo title',
|
|
tooltipTitle: 'Bar tooltipTitle',
|
|
};
|
|
|
|
const findButton = () => wrapper.find(GlButton);
|
|
|
|
const mountComponent = (props) => {
|
|
wrapper = shallowMount(component, {
|
|
propsData: {
|
|
...defaultProps,
|
|
...props,
|
|
},
|
|
directives: {
|
|
GlTooltip: createMockDirective(),
|
|
},
|
|
});
|
|
};
|
|
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
wrapper = null;
|
|
});
|
|
|
|
describe('tooltip', () => {
|
|
it('the title is controlled by tooltipTitle prop', () => {
|
|
mountComponent();
|
|
const tooltip = getBinding(wrapper.element, 'gl-tooltip');
|
|
expect(tooltip).toBeDefined();
|
|
expect(tooltip.value.title).toBe(defaultProps.tooltipTitle);
|
|
});
|
|
|
|
it('is disabled when tooltipTitle is disabled', () => {
|
|
mountComponent({ tooltipDisabled: true });
|
|
const tooltip = getBinding(wrapper.element, 'gl-tooltip');
|
|
expect(tooltip.value.disabled).toBe(true);
|
|
});
|
|
|
|
describe('button', () => {
|
|
it('exists', () => {
|
|
mountComponent();
|
|
expect(findButton().exists()).toBe(true);
|
|
});
|
|
|
|
it('has the correct props/attributes bound', () => {
|
|
mountComponent({ disabled: true });
|
|
expect(findButton().attributes()).toMatchObject({
|
|
'aria-label': 'Foo title',
|
|
icon: 'remove',
|
|
title: 'Foo title',
|
|
variant: 'danger',
|
|
disabled: 'true',
|
|
category: 'secondary',
|
|
});
|
|
});
|
|
|
|
it('emits a delete event', () => {
|
|
mountComponent();
|
|
expect(wrapper.emitted('delete')).toEqual(undefined);
|
|
findButton().vm.$emit('click');
|
|
expect(wrapper.emitted('delete')).toEqual([[]]);
|
|
});
|
|
});
|
|
});
|
|
});
|