fix: Render actions When using the composition API

The setup function of the composition API does not pass components by name but by instance to the vue render function `h`. This results in `componentOptions.tag` being undefined, so for this case we need to check the `Ctor` instead. Added an unit test to ensure this issue is fixed and we do not reintroduce this later as a regression. Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>
nextcloud-libraries · Mar 15, 2023 · 6885fd7 · 6885fd7
1 parent 99e2d03
commit 6885fd7
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 11 deletions.
diff --git a/src/components/NcActions/NcActions.vue b/src/components/NcActions/NcActions.vue
@@ -902,7 +902,7 @@ export default {
 		 * become problematic later on.
 		 */
 		const actions = (this.$slots.default || []).filter(
-			action => action?.componentOptions?.tag
+			action => action?.componentOptions?.tag || action?.componentOptions?.Ctor?.extendOptions?.name
 		)
 
 		/**

diff --git a/tests/unit/components/NcActions/NcActions.spec.js b/tests/unit/components/NcActions/NcActions.spec.js
@@ -2,8 +2,9 @@
  * @copyright Copyright (c) 2022 Raimund Schlüßler <raimund.schluessler@mailbox.org>
  *
  * @author Raimund Schlüßler <raimund.schluessler@mailbox.org>
+ * @author Ferdinand Thiessen <rpm@fthiessen.de>
  *
- * @license GNU AGPL version 3 or any later version
+ * @license AGPL-3.0-or-later
  *
  * This program is free software: you can redistribute it and/or modify
  * it under the terms of the GNU Affero General Public License as
@@ -24,19 +25,36 @@ import { mount } from '@vue/test-utils'
 
 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', () => {
-		describe('two NcActionButtons', () => {
+		it('no actions elements', () => {
+			wrapper = mount(NcActions, {
+				slots: {
+					default: [],
+				},
+			})
+			expect(wrapper.html()).toBe('')
+		})
+
+		/**
+		 * Ensure NcActions work with Composition API components (nextcloud/nextcloud-vue#3719)
+		 */
+		it('composition API', () => {
+			wrapper = mount(TestCompositionApi)
+			expect(wrapper.find('.action-item__menutoggle').exists()).toBe(true)
+		})
+
+		describe('one NcActionButton', () => {
 			beforeEach(() => {
 				wrapper = mount(NcActions, {
 					slots: {
 						default: [
 							'<NcActionButton>Test1</NcActionButton>',
-							'<NcActionButton>Test2</NcActionButton>',
 						],
 					},
 					stubs: {
@@ -45,16 +63,22 @@ describe('NcActions.vue', () => {
 					},
 				})
 			})
-			it('shows the menu toggle.', () => {
+			it('shows no menu toggle.', () => {
+				expect(wrapper.find('.action-item__menutoggle').exists()).toBe(false)
+			})
+			it('shows the menu toggle when forced.', async () => {
+				await wrapper.setProps({ forceMenu: true })
 				expect(wrapper.find('.action-item__menutoggle').exists()).toBe(true)
 			})
 		})
-		describe('one NcActionButton', () => {
+
+		describe('two NcActionButtons', () => {
 			beforeEach(() => {
 				wrapper = mount(NcActions, {
 					slots: {
 						default: [
 							'<NcActionButton>Test1</NcActionButton>',
+							'<NcActionButton>Test2</NcActionButton>',
 						],
 					},
 					stubs: {
@@ -63,11 +87,7 @@ describe('NcActions.vue', () => {
 					},
 				})
 			})
-			it('shows no menu toggle.', () => {
-				expect(wrapper.find('.action-item__menutoggle').exists()).toBe(false)
-			})
-			it('shows the menu toggle when forced.', async () => {
-				await wrapper.setProps({ forceMenu: true })
+			it('shows the menu toggle.', () => {
 				expect(wrapper.find('.action-item__menutoggle').exists()).toBe(true)
 			})
 		})

diff --git a/tests/unit/components/NcActions/TestCompositionApi.vue b/tests/unit/components/NcActions/TestCompositionApi.vue
@@ -0,0 +1,34 @@
+<!--
+  - @copyright Copyright (c) 2023 Ferdinand Thiessen <rpm@fthiessen.de>
+  -
+  - @author Ferdinand Thiessen <rpm@fthiessen.de>
+  -
+  - @license AGPL-3.0-or-later
+  -
+  - This program is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as
+  - published by the Free Software Foundation, either version 3 of the
+  - License, or (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program. If not, see <http://www.gnu.org/licenses/>.
+  -
+  -->
+
+<!-- Ensure NcActions work with Composition API components (nextcloud/nextcloud-vue#3719) -->
+
+<template>
+	<NcActions :force-menu="true">
+		<NcActionButton />
+	</NcActions>
+</template>
+
+<script setup>
+import NcActions from '../../../../src/components/NcActions/NcActions.vue'
+import NcActionButton from '../../../../src/components/NcActionButton/NcActionButton.vue'
+</script>