diff --git a/src/components/NcCounterBubble/NcCounterBubble.vue b/src/components/NcCounterBubble/NcCounterBubble.vue index ba1fe73ddf..e52126e854 100644 --- a/src/components/NcCounterBubble/NcCounterBubble.vue +++ b/src/components/NcCounterBubble/NcCounterBubble.vue @@ -243,7 +243,7 @@ export default { methods: { humanizeCount(count) { if (this.raw) { - return count + return count.toString() } const formatter = new Intl.NumberFormat(getCanonicalLocale(), { @@ -256,12 +256,15 @@ export default { /** * Get the humanized count from `count` prop - * @return {string | undefined} + * @return {{ humanized: string, original: string} | undefined} */ getHumanizedCount() { // If we have count prop - just render from count if (this.count !== undefined) { - return this.humanizedCount + return { + humanized: this.humanizedCount, + original: this.count.toString(), + } } // Raw value - render as it is @@ -274,17 +277,26 @@ export default { const slotContent = this.$slots.default[0].text?.trim() if (slotContent && /^\d+$/.test(slotContent)) { const count = parseInt(slotContent, 10) - return this.humanizeCount(count) + return { + humanized: this.humanizeCount(count), + original: slotContent, + } } } }, }, render(h) { + const count = this.getHumanizedCount() + return h('div', { staticClass: 'counter-bubble__counter', class: this.counterClassObject, - }, [this.getHumanizedCount() ?? this.$slots.default]) + attrs: { + // Show original count in title if humanized + title: count && count.original !== count.humanized ? count.original : undefined, + }, + }, [count?.humanized ?? this.$slots.default]) }, } diff --git a/tests/unit/components/NcCounterBubble/NcCounterBubble.spec.js b/tests/unit/components/NcCounterBubble/NcCounterBubble.spec.js index 0cf17fc73e..eae6ea916f 100644 --- a/tests/unit/components/NcCounterBubble/NcCounterBubble.spec.js +++ b/tests/unit/components/NcCounterBubble/NcCounterBubble.spec.js @@ -21,24 +21,34 @@ describe('NcCounterBubble', () => { }) describe('with humanization', () => { - it('should render count 1020 with humanization as "1K"', () => { + it('should render count 1042 with humanization as "1K" and original count in the title', () => { const wrapper = mount(NcCounterBubble, { propsData: { count: 1042 } }) expect(wrapper.text()).toBe('1K') + expect(wrapper.attributes('title')).toBe('1042') + }) + + it('should render count 12 without humanization and without title', () => { + const wrapper = mount(NcCounterBubble, { propsData: { count: 12 } }) + expect(wrapper.text()).toBe('12') + expect(wrapper.attributes('title')).toBeUndefined() }) it('should not humanize with raw', () => { const wrapper = mount(NcCounterBubble, { propsData: { count: 1042, raw: true } }) expect(wrapper.text()).toBe('1042') + expect(wrapper.attributes('title')).toBeUndefined() }) - it('should render slot content 1020 with humanization as "1K"', () => { + it('should render slot content 1042 with humanization as "1K" and original count in the title', () => { const wrapper = mount(NcCounterBubble, { slots: { default: '1042' } }) expect(wrapper.text()).toBe('1K') + expect(wrapper.attributes('title')).toBe('1042') }) - it('should render slot content 1020 as it is with raw prop', () => { + it('should render slot content 1042 as it is with raw prop', () => { const wrapper = mount(NcCounterBubble, { propsData: { raw: true }, slots: { default: '1042' } }) expect(wrapper.text()).toBe('1042') + expect(wrapper.attributes('title')).toBeUndefined() }) })