diff options
Diffstat (limited to 'spec/frontend/sidebar/components/attention_required_toggle_spec.js')
-rw-r--r-- | spec/frontend/sidebar/components/attention_required_toggle_spec.js | 84 |
1 files changed, 84 insertions, 0 deletions
diff --git a/spec/frontend/sidebar/components/attention_required_toggle_spec.js b/spec/frontend/sidebar/components/attention_required_toggle_spec.js new file mode 100644 index 00000000000..8555068cdd8 --- /dev/null +++ b/spec/frontend/sidebar/components/attention_required_toggle_spec.js @@ -0,0 +1,84 @@ +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 } }); + + expect(findToggle().exists()).toBe(true); + }); + + it.each` + attentionRequested | icon + ${true} | ${'star'} + ${false} | ${'star-o'} + `( + 'renders $icon icon when attention_requested is $attentionRequested', + ({ attentionRequested, icon }) => { + factory({ type: 'reviewer', user: { attention_requested: attentionRequested } }); + + expect(findToggle().props('icon')).toBe(icon); + }, + ); + + it.each` + attentionRequested | variant + ${true} | ${'warning'} + ${false} | ${'default'} + `( + 'renders button with variant $variant when attention_requested is $attentionRequested', + ({ attentionRequested, variant }) => { + factory({ type: 'reviewer', user: { attention_requested: attentionRequested } }); + + expect(findToggle().props('variant')).toBe(variant); + }, + ); + + it('emits toggle-attention-requested on click', async () => { + factory({ type: 'reviewer', user: { attention_requested: true } }); + + await findToggle().trigger('click'); + + expect(wrapper.emitted('toggle-attention-requested')[0]).toEqual([ + { + user: { attention_requested: true }, + callback: expect.anything(), + }, + ]); + }); + + it('sets loading on click', async () => { + factory({ type: 'reviewer', user: { attention_requested: true } }); + + await findToggle().trigger('click'); + + expect(findToggle().props('loading')).toBe(true); + }); + + it.each` + type | attentionRequested | tooltip + ${'reviewer'} | ${true} | ${AttentionRequestedToggle.i18n.removeAttentionRequested} + ${'reviewer'} | ${false} | ${AttentionRequestedToggle.i18n.attentionRequestedReviewer} + ${'assignee'} | ${false} | ${AttentionRequestedToggle.i18n.attentionRequestedAssignee} + `( + 'sets tooltip as $tooltip when attention_requested is $attentionRequested and type is $type', + ({ type, attentionRequested, tooltip }) => { + factory({ type, user: { attention_requested: attentionRequested } }); + + expect(findToggle().attributes('aria-label')).toBe(tooltip); + }, + ); +}); |