From 120ad6dbdc50671f4c9b70cc1e69f63a5fa3b65a Mon Sep 17 00:00:00 2001
From: Sadiq Khoja <sadiqkhoja@gmail.com>
Date: Thu, 4 Apr 2024 16:54:05 -0400
Subject: [PATCH] Added an e2e test to render all test forms

---
 packages/ui-vue/e2e/vue.spec.ts            | 53 +++++++++++++++++++++-
 packages/ui-vue/package.json               |  1 +
 packages/ui-vue/src/components/OdkForm.vue |  2 +-
 yarn.lock                                  |  5 ++
 4 files changed, 58 insertions(+), 3 deletions(-)

diff --git a/packages/ui-vue/e2e/vue.spec.ts b/packages/ui-vue/e2e/vue.spec.ts
index 139f64ade..5af932fe8 100644
--- a/packages/ui-vue/e2e/vue.spec.ts
+++ b/packages/ui-vue/e2e/vue.spec.ts
@@ -1,5 +1,54 @@
-import { test } from '@playwright/test';
+import { faker } from '@faker-js/faker';
+import { expect, test } from '@playwright/test';
+
+test('All forms are rendered and there is no console error', async ({ page }) => {
+
+	let consoleErrors = 0;
+
+	page.on('console', msg => {
+		if(msg.type() === 'error') {
+			consoleErrors++;
+		} 
+	});
 
-test('visits the app root url', async ({ page }) => {
 	await page.goto('/');
+
+	const forms = await page.getByText('Show').all();	
+
+	for(const form of forms){
+		await form.click();
+
+		// Traverse the form element by element
+		// if focused element is an editable textbox then fill it
+		// Exit the loop when focus is on the Send button
+		// eslint-disable-next-line no-constant-condition
+		while(true){
+			
+			const onSendButton = await page.evaluate(() => {
+				const activeElement = document.activeElement;
+				return activeElement?.tagName === 'BUTTON' && activeElement.textContent === 'Send';
+			});
+			
+			if(onSendButton) {
+				break;
+			}
+
+			await page.keyboard.press('Tab');
+
+			const isEditableTextbox = await page.evaluate(() => {
+				const activeElement = document.activeElement;
+				return activeElement?.tagName === 'INPUT' && (activeElement as HTMLInputElement).type === 'text' && !activeElement.hasAttribute('readonly');
+			});
+
+			if(isEditableTextbox){
+				await page.keyboard.type(faker.internet.displayName());
+			}
+		}
+
+		await page.getByText('Back').click();
+	}
+
+  // Assert that there's no console errors
+	expect(consoleErrors).toBe(0);
+
 });
diff --git a/packages/ui-vue/package.json b/packages/ui-vue/package.json
index 12ccdfff9..18a4209c3 100644
--- a/packages/ui-vue/package.json
+++ b/packages/ui-vue/package.json
@@ -53,6 +53,7 @@
     "vue-router": "^4.3.0"
   },
   "devDependencies": {
+    "@faker-js/faker": "8.4.1",
     "@playwright/test": "^1.42.1",
     "@types/ramda": "0.29.11",
     "@vitejs/plugin-vue": "^5.0.4",
diff --git a/packages/ui-vue/src/components/OdkForm.vue b/packages/ui-vue/src/components/OdkForm.vue
index 0399b25fd..5e2114e38 100644
--- a/packages/ui-vue/src/components/OdkForm.vue
+++ b/packages/ui-vue/src/components/OdkForm.vue
@@ -56,7 +56,7 @@ initializeForm(props.formXml, {
 const handleSubmit = () => {
 	// TODO/sk: it is not yet decided where engine will return submission data
 	// following is just a temporary line for personal satisfaction
-	emit('submit', (odkForm as any).contextNode.outerHTML); // eslint-disable-line
+	emit('submit', (odkForm as any).value.contextNode.outerHTML); // eslint-disable-line
 }
 </script>
 
diff --git a/yarn.lock b/yarn.lock
index 79efc9565..bda4ada29 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -909,6 +909,11 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
+"@faker-js/faker@8.4.1":
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-8.4.1.tgz#5d5e8aee8fce48f5e189bf730ebd1f758f491451"
+  integrity sha512-XQ3cU+Q8Uqmrbf2e0cIC/QN43sTBSC8KF12u29Mb47tWrt2hAgBXSgpZMj4Ao8Uk0iJcU99QsOCaIL8934obCg==
+
 "@fastify/busboy@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@fastify/busboy/-/busboy-2.0.0.tgz#f22824caff3ae506b18207bad4126dbc6ccdb6b8"