121 lines
4 KiB
JavaScript
121 lines
4 KiB
JavaScript
import { GlButton } from '@gitlab/ui';
|
|
import { mount } from '@vue/test-utils';
|
|
import AttentionRequestedToggle from '~/sidebar/components/attention_requested_toggle.vue';
|
|
|
|
let wrapper;
|
|
|
|
function factory(propsData = {}) {
|
|
wrapper = mount(AttentionRequestedToggle, { propsData });
|
|
}
|
|
|
|
const findToggle = () => wrapper.findComponent(GlButton);
|
|
|
|
describe('Attention require toggle', () => {
|
|
afterEach(() => {
|
|
wrapper.destroy();
|
|
});
|
|
|
|
it('renders button', () => {
|
|
factory({
|
|
type: 'reviewer',
|
|
user: { attention_requested: false, can_update_merge_request: true },
|
|
});
|
|
|
|
expect(findToggle().exists()).toBe(true);
|
|
});
|
|
|
|
it.each`
|
|
attentionRequested | icon
|
|
${true} | ${'attention-solid'}
|
|
${false} | ${'attention'}
|
|
`(
|
|
'renders $icon icon when attention_requested is $attentionRequested',
|
|
({ attentionRequested, icon }) => {
|
|
factory({
|
|
type: 'reviewer',
|
|
user: { attention_requested: attentionRequested, can_update_merge_request: true },
|
|
});
|
|
|
|
expect(findToggle().props('icon')).toBe(icon);
|
|
},
|
|
);
|
|
|
|
it.each`
|
|
attentionRequested | selected
|
|
${true} | ${true}
|
|
${false} | ${false}
|
|
`(
|
|
'renders button with as selected when $selected when attention_requested is $attentionRequested',
|
|
({ attentionRequested, selected }) => {
|
|
factory({
|
|
type: 'reviewer',
|
|
user: { attention_requested: attentionRequested, can_update_merge_request: true },
|
|
});
|
|
|
|
expect(findToggle().props('selected')).toBe(selected);
|
|
},
|
|
);
|
|
|
|
it('emits toggle-attention-requested on click', async () => {
|
|
factory({
|
|
type: 'reviewer',
|
|
user: { attention_requested: true, can_update_merge_request: true },
|
|
});
|
|
|
|
await findToggle().trigger('click');
|
|
|
|
expect(wrapper.emitted('toggle-attention-requested')[0]).toEqual([
|
|
{
|
|
user: { attention_requested: true, can_update_merge_request: true },
|
|
callback: expect.anything(),
|
|
direction: 'remove',
|
|
},
|
|
]);
|
|
});
|
|
|
|
it('does not emit toggle-attention-requested on click if can_update_merge_request is false', async () => {
|
|
factory({
|
|
type: 'reviewer',
|
|
user: { attention_requested: true, can_update_merge_request: false },
|
|
});
|
|
|
|
await findToggle().trigger('click');
|
|
|
|
expect(wrapper.emitted('toggle-attention-requested')).toBe(undefined);
|
|
});
|
|
|
|
it('sets loading on click', async () => {
|
|
factory({
|
|
type: 'reviewer',
|
|
user: { attention_requested: true, can_update_merge_request: true },
|
|
});
|
|
|
|
await findToggle().trigger('click');
|
|
|
|
expect(findToggle().props('loading')).toBe(true);
|
|
});
|
|
|
|
it.each`
|
|
type | attentionRequested | tooltip | canUpdateMergeRequest
|
|
${'reviewer'} | ${true} | ${AttentionRequestedToggle.i18n.removeAttentionRequest} | ${true}
|
|
${'reviewer'} | ${false} | ${AttentionRequestedToggle.i18n.addAttentionRequest} | ${true}
|
|
${'assignee'} | ${false} | ${AttentionRequestedToggle.i18n.addAttentionRequest} | ${true}
|
|
${'reviewer'} | ${true} | ${AttentionRequestedToggle.i18n.attentionRequestedNoPermission} | ${false}
|
|
${'reviewer'} | ${false} | ${AttentionRequestedToggle.i18n.noAttentionRequestedNoPermission} | ${false}
|
|
${'assignee'} | ${true} | ${AttentionRequestedToggle.i18n.attentionRequestedNoPermission} | ${false}
|
|
${'assignee'} | ${false} | ${AttentionRequestedToggle.i18n.noAttentionRequestedNoPermission} | ${false}
|
|
`(
|
|
'sets tooltip as $tooltip when attention_requested is $attentionRequested, type is $type and, can_update_merge_request is $canUpdateMergeRequest',
|
|
({ type, attentionRequested, tooltip, canUpdateMergeRequest }) => {
|
|
factory({
|
|
type,
|
|
user: {
|
|
attention_requested: attentionRequested,
|
|
can_update_merge_request: canUpdateMergeRequest,
|
|
},
|
|
});
|
|
|
|
expect(findToggle().attributes('aria-label')).toBe(tooltip);
|
|
},
|
|
);
|
|
});
|