Merge branch '195928-extract-dependency-vulnerabilities-component' into 'master'

Add DependencyVulnerabilities component

See merge request gitlab-org/gitlab!28671

ee/app/assets/javascripts/dependencies/components/dependency_vulnerabilities.vue

+<script>
+import DependencyVulnerability from './dependency_vulnerability.vue';
+import { MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY } from './constants';
+
+export default {
+  name: 'DependencyVulnerabilities',
+  components: {
+    DependencyVulnerability,
+  },
+  props: {
+    vulnerabilities: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    renderableVulnerabilities() {
+      return this.vulnerabilities.slice(0, MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY);
+    },
+    vulnerabilitiesNotShown() {
+      return this.vulnerabilities.length - this.renderableVulnerabilities.length;
+    },
+  },
+};
+</script>
+
+<template>
+  <ul class="list-unstyled mb-0">
+    <li
+      v-for="(vulnerability, i) in renderableVulnerabilities"
+      :key="vulnerability.id"
+      :class="{ 'mt-3': i > 0 }"
+    >
+      <dependency-vulnerability :vulnerability="vulnerability" />
+    </li>
+    <li v-if="vulnerabilitiesNotShown" ref="excessMessage" class="text-muted text-center mt-3">
+      {{
+        n__(
+          'Dependencies|%d additional vulnerability not shown',
+          'Dependencies|%d additional vulnerabilities not shown',
+          vulnerabilitiesNotShown,
+        )
+      }}
+    </li>
+  </ul>
+</template>

ee/spec/frontend/dependencies/components/__snapshots__/dependency_vulnerabilities_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`DependencVulnerabilities component given a huge number vulnerabilities renders the excess message 1`] = `
+<li
+  class="text-muted text-center mt-3"
+>
+  
+    1 additional vulnerability not shown
+  
+</li>
+`;
+
+exports[`DependencVulnerabilities component given no vulnerabilities renders an empty list 1`] = `
+<ul
+  class="list-unstyled mb-0"
+>
+   
+  <!---->
+</ul>
+`;

ee/spec/frontend/dependencies/components/dependency_vulnerabilities_spec.js

+import { shallowMount } from '@vue/test-utils';
+import DependencyVulnerabilities from 'ee/dependencies/components/dependency_vulnerabilities.vue';
+import DependencyVulnerability from 'ee/dependencies/components/dependency_vulnerability.vue';
+import { MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY } from 'ee/dependencies/components/constants';
+import mockDataVulnerabilities from '../../security_dashboard/store/modules/vulnerabilities/data/mock_data_vulnerabilities';
+
+describe('DependencVulnerabilities component', () => {
+  let wrapper;
+
+  const factory = ({ vulnerabilities }) => {
+    wrapper = shallowMount(DependencyVulnerabilities, {
+      propsData: { vulnerabilities },
+    });
+  };
+
+  const findVulnerabilities = () => wrapper.findAll(DependencyVulnerability);
+  const findExcessMessage = () => wrapper.find({ ref: 'excessMessage' });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('given no vulnerabilities', () => {
+    beforeEach(() => {
+      factory({ vulnerabilities: [] });
+    });
+
+    it('renders an empty list', () => {
+      expect(wrapper.element).toMatchSnapshot();
+    });
+  });
+
+  describe('given some vulnerabilities', () => {
+    beforeEach(() => {
+      factory({ vulnerabilities: mockDataVulnerabilities });
+    });
+
+    it('renders each vulnerability', () => {
+      const components = findVulnerabilities();
+      mockDataVulnerabilities.forEach((vulnerability, i) => {
+        expect(components.at(i).props('vulnerability')).toBe(vulnerability);
+      });
+    });
+  });
+
+  describe('given a huge number vulnerabilities', () => {
+    beforeEach(() => {
+      const hugeNumberOfVulnerabilities = Array(1 + MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY)
+        .fill(null)
+        .map((_, id) => ({ id }));
+
+      factory({ vulnerabilities: hugeNumberOfVulnerabilities });
+    });
+
+    it('does not render all of them', () => {
+      expect(findVulnerabilities().length).toBe(MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY);
+    });
+
+    it('renders the excess message', () => {
+      expect(findExcessMessage().element).toMatchSnapshot();
+    });
+  });
+});