(test): break down save form test

e2e/pages/form-builder-page.ts

@@ -59,19 +59,6 @@ export class FormBuilderPage {
     await this.page.goto('form-builder');
   }
 
-  async saveForm() {
-    const formName = `A sample test form ${Math.floor(Math.random() * 10000)}`;
-
-    await this.saveFormButton().click();
-    await this.formNameInput().click();
-    await this.formNameInput().fill(formName);
-    await this.formVersionInput().click();
-    await this.formVersionInput().fill('1.0');
-    await this.formDescriptionInput().fill('This is a test form');
-    await this.formEncounterType().selectOption('Admission');
-    await this.formSaveButton().click();
-  }
-
   async searchForForm(formName: string) {
     await this.page.getByRole('searchbox').fill(formName);
   }

e2e/specs/create-form-using-custom-schema.spec.ts

@@ -23,7 +23,29 @@ test('Create a form using a custom JSON schema', async ({ page }) => {
   });
 
   await test.step('Then I click the `Save Form` button', async () => {
-    await formBuilderPage.saveForm();
+    await formBuilderPage.saveFormButton().click();
+  });
+
+  await test.step('And then I fill in the form name', async () => {
+    await formBuilderPage.formNameInput().click();
+    await formBuilderPage.formNameInput().fill('A sample form');
+  });
+
+  await test.step('And then I fill in the version number', async () => {
+    await formBuilderPage.formVersionInput().click();
+    await formBuilderPage.formVersionInput().fill('1.0');
+  });
+
+  await test.step('And then I fill in the form description', async () => {
+    await formBuilderPage.formDescriptionInput().fill('This is a test form');
+  });
+
+  await test.step('And then I select the encounter type', async () => {
+    await formBuilderPage.formEncounterType().selectOption('Admission');
+  });
+
+  await test.step("And then I click on the 'Save' button", async () => {
+    await formBuilderPage.formSaveButton().click();
   });
 
   await test.step('And I should get a success message and be redirected to the edit page for the new form', async () => {

e2e/specs/create-form-using-dummy-schema.spec.ts

@@ -21,7 +21,29 @@ test('Create a form using the `Input Dummy Schema` feature', async ({ page }) =>
   });
 
   await test.step('Then I click the `Save Form` button', async () => {
-    await formBuilderPage.saveForm();
+    await formBuilderPage.saveFormButton().click();
+  });
+
+  await test.step('And then I fill in the form name', async () => {
+    await formBuilderPage.formNameInput().click();
+    await formBuilderPage.formNameInput().fill('A sample form with dummy schema');
+  });
+
+  await test.step('And then I fill in the version number', async () => {
+    await formBuilderPage.formVersionInput().click();
+    await formBuilderPage.formVersionInput().fill('1.0');
+  });
+
+  await test.step('And then I fill in the form description', async () => {
+    await formBuilderPage.formDescriptionInput().fill('This is a test form');
+  });
+
+  await test.step('And then I select the encounter type', async () => {
+    await formBuilderPage.formEncounterType().selectOption('Admission');
+  });
+
+  await test.step('And then I click on the `Save` button', async () => {
+    await formBuilderPage.formSaveButton().click();
   });
 
   await test.step('Then should get a success message and be redirected to the edit page for the new form', async () => {

e2e/specs/edit-existing-form.spec.ts

@@ -26,9 +26,15 @@ test('Editing an existing form', async ({ page }) => {
     await formBuilderPage.page.getByRole('row', { name: form.name }).getByLabel('Edit Schema').click();
   });
 
-  await test.step('Then I click the `Save Form` button then the `Update existing version` button, and finally the `Save` button', async () => {
+  await test.step('Then I click the `Save Form` button', async () => {
     await formBuilderPage.saveFormButton().click();
+  });
+
+  await test.step('And then I click on the `Update existing version button`', async () => {
     await formBuilderPage.updateExistingFormButton().click();
+  });
+
+  await test.step('And then I click on the `Save` button', async () => {
     await formBuilderPage.formSaveButton().click();
   });
 

e2e/specs/interactive-builder.spec.ts

@@ -1,6 +1,10 @@
-import { test, expect } from '@playwright/test';
+import { test } from '../core';
+import { expect } from '@playwright/test';
+import { deleteForm } from '../commands/form-operations';
 import { FormBuilderPage } from '../pages';
 
+let formUuid = '';
+
 test('Create a form using the interactive builder', async ({ page, context }) => {
   const formBuilderPage = new FormBuilderPage(page);
   const formDetails = {
@@ -176,10 +180,54 @@ test('Create a form using the interactive builder', async ({ page, context }) =>
   await test.step('And then I click on `Save`', async () => {
     await formBuilderPage.saveQuestionButton().click();
     await expect(formBuilderPage.page.getByText(/new question created/i)).toBeVisible();
+  });
+
+  await test.step('Then the JSON schema should have the question object', async () => {
     await context.grantPermissions(['clipboard-read', 'clipboard-write']);
     await formBuilderPage.page.getByRole('button', { name: /Copy schema/i }).click();
     const handle = await page.evaluateHandle(() => navigator.clipboard.readText());
     const clipboardContent = await handle.jsonValue();
     expect(JSON.parse(clipboardContent)).toEqual(formDetails);
   });
+
+  await test.step('Then I click the `Save Form` button', async () => {
+    await formBuilderPage.saveFormButton().click();
+  });
+
+  await test.step('And then I fill in the form name', async () => {
+    await formBuilderPage.formNameInput().click();
+    await formBuilderPage.formNameInput().fill('A sample form');
+  });
+
+  await test.step('And then I fill in the version number', async () => {
+    await formBuilderPage.formVersionInput().click();
+    await formBuilderPage.formVersionInput().fill('1.0');
+  });
+
+  await test.step('And then I fill in the form description', async () => {
+    await formBuilderPage.formDescriptionInput().fill('This is a test form');
+  });
+
+  await test.step('And then I select the encounter type', async () => {
+    await formBuilderPage.formEncounterType().selectOption('Admission');
+  });
+
+  await test.step("And then I click on the 'Save' button", async () => {
+    await formBuilderPage.formSaveButton().click();
+  });
+
+  await test.step('And I should get a success message and be redirected to the edit page for the new form', async () => {
+    // Checks whether the user has been redirected to the edit page
+    const editFormPageURLRegex = new RegExp('/edit/');
+    await expect(formBuilderPage.page.getByText('Form created')).toBeVisible();
+    await page.waitForURL(editFormPageURLRegex);
+    const editFormPageURL = page.url();
+    formUuid = editFormPageURL.split('/').slice(-1)[0];
+  });
+});
+
+test.afterEach(async ({ api }) => {
+  if (formUuid) {
+    await deleteForm(api, formUuid);
+  }
 });