diff options
Diffstat (limited to 'spec/frontend/blob/components/table_contents_spec.js')
-rw-r--r-- | spec/frontend/blob/components/table_contents_spec.js | 48 |
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'); }); }); }); |