1 files changed, 91 insertions, 0 deletions
diff --git a/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js b/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js
new file mode 100644
index 00000000000..7c67149b517
--- /dev/null
+++ b/spec/frontend/sidebar/components/reviewers/uncollapsed_reviewer_list_spec.js
@@ -0,0 +1,91 @@
+import { shallowMount } from '@vue/test-utils';
+import { TEST_HOST } from 'helpers/test_constants';
+import ReviewerAvatarLink from '~/sidebar/components/reviewers/reviewer_avatar_link.vue';
+import UncollapsedReviewerList from '~/sidebar/components/reviewers/uncollapsed_reviewer_list.vue';
+import userDataMock from '../../user_data_mock';
+
+describe('UncollapsedReviewerList component', () => {
+  let wrapper;
+
+  function createComponent(props = {}) {
+    const propsData = {
+      users: [],
+      rootPath: TEST_HOST,
+      ...props,
+    };
+
+    wrapper = shallowMount(UncollapsedReviewerList, {
+      propsData,
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('single reviewer', () => {
+    beforeEach(() => {
+      const user = userDataMock();
+
+      createComponent({
+        users: [user],
+      });
+    });
+
+    it('only has one user', () => {
+      expect(wrapper.findAll(ReviewerAvatarLink).length).toBe(1);
+    });
+
+    it('shows one user with avatar, username and author name', () => {
+      expect(wrapper.text()).toContain(`@root`);
+    });
+
+    it('renders re-request loading icon', async () => {
+      await wrapper.setData({ loadingStates: { 1: 'loading' } });
+
+      expect(wrapper.find('[data-testid="re-request-button"]').props('loading')).toBe(true);
+    });
+
+    it('renders re-request success icon', async () => {
+      await wrapper.setData({ loadingStates: { 1: 'success' } });
+
+      expect(wrapper.find('[data-testid="re-request-success"]').exists()).toBe(true);
+    });
+  });
+
+  describe('multiple reviewers', () => {
+    beforeEach(() => {
+      const user = userDataMock();
+
+      createComponent({
+        users: [user, { ...user, id: 2, username: 'hello-world' }],
+      });
+    });
+
+    it('only has one user', () => {
+      expect(wrapper.findAll(ReviewerAvatarLink).length).toBe(2);
+    });
+
+    it('shows one user with avatar, username and author name', () => {
+      expect(wrapper.text()).toContain(`@root`);
+      expect(wrapper.text()).toContain(`@hello-world`);
+    });
+
+    it('renders re-request loading icon', async () => {
+      await wrapper.setData({ loadingStates: { 2: 'loading' } });
+
+      expect(wrapper.findAll('[data-testid="re-request-button"]').length).toBe(2);
+      expect(wrapper.findAll('[data-testid="re-request-button"]').at(1).props('loading')).toBe(
+        true,
+      );
+    });
+
+    it('renders re-request success icon', async () => {
+      await wrapper.setData({ loadingStates: { 2: 'success' } });
+
+      expect(wrapper.findAll('[data-testid="re-request-button"]').length).toBe(1);
+      expect(wrapper.findAll('[data-testid="re-request-success"]').length).toBe(1);
+      expect(wrapper.find('[data-testid="re-request-success"]').exists()).toBe(true);
+    });
+  });
+});