Upstream Merge

.eslintrc

@@ -30,6 +30,7 @@
     // Nitpicky. Prefer `interface T` over type T
     "@typescript-eslint/consistent-type-definitions": "error",
     "@typescript-eslint/consistent-type-exports": "error",
+    "@typescript-eslint/no-floating-promises": "off",
     // Use `import type` instead of `import` for type imports
     "@typescript-eslint/consistent-type-imports": [
       "error",

e2e/pages/form-builder-page.ts

@@ -1,10 +1,10 @@
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 import type { Page } from '@playwright/test';
-import { expect } from '@playwright/test';
 
 export class FormBuilderPage {
   constructor(readonly page: Page) {}
 
+  readonly schemaEditorContent = () => this.page.locator('#schemaEditor div .ace_content');
   readonly createNewFormButton = () => this.page.getByRole('button', { name: /create a new form/i });
   readonly schemaInput = () => this.page.locator('.ace_text-input');
   readonly renderChangesButton = () => this.page.getByRole('button', { name: /render changes/i });
@@ -59,52 +59,6 @@ export class FormBuilderPage {
     await this.page.goto('form-builder');
   }
 
-  async buildFormInteractively() {
-    await this.interactiveBuilderTab().click();
-    await this.startBuildingButton().click();
-    await this.interactiveFormNameInput().fill('Covid-19 Screening');
-    await this.interactiveFormDescriptionInput().fill('A test form for recording COVID-19 screening information');
-    await this.createFormButton().click();
-    await expect(this.page.getByText(/form created/i)).toBeVisible();
-
-    await this.addPageButton().click();
-    await this.pageNameInput().fill('Screening');
-    await this.savePageButton().click();
-    await expect(this.page.getByText(/new page created/i)).toBeVisible();
-
-    await this.addSectionButton().click();
-    await this.sectionNameInput().fill('Testing history');
-    await this.saveSectionButton().click();
-    await expect(this.page.getByText(/new section created/i)).toBeVisible();
-
-    await this.page.getByRole('button', { name: /^testing history$/i }).click();
-    await this.addQuestionButton().click();
-    await this.questionLabelInput().fill('Have you been ever been tested for COVID-19?');
-    await this.questionIdInput().fill('everTestedForCovid19');
-    await this.questionTypeDropdown().selectOption('obs');
-    await this.renderingTypeDropdown().selectOption('radio');
-    await this.conceptSearchInput().fill('Tested for COVID 19');
-    await this.conceptSearchInput().press('Enter');
-    await this.answer().click();
-    await this.selectAnswersDropdown().click();
-    await this.page.getByRole('option', { name: 'No' }).click();
-    await this.page.getByRole('option', { name: 'Yes' }).click();
-    await this.saveQuestionButton().click();
-  }
-
-  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,13 +23,35 @@ 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 () => {
     // Checks whether the user has been redirected to the edit page
     const editFormPageURLRegex = new RegExp('/edit/');
-    await expect(page.getByText('Form created')).toBeVisible();
+    await expect(formBuilderPage.page.getByText('Form created')).toBeVisible();
     await page.waitForURL(editFormPageURLRegex);
     const editFormPageURL = page.url();
     formUuid = editFormPageURL.split('/').slice(-1)[0];

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

@@ -21,13 +21,35 @@ 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 () => {
     // Checks whether the user has been redirected to the edit page
     const editFormPageURLRegex = new RegExp('/edit/');
-    await expect(page.getByText('Form created')).toBeVisible();
+    await expect(formBuilderPage.page.getByText('Form created')).toBeVisible();
     await page.waitForURL(editFormPageURLRegex);
     const editFormPageURL = page.url();
     formUuid = editFormPageURL.split('/').slice(-1)[0];

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

@@ -23,17 +23,23 @@ test('Editing an existing form', async ({ page }) => {
   });
 
   await test.step('And I click the `Edit` button on the form I need to edit', async () => {
-    await page.getByRole('row', { name: form.name }).getByLabel('Edit Schema').click();
+    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();
   });
 
   await test.step('Then I should see a success message', async () => {
-    await expect(page.getByText('Success!')).toBeVisible();
+    await expect(formBuilderPage.page.getByText('Success!')).toBeVisible();
   });
 });
 

e2e/specs/forms-dashboard.spec.ts

@@ -20,20 +20,16 @@ test('Filter forms based on publish status', async ({ page }) => {
 
   // Test the filter functionality
   await test.step('Then I click the filter dropdown', async () => {
-    await page.getByText('Filter by:').click();
+    await formBuilderPage.page.getByRole('combobox', { name: /Filter by:/i }).click();
   });
 
-  await test.step('And I click the Unpublished option', async () => await page.getByText('Unpublished').click());
+  await test.step('And I click the Unpublished option', async () =>
+    await formBuilderPage.page.getByText(/Unpublished/i).click());
 
-  // Expect the publish status to be "No"
-  const tagElements = await page.$$('div[data-testid="no-tag"]');
-  const firstTagElement = tagElements[0];
-
-  // Get the inner text of the tag element
-  const innerText = await firstTagElement.innerText();
-  await test.step('Then the forms list should only show unpublished forms', () => {
-    expect(innerText).toBe('No');
-  });
+  // Expect the list of forms to not have any published forms
+  await expect(
+    formBuilderPage.page.getByRole('table').filter({ has: formBuilderPage.page.getByTestId(/yes-tag/i) }),
+  ).toHaveCount(0);
 });
 
 test('Search forms by name', async ({ page }) => {
@@ -65,7 +61,7 @@ test('Clicking on a form should navigate me to the editor', async ({ page }) =>
   });
 
   await test.step('And I click the `A sample test form` form', async () => {
-    await page.getByText('A sample test form').click();
+    await formBuilderPage.page.getByText('A sample test form').click();
   });
 
   await test.step('Then I should be navigated to the editor page', async () => {