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);
+    },
+  );
+});