2 files changed, 96 insertions, 0 deletions
diff --git a/spec/frontend/pages/groups/new/components/app_spec.js b/spec/frontend/pages/groups/new/components/app_spec.js
new file mode 100644
index 00000000000..ab483316086
--- /dev/null
+++ b/spec/frontend/pages/groups/new/components/app_spec.js
@@ -0,0 +1,39 @@
+import { shallowMount } from '@vue/test-utils';
+import App from '~/pages/groups/new/components/app.vue';
+import NewNamespacePage from '~/vue_shared/new_namespace/new_namespace_page.vue';
+
+describe('App component', () => {
+  let wrapper;
+
+  const createComponent = (propsData = {}) => {
+    wrapper = shallowMount(App, { propsData });
+  };
+
+  const findNewNamespacePage = () => wrapper.findComponent(NewNamespacePage);
+
+  const findCreateGroupPanel = () =>
+    findNewNamespacePage()
+      .props('panels')
+      .find((panel) => panel.name === 'create-group-pane');
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('creates correct component for group creation', () => {
+    createComponent();
+
+    expect(findNewNamespacePage().props('initialBreadcrumb')).toBe('New group');
+    expect(findCreateGroupPanel().title).toBe('Create group');
+  });
+
+  it('creates correct component for subgroup creation', () => {
+    const props = { parentGroupName: 'parent', importExistingGroupPath: '/path' };
+
+    createComponent(props);
+
+    expect(findNewNamespacePage().props('initialBreadcrumb')).toBe('parent');
+    expect(findCreateGroupPanel().title).toBe('Create subgroup');
+    expect(findCreateGroupPanel().detailProps).toEqual(props);
+  });
+});
diff --git a/spec/frontend/pages/groups/new/components/create_group_description_details_spec.js b/spec/frontend/pages/groups/new/components/create_group_description_details_spec.js
new file mode 100644
index 00000000000..56a1fd03f71
--- /dev/null
+++ b/spec/frontend/pages/groups/new/components/create_group_description_details_spec.js
@@ -0,0 +1,57 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlSprintf, GlLink } from '@gitlab/ui';
+import CreateGroupDescriptionDetails from '~/pages/groups/new/components/create_group_description_details.vue';
+import { helpPagePath } from '~/helpers/help_page_helper';
+
+describe('CreateGroupDescriptionDetails component', () => {
+  let wrapper;
+
+  const createComponent = (propsData = {}) => {
+    wrapper = shallowMount(CreateGroupDescriptionDetails, {
+      propsData,
+      stubs: { GlSprintf, GlLink },
+    });
+  };
+
+  const findLinkHref = (at) => wrapper.findAllComponents(GlLink).at(at);
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('creates correct component for group creation', () => {
+    createComponent();
+
+    const groupsLink = findLinkHref(0);
+    expect(groupsLink.attributes('href')).toBe(helpPagePath('user/group/index'));
+    expect(groupsLink.text()).toBe('Groups');
+
+    const subgroupsLink = findLinkHref(1);
+    expect(subgroupsLink.text()).toBe('subgroups');
+    expect(subgroupsLink.attributes('href')).toBe(helpPagePath('user/group/subgroups/index'));
+
+    expect(wrapper.text()).toBe(
+      'Groups allow you to manage and collaborate across multiple projects. Members of a group have access to all of its projects. Groups can also be nested by creating subgroups.',
+    );
+  });
+
+  it('creates correct component for subgroup creation', () => {
+    createComponent({ parentGroupName: 'parent', importExistingGroupPath: '/path' });
+
+    const groupsLink = findLinkHref(0);
+    expect(groupsLink.attributes('href')).toBe(helpPagePath('user/group/index'));
+    expect(groupsLink.text()).toBe('Groups');
+
+    const subgroupsLink = findLinkHref(1);
+    expect(subgroupsLink.text()).toBe('subgroups');
+    expect(subgroupsLink.attributes('href')).toBe(helpPagePath('user/group/subgroups/index'));
+
+    const importGroupLink = findLinkHref(2);
+    expect(importGroupLink.text()).toBe('import an existing group');
+    expect(importGroupLink.attributes('href')).toBe('/path');
+
+    expect(wrapper.text()).toBe(
+      'Groups and subgroups allow you to manage and collaborate across multiple projects. Members of a group have access to all of its projects. You can also import an existing group.',
+    );
+  });
+});