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',
+      });
+    });
+  });
+});