Merge pull request #4671 from nextcloud-libraries/fix/actions-allow-a…

…ttrs

src/components/NcActions/NcActions.vue

@@ -1000,12 +1000,13 @@ export default {
 		/**
 		 * Render the provided action
 		 *
-		 * @param {object} action the action to render
+		 * @param {import('vue').VNode} action the action to render
 		 * @return {Function} the vue render function
 		 */
 		const renderInlineAction = (action) => {
 			const icon = action?.data?.scopedSlots?.icon()?.[0]
 				|| h('span', { class: ['icon', action?.componentOptions?.propsData?.icon] })
+			const attrs = action?.data?.attrs || {}
 			const clickListener = action?.componentOptions?.listeners?.click
 
 			const text = action?.componentOptions?.children?.[0]?.text?.trim?.()
@@ -1026,6 +1027,7 @@ export default {
 						action?.data?.class,
 					],
 					attrs: {
+						...attrs,
 						'aria-label': ariaLabel,
 						title,
 					},

tests/unit/components/NcActions/NcActions.spec.js → tests/unit/components/NcActions/NcActions.spec.ts

@@ -27,13 +27,11 @@ import NcActions from '../../../../src/components/NcActions/NcActions.vue'
 import NcActionButton from '../../../../src/components/NcActionButton/NcActionButton.vue'
 import TestCompositionApi from './TestCompositionApi.vue'
 
-let wrapper
-
 describe('NcActions.vue', () => {
 	'use strict'
 	describe('when using the component with', () => {
 		it('no actions elements', () => {
-			wrapper = mount(NcActions, {
+			const wrapper = mount(NcActions, {
 				slots: {
 					default: [],
 				},
@@ -45,11 +43,36 @@ describe('NcActions.vue', () => {
 		 * Ensure NcActions work with Composition API components (nextcloud/nextcloud-vue#3719)
 		 */
 		it('composition API', () => {
-			wrapper = mount(TestCompositionApi)
+			const wrapper = mount(TestCompositionApi)
 			expect(wrapper.find('.action-item__menutoggle').exists()).toBe(true)
 		})
 
+		it('keeps attributes on the children', () => {
+			const wrapper = mount(NcActions, {
+				slots: {
+					default: [
+						'<NcActionButton data-test-id="button-test1">Test1</NcActionButton>',
+						'<NcActionButton data-test-id="button-test2">Test2</NcActionButton>',
+					],
+				},
+				propsData: {
+					inline: 1,
+				},
+				stubs: {
+					// used to register custom components
+					NcActionButton,
+				},
+			})
+
+			const buttons = wrapper.findAllComponents({ name: 'NcButton' })
+			expect(buttons).toHaveLength(2)
+			expect(buttons.at(0).attributes('data-test-id')).toBe('button-test1')
+			expect(buttons.at(1).classes('action-item__menutoggle')).toBe(true)
+		})
+
 		describe('one NcActionButton', () => {
+			let wrapper
+
 			beforeEach(() => {
 				wrapper = mount(NcActions, {
 					slots: {
@@ -73,6 +96,8 @@ describe('NcActions.vue', () => {
 		})
 
 		describe('two NcActionButtons', () => {
+			let wrapper
+
 			beforeEach(() => {
 				wrapper = mount(NcActions, {
 					slots: {
@@ -93,6 +118,8 @@ describe('NcActions.vue', () => {
 		})
 
 		describe('3 ActionButton with one inline', () => {
+			let wrapper
+
 			beforeEach(() => {
 				wrapper = mount(NcActions, {
 					slots: {