fix(vue3): resolve Validation dynamic component render

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

Author: vitormattos

src/tests/views/Validation.spec.ts

@@ -13,8 +13,8 @@ import Validation from '../../views/Validation.vue'
 // Mock async components to prevent defineAsyncComponent from triggering
 // pending Vite dev-server fetches that outlive the worker and cause
 // "Closing rpc while fetch was pending" errors in Vitest.
-vi.mock('../../components/validation/EnvelopeValidation.vue', () => ({ default: { template: '<div />' } }))
-vi.mock('../../components/validation/FileValidation.vue', () => ({ default: { template: '<div />' } }))
+vi.mock('../../components/validation/EnvelopeValidation.vue', () => ({ default: { template: '<div data-test="envelope-validation" />' } }))
+vi.mock('../../components/validation/FileValidation.vue', () => ({ default: { template: '<div data-test="file-validation" />' } }))
 vi.mock('../../components/validation/SigningProgress.vue', () => ({ default: { template: '<div />' } }))
 
 // Mock js-confetti
@@ -282,6 +282,20 @@ describe('Validation.vue - Business Logic', () => {
 
 			expect(wrapper.html()).not.toContain('[object Promise]')
 		})
+
+		it('uses component references instead of string names for validation content', async () => {
+			wrapper.vm.document = { uuid: 'doc-uuid', nodeType: 'file', name: 'contract.pdf' }
+			await wrapper.vm.$nextTick()
+
+			expect(typeof wrapper.vm.validationComponent).toBe('object')
+			expect(wrapper.vm.validationComponent).not.toBe('FileValidation')
+
+			wrapper.vm.document = { uuid: 'doc-uuid', nodeType: 'envelope', name: 'envelope', files: [{ id: 1 }] }
+			await wrapper.vm.$nextTick()
+
+			expect(typeof wrapper.vm.validationComponent).toBe('object')
+			expect(wrapper.vm.validationComponent).not.toBe('EnvelopeValidation')
+		})
 	})
 
 	describe('getValidityStatus method', () => {

src/views/Validation.vue

@@ -63,7 +63,7 @@
 				</div>
 			</div>
 			<div v-else class="infor-container">
-				<component :is="isEnvelope ? 'EnvelopeValidation' : 'FileValidation'"
+				<component :is="validationComponent"
 					:document="document"
 					:legal-information="legalInformation"
 					:document-valid-message="documentValidMessage"
@@ -176,6 +176,8 @@ const isAfterSigned = computed(() => history.state?.isAfterSigned ?? shouldFireA
 const isEnvelope = computed(() => document.value?.nodeType === 'envelope'
 	|| (Array.isArray(document.value?.files) && document.value.files.length > 0))
 
+const validationComponent = computed(() => (isEnvelope.value ? EnvelopeValidation : FileValidation))
+
 const canValidate = computed(() => {
 	if (!uuidToValidate.value) {
 		return false
@@ -716,6 +718,7 @@ defineExpose({
 	signRequestUuidForProgress,
 	isAfterSigned,
 	isEnvelope,
+	validationComponent,
 	canValidate,
 	helperTextValidation,
 	size,