1 files changed, 74 insertions, 0 deletions
diff --git a/spec/frontend/service_desk/components/empty_state_with_any_issues_spec.js b/spec/frontend/service_desk/components/empty_state_with_any_issues_spec.js
new file mode 100644
index 00000000000..ce8a78767d4
--- /dev/null
+++ b/spec/frontend/service_desk/components/empty_state_with_any_issues_spec.js
@@ -0,0 +1,74 @@
+import { GlEmptyState } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import EmptyStateWithAnyIssues from '~/service_desk/components/empty_state_with_any_issues.vue';
+import {
+  noSearchResultsTitle,
+  noSearchResultsDescription,
+  infoBannerUserNote,
+  noOpenIssuesTitle,
+  noClosedIssuesTitle,
+} from '~/service_desk/constants';
+
+describe('EmptyStateWithAnyIssues component', () => {
+  let wrapper;
+
+  const defaultProvide = {
+    emptyStateSvgPath: 'empty/state/svg/path',
+    newIssuePath: 'new/issue/path',
+    showNewIssueLink: false,
+  };
+
+  const findGlEmptyState = () => wrapper.findComponent(GlEmptyState);
+
+  const mountComponent = (props = {}) => {
+    wrapper = shallowMount(EmptyStateWithAnyIssues, {
+      propsData: {
+        hasSearch: true,
+        isOpenTab: true,
+        ...props,
+      },
+      provide: defaultProvide,
+    });
+  };
+
+  describe('when there is a search (with no results)', () => {
+    beforeEach(() => {
+      mountComponent();
+    });
+
+    it('shows empty state', () => {
+      expect(findGlEmptyState().props()).toMatchObject({
+        description: noSearchResultsDescription,
+        title: noSearchResultsTitle,
+        svgPath: defaultProvide.emptyStateSvgPath,
+      });
+    });
+  });
+
+  describe('when "Open" tab is active', () => {
+    beforeEach(() => {
+      mountComponent({ hasSearch: false });
+    });
+
+    it('shows empty state', () => {
+      expect(findGlEmptyState().props()).toMatchObject({
+        description: infoBannerUserNote,
+        title: noOpenIssuesTitle,
+        svgPath: defaultProvide.emptyStateSvgPath,
+      });
+    });
+  });
+
+  describe('when "Closed" tab is active', () => {
+    beforeEach(() => {
+      mountComponent({ hasSearch: false, isClosedTab: true, isOpenTab: false });
+    });
+
+    it('shows empty state', () => {
+      expect(findGlEmptyState().props()).toMatchObject({
+        title: noClosedIssuesTitle,
+        svgPath: defaultProvide.emptyStateSvgPath,
+      });
+    });
+  });
+});