added a valid or invalid text with an inline icon

package.json

@@ -22,6 +22,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@mdi/js": "^7.4.47",
     "@nextcloud/axios": "^2.5.0",
     "@nextcloud/dialogs": "^3.2.0",
     "@nextcloud/initial-state": "^2.2.0",

src/modals/MappingTest/components/TestMappingResult.vue

@@ -15,29 +15,48 @@
 
 			<div class="result">
 				<pre><!-- do NOT remove this comment
-					-->{{ JSON.stringify(mappingTest.result, null, 2) }}
+					-->{{ JSON.stringify(mappingTest.result?.resultObject, null, 2) }}
 				</pre>
 			</div>
+
+			<div v-if="mappingTest.result?.isValid !== undefined">
+				<p v-if="mappingTest.result.isValid" class="valid">
+					<NcIconSvgWrapper inline :path="mdiCheckCircle" /> input object is valid
+				</p>
+				<p v-if="!mappingTest.result.isValid" class="invalid">
+					<NcIconSvgWrapper inline :path="mdiCloseCircle" /> input object is invalid
+				</p>
+			</div>
 		</div>
 	</div>
 </template>
 
 <script>
 import {
 	NcNoteCard,
+	NcIconSvgWrapper,
 } from '@nextcloud/vue'
 
+import { mdiCheckCircle, mdiCloseCircle } from '@mdi/js'
+
 export default {
 	name: 'TestMappingResult',
 	components: {
 		NcNoteCard,
+		NcIconSvgWrapper,
 	},
 	props: {
 		mappingTest: {
 			type: Object,
 			required: true,
 		},
 	},
+	setup() {
+		return {
+			mdiCheckCircle,
+			mdiCloseCircle,
+		}
+	},
 	data() {
 		return {
 			// data here
@@ -63,4 +82,11 @@ export default {
 .result pre {
 	white-space: break-spaces;
 }
+
+.valid {
+	color: var(--color-success);
+}
+.invalid {
+	color: var(--color-error);
+}
 </style>