1 files changed, 28 insertions, 100 deletions
diff --git a/spec/javascripts/pipelines/navigation_tabs_spec.js b/spec/javascripts/pipelines/navigation_tabs_spec.js
index 53a88e6322f..f125a2fa189 100644
--- a/spec/javascripts/pipelines/navigation_tabs_spec.js
+++ b/spec/javascripts/pipelines/navigation_tabs_spec.js
@@ -8,120 +8,48 @@ describe('navigation tabs pipeline component', () => {
   let data;
 
   beforeEach(() => {
-    data = {
-      scope: 'all',
-      count: {
-        all: 16,
-        running: 1,
-        pending: 10,
-        finished: 0,
+    data = [
+      {
+        name: 'All',
+        scope: 'all',
+        count: 1,
+        isActive: true,
+      },
+      {
+        name: 'Pending',
+        scope: 'pending',
+        count: 0,
+        isActive: false,
       },
-      paths: {
-        allPath: '/gitlab-org/gitlab-ce/pipelines',
-        pendingPath: '/gitlab-org/gitlab-ce/pipelines?scope=pending',
-        finishedPath: '/gitlab-org/gitlab-ce/pipelines?scope=finished',
-        runningPath: '/gitlab-org/gitlab-ce/pipelines?scope=running',
-        branchesPath: '/gitlab-org/gitlab-ce/pipelines?scope=branches',
-        tagsPath: '/gitlab-org/gitlab-ce/pipelines?scope=tags',
+      {
+        name: 'Running',
+        scope: 'running',
+        isActive: false,
       },
-    };
+    ];
 
     Component = Vue.extend(navigationTabs);
+    vm = mountComponent(Component, { tabs: data });
   });
 
   afterEach(() => {
     vm.$destroy();
   });
 
-  it('should render tabs with correct paths', () => {
-    vm = mountComponent(Component, data);
-
-    // All
-    const allTab = vm.$el.querySelector('.js-pipelines-tab-all a');
-    expect(allTab.textContent.trim()).toContain('All');
-    expect(allTab.getAttribute('href')).toEqual(data.paths.allPath);
-
-    // Pending
-    const pendingTab = vm.$el.querySelector('.js-pipelines-tab-pending a');
-    expect(pendingTab.textContent.trim()).toContain('Pending');
-    expect(pendingTab.getAttribute('href')).toEqual(data.paths.pendingPath);
-
-    // Running
-    const runningTab = vm.$el.querySelector('.js-pipelines-tab-running a');
-    expect(runningTab.textContent.trim()).toContain('Running');
-    expect(runningTab.getAttribute('href')).toEqual(data.paths.runningPath);
-
-    // Finished
-    const finishedTab = vm.$el.querySelector('.js-pipelines-tab-finished a');
-    expect(finishedTab.textContent.trim()).toContain('Finished');
-    expect(finishedTab.getAttribute('href')).toEqual(data.paths.finishedPath);
-
-    // Branches
-    const branchesTab = vm.$el.querySelector('.js-pipelines-tab-branches a');
-    expect(branchesTab.textContent.trim()).toContain('Branches');
-
-    // Tags
-    const tagsTab = vm.$el.querySelector('.js-pipelines-tab-tags a');
-    expect(tagsTab.textContent.trim()).toContain('Tags');
+  it('should render tabs', () => {
+    expect(vm.$el.querySelectorAll('li').length).toEqual(data.length);
   });
 
-  describe('scope', () => {
-    it('should render scope provided as active tab', () => {
-      vm = mountComponent(Component, data);
-      expect(vm.$el.querySelector('.js-pipelines-tab-all').className).toContain('active');
-    });
+  it('should render active tab', () => {
+    expect(vm.$el.querySelector('.active .js-pipelines-tab-all')).toBeDefined();
   });
 
-  describe('badges', () => {
-    it('should render provided number', () => {
-      vm = mountComponent(Component, data);
-      // All
-      expect(
-        vm.$el.querySelector('.js-totalbuilds-count').textContent.trim(),
-      ).toContain(data.count.all);
-
-      // Pending
-      expect(
-        vm.$el.querySelector('.js-pipelines-tab-pending .badge').textContent.trim(),
-      ).toContain(data.count.pending);
-
-      // Running
-      expect(
-        vm.$el.querySelector('.js-pipelines-tab-running .badge').textContent.trim(),
-      ).toContain(data.count.running);
-
-      // Finished
-      expect(
-        vm.$el.querySelector('.js-pipelines-tab-finished .badge').textContent.trim(),
-      ).toContain(data.count.finished);
-    });
-
-    it('should not render badge when number is undefined', () => {
-      vm = mountComponent(Component, {
-        scope: 'all',
-        paths: {},
-        count: {},
-      });
-
-       // All
-      expect(
-        vm.$el.querySelector('.js-totalbuilds-count'),
-      ).toEqual(null);
-
-      // Pending
-      expect(
-        vm.$el.querySelector('.js-pipelines-tab-pending .badge'),
-      ).toEqual(null);
-
-      // Running
-      expect(
-        vm.$el.querySelector('.js-pipelines-tab-running .badge'),
-      ).toEqual(null);
+  it('should render badge', () => {
+    expect(vm.$el.querySelector('.js-pipelines-tab-all .badge').textContent.trim()).toEqual('1');
+    expect(vm.$el.querySelector('.js-pipelines-tab-pending .badge').textContent.trim()).toEqual('0');
+  });
 
-      // Finished
-      expect(
-        vm.$el.querySelector('.js-pipelines-tab-finished .badge'),
-      ).toEqual(null);
-    });
+  it('should not render badge', () => {
+    expect(vm.$el.querySelector('.js-pipelines-tab-running .badge')).toEqual(null);
   });
 });