File size: 4,600 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 | /*!
* 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';
import EvolutionBadge from './EvolutionBadge.vue';
function mountBadge(props: Record<string, unknown>) {
return mount(EvolutionBadge, { props });
}
describe('CoreVisualizations/EvolutionBadge.vue', () => {
it('renders an increase as a positive (green) badge pointing up', () => {
const wrapper = mountBadge({ percent: 4 });
expect(wrapper.vm.direction).toBe('up');
expect(wrapper.classes()).toContain('evolutionBadge');
expect(wrapper.classes()).toContain('evolutionBadge--positive');
expect(wrapper.find('.evolutionBadge__icon path').exists()).toBe(true);
expect(wrapper.find('.evolutionBadge__value').text()).toBe('+4%');
});
it('renders a decrease as a negative (red) badge pointing down', () => {
const wrapper = mountBadge({ percent: -4 });
expect(wrapper.vm.direction).toBe('down');
expect(wrapper.classes()).toContain('evolutionBadge--negative');
expect(wrapper.find('.evolutionBadge__icon path').exists()).toBe(true);
expect(wrapper.find('.evolutionBadge__value').text()).toBe('-4%');
});
it('renders no change as a neutral (grey) badge with a dash', () => {
const wrapper = mountBadge({ percent: 0 });
expect(wrapper.vm.direction).toBe('neutral');
expect(wrapper.classes()).toContain('evolutionBadge--neutral');
// the neutral state uses a dash (rect), not an arrow (path)
expect(wrapper.find('.evolutionBadge__icon rect').exists()).toBe(true);
expect(wrapper.find('.evolutionBadge__icon path').exists()).toBe(false);
expect(wrapper.find('.evolutionBadge__value').text()).toBe('0%');
});
it('inverts the colour when isLowerValueBetter, keeping the arrow direction', () => {
const increased = mountBadge({ percent: 4, isLowerValueBetter: true });
// value went up, but for a lower-is-better metric that is a bad change
expect(increased.vm.direction).toBe('up');
expect(increased.classes()).toContain('evolutionBadge--negative');
const decreased = mountBadge({ percent: -4, isLowerValueBetter: true });
// value went down, which is a good change for a lower-is-better metric
expect(decreased.vm.direction).toBe('down');
expect(decreased.classes()).toContain('evolutionBadge--positive');
});
it('uses the trend prop as the authoritative direction over the percent sign', () => {
// a negative trend wins even though the percent string carries no sign
const wrapper = mountBadge({ percent: '4%', trend: -10 });
expect(wrapper.vm.direction).toBe('down');
expect(wrapper.classes()).toContain('evolutionBadge--negative');
// direction is down, so no leading "+" is added to the formatted value
expect(wrapper.find('.evolutionBadge__value').text()).toBe('4%');
});
it('accepts a pre-formatted percent string and prefixes a "+" for increases', () => {
const wrapper = mountBadge({ percent: '4%' });
expect(wrapper.vm.direction).toBe('up');
expect(wrapper.find('.evolutionBadge__value').text()).toBe('+4%');
});
it('keeps an existing sign on a pre-formatted negative percent string', () => {
const wrapper = mountBadge({ percent: '-4%' });
expect(wrapper.vm.direction).toBe('down');
expect(wrapper.find('.evolutionBadge__value').text()).toBe('-4%');
});
it('reads a localised minus (U+2212) as a decrease when no trend is given', () => {
// fi/sv/sl/et and others format negatives with U+2212 "−", not an ASCII hyphen
const wrapper = mountBadge({ percent: '\u22124%' });
expect(wrapper.vm.direction).toBe('down');
expect(wrapper.classes()).toContain('evolutionBadge--negative');
// the localised sign is kept as-is, with no spurious "+" prepended
expect(wrapper.find('.evolutionBadge__value').text()).toBe('\u22124%');
});
it('exposes the tooltip as the title attribute and omits it when empty', () => {
const withTooltip = mountBadge({ percent: 4, tooltip: '10 visits vs 8 visits' });
expect(withTooltip.attributes('title')).toBe('10 visits vs 8 visits');
const withoutTooltip = mountBadge({ percent: 4 });
expect(withoutTooltip.attributes('title')).toBeUndefined();
});
it('renders a long value on a single line without truncating it', () => {
const wrapper = mountBadge({ percent: '+1,234,567%', trend: 5 });
expect(wrapper.vm.direction).toBe('up');
expect(wrapper.find('.evolutionBadge__value').text()).toBe('+1,234,567%');
});
});
|