1 files changed, 75 insertions, 0 deletions
diff --git a/spec/frontend/groups/components/new_top_level_group_alert_spec.js b/spec/frontend/groups/components/new_top_level_group_alert_spec.js
new file mode 100644
index 00000000000..db9a5c7b16b
--- /dev/null
+++ b/spec/frontend/groups/components/new_top_level_group_alert_spec.js
@@ -0,0 +1,75 @@
+import { shallowMount } from '@vue/test-utils';
+import NewTopLevelGroupAlert from '~/groups/components/new_top_level_group_alert.vue';
+import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+describe('NewTopLevelGroupAlert', () => {
+  let wrapper;
+  let userCalloutDismissSpy;
+
+  const findAlert = () => wrapper.findComponent({ ref: 'newTopLevelAlert' });
+  const createSubGroupPath = '/groups/new?parent_id=1#create-group-pane';
+
+  const createComponent = ({ shouldShowCallout = true } = {}) => {
+    userCalloutDismissSpy = jest.fn();
+
+    wrapper = shallowMount(NewTopLevelGroupAlert, {
+      provide: {
+        createSubGroupPath,
+      },
+      stubs: {
+        UserCalloutDismisser: makeMockUserCalloutDismisser({
+          dismiss: userCalloutDismissSpy,
+          shouldShowCallout,
+        }),
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('when the component is created', () => {
+    beforeEach(() => {
+      createComponent({
+        shouldShowCallout: true,
+      });
+    });
+
+    it('renders a button with a link to create a new sub-group', () => {
+      expect(findAlert().props('primaryButtonText')).toBe(
+        NewTopLevelGroupAlert.i18n.primaryBtnText,
+      );
+      expect(findAlert().props('primaryButtonLink')).toBe(
+        helpPagePath('user/group/subgroups/index'),
+      );
+    });
+  });
+
+  describe('dismissing the alert', () => {
+    beforeEach(() => {
+      findAlert().vm.$emit('dismiss');
+    });
+
+    it('calls the dismiss callback', () => {
+      expect(userCalloutDismissSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('when the alert has been dismissed', () => {
+    beforeEach(() => {
+      createComponent({
+        shouldShowCallout: false,
+      });
+    });
+
+    it('does not show the alert', () => {
+      expect(findAlert().exists()).toBe(false);
+    });
+  });
+});