Merge pull request #1267 from nextcloud-libraries/chore/more-vue-tests

test(vue3): add some formatting tests

Author: susnux

tests/config-codestyle.test.ts

@@ -5,7 +5,6 @@
 import type { Linter } from 'eslint'
 
 import { ESLint } from 'eslint'
-import { existsSync } from 'fs'
 import { readFile } from 'fs/promises'
 import { join, resolve } from 'path'
 import { expect, test } from 'vitest'
@@ -24,29 +23,24 @@ const eslint = new ESLint({
  * @return Lint result
  */
 async function lintTestCase(testCase: string) {
-	let file = `fixtures/codestyle/input/${testCase}.`
-	if (existsSync(join(__dirname, file) + 'js')) {
-		file += 'js'
-	} else {
-		file += 'ts'
-	}
-
-	const path = resolve(join(__dirname, file))
+	const filepath = join('fixtures/codestyle/input/', testCase)
+	const path = resolve(join(__dirname, filepath))
 	const content = await readFile(path)
-	const results = await eslint.lintText(content.toString(), { filePath: `src/${file}` })
+	const results = await eslint.lintText(content.toString(), { filePath: `src/${filepath}` })
 	return { results, path }
 }
 
 test.for([
-	'array',
-	'arrow-function',
-	'function',
-	'exports',
-	'imports',
-	'indention',
-	'objects',
-	'quotes',
-	'semicolons',
+	'array.js',
+	'arrow-function.ts',
+	'exports.ts',
+	'function.ts',
+	'imports.ts',
+	'indention.js',
+	'objects.js',
+	'quotes.js',
+	'semicolons.js',
+	'VueComponent.vue',
 ])('Code style', async (testCase: string) => {
 	const { results, path } = await lintTestCase(testCase)
 	expect(results).toHaveLength(1)

tests/config-vue.test.ts

@@ -0,0 +1,46 @@
+/*!
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import type { Linter } from 'eslint'
+
+import { ESLint } from 'eslint'
+import { readFile } from 'fs/promises'
+import { join, resolve } from 'path'
+import { expect, test } from 'vitest'
+import * as eslintConfig from '../lib/index.js'
+
+const eslint = new ESLint({
+	overrideConfigFile: true,
+	overrideConfig: eslintConfig.recommended as Linter.Config<Linter.RulesRecord>[],
+})
+
+/**
+ * Lint a file with ESLint
+ *
+ * @param file - File path to lint
+ * @return Lint result
+ */
+async function lintFile(file: string) {
+	const real = resolve(join(__dirname, file))
+	const content = await readFile(real)
+	return await eslint.lintText(content.toString(), { filePath: join('src', file) })
+}
+
+test('Formatting', async () => {
+	const results = await lintFile('fixtures/component-formatting.vue')
+	expect(results).toHaveIssueCount(3)
+	expect(results).toHaveIssue({
+		ruleId: 'vue/prop-name-casing',
+		line: 11,
+	})
+	expect(results).toHaveIssue({
+		ruleId: 'vue/custom-event-name-casing',
+		line: 31,
+	})
+	expect(results).toHaveIssue({
+		ruleId: 'vue/slot-name-casing',
+		line: 34,
+	})
+})

tests/fixtures/codestyle/input/VueComponent.vue

@@ -0,0 +1,26 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script lang="ts">
+import NcComponent from './NcComponent.vue'
+
+export default {
+	name: 'my-app', // ❌ Should be PascalCase 'MyApp'
+
+	components: {
+		'nc-component': NcComponent, // ❌ Should be PascalCase 'NcComponent'
+	},
+}
+</script>
+
+<template>
+	<div>
+		<nc-component /> <!-- ❌ Should be PascalCase <NcComponent /> -->
+		<NcComponent></NcComponent> <!-- ❌ Should be an empty tag <NcComponent /> -->
+		<NcComponent @update:model-value="console.log" /> <!-- ❌ Should be camelCase 'update:modelValue' -->
+		<NcComponent :component-prop="42" /> <!-- ❌ Should be camelCase 'componentProp' -->
+		<NcComponent aria-label="Label" data-testid="test" /> <!-- ✅ Data and ARIA attributes are allowed to be in kebab-case -->
+	</div>
+</template>

tests/fixtures/codestyle/output/VueComponent.vue

@@ -0,0 +1,26 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script lang="ts">
+import NcComponent from './NcComponent.vue'
+
+export default {
+	name: 'MyApp', // ❌ Should be PascalCase 'MyApp'
+
+	components: {
+		NcComponent, // ❌ Should be PascalCase 'NcComponent'
+	},
+}
+</script>
+
+<template>
+	<div>
+		<NcComponent /> <!-- ❌ Should be PascalCase <NcComponent /> -->
+		<NcComponent /> <!-- ❌ Should be an empty tag <NcComponent /> -->
+		<NcComponent @update:modelValue="console.log" /> <!-- ❌ Should be camelCase 'update:modelValue' -->
+		<NcComponent :componentProp="42" /> <!-- ❌ Should be camelCase 'componentProp' -->
+		<NcComponent aria-label="Label" data-testid="test" /> <!-- ✅ Data and ARIA attributes are allowed to be in kebab-case -->
+	</div>
+</template>

tests/fixtures/component-formatting.vue

@@ -0,0 +1,36 @@
+<!--
+  - SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+  - SPDX-License-Identifier: AGPL-3.0-or-later
+-->
+
+<script setup lang="ts">
+import type { Slot } from 'vue'
+
+defineProps<{
+	// eslint-disable-next-line vue/no-unused-properties
+	'component-prop': number // ❌ Should be camelCase 'componentProp'
+}>()
+
+// Note: vue/custom-event-name-casing only checks emit/$emit calls, not event definitions
+const emit = defineEmits<{
+	'my-event': []
+	'namespace:event': []
+	'update:model-value': [value: unknown]
+}>()
+
+// Note: vue/slot-name-casing only checks name in <slot name> in template, not slot definitions
+defineSlots<{
+	'my-icon': Slot
+}>()
+
+emit('update:model-value', 'value') // ❌ Should be camelCase 'update:modelValue'
+</script>
+
+<template>
+	<div>
+		<button @click="$emit('my-event')" /> <!-- ❌ Should be camelCase 'myEvent' -->
+		<button @click="$emit('namespace:event')" /> <!-- ✅ Namespaced events are allowed -->
+		<button @click="$emit('update:model-value')" /> <!-- ⚠️ vue/custom-event-name-casing ignores update:* events completely -->
+		<slot name="my-icon" /> <!-- ❌ Should be camelCase 'myIcon' -->
+	</div>
+</template>