From bdfb6882eacf51e5b43a5be0514c5e7490cc4fc3 Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Thu, 2 Apr 2020 15:51:35 +0100
Subject: [PATCH 1/2] Add DependencyVulnerabilities component

Part of [Update dependencies table UI][1].

[1]: https://gitlab.com/gitlab-org/gitlab/-/issues/195928
---
 .../components/dependency_vulnerabilities.vue | 46 ++++++++++++++
 .../dependency_vulnerabilities_spec.js.snap   | 20 ++++++
 .../dependency_vulnerabilities_spec.js        | 63 +++++++++++++++++++
 3 files changed, 129 insertions(+)
 create mode 100644 ee/app/assets/javascripts/dependencies/components/dependency_vulnerabilities.vue
 create mode 100644 ee/spec/frontend/dependencies/components/__snapshots__/dependency_vulnerabilities_spec.js.snap
 create mode 100644 ee/spec/frontend/dependencies/components/dependency_vulnerabilities_spec.js

diff --git a/ee/app/assets/javascripts/dependencies/components/dependency_vulnerabilities.vue b/ee/app/assets/javascripts/dependencies/components/dependency_vulnerabilities.vue
new file mode 100644
index 00000000000000..e1f1704ebf4f82
--- /dev/null
+++ b/ee/app/assets/javascripts/dependencies/components/dependency_vulnerabilities.vue
@@ -0,0 +1,46 @@
+<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 Math.max(0, 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>
diff --git a/ee/spec/frontend/dependencies/components/__snapshots__/dependency_vulnerabilities_spec.js.snap b/ee/spec/frontend/dependencies/components/__snapshots__/dependency_vulnerabilities_spec.js.snap
new file mode 100644
index 00000000000000..5e968095d9cc34
--- /dev/null
+++ b/ee/spec/frontend/dependencies/components/__snapshots__/dependency_vulnerabilities_spec.js.snap
@@ -0,0 +1,20 @@
+// 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>
+`;
diff --git a/ee/spec/frontend/dependencies/components/dependency_vulnerabilities_spec.js b/ee/spec/frontend/dependencies/components/dependency_vulnerabilities_spec.js
new file mode 100644
index 00000000000000..16b481b763e1d2
--- /dev/null
+++ b/ee/spec/frontend/dependencies/components/dependency_vulnerabilities_spec.js
@@ -0,0 +1,63 @@
+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();
+    });
+  });
+});
-- 
GitLab


From cc451875e46977918bf144a0b70658ddefa7764d Mon Sep 17 00:00:00 2001
From: Mark Florian <mflorian@gitlab.com>
Date: Tue, 7 Apr 2020 12:15:23 +0100
Subject: [PATCH 2/2] Remove unnecessary Math.max call

---
 .../dependencies/components/dependency_vulnerabilities.vue      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ee/app/assets/javascripts/dependencies/components/dependency_vulnerabilities.vue b/ee/app/assets/javascripts/dependencies/components/dependency_vulnerabilities.vue
index e1f1704ebf4f82..6e66130b1c9875 100644
--- a/ee/app/assets/javascripts/dependencies/components/dependency_vulnerabilities.vue
+++ b/ee/app/assets/javascripts/dependencies/components/dependency_vulnerabilities.vue
@@ -18,7 +18,7 @@ export default {
       return this.vulnerabilities.slice(0, MAX_DISPLAYED_VULNERABILITIES_PER_DEPENDENCY);
     },
     vulnerabilitiesNotShown() {
-      return Math.max(0, this.vulnerabilities.length - this.renderableVulnerabilities.length);
+      return this.vulnerabilities.length - this.renderableVulnerabilities.length;
     },
   },
 };
-- 
GitLab