refactor(vue3): migrate SignatureEngine to script setup ts

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>

Author: vitormattos

src/tests/views/Settings/SignatureEngine.spec.ts

@@ -0,0 +1,85 @@
+/*
+ * SPDX-FileCopyrightText: 2026 LibreSign contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import SignatureEngine from '../../../views/Settings/SignatureEngine.vue'
+
+const loadStateMock = vi.fn()
+const emitMock = vi.fn()
+
+vi.mock('@nextcloud/initial-state', () => ({
+	loadState: (...args: unknown[]) => loadStateMock(...args),
+}))
+
+vi.mock('@nextcloud/event-bus', () => ({
+	emit: (...args: unknown[]) => emitMock(...args),
+}))
+
+vi.mock('@nextcloud/l10n', () => ({
+	t: vi.fn((_app: string, text: string) => text),
+	translate: vi.fn((_app: string, text: string) => text),
+	translatePlural: vi.fn((_app: string, singular: string, plural: string, count: number) => (count === 1 ? singular : plural)),
+	n: vi.fn((_app: string, singular: string, plural: string, count: number) => (count === 1 ? singular : plural)),
+	getLanguage: vi.fn(() => 'en'),
+	getLocale: vi.fn(() => 'en'),
+	isRTL: vi.fn(() => false),
+}))
+
+const OCP = {
+	AppConfig: {
+		setValue: vi.fn(),
+	},
+}
+
+;(globalThis as typeof globalThis & { OCP: typeof OCP }).OCP = OCP
+
+describe('SignatureEngine.vue', () => {
+	beforeEach(() => {
+		vi.clearAllMocks()
+		loadStateMock.mockImplementation((_app: string, _key: string, fallback: unknown) => fallback)
+	})
+
+	function createWrapper() {
+		return mount(SignatureEngine, {
+			global: {
+				stubs: {
+					NcSettingsSection: { template: '<div><slot /></div>' },
+					NcSelect: true,
+				},
+			},
+		})
+	}
+
+	it('maps the initial state to the selected option', () => {
+		loadStateMock.mockImplementation((_app: string, key: string, fallback: unknown) => {
+			if (key === 'signature_engine') return 'PhpNative'
+			return fallback
+		})
+
+		const wrapper = createWrapper()
+
+		expect(wrapper.vm.selectedOption).toEqual({ id: 'PhpNative', label: 'Native' })
+	})
+
+	it('updates the selected engine through the computed setter', () => {
+		const wrapper = createWrapper()
+
+		wrapper.vm.selectedOption = { id: 'PhpNative', label: 'Native' }
+
+		expect(wrapper.vm.selectedEngineId).toBe('PhpNative')
+	})
+
+	it('persists the engine and emits the change event on success', async () => {
+		OCP.AppConfig.setValue.mockImplementation((_app: string, _key: string, _value: string, callbacks: { success: () => void }) => callbacks.success())
+		const wrapper = createWrapper()
+
+		await wrapper.vm.saveEngine({ id: 'PhpNative', label: 'Native' })
+
+		expect(OCP.AppConfig.setValue).toHaveBeenCalledWith('libresign', 'signature_engine', 'PhpNative', expect.any(Object))
+		expect(emitMock).toHaveBeenCalledWith('libresign:signature-engine:changed', 'PhpNative')
+	})
+})

src/views/Settings/SignatureEngine.vue

@@ -16,55 +16,71 @@
 		</div>
 	</NcSettingsSection>
 </template>
-<script>
+<script setup lang="ts">
 import { emit } from '@nextcloud/event-bus'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
+import { computed, ref } from 'vue'
 
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
 
-export default {
+defineOptions({
 	name: 'SignatureEngine',
-	components: {
-		NcSettingsSection,
-		NcSelect,
-	},
-	setup() {
-		return { t }
+})
+
+type SignatureEngineOption = {
+	id: string
+	label: string
+}
+
+type AppConfigGlobal = {
+	AppConfig: {
+		setValue: (
+			app: string,
+			key: string,
+			value: string,
+			callbacks: { success: () => void }
+		) => void
+	}
+}
+
+const selectedEngineId = ref(loadState('libresign', 'signature_engine', 'JSignPdf'))
+
+const options = computed<SignatureEngineOption[]>(() => [
+	{ id: 'JSignPdf', label: 'JSignPdf' },
+	// TRANSLATORS "Native" refers to a signature engine that runs directly with PHP, without requiring external runtimes like Java
+	{ id: 'PhpNative', label: t('libresign', 'Native') },
+])
+
+const selectedOption = computed<SignatureEngineOption>({
+	get() {
+		return options.value.find((option) => option.id === selectedEngineId.value) ?? options.value[0]
 	},
-	data() {
-		return {
-			selectedEngineId: loadState('libresign', 'signature_engine', 'JSignPdf'),
-		}
+	set(value) {
+		selectedEngineId.value = value?.id ?? 'JSignPdf'
 	},
-	computed: {
-		options() {
-			return [
-				{ id: 'JSignPdf', label: 'JSignPdf' },
-				// TRANSLATORS "Native" refers to a signature engine that runs directly with PHP, without requiring external runtimes like Java
-				{ id: 'PhpNative', label: t('libresign', 'Native') },
-			]
-		},
-		selectedOption: {
-			get() {
-				return this.options.find((o) => o.id === this.selectedEngineId) ?? this.options[0]
-			},
-			set(value) {
-				this.selectedEngineId = value?.id ?? 'JSignPdf'
+})
+
+function saveEngine(selected: SignatureEngineOption) {
+	;(globalThis as typeof globalThis & { OCP: AppConfigGlobal }).OCP.AppConfig.setValue(
+		'libresign',
+		'signature_engine',
+		selected.id,
+		{
+			success() {
+				emit('libresign:signature-engine:changed', selected.id)
 			},
 		},
-	},
-	methods: {
-		saveEngine(selected) {
-			OCP.AppConfig.setValue('libresign', 'signature_engine', selected.id, {
-				success() {
-					emit('libresign:signature-engine:changed', selected.id)
-				},
-			})
-		},
-	},
+	)
 }
+
+defineExpose({
+	selectedEngineId,
+	options,
+	selectedOption,
+	saveEngine,
+})
 </script>
 <style scoped>
 .signature-engine-content {