diff options
Diffstat (limited to 'spec/frontend/layout_nav_spec.js')
-rw-r--r-- | spec/frontend/layout_nav_spec.js | 39 |
1 files changed, 39 insertions, 0 deletions
diff --git a/spec/frontend/layout_nav_spec.js b/spec/frontend/layout_nav_spec.js new file mode 100644 index 00000000000..30f4f7fcac1 --- /dev/null +++ b/spec/frontend/layout_nav_spec.js @@ -0,0 +1,39 @@ +import { initScrollingTabs } from '~/layout_nav'; +import { setHTMLFixture } from './__helpers__/fixtures'; + +describe('initScrollingTabs', () => { + const htmlFixture = ` + <button type='button' class='fade-left'></button> + <button type='button' class='fade-right'></button> + <div class='scrolling-tabs'></div> + `; + const findTabs = () => document.querySelector('.scrolling-tabs'); + const findScrollLeftButton = () => document.querySelector('button.fade-left'); + const findScrollRightButton = () => document.querySelector('button.fade-right'); + + beforeEach(() => { + setHTMLFixture(htmlFixture); + }); + + it('scrolls left when clicking on the left button', () => { + initScrollingTabs(); + const tabs = findTabs(); + tabs.scrollBy = jest.fn(); + const fadeLeft = findScrollLeftButton(); + + fadeLeft.click(); + + expect(tabs.scrollBy).toHaveBeenCalledWith({ left: -200, behavior: 'smooth' }); + }); + + it('scrolls right when clicking on the right button', () => { + initScrollingTabs(); + const tabs = findTabs(); + tabs.scrollBy = jest.fn(); + const fadeRight = findScrollRightButton(); + + fadeRight.click(); + + expect(tabs.scrollBy).toHaveBeenCalledWith({ left: 200, behavior: 'smooth' }); + }); +}); |