72 lines
2.1 KiB
JavaScript
72 lines
2.1 KiB
JavaScript
|
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',
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|
||
|
|
});
|