Add latest changes from gitlab-org/gitlab@master

2 files changed, 44 insertions, 59 deletions

diff --git a/spec/frontend/jobs/components/log/collapsible_section_spec.js b/spec/frontend/jobs/components/log/collapsible_section_spec.js
index 6c1ebf0a7c1..01184a51193 100644
--- a/spec/frontend/jobs/components/log/collapsible_section_spec.js
+++ b/spec/frontend/jobs/components/log/collapsible_section_spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import CollpasibleSection from '~/jobs/components/log/collapsible_section.vue';
-import { nestedSectionOpened, nestedSectionClosed } from './mock_data';
+import { collapsibleSectionClosed, collapsibleSectionOpened } from './mock_data';
 
 describe('Job Log Collapsible Section', () => {
   let wrapper;
@@ -8,6 +8,7 @@ describe('Job Log Collapsible Section', () => {
   const traceEndpoint = 'jobs/335';
 
   const findCollapsibleLine = () => wrapper.find('.collapsible-line');
+  const findCollapsibleLineSvg = () => wrapper.find('.collapsible-line svg');
 
   const createComponent = (props = {}) => {
     wrapper = mount(CollpasibleSection, {
@@ -22,10 +23,10 @@ describe('Job Log Collapsible Section', () => {
     wrapper.destroy();
   });
 
-  describe('with closed nested section', () => {
+  describe('with closed section', () => {
     beforeEach(() => {
       createComponent({
-        section: nestedSectionClosed,
+        section: collapsibleSectionClosed,
         traceEndpoint,
       });
     });
@@ -33,24 +34,36 @@ describe('Job Log Collapsible Section', () => {
     it('renders clickable header line', () => {
       expect(findCollapsibleLine().attributes('role')).toBe('button');
     });
+
+    it('renders an icon with the closed state', () => {
+      expect(findCollapsibleLineSvg().classes()).toContain('ic-angle-right');
+    });
   });
 
-  describe('with opened nested section', () => {
+  describe('with opened section', () => {
     beforeEach(() => {
       createComponent({
-        section: nestedSectionOpened,
+        section: collapsibleSectionOpened,
         traceEndpoint,
       });
     });
 
-    it('renders all sections opened', () => {
-      expect(wrapper.findAll('.collapsible-line').length).toBe(2);
+    it('renders clickable header line', () => {
+      expect(findCollapsibleLine().attributes('role')).toBe('button');
+    });
+
+    it('renders an icon with the open state', () => {
+      expect(findCollapsibleLineSvg().classes()).toContain('ic-angle-down');
+    });
+
+    it('renders collapsible lines content', () => {
+      expect(wrapper.findAll('.js-line').length).toEqual(collapsibleSectionOpened.lines.length);
     });
   });
 
   it('emits onClickCollapsibleLine on click', () => {
     createComponent({
-      section: nestedSectionOpened,
+      section: collapsibleSectionOpened,
       traceEndpoint,
     });
 
diff --git a/spec/frontend/jobs/components/log/mock_data.js b/spec/frontend/jobs/components/log/mock_data.js
index 0dae306dcc7..d375d82d3ca 100644
--- a/spec/frontend/jobs/components/log/mock_data.js
+++ b/spec/frontend/jobs/components/log/mock_data.js
@@ -14,13 +14,13 @@ export const jobLog = [
         text: 'Using Docker executor with image dev.gitlab.org3',
       },
     ],
-    sections: ['prepare-executor'],
+    section: 'prepare-executor',
     section_header: true,
   },
   {
     offset: 1003,
     content: [{ text: 'Starting service postgres:9.6.14 ...', style: 'text-green' }],
-    sections: ['prepare-executor'],
+    section: 'prepare-executor',
   },
 ];
 
@@ -37,23 +37,23 @@ export const utilsMockData = [
           'Using Docker executor with image dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.6.3-golang-1.11-git-2.22-chrome-73.0-node-12.x-yarn-1.16-postgresql-9.6-graphicsmagick-1.3.33',
       },
     ],
-    sections: ['prepare-executor'],
+    section: 'prepare-executor',
     section_header: true,
   },
   {
     offset: 1003,
     content: [{ text: 'Starting service postgres:9.6.14 ...' }],
-    sections: ['prepare-executor'],
+    section: 'prepare-executor',
   },
   {
     offset: 1004,
     content: [{ text: 'Pulling docker image postgres:9.6.14 ...', style: 'term-fg-l-green' }],
-    sections: ['prepare-executor'],
+    section: 'prepare-executor',
   },
   {
     offset: 1005,
     content: [],
-    sections: ['prepare-executor'],
+    section: 'prepare-executor',
     section_duration: '10:00',
   },
 ];
@@ -100,7 +100,7 @@ export const headerTrace = [
         text: 'log line',
       },
     ],
-    sections: ['section'],
+    section: 'section',
   },
 ];
 
@@ -113,7 +113,7 @@ export const headerTraceIncremental = [
         text: 'updated log line',
       },
     ],
-    sections: ['section'],
+    section: 'section',
   },
 ];
 
@@ -126,7 +126,7 @@ export const collapsibleTrace = [
         text: 'log line',
       },
     ],
-    sections: ['section'],
+    section: 'section',
   },
   {
     offset: 2,
@@ -135,7 +135,7 @@ export const collapsibleTrace = [
         text: 'log line',
       },
     ],
-    sections: ['section'],
+    section: 'section',
   },
 ];
 
@@ -147,76 +147,48 @@ export const collapsibleTraceIncremental = [
         text: 'updated log line',
       },
     ],
