File size: 3,603 Bytes
76a7a50 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | /*!
* Matomo - free/libre analytics platform
*
* @link https://matomo.org
* @license https://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
*/
import { mount } from '@vue/test-utils';
// CoreHome is a package-style cross-plugin import with no jest module mapping,
// so it must be virtually mocked. Tooltips is used only as a (no-op here) directive.
jest.mock('CoreHome', () => ({
Tooltips: {},
}), { virtual: true });
// eslint-disable-next-line @typescript-eslint/no-var-requires
const MetricValue = require('./MetricValue.vue').default;
describe('CoreVisualizations/MetricValue', () => {
it('renders the title and the pre-formatted value', () => {
const wrapper = mount(MetricValue as any, {
props: {
title: 'Searches',
value: '190',
},
});
expect(wrapper.find('.metricValue__title').text()).toBe('Searches');
expect(wrapper.find('.metricValue__number').text()).toBe('190');
});
it('renders the secondary value and label as separate elements', () => {
const wrapper = mount(MetricValue as any, {
props: {
title: 'Visits',
value: '10,558',
secondaryValue: '9,527',
secondaryLabel: 'unique visitors',
},
});
expect(wrapper.find('.metricValue__secondary').exists()).toBe(true);
expect(wrapper.find('.metricValue__secondaryValue').text()).toBe('9,527');
expect(wrapper.find('.metricValue__secondaryLabel').text()).toBe('unique visitors');
});
it('renders the secondary value without a label when no label is given', () => {
const wrapper = mount(MetricValue as any, {
props: {
title: 'Visits',
value: '10,558',
secondaryValue: '9,527',
},
});
expect(wrapper.find('.metricValue__secondaryValue').text()).toBe('9,527');
expect(wrapper.find('.metricValue__secondaryLabel').exists()).toBe(false);
});
it('omits the secondary line entirely when no secondary value is provided', () => {
const wrapper = mount(MetricValue as any, {
props: {
title: 'Average visit duration',
value: '4min 22s',
},
});
expect(wrapper.find('.metricValue__secondary').exists()).toBe(false);
});
it('exposes documentation as the title tooltip and flags the title as documented', () => {
const wrapper = mount(MetricValue as any, {
props: {
title: 'Searches',
value: '190',
documentation: 'The number of searches.',
},
});
const title = wrapper.find('.metricValue__title');
expect(title.attributes('title')).toBe('The number of searches.');
expect(title.classes()).toContain('metricValue__title--documented');
});
it('falls back to the full title as the tooltip and sets no documented class without documentation', () => {
const wrapper = mount(MetricValue as any, {
props: {
title: 'Searches',
value: '190',
},
});
const title = wrapper.find('.metricValue__title');
expect(title.attributes('title')).toBe('Searches');
expect(title.classes()).not.toContain('metricValue__title--documented');
});
it('renders content passed to the evolution slot next to the value', () => {
const wrapper = mount(MetricValue as any, {
props: {
title: 'Searches',
value: '190',
},
slots: {
evolution: '<span class="fake-badge">-4%</span>',
},
});
const primary = wrapper.find('.metricValue__primary');
expect(primary.find('.fake-badge').exists()).toBe(true);
expect(primary.find('.fake-badge').text()).toBe('-4%');
});
});
|