Convert Jest tests to use VTU in 'ee/spec/frontend/vue_shared'

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/dast_issue_body_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Dast Issue Body matches the snaphot 1`] = `
+<div
+  class="report-block-list-issue-description prepend-top-5 append-bottom-5"
+>
+  <div
+    class="report-block-list-issue-description-text"
+  >
+    
+    Low (Medium):
+
+    
+    <modal-open-name-stub
+      class="js-modal-dast"
+      issue="[object Object]"
+      status="failed"
+    />
+  </div>
+</div>
+`;

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/sast_container_issue_body_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sast Container Issue Body matches snapshot 1`] = `
+<div
+  class="report-block-list-issue-description prepend-top-5 append-bottom-5"
+>
+  <div
+    class="report-block-list-issue-description-text"
+  >
+    
+      Low:
+     
+    <modal-open-name-stub
+      issue="[object Object]"
+      status="Failed"
+    />
+  </div>
+</div>
+`;

ee/spec/frontend/vue_shared/security_reports/components/__snapshots__/sast_issue_body_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Sast Issue Body matches snapshot 1`] = `
+<div
+  class="report-block-list-issue-description prepend-top-5 append-bottom-5"
+>
+  <div
+    class="report-block-list-issue-description-text"
+  >
+    
+    Medium (Low):
+    
+    <modal-open-name-stub
+      issue="[object Object]"
+      status="failed"
+    />
+  </div>
+   
+  <!---->
+</div>
+`;

ee/spec/frontend/vue_shared/security_reports/components/dast_issue_body_spec.js

-import Vue from 'vue';
-import component from 'ee/vue_shared/security_reports/components/dast_issue_body.vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
+import DastIssueBody from 'ee/vue_shared/security_reports/components/dast_issue_body.vue';
 
-describe('dast issue body', () => {
-  let vm;
+describe('Dast Issue Body', () => {
+  let wrapper;
 
-  const Component = Vue.extend(component);
-  const dastIssue = {
-    alert: 'X-Content-Type-Options Header Missing',
-    severity: 'Low',
-    confidence: 'Medium',
-    count: '17',
-    cweid: '16',
-    desc: '<p>The Anti-MIME-Sniffing header X-Content-Type-Options was not set to "nosniff". </p>',
-    title: 'X-Content-Type-Options Header Missing',
-    reference:
-      '<p>http://msdn.microsoft.com/en-us/library/ie/gg622941%28v=vs.85%29.aspx</p><p>https://www.owasp.org/index.php/List_of_useful_HTTP_headers</p>',
-    riskcode: '1',
-    riskdesc: 'Low (Medium)',
+  const createComponent = () => {
+    wrapper = shallowMount(DastIssueBody, {
+      propsData: {
+        issue: {
+          alert: 'X-Content-Type-Options Header Missing',
+          severity: 'Low',
+          confidence: 'Medium',
+          count: '17',
+          cweid: '16',
+          desc:
+            '<p>The Anti-MIME-Sniffing header X-Content-Type-Options was not set to "nosniff". </p>',
+          title: 'X-Content-Type-Options Header Missing',
+          reference:
+            '<p>http://msdn.microsoft.com/en-us/library/ie/gg622941%28v=vs.85%29.aspx</p><p>https://www.owasp.org/index.php/List_of_useful_HTTP_headers</p>',
+          riskcode: '1',
+          riskdesc: 'Low (Medium)',
+        },
+        status: 'failed',
+      },
+    });
   };
-  const status = 'failed';
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  describe('severity and confidence ', () => {
-    it('renders severity and confidence', () => {
-      vm = mountComponent(Component, {
-        issue: dastIssue,
-        issueIndex: 1,
-        modalTargetId: '#modal-mrwidget-issue',
-        status,
-      });
-
-      expect(vm.$el.textContent.trim()).toContain(
-        `${dastIssue.severity} (${dastIssue.confidence})`,
-      );
-    });
-  });
+  it('matches the snaphot', () => {
+    createComponent();
 
-  describe('issue title', () => {
-    beforeEach(() => {
-      vm = mountComponent(Component, {
-        issue: dastIssue,
-        issueIndex: 1,
-        modalTargetId: '#modal-mrwidget-issue',
-        status,
-      });
-    });
-
-    it('renders button with issue title', () => {
-      expect(vm.$el.textContent.trim()).toContain(dastIssue.title);
-    });
+    expect(wrapper.element).toMatchSnapshot();
   });
 });

ee/spec/frontend/vue_shared/security_reports/components/sast_container_issue_body_spec.js

-import Vue from 'vue';
-import component from 'ee/vue_shared/security_reports/components/sast_container_issue_body.vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
-
-describe('sast container issue body', () => {
-  let vm;
-
-  const Component = Vue.extend(component);
-
-  const sastContainerIssue = {
-    title: 'CVE-2017-11671',
-    namespace: 'debian:8',
-    path: 'debian:8',
-    severity: 'Low',
-    vulnerability: 'CVE-2017-11671',
+import { shallowMount } from '@vue/test-utils';
+import SastContainerIssueBody from 'ee/vue_shared/security_reports/components/sast_container_issue_body.vue';
+
+describe('Sast Container Issue Body', () => {
+  let wrapper;
+
+  const createComponent = severity => {
+    wrapper = shallowMount(SastContainerIssueBody, {
+      propsData: {
+        issue: {
+          title: 'CVE-2017-11671',
+          namespace: 'debian:8',
+          path: 'debian:8',
+          severity,
+          vulnerability: 'CVE-2017-11671',
+        },
+        status: 'Failed',
+      },
+    });
   };
 
-  const status = 'failed';
-
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  describe('with severity', () => {
-    it('renders severity key', () => {
-      vm = mountComponent(Component, {
-        issue: sastContainerIssue,
-        status,
-      });
+  it('matches snapshot', () => {
+    createComponent('Low');
 
-      expect(vm.$el.textContent.trim()).toContain(sastContainerIssue.severity);
-    });
+    expect(wrapper.element).toMatchSnapshot();
   });
 
-  describe('without severity', () => {
-    it('does not render severity key', () => {
-      const issueCopy = Object.assign({}, sastContainerIssue);
-      delete issueCopy.severity;
-
-      vm = mountComponent(Component, {
-        issue: issueCopy,
-        status,
-      });
-
-      expect(vm.$el.textContent.trim()).not.toContain(sastContainerIssue.severity);
-    });
+  it('renders severity if present on issue', () => {
+    createComponent('Low');
+    expect(wrapper.find('.report-block-list-issue-description-text').text()).toBe('Low:');
   });
 
-  it('renders name', () => {
-    vm = mountComponent(Component, {
-      issue: sastContainerIssue,
-      status,
-    });
-
-    expect(vm.$el.querySelector('button').textContent.trim()).toEqual(sastContainerIssue.title);
+  it('does not render  severity if not present on issue', () => {
+    createComponent();
+    expect(wrapper.find('.report-block-list-issue-description-text').text()).toBe('');
   });
 });

ee/spec/frontend/vue_shared/security_reports/components/sast_issue_body_spec.js

-import Vue from 'vue';
-import component from 'ee/vue_shared/security_reports/components/sast_issue_body.vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
 import { STATUS_FAILED } from '~/reports/constants';
+import SastIssueBody from 'ee/vue_shared/security_reports/components/sast_issue_body.vue';
+import ReportLink from '~/reports/components/report_link.vue';
 
-describe('sast issue body', () => {
-  let vm;
-
-  const Component = Vue.extend(component);
-
-  const sastIssue = {
-    cve: 'CVE-2016-9999',
-    file: 'Gemfile.lock',
-    message: 'Test Information Leak Vulnerability in Action View',
-    title: 'Test Information Leak Vulnerability in Action View',
-    path: 'Gemfile.lock',
-    solution:
-      'upgrade to >= 5.0.0.beta1.1, >= 4.2.5.1, ~> 4.2.5, >= 4.1.14.1, ~> 4.1.14, ~> 3.2.22.1',
-    tool: 'bundler_audit',
-    url: 'https://groups.google.com/forum/#!topic/rubyonrails-security/335P1DcLG00',
-    urlPath: '/Gemfile.lock',
-    severity: 'medium',
-    confidence: 'low',
-  };
+describe('Sast Issue Body', () => {
+  let wrapper;
 
-  const status = STATUS_FAILED;
+  const findDescriptionText = () => wrapper.find('.report-block-list-issue-description-text');
+  const findReportLink = () => wrapper.find(ReportLink);
+
+  const createComponent = issue => {
+    wrapper = shallowMount(SastIssueBody, {
+      propsData: {
+        issue,
+        status: STATUS_FAILED,
+      },
+    });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  describe('with severity and confidence (new json format)', () => {
-    it('renders severity and confidence', () => {
-      vm = mountComponent(Component, {
-        issue: sastIssue,
-        status,
-      });
-
-      expect(vm.$el.textContent.trim()).toContain('Medium (Low):');
+  it('matches snapshot', () => {
+    createComponent({
+      severity: 'medium',
+      confidence: 'low',
+      priority: 'high',
     });
-  });
-
-  describe('with severity and without confidence (new json format)', () => {
-    it('renders severity only', () => {
-      const issueCopy = Object.assign({}, sastIssue);
-      delete issueCopy.confidence;
-      vm = mountComponent(Component, {
-        issue: issueCopy,
-        status,
-      });
 
-      expect(vm.$el.textContent.trim()).toContain('Medium:');
-    });
+    expect(wrapper.element).toMatchSnapshot();
   });
 
-  describe('with confidence and without severity (new json format)', () => {
-    it('renders confidence only', () => {
-      const issueCopy = Object.assign({}, sastIssue);
-      delete issueCopy.severity;
-      vm = mountComponent(Component, {
-        issue: issueCopy,
-        status,
-      });
-
-      expect(vm.$el.textContent.trim()).toContain('(Low):');
+  it('renders priority if no security and confidence are passed', () => {
+    createComponent({
+      priority: 'high',
     });
+
+    expect(findDescriptionText().text()).toBe('high:');
   });
 
-  describe('with priority (old json format)', () => {
-    it('renders priority key', () => {
-      const issueCopy = Object.assign({}, sastIssue);
-      delete issueCopy.severity;
-      delete issueCopy.confidence;
-      issueCopy.priority = 'Low';
-      vm = mountComponent(Component, {
-        issue: issueCopy,
-        status,
-      });
-
-      expect(vm.$el.textContent.trim()).toContain(issueCopy.priority);
+  it('renders confidence if no severity is passed', () => {
+    createComponent({
+      confidence: 'low',
     });
+
+    expect(findDescriptionText().text()).toBe('(Low):');
   });
 
-  describe('without priority', () => {
-    it('does not render priority key', () => {
-      const issueCopy = Object.assign({}, sastIssue);
-      delete issueCopy.severity;
-      delete issueCopy.confidence;
+  it('renders severity if no confidence is passed', () => {
+    createComponent({
+      severity: 'medium',
+    });
 
-      vm = mountComponent(Component, {
-        issue: issueCopy,
-        status,
-      });
+    expect(findDescriptionText().text()).toBe('Medium:');
+  });
 
-      expect(vm.$el.textContent.trim()).not.toContain(sastIssue.priority);
+  it('renders severity and confidence if both are passed', () => {
+    createComponent({
+      severity: 'medium',
+      confidence: 'low',
     });
+
+    expect(findDescriptionText().text()).toBe('Medium (Low):');
   });
 
-  describe('title', () => {
-    it('renders title', () => {
-      vm = mountComponent(Component, {
-        issue: sastIssue,
-        status,
-      });
+  it('does not render report link if no path is passed', () => {
+    createComponent({});
 
-      expect(vm.$el.textContent.trim()).toContain(sastIssue.title);
-    });
+    expect(findReportLink().exists()).toBe(false);
   });
 
-  describe('path', () => {
-    it('renders path', () => {
-      vm = mountComponent(Component, {
-        issue: sastIssue,
-        status,
-      });
+  it('renders report link if path is passed', () => {
+    createComponent({ path: 'test-path' });
 
-      expect(vm.$el.querySelector('a').getAttribute('href')).toEqual(sastIssue.urlPath);
-
-      expect(vm.$el.querySelector('a').textContent.trim()).toEqual(sastIssue.path);
-    });
+    expect(findReportLink().exists()).toBe(true);
   });
 });

ee/spec/frontend/vue_shared/security_reports/components/split_button_spec.js

-import Vue from 'vue';
-import component from 'ee/vue_shared/security_reports/components/split_button.vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
+import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import SplitButton from 'ee/vue_shared/security_reports/components/split_button.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+
+const buttons = [
+  {
+    name: 'button one',
+    tagline: "button one's tagline",
+    isLoading: false,
+    action: 'button1Action',
+  },
+  {
+    name: 'button two',
+    tagline: "button two's tagline",
+    isLoading: false,
+    action: 'button2Action',
+  },
+];
 
 describe('Split Button', () => {
-  const Component = Vue.extend(component);
-  const buttons = [
-    {
-      name: 'button one',
-      tagline: "button one's tagline",
-      isLoading: false,
-      action: 'button1Action',
-    },
-    {
-      name: 'button two',
-      tagline: "button two's tagline",
-      isLoading: false,
-      action: 'button2Action',
-    },
-    {
-      name: 'button three',
-      tagline: "button three's tagline",
-      isLoading: true,
-      action: 'button3Action',
-    },
-  ];
-  let props;
-  let vm;
+  let wrapper;
+
+  const findDropdown = () => wrapper.find(GlDropdown);
+  const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
+
+  const createComponent = props => {
+    wrapper = shallowMount(SplitButton, {
+      propsData: {
+        ...props,
+      },
+    });
+  };
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    wrapper = null;
   });
 
-  describe('with two buttons', () => {
-    beforeEach(() => {
-      props = { buttons: buttons.slice(0, 2) };
-      vm = mountComponent(Component, props);
+  it('does not render dropdown if buttons array is empty', () => {
+    createComponent({
+      buttons: [],
     });
 
-    it('renders two dropdown items', () => {
-      expect(vm.$el.querySelectorAll('.dropdown-item')).toHaveLength(2);
+    expect(findDropdown().exists()).toBe(false);
+  });
+
+  it('renders disabled dropdown if disabled prop is true', () => {
+    createComponent({
+      buttons: buttons.slice(0),
+      disabled: true,
     });
 
-    it('displays the first button initially', () => {
-      expect(vm.$el.querySelector('.btn').textContent.trim()).toBe(buttons[0].name);
+    expect(findDropdown().attributes().disabled).toBe('true');
+  });
+
+  it('emits correct action on dropdown click', () => {
+    createComponent({
+      buttons: buttons.slice(0),
     });
 
-    it('emits the correct event when the button is pressed', () => {
-      jest.spyOn(vm, '$emit');
+    findDropdown().vm.$emit('click');
 
-      vm.$el.querySelector('.btn').click();
+    expect(wrapper.emitted('button1Action')).toBeDefined();
+    expect(wrapper.emitted('button1Action')).toHaveLength(1);
+  });
 
-      expect(vm.$emit).toHaveBeenCalledWith(buttons[0].action);
+  it('renders a correct amount of dropdown items', () => {
+    createComponent({
+      buttons,
     });
+
+    expect(findDropdownItems()).toHaveLength(2);
   });
 
-  describe('with three buttons', () => {
-    beforeEach(() => {
-      props = { buttons };
-      vm = mountComponent(Component, props);
+  it('renders an icon if dropdown item is selected', () => {
+    createComponent({
+      buttons: buttons.slice(0),
     });
 
-    it('renders three dropdown items', () => {
-      expect(vm.$el.querySelectorAll('.dropdown-item')).toHaveLength(3);
-    });
+    expect(
+      findDropdownItems()
+        .at(0)
+        .find(Icon)
+        .exists(),
+    ).toBe(true);
   });
 });