diff options
author | Paul Slaughter <pslaughter@gitlab.com> | 2020-04-29 07:57:08 +0300 |
---|---|---|
committer | Paul Slaughter <pslaughter@gitlab.com> | 2020-05-20 01:06:11 +0300 |
commit | 26bb98496b060ef60d6edc265fa7a12ee9d612a4 (patch) | |
tree | adb7f036b85683099bca6a23d3d76ee06ec1396b /spec/frontend/default/components/table_of_contents_spec.js | |
parent | a61458419fe97029cc9d1c198bd313dd6af548b6 (diff) |
Create Vue table_of_contents
Also:
- Updates toc.scss to look for .table-of-contents
- Creates some dom helpers in shared
- Stick to footer directive
- Moves toc collapse button to component
- Fixes issue where collapsed on mobile
affects full view
Diffstat (limited to 'spec/frontend/default/components/table_of_contents_spec.js')
-rw-r--r-- | spec/frontend/default/components/table_of_contents_spec.js | 102 |
1 files changed, 102 insertions, 0 deletions
diff --git a/spec/frontend/default/components/table_of_contents_spec.js b/spec/frontend/default/components/table_of_contents_spec.js new file mode 100644 index 00000000..a256cae5 --- /dev/null +++ b/spec/frontend/default/components/table_of_contents_spec.js @@ -0,0 +1,102 @@ +import { shallowMount, mount } from '@vue/test-utils'; +import TableOfContents from '../../../../content/frontend/default/components/table_of_contents.vue'; +import * as dom from '../../../../content/frontend/shared/dom'; +import { createExampleToc } from '../../shared/toc_helper'; + +const TEST_ITEMS = createExampleToc(); +const TEST_HELP_AND_FEEDBACK_ID = 'test-help-and-feedback'; + +describe('frontend/default/components/table_of_contents', () => { + let wrapper; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + beforeEach(() => { + // jquery is not available in Jest yet so we need to mock this method + jest.spyOn(dom, 'getOuterHeight').mockReturnValue(100); + }); + + const createComponent = (props = {}, mountFn = shallowMount) => { + wrapper = mountFn(TableOfContents, { + propsData: { + items: TEST_ITEMS, + helpAndFeedbackId: TEST_HELP_AND_FEEDBACK_ID, + ...props, + }, + }); + }; + + const findCollapseButton = () => wrapper.find('[data-testid="collapse"]'); + const findCollapsibleContainer = () => wrapper.find('[data-testid="container"]'); + const findMainList = () => wrapper.find('[data-testid="main-list"]'); + const findHelpAndFeedback = () => wrapper.find('[data-testid="help-and-feedback"]'); + const clickCollapseButton = () => findCollapseButton().trigger('click'); + + it('matches snapshot', () => { + createComponent({ hasHelpAndFeedback: true }, mount); + expect(wrapper.element).toMatchSnapshot(); + }); + + describe('with hasHelpAndFeedback', () => { + beforeEach(() => { + createComponent({ hasHelpAndFeedback: true }); + }); + + it('shows help and feedback', () => { + expect(findHelpAndFeedback().exists()).toBe(true); + expect(findHelpAndFeedback().props('items')).toEqual([ + { + href: `#${TEST_HELP_AND_FEEDBACK_ID}`, + id: null, + items: [], + text: 'Help and feedback', + }, + ]); + }); + }); + + describe('default', () => { + beforeEach(() => { + createComponent({}, mount); + }); + + it('does not show help and feedback', () => { + expect(findHelpAndFeedback().exists()).toBe(false); + }); + + it('renders toc list', () => { + expect(findMainList().props('items')).toEqual(TEST_ITEMS); + }); + + it('is initially collapsed', () => { + expect(findCollapseButton().classes('collapsed')).toBe(true); + expect(findCollapsibleContainer().classes('sm-collapsed')).toBe(true); + }); + + describe('when collapse button is pressed', () => { + beforeEach(() => { + clickCollapseButton(); + }); + + it('starts expanding', () => { + expect(findCollapsibleContainer().classes('sm-collapsing')).toBe(true); + }); + + it('updates button class', () => { + expect(findCollapseButton().classes('collapsed')).toBe(false); + }); + + it('when button pressed again, nothing happens because in the middle of collapsing', () => { + clickCollapseButton(); + + return wrapper.vm.$nextTick(() => { + expect(findCollapsibleContainer().classes('sm-collapsing')).toBe(true); + expect(findCollapseButton().classes('collapsed')).toBe(false); + }); + }); + }); + }); +}); |