-    sections: ['section'],
+    section: 'section',
   },
 ];
 
-export const nestedSectionClosed = {
+export const collapsibleSectionClosed = {
   offset: 5,
   section_header: true,
   isHeader: true,
   isClosed: true,
   line: {
     content: [{ text: 'foo' }],
-    sections: ['prepare-script'],
+    section: 'prepare-script',
     lineNumber: 1,
   },
   section_duration: '00:03',
   lines: [
     {
-      section_header: true,
-      section_duration: '00:02',
-      isHeader: true,
-      isClosed: true,
-      line: {
-        offset: 52,
-        content: [{ text: 'bar' }],
-        sections: ['prepare-script', 'prepare-script-nested'],
-        lineNumber: 2,
-      },
-      lines: [
-        {
-          offset: 80,
-          content: [{ text: 'this is a collapsible nested section' }],
-          sections: ['prepare-script', 'prepare-script-nested'],
-          lineNumber: 3,
-        },
-      ],
+      offset: 80,
+      content: [{ text: 'this is a collapsible nested section' }],
+      section: 'prepare-script',
+      lineNumber: 3,
     },
   ],
 };
 
-export const nestedSectionOpened = {
+export const collapsibleSectionOpened = {
   offset: 5,
   section_header: true,
   isHeader: true,
   isClosed: false,
   line: {
     content: [{ text: 'foo' }],
-    sections: ['prepare-script'],
+    section: 'prepare-script',
     lineNumber: 1,
   },
   section_duration: '00:03',
   lines: [
     {
-      section_header: true,
-      section_duration: '00:02',
-      isHeader: true,
-      isClosed: false,
-      line: {
-        offset: 52,
-        content: [{ text: 'bar' }],
-        sections: ['prepare-script', 'prepare-script-nested'],
-        lineNumber: 2,
-      },
-      lines: [
-        {
-          offset: 80,
-          content: [{ text: 'this is a collapsible nested section' }],
-          sections: ['prepare-script', 'prepare-script-nested'],
-          lineNumber: 3,
-        },
-      ],
+      offset: 80,
+      content: [{ text: 'this is a collapsible nested section' }],
+      section: 'prepare-script',
+      lineNumber: 3,
     },
   ],
 };