Add latest changes from gitlab-org/gitlab@master

2 files changed, 108 insertions, 8 deletions

diff --git a/spec/frontend/groups/components/app_spec.js b/spec/frontend/groups/components/app_spec.js
index 2796a561953..a4a7530184d 100644
--- a/spec/frontend/groups/components/app_spec.js
+++ b/spec/frontend/groups/components/app_spec.js
@@ -40,7 +40,7 @@ describe('AppComponent', () => {
   const store = new GroupsStore({ hideProjects: false });
   const service = new GroupsService(mockEndpoint);
 
-  const createShallowComponent = ({ propsData = {}, provide = {} } = {}) => {
+  const createShallowComponent = ({ propsData = {} } = {}) => {
     store.state.pageInfo = mockPageInfo;
     wrapper = shallowMount(appComponent, {
       propsData: {
@@ -53,10 +53,6 @@ describe('AppComponent', () => {
       mocks: {
         $toast,
       },
-      provide: {
-        renderEmptyState: false,
-        ...provide,
-      },
     });
     vm = wrapper.vm;
   };
@@ -402,8 +398,7 @@ describe('AppComponent', () => {
         ({ action, groups, fromSearch, renderEmptyState, expected }) => {
           it(expected ? 'renders empty state' : 'does not render empty state', async () => {
             createShallowComponent({
-              propsData: { action },
-              provide: { renderEmptyState },
+              propsData: { action, renderEmptyState },
             });
 
             vm.updateGroups(groups, fromSearch);
@@ -420,7 +415,6 @@ describe('AppComponent', () => {
       it('renders legacy empty state', async () => {
         createShallowComponent({
           propsData: { action: 'subgroups_and_projects' },
-          provide: { renderEmptyState: false },
         });
 
         vm.updateGroups([], false);
diff --git a/spec/frontend/groups/components/overview_tabs_spec.js b/spec/frontend/groups/components/overview_tabs_spec.js
new file mode 100644
index 00000000000..c26254acf3d
--- /dev/null
+++ b/spec/frontend/groups/components/overview_tabs_spec.js
@@ -0,0 +1,106 @@
+import { GlTab } from '@gitlab/ui';
+import { nextTick } from 'vue';
+import AxiosMockAdapter from 'axios-mock-adapter';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+import OverviewTabs from '~/groups/components/overview_tabs.vue';
+import GroupsApp from '~/groups/components/app.vue';
+import GroupsStore from '~/groups/store/groups_store';
+import GroupsService from '~/groups/service/groups_service';
+import {
+  ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
+  ACTIVE_TAB_SHARED,
+  ACTIVE_TAB_ARCHIVED,
+} from '~/groups/constants';
+import axios from '~/lib/utils/axios_utils';
+
+describe('OverviewTabs', () => {
+  let wrapper;
+
+  const endpoints = {
+    subgroups_and_projects: '/groups/foobar/-/children.json',
+    shared: '/groups/foobar/-/shared_projects.json',
+    archived: '/groups/foobar/-/children.json?archived=only',
+  };
+
+  const createComponent = async () => {
+    wrapper = mountExtended(OverviewTabs, {
+      provide: {
+        endpoints,
+      },
+    });
+
+    await nextTick();
+  };
+
+  const findTabPanels = () => wrapper.findAllComponents(GlTab);
+  const findTab = (name) => wrapper.findByRole('tab', { name });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  beforeEach(async () => {
+    // eslint-disable-next-line no-new
+    new AxiosMockAdapter(axios);
+
+    await createComponent();
+  });
+
+  it('renders `Subgroups and projects` tab with `GroupsApp` component', async () => {
+    const tabPanel = findTabPanels().at(0);
+
+    expect(tabPanel.vm.$attrs).toMatchObject({
+      title: OverviewTabs.i18n.subgroupsAndProjects,
+      lazy: false,
+    });
+    expect(tabPanel.findComponent(GroupsApp).props()).toMatchObject({
+      action: ACTIVE_TAB_SUBGROUPS_AND_PROJECTS,
+      store: new GroupsStore({ showSchemaMarkup: true }),
+      service: new GroupsService(endpoints[ACTIVE_TAB_SUBGROUPS_AND_PROJECTS]),
+      hideProjects: false,
+      renderEmptyState: true,
+    });
+  });
+
+  it('renders `Shared projects` tab and renders `GroupsApp` component after clicking tab', async () => {
+    const tabPanel = findTabPanels().at(1);
+
+    expect(tabPanel.vm.$attrs).toMatchObject({
+      title: OverviewTabs.i18n.sharedProjects,
+      lazy: true,
+    });
+
+    await findTab(OverviewTabs.i18n.sharedProjects).trigger('click');
+
+    expect(tabPanel.findComponent(GroupsApp).props()).toMatchObject({
+      action: ACTIVE_TAB_SHARED,
+      store: new GroupsStore(),
+      service: new GroupsService(endpoints[ACTIVE_TAB_SHARED]),
+      hideProjects: false,
+      renderEmptyState: false,
+    });
+
+    expect(tabPanel.vm.$attrs.lazy).toBe(false);
+  });
+
+  it('renders `Archived projects` tab and renders `GroupsApp` component after clicking tab', async () => {
+    const tabPanel = findTabPanels().at(2);
+
+    expect(tabPanel.vm.$attrs).toMatchObject({
+      title: OverviewTabs.i18n.archivedProjects,
+      lazy: true,
+    });
+
+    await findTab(OverviewTabs.i18n.archivedProjects).trigger('click');
+
+    expect(tabPanel.findComponent(GroupsApp).props()).toMatchObject({
+      action: ACTIVE_TAB_ARCHIVED,
+      store: new GroupsStore(),
+      service: new GroupsService(endpoints[ACTIVE_TAB_ARCHIVED]),
+      hideProjects: false,
+      renderEmptyState: false,
+    });
+
+    expect(tabPanel.vm.$attrs.lazy).toBe(false);
+  });
+});