Add latest changes from gitlab-org/gitlab@master

4 files changed, 95 insertions, 12 deletions

diff --git a/spec/frontend/super_sidebar/components/menu_section_spec.js b/spec/frontend/super_sidebar/components/menu_section_spec.js
new file mode 100644
index 00000000000..751c4da5a3d
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/menu_section_spec.js
@@ -0,0 +1,93 @@
+import { GlCollapse } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import MenuSection from '~/super_sidebar/components/menu_section.vue';
+import NavItem from '~/super_sidebar/components/nav_item.vue';
+import { stubComponent } from 'helpers/stub_component';
+
+describe('MenuSection component', () => {
+  let wrapper;
+
+  const findCollapse = () => wrapper.getComponent(GlCollapse);
+  const findNavItems = () => wrapper.findAllComponents(NavItem);
+  const createWrapper = (item, otherProps) => {
+    wrapper = shallowMountExtended(MenuSection, {
+      propsData: { item, ...otherProps },
+      stubs: {
+        GlCollapse: stubComponent(GlCollapse, {
+          props: ['visible'],
+        }),
+      },
+    });
+  };
+
+  it('renders its title', () => {
+    createWrapper({ title: 'Asdf' });
+    expect(wrapper.find('button').text()).toBe('Asdf');
+  });
+
+  it('renders all its subitems', () => {
+    createWrapper({
+      title: 'Asdf',
+      items: [
+        { title: 'Item1', href: '/item1' },
+        { title: 'Item2', href: '/item2' },
+      ],
+    });
+    expect(findNavItems().length).toBe(2);
+  });
+
+  describe('collapse behavior', () => {
+    describe('when active', () => {
+      it('is expanded', () => {
+        createWrapper({ title: 'Asdf', is_active: true });
+        expect(findCollapse().props('visible')).toBe(true);
+      });
+    });
+
+    describe('when set to expanded', () => {
+      it('is expanded', () => {
+        createWrapper({ title: 'Asdf' }, { expanded: true });
+        expect(findCollapse().props('visible')).toBe(true);
+      });
+    });
+
+    describe('when not active nor set to expanded', () => {
+      it('is not expanded', () => {
+        createWrapper({ title: 'Asdf' });
+        expect(findCollapse().props('visible')).toBe(false);
+      });
+    });
+  });
+
+  describe('`separated` prop', () => {
+    describe('by default (false)', () => {
+      it('does not render a separator', () => {
+        createWrapper({ title: 'Asdf' });
+        expect(wrapper.find('hr').exists()).toBe(false);
+      });
+    });
+
+    describe('when set to true', () => {
+      it('does render a separator', () => {
+        createWrapper({ title: 'Asdf' }, { separated: true });
+        expect(wrapper.find('hr').exists()).toBe(true);
+      });
+    });
+  });
+
+  describe('`tag` prop', () => {
+    describe('by default', () => {
+      it('renders as <section> tag', () => {
+        createWrapper({ title: 'Asdf' });
+        expect(wrapper.element.tagName).toBe('SECTION');
+      });
+    });
+
+    describe('when set to "li"', () => {
+      it('renders as <li> tag', () => {
+        createWrapper({ title: 'Asdf' }, { tag: 'li' });
+        expect(wrapper.element.tagName).toBe('LI');
+      });
+    });
+  });
+});
diff --git a/spec/frontend/super_sidebar/components/nav_item_spec.js b/spec/frontend/super_sidebar/components/nav_item_spec.js
index ffbdaa326f9..1714a4c3a4e 100644
--- a/spec/frontend/super_sidebar/components/nav_item_spec.js
+++ b/spec/frontend/super_sidebar/components/nav_item_spec.js
@@ -61,16 +61,6 @@ describe('NavItem component', () => {
   });
 
   describe('Data Tracking Attributes', () => {
-    it('adds no labels on sections', () => {
-      const id = 'my-id';
-      createWrapper({ title: 'Foo', id, items: [{ title: 'Baz' }] });
-
-      expect(findLink().attributes('data-track-action')).toBeUndefined();
-      expect(findLink().attributes('data-track-label')).toBeUndefined();
-      expect(findLink().attributes('data-track-property')).toBeUndefined();
-      expect(findLink().attributes('data-track-extra')).toBeUndefined();
-    });
-
     it.each`
       id           | panelType    | eventLabel             | eventProperty             | eventExtra
       ${'abc'}     | ${'xyz'}     | ${'abc'}               | ${'nav_panel_xyz'}        | ${undefined}
diff --git a/spec/frontend/super_sidebar/components/pinned_section_spec.js b/spec/frontend/super_sidebar/components/pinned_section_spec.js
index 7ead6a40895..fd6e2b7343e 100644
--- a/spec/frontend/super_sidebar/components/pinned_section_spec.js
+++ b/spec/frontend/super_sidebar/components/pinned_section_spec.js
@@ -14,7 +14,7 @@ jest.mock('~/lib/utils/common_utils', () => ({
 describe('PinnedSection component', () => {
   let wrapper;
 
-  const findToggle = () => wrapper.find('a');
+  const findToggle = () => wrapper.find('button');
 
   const createWrapper = () => {
     wrapper = mountExtended(PinnedSection, {
diff --git a/spec/frontend/super_sidebar/super_sidebar_collapsed_state_manager_spec.js b/spec/frontend/super_sidebar/super_sidebar_collapsed_state_manager_spec.js
index 1972e4805d0..aa1f0765411 100644
--- a/spec/frontend/super_sidebar/super_sidebar_collapsed_state_manager_spec.js
+++ b/spec/frontend/super_sidebar/super_sidebar_collapsed_state_manager_spec.js
@@ -108,7 +108,7 @@ describe('Super Sidebar Collapsed State Manager', () => {
         ${xl}              | ${xl}              | ${false}             | ${false}
         ${sm}              | ${sm}              | ${true}              | ${true}
       `(
-        'when changing width from $initialWindowWidth to $updatedWindowWidth expect the page to be initialized to be done $timesInitalised times',
+        'when changing width from $initialWindowWidth to $updatedWindowWidth expect page to have collapsed class before resize to be $hasClassBeforeResize and after resize to be $hasClassAfterResize',
         ({ initialWindowWidth, updatedWindowWidth, hasClassBeforeResize, hasClassAfterResize }) => {
           getCookie.mockReturnValue(undefined);
           window.innerWidth = initialWindowWidth;