1 files changed, 59 insertions, 0 deletions
diff --git a/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js b/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js
new file mode 100644
index 00000000000..1161fefcc64
--- /dev/null
+++ b/spec/frontend/sidebar/components/assignees/issuable_assignees_spec.js
@@ -0,0 +1,59 @@
+import { shallowMount } from '@vue/test-utils';
+import IssuableAssignees from '~/sidebar/components/assignees/issuable_assignees.vue';
+import UncollapsedAssigneeList from '~/sidebar/components/assignees/uncollapsed_assignee_list.vue';
+
+describe('IssuableAssignees', () => {
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(IssuableAssignees, {
+      provide: {
+        rootPath: '',
+      },
+      propsData: {
+        users: [],
+        editable: true,
+        ...props,
+      },
+    });
+  };
+  const findUncollapsedAssigneeList = () => wrapper.findComponent(UncollapsedAssigneeList);
+  const findEmptyAssignee = () => wrapper.find('[data-testid="none"]');
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when no assignees are present', () => {
+    it.each`
+      signedIn | editable | message
+      ${true}  | ${true}  | ${'None - assign yourself'}
+      ${true}  | ${false} | ${'None'}
+      ${false} | ${true}  | ${'None'}
+      ${false} | ${false} | ${'None'}
+    `(
+      'renders "$message" when signedIn is $signedIn and editable is $editable',
+      ({ signedIn, editable, message }) => {
+        createComponent({ signedIn, editable });
+        expect(findEmptyAssignee().text()).toBe(message);
+      },
+    );
+  });
+
+  describe('when assignees are present', () => {
+    it('renders UncollapsedAssigneesList', () => {
+      createComponent({ users: [{ id: 1 }] });
+
+      expect(findUncollapsedAssigneeList().exists()).toBe(true);
+    });
+  });
+
+  describe('when clicking "assign yourself"', () => {
+    it('emits "assign-self"', () => {
+      createComponent({ signedIn: true });
+      wrapper.find('[data-testid="assign-yourself"]').vm.$emit('click');
+      expect(wrapper.emitted('assign-self')).toHaveLength(1);
+    });
+  });
+});