Commit 79607169 authored by Savas Vedova's avatar Savas Vedova

Implement code review suggestions

- Use toHaveLength
- Use toBe instead of toContain
- Move translation into a computed prop
parent 3d04f7e9
<script>
import { GlIcon, GlPopover, GlBadge } from '@gitlab/ui';
import IssueLink from 'ee/vulnerabilities/components/issue_link.vue';
import { n__ } from '~/locale';
export default {
components: {
......@@ -19,6 +20,9 @@ export default {
numberOfIssues() {
return this.issues.length;
},
popoverTitle() {
return n__('1 Issue', '%d Issues', this.numberOfIssues);
},
},
};
</script>
......@@ -31,7 +35,7 @@ export default {
</gl-badge>
<gl-popover ref="popover" :target="() => $refs.issueBadge.$el" triggers="hover" placement="top">
<template #title>
{{ n__('1 Issue', '%d Issues', numberOfIssues) }}
{{ popoverTitle }}
</template>
<div v-for="{ issue } in issues" :key="issue.iid">
<issue-link :issue="issue" />
......
import { shallowMount } from '@vue/test-utils';
import { GlIcon, GlPopover } from '@gitlab/ui';
import { GlIcon, GlPopover, GlBadge } from '@gitlab/ui';
import IssuesBadge from 'ee/security_dashboard/components/issues_badge.vue';
import IssueLink from 'ee/vulnerabilities/components/issue_link.vue';
......@@ -8,11 +8,12 @@ describe('Remediated badge component', () => {
let wrapper;
const findIcon = () => wrapper.find(GlIcon);
const findBadge = () => wrapper.find(GlBadge);
const findIssueLink = () => wrapper.findAll(IssueLink);
const findPopover = () => wrapper.find(GlPopover);
const createWrapper = ({ propsData }) => {
return shallowMount(IssuesBadge, { propsData, stubs: { GlPopover } });
return shallowMount(IssuesBadge, { propsData, stubs: { GlPopover, GlBadge } });
};
afterEach(() => {
......@@ -35,15 +36,15 @@ describe('Remediated badge component', () => {
});
it('displays the issues', () => {
expect(findIssueLink().length).toBe(issues.length);
expect(findIssueLink()).toHaveLength(issues.length);
});
it('displays the correct number of issues in the badge', () => {
expect(wrapper.text()).toContain('2');
expect(findBadge().text()).toBe('2');
});
it('displays the correct number of issues in the popover title', () => {
expect(findPopover().text()).toContain('2 Issues');
expect(findPopover().text()).toBe('2 Issues');
});
});
......@@ -53,11 +54,11 @@ describe('Remediated badge component', () => {
});
it('displays the correct number of issues in the badge', () => {
expect(wrapper.text()).toContain('0');
expect(findBadge().text()).toBe('0');
});
it('displays the correct number of issues in the popover title', () => {
expect(findPopover().text()).toContain('0 Issues');
expect(findPopover().text()).toBe('0 Issues');
});
});
});
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