Add latest changes from gitlab-org/gitlab@master

2 files changed, 130 insertions, 0 deletions

diff --git a/spec/frontend/jobs/components/log/collapsible_section_spec.js b/spec/frontend/jobs/components/log/collapsible_section_spec.js
new file mode 100644
index 00000000000..6c1ebf0a7c1
--- /dev/null
+++ b/spec/frontend/jobs/components/log/collapsible_section_spec.js
@@ -0,0 +1,60 @@
+import { mount } from '@vue/test-utils';
+import CollpasibleSection from '~/jobs/components/log/collapsible_section.vue';
+import { nestedSectionOpened, nestedSectionClosed } from './mock_data';
+
+describe('Job Log Collapsible Section', () => {
+  let wrapper;
+
+  const traceEndpoint = 'jobs/335';
+
+  const findCollapsibleLine = () => wrapper.find('.collapsible-line');
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(CollpasibleSection, {
+      sync: true,
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('with closed nested section', () => {
+    beforeEach(() => {
+      createComponent({
+        section: nestedSectionClosed,
+        traceEndpoint,
+      });
+    });
+
+    it('renders clickable header line', () => {
+      expect(findCollapsibleLine().attributes('role')).toBe('button');
+    });
+  });
+
+  describe('with opened nested section', () => {
+    beforeEach(() => {
+      createComponent({
+        section: nestedSectionOpened,
+        traceEndpoint,
+      });
+    });
+
+    it('renders all sections opened', () => {
+      expect(wrapper.findAll('.collapsible-line').length).toBe(2);
+    });
+  });
+
+  it('emits onClickCollapsibleLine on click', () => {
+    createComponent({
+      section: nestedSectionOpened,
+      traceEndpoint,
+    });
+
+    findCollapsibleLine().trigger('click');
+    expect(wrapper.emitted('onClickCollapsibleLine').length).toBe(1);
+  });
+});
diff --git a/spec/frontend/jobs/components/log/mock_data.js b/spec/frontend/jobs/components/log/mock_data.js
index db42644de77..0dae306dcc7 100644
--- a/spec/frontend/jobs/components/log/mock_data.js
+++ b/spec/frontend/jobs/components/log/mock_data.js
@@ -150,3 +150,73 @@ export const collapsibleTraceIncremental = [
     sections: ['section'],
   },
 ];
+
+export const nestedSectionClosed = {
+  offset: 5,
+  section_header: true,
+  isHeader: true,
+  isClosed: true,
+  line: {
+    content: [{ text: 'foo' }],
+    sections: ['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,
+        },
+      ],
+    },
+  ],
+};
+
+export const nestedSectionOpened = {
+  offset: 5,
+  section_header: true,
+  isHeader: true,
+  isClosed: false,
+  line: {
+    content: [{ text: 'foo' }],
+    sections: ['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,
+        },
+      ],
+    },
+  ],
+};