1 files changed, 138 insertions, 0 deletions
diff --git a/spec/frontend/packages/list/coming_soon/packages_coming_soon_spec.js b/spec/frontend/packages/list/coming_soon/packages_coming_soon_spec.js
new file mode 100644
index 00000000000..c4cdadc45e6
--- /dev/null
+++ b/spec/frontend/packages/list/coming_soon/packages_coming_soon_spec.js
@@ -0,0 +1,138 @@
+import { GlEmptyState, GlSkeletonLoader, GlLabel } from '@gitlab/ui';
+import { mount, createLocalVue } from '@vue/test-utils';
+import VueApollo, { ApolloQuery } from 'vue-apollo';
+import ComingSoon from '~/packages/list/coming_soon/packages_coming_soon.vue';
+import { TrackingActions } from '~/packages/shared/constants';
+import { asViewModel } from './mock_data';
+import Tracking from '~/tracking';
+
+jest.mock('~/packages/list/coming_soon/helpers.js');
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+describe('packages_coming_soon', () => {
+  let wrapper;
+
+  const findSkeletonLoader = () => wrapper.find(GlSkeletonLoader);
+  const findAllIssues = () => wrapper.findAll('[data-testid="issue-row"]');
+  const findIssuesData = () =>
+    findAllIssues().wrappers.map(x => {
+      const titleLink = x.find('[data-testid="issue-title-link"]');
+      const milestone = x.find('[data-testid="milestone"]');
+      const issueIdLink = x.find('[data-testid="issue-id-link"]');
+      const labels = x.findAll(GlLabel);
+
+      const issueId = Number(issueIdLink.text().substr(1));
+
+      return {
+        id: issueId,
+        iid: issueId,
+        title: titleLink.text(),
+        webUrl: titleLink.attributes('href'),
+        labels: labels.wrappers.map(label => ({
+          color: label.props('backgroundColor'),
+          title: label.props('title'),
+          scoped: label.props('scoped'),
+        })),
+        ...(milestone.exists() ? { milestone: { title: milestone.text() } } : {}),
+      };
+    });
+  const findIssueTitleLink = () => wrapper.find('[data-testid="issue-title-link"]');
+  const findIssueIdLink = () => wrapper.find('[data-testid="issue-id-link"]');
+  const findEmptyState = () => wrapper.find(GlEmptyState);
+
+  const mountComponent = (testParams = {}) => {
+    const $apolloData = {
+      loading: testParams.isLoading || false,
+    };
+
+    wrapper = mount(ComingSoon, {
+      localVue,
+      propsData: {
+        illustration: 'foo',
+        projectPath: 'foo',
+        suggestedContributionsPath: 'foo',
+      },
+      stubs: {
+        ApolloQuery,
+        GlLink: true,
+      },
+      mocks: {
+        $apolloData,
+      },
+    });
+
+    // Mock the GraphQL query result
+    wrapper.find(ApolloQuery).setData({
+      result: {
+        data: testParams.issues || asViewModel,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when loading', () => {
+    beforeEach(() => mountComponent({ isLoading: true }));
+
+    it('renders the skeleton loader', () => {
+      expect(findSkeletonLoader().exists()).toBe(true);
+    });
+  });
+
+  describe('when there are no issues', () => {
+    beforeEach(() => mountComponent({ issues: [] }));
+
+    it('renders the empty state', () => {
+      expect(findEmptyState().exists()).toBe(true);
+    });
+  });
+
+  describe('when there are issues', () => {
+    beforeEach(() => mountComponent());
+
+    it('renders each issue', () => {
+      expect(findIssuesData()).toEqual(asViewModel);
+    });
+  });
+
+  describe('tracking', () => {
+    const firstIssue = asViewModel[0];
+    let eventSpy;
+
+    beforeEach(() => {
+      eventSpy = jest.spyOn(Tracking, 'event');
+      mountComponent();
+    });
+
+    it('tracks when mounted', () => {
+      expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.COMING_SOON_REQUESTED, {});
+    });
+
+    it('tracks when an issue title link is clicked', () => {
+      eventSpy.mockClear();
+
+      findIssueTitleLink().vm.$emit('click');
+
+      expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.COMING_SOON_LIST, {
+        label: firstIssue.title,
+        value: firstIssue.iid,
+      });
+    });
+
+    it('tracks when an issue id link is clicked', () => {
+      eventSpy.mockClear();
+
+      findIssueIdLink().vm.$emit('click');
+
+      expect(eventSpy).toHaveBeenCalledWith(undefined, TrackingActions.COMING_SOON_LIST, {
+        label: firstIssue.title,
+        value: firstIssue.iid,
+      });
+    });
+  });
+});