Merge pull request #6395 from nextcloud-libraries/fix/NcCounterBubble--title

fix(NcCounterBubble): show original count in title when shortened

Author: susnux

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])
 	},
 }
 

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()
 		})
 	})