1 files changed, 86 insertions, 0 deletions
diff --git a/spec/frontend/reports/components/grouped_issues_list_spec.js b/spec/frontend/reports/components/grouped_issues_list_spec.js
new file mode 100644
index 00000000000..1f8f4a0e4c1
--- /dev/null
+++ b/spec/frontend/reports/components/grouped_issues_list_spec.js
@@ -0,0 +1,86 @@
+import { shallowMount } from '@vue/test-utils';
+import GroupedIssuesList from '~/reports/components/grouped_issues_list.vue';
+import ReportItem from '~/reports/components/report_item.vue';
+import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
+
+describe('Grouped Issues List', () => {
+  let wrapper;
+
+  const createComponent = ({ propsData = {}, stubs = {} } = {}) => {
+    wrapper = shallowMount(GroupedIssuesList, {
+      propsData,
+      stubs,
+    });
+  };
+
+  const findHeading = groupName => wrapper.find(`[data-testid="${groupName}Heading"`);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('renders a smart virtual list with the correct props', () => {
+    createComponent({
+      propsData: {
+        resolvedIssues: [{ name: 'foo' }],
+        unresolvedIssues: [{ name: 'bar' }],
+      },
+      stubs: {
+        SmartVirtualList,
+      },
+    });
+
+    expect(wrapper.find(SmartVirtualList).props()).toMatchSnapshot();
+  });
+
+  describe('without data', () => {
+    beforeEach(createComponent);
+
+    it.each(['unresolved', 'resolved'])('does not a render a header for %s issues', issueName => {
+      expect(findHeading(issueName).exists()).toBe(false);
+    });
+
+    it.each('resolved', 'unresolved')('does not render report items for %s issues', () => {
+      expect(wrapper.contains(ReportItem)).toBe(false);
+    });
+  });
+
+  describe('with data', () => {
+    it.each`
+      givenIssues                | givenHeading     | groupName
+      ${[{ name: 'foo issue' }]} | ${'Foo Heading'} | ${'resolved'}
+      ${[{ name: 'bar issue' }]} | ${'Bar Heading'} | ${'unresolved'}
+    `('renders the heading for $groupName issues', ({ givenIssues, givenHeading, groupName }) => {
+      createComponent({
+        propsData: { [`${groupName}Issues`]: givenIssues, [`${groupName}Heading`]: givenHeading },
+      });
+
+      expect(findHeading(groupName).text()).toBe(givenHeading);
+    });
+
+    it.each(['resolved', 'unresolved'])('renders all %s issues', issueName => {
+      const issues = [{ name: 'foo' }, { name: 'bar' }];
+
+      createComponent({
+        propsData: { [`${issueName}Issues`]: issues },
+      });
+
+      expect(wrapper.findAll(ReportItem)).toHaveLength(issues.length);
+    });
+
+    it('renders a report item with the correct props', () => {
+      createComponent({
+        propsData: {
+          resolvedIssues: [{ name: 'foo' }],
+          component: 'TestIssueBody',
+        },
+        stubs: {
+          ReportItem,
+        },
+      });
+
+      expect(wrapper.find(ReportItem).props()).toMatchSnapshot();
+    });
+  });
+});