Commit 6d9e28b4 authored by Yogi's avatar Yogi Committed by David O'Regan

Move vulnerability report counts to GlCard

parent 245fd491
---
title: Move vulnerability report counts to GlCard
merge_request: 52416
author: Yogi (@yo)
type: other
<script>
import { GlCard } from '@gitlab/ui';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
export default {
components: {
GlCard,
SeverityBadge,
},
props: {
......@@ -24,12 +26,18 @@ export default {
</script>
<template>
<div class="rounded font-weight-bold border">
<div class="p-2 bg-gray-light d-flex justify-content-center">
<gl-card
class="gl-font-weight-bold"
header-class="gl-display-flex gl-justify-content-center gl-p-3"
body-class="gl-font-size-h2 gl-text-center"
>
<template #header>
<severity-badge :severity="severity" />
</div>
<div ref="body" class="pt-3 pb-3 gl-font-size-h2 text-center">
<span v-if="isLoading">&mdash;</span> <span v-else>{{ count }}</span>
</div>
</div>
</template>
<template #default>
<span ref="body">
<span v-if="isLoading">&mdash;</span> <span v-else>{{ count }}</span>
</span>
</template>
</gl-card>
</template>
import { shallowMount } from '@vue/test-utils';
import { GlCard } from '@gitlab/ui';
import VulnerabilityCount from 'ee/security_dashboard/components/vulnerability_count.vue';
import SeverityBadge from 'ee/vue_shared/security_reports/components/severity_badge.vue';
describe('Vulnerability Count', () => {
let wrapper;
const findCard = () => wrapper.findComponent(GlCard);
const findBadge = () => wrapper.find(SeverityBadge);
const findBody = () => wrapper.find({ ref: 'body' });
beforeEach(() => {
function mountComponent({ props } = {}) {
wrapper = shallowMount(VulnerabilityCount, {
propsData: {
severity: 'high',
count: 100,
...props,
},
});
}
beforeEach(() => {
mountComponent();
});
afterEach(() => {
wrapper.destroy();
});
it('should render correctly', () => {
it('should render correctly with a high severity vulnerability', () => {
const header = findBadge();
const body = findBody();
expect(header.props('severity')).toBe('high');
expect(body.text()).toBe('100');
});
it('should render a card layout with the correct header and body classes', () => {
const card = findCard();
expect(card.props('headerClass')).toBe('gl-display-flex gl-justify-content-center gl-p-3');
expect(card.props('bodyClass')).toBe('gl-font-size-h2 gl-text-center');
});
});
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