diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/line_numbers_spec.js')
-rw-r--r-- | spec/frontend/vue_shared/components/line_numbers_spec.js | 71 |
1 files changed, 71 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/line_numbers_spec.js b/spec/frontend/vue_shared/components/line_numbers_spec.js new file mode 100644 index 00000000000..5bedd0ccd02 --- /dev/null +++ b/spec/frontend/vue_shared/components/line_numbers_spec.js @@ -0,0 +1,71 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlIcon, GlLink } from '@gitlab/ui'; +import LineNumbers from '~/vue_shared/components/line_numbers.vue'; + +describe('Line Numbers component', () => { + let wrapper; + const lines = 10; + + const createComponent = () => { + wrapper = shallowMount(LineNumbers, { propsData: { lines } }); + }; + + const findGlIcon = () => wrapper.findComponent(GlIcon); + const findLineNumbers = () => wrapper.findAllComponents(GlLink); + const findFirstLineNumber = () => findLineNumbers().at(0); + const findSecondLineNumber = () => findLineNumbers().at(1); + + beforeEach(() => createComponent()); + + afterEach(() => wrapper.destroy()); + + describe('rendering', () => { + it('renders Line Numbers', () => { + expect(findLineNumbers().length).toBe(lines); + expect(findFirstLineNumber().attributes()).toMatchObject({ + id: 'L1', + href: '#L1', + }); + }); + + it('renders a link icon', () => { + expect(findGlIcon().props()).toMatchObject({ + size: 12, + name: 'link', + }); + }); + }); + + describe('clicking a line number', () => { + let firstLineNumber; + let firstLineNumberElement; + + beforeEach(() => { + firstLineNumber = findFirstLineNumber(); + firstLineNumberElement = firstLineNumber.element; + + jest.spyOn(firstLineNumberElement, 'scrollIntoView'); + jest.spyOn(firstLineNumberElement.classList, 'add'); + jest.spyOn(firstLineNumberElement.classList, 'remove'); + + firstLineNumber.vm.$emit('click'); + }); + + it('adds the highlight (hll) class', () => { + expect(firstLineNumberElement.classList.add).toHaveBeenCalledWith('hll'); + }); + + it('removes the highlight (hll) class from a previously highlighted line', () => { + findSecondLineNumber().vm.$emit('click'); + + expect(firstLineNumberElement.classList.remove).toHaveBeenCalledWith('hll'); + }); + + it('scrolls the line into view', () => { + expect(firstLineNumberElement.scrollIntoView).toHaveBeenCalledWith({ + behavior: 'smooth', + block: 'center', + }); + }); + }); +}); |