Makes title section collapsible63181-collapsible-line

In the job log, if the user clicks the section title
the job log section will be collapsed

3 files changed, 37 insertions, 3 deletions

diff --git a/spec/features/projects/jobs/user_browses_job_spec.rb b/spec/features/projects/jobs/user_browses_job_spec.rb
index 6d0269dd96b..1b277e17b0c 100644
--- a/spec/features/projects/jobs/user_browses_job_spec.rb
+++ b/spec/features/projects/jobs/user_browses_job_spec.rb
@@ -50,6 +50,20 @@ describe 'User browses a job', :js do
       expect(page).not_to have_content(text_to_hide)
       expect(page).to have_content(text_to_show)
     end
+
+    it 'collapses the section header clicked' do
+      wait_for_requests
+      text_to_hide = "Cloning into '/nolith/ci-tests'"
+      text_to_show = 'Waiting for pod'
+
+      expect(page).to have_content(text_to_hide)
+      expect(page).to have_content(text_to_show)
+
+      first('.js-section-header.js-s-get-sources').click
+
+      expect(page).not_to have_content(text_to_hide)
+      expect(page).to have_content(text_to_show)
+    end
   end
 
   context 'when job trace contains sections' do
diff --git a/spec/javascripts/jobs/components/job_log_spec.js b/spec/javascripts/jobs/components/job_log_spec.js
index 7e2ec2ec3f7..3485eec7763 100644
--- a/spec/javascripts/jobs/components/job_log_spec.js
+++ b/spec/javascripts/jobs/components/job_log_spec.js
@@ -98,5 +98,25 @@ describe('Job Log', () => {
         .then(done)
         .catch(done.fail);
     });
+
+    it('toggles hidden class to the sibilings rows when header section is clicked', done => {
+      vm.$nextTick()
+        .then(() => {
+          const { section } = vm.$el.querySelector('.js-section-header').dataset;
+          vm.$el.querySelector('.js-section-header').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-header').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);
+    });
   });
 });
diff --git a/spec/lib/gitlab/ci/ansi2html_spec.rb b/spec/lib/gitlab/ci/ansi2html_spec.rb
index eaf06ed8992..b6b3de4bc4a 100644
--- a/spec/lib/gitlab/ci/ansi2html_spec.rb
+++ b/spec/lib/gitlab/ci/ansi2html_spec.rb
@@ -209,7 +209,7 @@ describe Gitlab::Ci::Ansi2html do
     let(:section_start) { "section_start:#{section_start_time.to_i}:#{section_name}\r\033[0K"}
     let(:section_end) { "section_end:#{section_end_time.to_i}:#{section_name}\r\033[0K"}
     let(:section_start_html) do
-      '<div class="js-section-start fa fa-caret-down append-right-8 cursor-pointer"' \
+      '<div class="js-section-start fa fa-caret-down pr-2 cursor-pointer"' \
       " data-timestamp=\"#{section_start_time.to_i}\" data-section=\"#{class_name(section_name)}\"" \
       ' role="button"></div>'
     end
@@ -233,8 +233,8 @@ describe Gitlab::Ci::Ansi2html do
 
       it 'prints light red' do
         text = "#{section_start}\e[91mHello\e[0m\nLine 1\nLine 2\nLine 3\n#{section_end}"
-        header = %{<span class="term-fg-l-red section js-section-header section-header js-s-#{class_name(section_name)}">Hello</span>}
-        line_break = %{<span class="section js-section-header section-header js-s-#{class_name(section_name)}"><br/></span>}
+        header = %{<span class="term-fg-l-red section js-section-header section-header cursor-pointer js-s-#{class_name(section_name)}">Hello</span>}
+        line_break = %{<span class="section js-section-header section-header cursor-pointer js-s-#{class_name(section_name)}"><br/></span>}
         output_line = %{<span class="section line js-s-#{class_name(section_name)}">Line 1<br/>Line 2<br/>Line 3<br/></span>}
         html = "#{section_start_html}#{header}#{line_break}#{output_line}#{section_end_html}"