Commit 35413c78 authored by Mark Florian's avatar Mark Florian Committed by Kushal Pandya

Add DependencyVulnerabilities component

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

[1]: https://gitlab.com/gitlab-org/gitlab/-/issues/195928
parent 513d8a6b
<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>
// 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>
`;
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();
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment