1 files changed, 37 insertions, 0 deletions
diff --git a/spec/javascripts/jobs/components/job_log_spec.js b/spec/javascripts/jobs/components/job_log_spec.js
index dc0f77ceb80..7e2ec2ec3f7 100644
--- a/spec/javascripts/jobs/components/job_log_spec.js
+++ b/spec/javascripts/jobs/components/job_log_spec.js
@@ -3,6 +3,7 @@ import component from '~/jobs/components/job_log.vue';
 import createStore from '~/jobs/store';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { resetStore } from '../store/helpers';
+import { logWithCollapsibleSections } from '../mock_data';
 
 describe('Job Log', () => {
   const Component = Vue.extend(component);
@@ -62,4 +63,40 @@ describe('Job Log', () => {
       expect(vm.$el.querySelector('.js-log-animation')).toBeNull();
     });
   });
+
+  describe('Collapsible sections', () => {
+    beforeEach(() => {
+      vm = mountComponentWithStore(Component, {
+        props: {
+          trace: logWithCollapsibleSections.html,
+          isComplete: true,
+        },
+        store,
+      });
+    });
+
+    it('renders open arrow', () => {
+      expect(vm.$el.querySelector('.fa-caret-down')).not.toBeNull();
+    });
+
+    it('toggles hidden class to the sibilings rows when arrow is clicked', done => {
+      vm.$nextTick()
+        .then(() => {
+          const { section } = vm.$el.querySelector('.js-section-start').dataset;
+          vm.$el.querySelector('.js-section-start').click();
+
+          vm.$el.querySelectorAll(`.js-s-${section}:not(.js-section-header)`).forEach(el => {
+            expect(el.classList.contains('hidden')).toEqual(true);
+          });
+
+          vm.$el.querySelector('.js-section-start').click();
+
+          vm.$el.querySelectorAll(`.js-s-${section}:not(.js-section-header)`).forEach(el => {
+            expect(el.classList.contains('hidden')).toEqual(false);
+          });
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+  });
 });