1 files changed, 29 insertions, 19 deletions

diff --git a/spec/frontend/blob/components/table_contents_spec.js b/spec/frontend/blob/components/table_contents_spec.js
index 5fe328b65ff..6af9cdcae7d 100644
--- a/spec/frontend/blob/components/table_contents_spec.js
+++ b/spec/frontend/blob/components/table_contents_spec.js
@@ -1,4 +1,4 @@
-import { GlDropdownItem } from '@gitlab/ui';
+import { GlDisclosureDropdown } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
@@ -10,6 +10,8 @@ function createComponent() {
   wrapper = shallowMount(TableContents);
 }
 
+const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
+
 async function setLoaded(loaded) {
   document.querySelector('.blob-viewer').dataset.loaded = loaded;
 
@@ -20,10 +22,10 @@ describe('Markdown table of contents component', () => {
   beforeEach(() => {
     setHTMLFixture(`
       <div class="blob-viewer" data-type="rich" data-loaded="false">
-        <h1><a href="#1"></a>Hello</h1>
-        <h2><a href="#2"></a>World</h2>
-        <h3><a href="#3"></a>Testing</h3>
-        <h2><a href="#4"></a>GitLab</h2>
+        <h1><a id="hello">$</a> Hello</h1>
+        <h2><a id="world">$</a> World</h2>
+        <h3><a id="hakuna">$</a> Hakuna</h3>
+        <h2><a id="matata">$</a> Matata</h2>
       </div>
     `);
   });
@@ -34,12 +36,10 @@ describe('Markdown table of contents component', () => {
   });
 
   describe('not loaded', () => {
-    const findDropdownItem = () => wrapper.findComponent(GlDropdownItem);
-
     it('does not populate dropdown', () => {
       createComponent();
 
-      expect(findDropdownItem().exists()).toBe(false);
+      expect(findDropdown().exists()).toBe(false);
     });
 
     it('does not show dropdown when loading blob content', async () => {
@@ -47,7 +47,7 @@ describe('Markdown table of contents component', () => {
 
       await setLoaded(false);
 
-      expect(findDropdownItem().exists()).toBe(false);
+      expect(findDropdown().exists()).toBe(false);
     });
 
     it('does not show dropdown when viewing non-rich content', async () => {
@@ -57,7 +57,7 @@ describe('Markdown table of contents component', () => {
 
       await setLoaded(true);
 
-      expect(findDropdownItem().exists()).toBe(false);
+      expect(findDropdown().exists()).toBe(false);
     });
   });
 
@@ -67,15 +67,25 @@ describe('Markdown table of contents component', () => {
 
       await setLoaded(true);
 
-      const dropdownItems = wrapper.findAllComponents(GlDropdownItem);
+      const dropdown = findDropdown();
 
-      expect(dropdownItems.exists()).toBe(true);
-      expect(dropdownItems.length).toBe(4);
+      expect(dropdown.exists()).toBe(true);
+      expect(dropdown.props('items').length).toBe(4);
 
       // make sure that this only happens once
       await setLoaded(true);
 
-      expect(wrapper.findAllComponents(GlDropdownItem).length).toBe(4);
+      expect(dropdown.props('items').length).toBe(4);
+    });
+
+    it('generates proper anchor links', async () => {
+      createComponent();
+      await setLoaded(true);
+
+      const dropdown = findDropdown();
+      const items = dropdown.props('items');
+      const hrefs = items.map((item) => item.href);
+      expect(hrefs).toEqual(['#hello', '#world', '#hakuna', '#matata']);
     });
 
     it('sets padding for dropdown items', async () => {
@@ -83,12 +93,12 @@ describe('Markdown table of contents component', () => {
 
       await setLoaded(true);
 
-      const dropdownLinks = wrapper.findAll('[data-testid="tableContentsLink"]');
+      const items = findDropdown().props('items');
 
-      expect(dropdownLinks.at(0).element.style.paddingLeft).toBe('0px');
-      expect(dropdownLinks.at(1).element.style.paddingLeft).toBe('8px');
-      expect(dropdownLinks.at(2).element.style.paddingLeft).toBe('16px');
-      expect(dropdownLinks.at(3).element.style.paddingLeft).toBe('8px');
+      expect(items[0].extraAttrs.style.paddingLeft).toBe('16px');
+      expect(items[1].extraAttrs.style.paddingLeft).toBe('24px');
+      expect(items[2].extraAttrs.style.paddingLeft).toBe('32px');
+      expect(items[3].extraAttrs.style.paddingLeft).toBe('24px');
     });
   });
 });