1 files changed, 67 insertions, 0 deletions
diff --git a/spec/frontend/bootstrap_linked_tabs_spec.js b/spec/frontend/bootstrap_linked_tabs_spec.js
new file mode 100644
index 00000000000..2d8939e6480
--- /dev/null
+++ b/spec/frontend/bootstrap_linked_tabs_spec.js
@@ -0,0 +1,67 @@
+import LinkedTabs from '~/lib/utils/bootstrap_linked_tabs';
+
+describe('Linked Tabs', () => {
+  preloadFixtures('static/linked_tabs.html');
+
+  beforeEach(() => {
+    loadFixtures('static/linked_tabs.html');
+  });
+
+  describe('when is initialized', () => {
+    beforeEach(() => {
+      jest.spyOn(window.history, 'replaceState').mockImplementation(() => {});
+    });
+
+    it('should activate the tab correspondent to the given action', () => {
+      // eslint-disable-next-line no-new
+      new LinkedTabs({
+        action: 'tab1',
+        defaultAction: 'tab1',
+        parentEl: '.linked-tabs',
+      });
+
+      expect(document.querySelector('#tab1').classList).toContain('active');
+    });
+
+    it('should active the default tab action when the action is show', () => {
+      // eslint-disable-next-line no-new
+      new LinkedTabs({
+        action: 'show',
+        defaultAction: 'tab1',
+        parentEl: '.linked-tabs',
+      });
+
+      expect(document.querySelector('#tab1').classList).toContain('active');
+    });
+  });
+
+  describe('on click', () => {
+    it('should change the url according to the clicked tab', () => {
+      const historySpy = jest.spyOn(window.history, 'replaceState').mockImplementation(() => {});
+
+      const linkedTabs = new LinkedTabs({
+        action: 'show',
+        defaultAction: 'tab1',
+        parentEl: '.linked-tabs',
+      });
+
+      const secondTab = document.querySelector('.linked-tabs li:nth-child(2) a');
+      const newState =
+        secondTab.getAttribute('href') +
+        linkedTabs.currentLocation.search +
+        linkedTabs.currentLocation.hash;
+
+      secondTab.click();
+
+      if (historySpy) {
+        expect(historySpy).toHaveBeenCalledWith(
+          {
+            url: newState,
+          },
+          document.title,
+          newState,
+        );
+      }
+    });
+  });
+});