Commit 8b35134e authored by Miguel Rincon's avatar Miguel Rincon Committed by Vitaly Slobodin

Rename HelpPopover when imported by summary_row

parent fc416b60
<script> <script>
import { GlLoadingIcon } from '@gitlab/ui'; import { GlLoadingIcon } from '@gitlab/ui';
import CiIcon from '~/vue_shared/components/ci_icon.vue'; import CiIcon from '~/vue_shared/components/ci_icon.vue';
import Popover from '~/vue_shared/components/help_popover.vue'; import HelpPopover from '~/vue_shared/components/help_popover.vue';
import { ICON_WARNING } from '../constants'; import { ICON_WARNING } from '../constants';
/** /**
...@@ -16,7 +16,7 @@ export default { ...@@ -16,7 +16,7 @@ export default {
name: 'ReportSummaryRow', name: 'ReportSummaryRow',
components: { components: {
CiIcon, CiIcon,
Popover, HelpPopover,
GlLoadingIcon, GlLoadingIcon,
}, },
props: { props: {
...@@ -79,7 +79,7 @@ export default { ...@@ -79,7 +79,7 @@ export default {
<div class="report-block-list-issue-description-text" data-testid="summary-row-description"> <div class="report-block-list-issue-description-text" data-testid="summary-row-description">
<slot name="summary">{{ summary }}</slot <slot name="summary">{{ summary }}</slot
><span v-if="popoverOptions" class="text-nowrap" ><span v-if="popoverOptions" class="text-nowrap"
>&nbsp;<popover v-if="popoverOptions" :options="popoverOptions" class="align-top" /> >&nbsp;<help-popover v-if="popoverOptions" :options="popoverOptions" class="align-top" />
</span> </span>
</div> </div>
</div> </div>
......
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import { extendedWrapper } from 'helpers/vue_test_utils_helper'; import { extendedWrapper } from 'helpers/vue_test_utils_helper';
import HelpPopover from '~/vue_shared/components/help_popover.vue';
import SummaryRow from '~/reports/components/summary_row.vue'; import SummaryRow from '~/reports/components/summary_row.vue';
describe('Summary row', () => { describe('Summary row', () => {
let wrapper; let wrapper;
const props = { const summary = 'SAST detected 1 new vulnerability and 1 fixed vulnerability';
summary: 'SAST detected 1 new vulnerability and 1 fixed vulnerability', const popoverOptions = {
popoverOptions: {
title: 'Static Application Security Testing (SAST)', title: 'Static Application Security Testing (SAST)',
content: '<a>Learn more about SAST</a>', content: '<a>Learn more about SAST</a>',
},
statusIcon: 'warning',
}; };
const statusIcon = 'warning';
const createComponent = ({ propsData = {}, slots = {} } = {}) => { const createComponent = ({ props = {}, slots = {} } = {}) => {
wrapper = extendedWrapper( wrapper = extendedWrapper(
mount(SummaryRow, { mount(SummaryRow, {
propsData: { propsData: {
summary,
popoverOptions,
statusIcon,
...props, ...props,
...propsData,
}, },
slots, slots,
}), }),
...@@ -28,6 +29,7 @@ describe('Summary row', () => { ...@@ -28,6 +29,7 @@ describe('Summary row', () => {
const findSummary = () => wrapper.findByTestId('summary-row-description'); const findSummary = () => wrapper.findByTestId('summary-row-description');
const findStatusIcon = () => wrapper.findByTestId('summary-row-icon'); const findStatusIcon = () => wrapper.findByTestId('summary-row-icon');
const findHelpPopover = () => wrapper.findComponent(HelpPopover);
afterEach(() => { afterEach(() => {
wrapper.destroy(); wrapper.destroy();
...@@ -36,7 +38,7 @@ describe('Summary row', () => { ...@@ -36,7 +38,7 @@ describe('Summary row', () => {
it('renders provided summary', () => { it('renders provided summary', () => {
createComponent(); createComponent();
expect(findSummary().text()).toContain(props.summary); expect(findSummary().text()).toContain(summary);
}); });
it('renders provided icon', () => { it('renders provided icon', () => {
...@@ -44,12 +46,22 @@ describe('Summary row', () => { ...@@ -44,12 +46,22 @@ describe('Summary row', () => {
expect(findStatusIcon().classes()).toContain('js-ci-status-icon-warning'); expect(findStatusIcon().classes()).toContain('js-ci-status-icon-warning');
}); });
it('renders help popover if popoverOptions are provided', () => {
createComponent();
expect(findHelpPopover().props('options')).toEqual(popoverOptions);
});
it('does not render help popover if popoverOptions are not provided', () => {
createComponent({ props: { popoverOptions: null } });
expect(findHelpPopover().exists()).toBe(false);
});
describe('summary slot', () => { describe('summary slot', () => {
it('replaces the summary prop', () => { it('replaces the summary prop', () => {
const summarySlotContent = 'Summary slot content'; const summarySlotContent = 'Summary slot content';
createComponent({ slots: { summary: summarySlotContent } }); createComponent({ slots: { summary: summarySlotContent } });
expect(wrapper.text()).not.toContain(props.summary); expect(wrapper.text()).not.toContain(summary);
expect(findSummary().text()).toContain(summarySlotContent); expect(findSummary().text()).toContain(summarySlotContent);
}); });
}); });
......
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