add test for public demo

src/pages/index.tsx

@@ -59,7 +59,7 @@ function GetStartedButtons() {
           View on GitHub
         </Link>
         <Link
-          href="/forms/fill/bb16be91-9ba7-40b8-8e3d-ead3cf3184ca"
+          href="/forms/fill/5771953d-a003-4969-9071-fcfff4c5bb10"
           className={`inline-block text-gray-500 border border-2 border-gray-500 font-semibold py-2 px-4 my-2 mx-1 rounded-lg transition duration-200 ease-in-out hover:bg-gray-200`}
         >
           Fill a sample form

tests/form-fill.spec.ts

@@ -1,20 +1,13 @@
-import { test, expect } from '@playwright/test';
+import { test, expect, Page } from '@playwright/test';
 
-test('Chat component e2e test', async ({ page }) => {
+async function runTestScenario(
+  page: Page,
+  formId: string,
+  messages: string[],
+  expected: object,
+) {
   // Navigate to the specified URL
-  await page.goto(
-    'http://localhost:3000/forms/fill/bb16be91-9ba7-40b8-8e3d-ead3cf3184ca'
-  );
-
-  // List of messages to be inputted
-  const messages = [
-    'John Doe',
-    '[email protected]',
-    'Big Tech Co.',
-    'Software Engineer',
-    'github.com/jd123456',
-    'PostHog',
-  ];
+  await page.goto(`http://localhost:3000/forms/fill/${formId}`);
 
   for (const message of messages) {
     // Wait for input to be enabled and visible
@@ -26,25 +19,69 @@ test('Chat component e2e test', async ({ page }) => {
 
     // Press 'Enter' to submit the message
     await page.press(inputSelector, 'Enter');
-
-    // Optional: Add a delay if needed for smooth simulations
-    // await page.waitForTimeout(1000);
   }
 
   // Wait for the submission modal
   await page.waitForSelector('#submissionBox', { state: 'attached' });
 
   // Verify that the submission modal has the expected content
   const modalContent = await page.textContent('#submissionBox p');
-
-  const expected = {
-    name: 'John Doe',
-    email: '[email protected]',
-    company: 'Big Tech Co.',
-    job_title: 'Software Engineer',
-    marketing_technologies: 'PostHog',
-    github: 'github.com/jd123456',
-  };
   const parsed = JSON.parse(modalContent || '');
   expect(parsed).toEqual(expected);
-});
+}
+
+// Define your list of test scenarios
+const testScenarios = [
+  {
+    name: 'Simple RSVP',
+    formId: 'bb16be91-9ba7-40b8-8e3d-ead3cf3184ca',
+    messages: [
+      'John Doe',
+      '[email protected]',
+      'Big Tech Co.',
+      'Software Engineer',
+      'github.com/jd123456',
+      'PostHog',
+    ],
+    expected: {
+      name: 'John Doe',
+      email: '[email protected]',
+      company: 'Big Tech Co.',
+      job_title: 'Software Engineer',
+      marketing_technologies: 'PostHog',
+      github: 'jd123456',
+    },
+  },
+  {
+    name: 'public-facing demo',
+    formId: '5771953d-a003-4969-9071-fcfff4c5bb10',
+    messages: [
+      'Nick',
+      '[email protected]',
+      'big tech co',
+      'eng manager',
+      'https://github.com/nsbradford',
+      'google analytics and Posthog',
+    ],
+    expected: {
+      name: 'Nick',
+      email_address: '[email protected]',
+      company: 'big tech co',
+      job_title: 'eng manager',
+      github_username: 'nsbradford',
+      technologies_used: 'google analytics, Posthog',
+    },
+  },
+];
+
+// Iterate through your scenarios to run the tests
+for (const scenario of testScenarios) {
+  test(`Chat component e2e test: ${scenario.name}`, async ({ page }) => {
+    await runTestScenario(
+      page,
+      scenario.formId,
+      scenario.messages,
+      scenario.expected
+    );
+  });
+}