(test) O3-3601 : E2E tests for User onboarding

e2e/specs/onboarding-test.spec.ts

@@ -0,0 +1,93 @@
+import { test } from '@playwright/test';
+import { HomePage } from '../pages';
+import { expect } from '@playwright/test';
+
+test('Basic Walkthrough', async ({ page }) => {
+  const homePage = new HomePage(page);
+
+  await test.step('When I visit the home page', async () => {
+    await homePage.goto();
+  });
+
+  await test.step('And I click on the help menu button', async () => {
+    await page.locator('[id="single-spa-application\\:\\@openmrs\\/esm-help-menu-app-page-0"]').getByRole('button').click();
+  });
+
+  await test.step('And I click on the tutorials button', async () => {
+    await page.getByText(/tutorials/i).click();
+  });
+
+  await test.step('Then I should see the tutorial modal', async () => {
+    await expect(page.getByRole('heading', { name: 'Tutorials' })).toBeVisible();
+    await expect(
+      page.getByText(/find walkthroughs and video tutorials on some of the core features of openMRS./i),
+    ).toBeVisible();
+  });
+
+  await test.step('And I click on the Basic Tutorial walkthrough', async () => {
+    await page
+      .locator('li')
+      .filter({ hasText: 'Basic Tutorial' })
+      .locator('button', { hasText: 'Walkthrough' })
+      .click();
+  });
+
+  await test.step('Then I should see the first Joyride tooltip', async () => {
+    await expect(
+      page.getByText(
+        'Welcome to OpenMRS! This is the main dashboard where you can navigate to various features of the system.',
+      ),
+    ).toBeVisible();
+  });
+
+  await test.step('And I click the next button', async () => {
+    await page.getByLabel('Next', { exact: true }).click();
+  });
+
+  await test.step('Then I should see the search icon  Joyride tooltip', async () => {
+    await expect(
+      page.getByText('This is the search icon. Use it to find patients in the system quickly.'),
+    ).toBeVisible();
+  });
+  await test.step('And I click the next button', async () => {
+    await page.getByLabel('Next', { exact: true }).click();
+  });
+
+  await test.step('Then I should see the add patient icon Joyride tooltip', async () => {
+    await expect(
+      page.getByText('This is the add patient icon. Click here to register a new patient into the system.'),
+    ).toBeVisible();
+  });
+  await test.step('And I click the next button', async () => {
+    await page.getByLabel('Next', { exact: true }).click();
+  });
+
+  await test.step('Then I should see the user icon Joyride tooltip', async () => {
+    await expect(
+      page.getByText('The user icon. Click here to change your user preferences and settings.'),
+    ).toBeVisible();
+  });
+  await test.step('And I click the next button', async () => {
+    await page.getByLabel('Next', { exact: true }).click();
+  });
+
+  await test.step('Then I should see the active visits Joyride tooltip', async () => {
+    await expect(
+      page.getByText('This table displays active visits. Here you can see all the ongoing patient visits.'),
+    ).toBeVisible();
+  });
+
+  await test.step('And I click the next button', async () => {
+    await page.getByLabel('Next', { exact: true }).click();
+  });
+
+  await test.step('And I should see the appointments table Joyride tooltip', async () => {
+    await expect(
+      page.getByText('This table shows appointments. View and manage patient appointments from this section.'),
+    ).toBeVisible();
+  });
+
+  await test.step('And I click the finish button', async () => {
+    await page.getByLabel('Last').click();
+  });
+});

e2e/support/github/run-e2e-docker-env.sh

@@ -1,41 +1,36 @@
 #!/usr/bin/env bash -eu
-
 # get the dir containing the script
 script_dir=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )
 # create a temporary working directory
 working_dir=$(mktemp -d "${TMPDIR:-/tmp/}openmrs-e2e-frontends.XXXXXXXXXX")
-# get a list of all the apps in this workspace
-apps=$(yarn workspaces list --json | jq -r 'if ((.location == ".") or (.location | test("form-engine-app")) or (.location | test("-app") | not)) then halt else .name end')
-# this array will hold all of the packed app names
-app_names=()
+# get the app name
+app_name=$(jq -r '.name' "$script_dir/../../../package.json")
 
-echo "Creating packed archives of apps..."
-# for each app
-for app in $apps
-do
-  # @openmrs/esm-whatever -> _openmrs_esm_whatever
-  app_name=$(echo "$app" | tr '[:punct:]' '_');
-  # add to our array
-  app_names+=("$app_name.tgz");
-  # run yarn pack for our app and add it to the working directory
-  yarn workspace "$app" pack -o "$working_dir/$app_name.tgz" >/dev/null;
-done;
-echo "Created packed app archives"
+echo "Creating packed archive of the app..."
+# @openmrs/esm-whatever -> _openmrs_esm_whatever
+packed_app_name=$(echo "$app_name" | tr '[:punct:]' '_');
+# run yarn pack for our app and add it to the working directory
+yarn pack -o "$working_dir/$packed_app_name.tgz" >/dev/null;
+echo "Created packed app archives" 
 
 echo "Creating dynamic spa-assemble-config.json..."
 # dynamically assemble our list of frontend modules, prepending the login app and
 # primary navigation apps; apps will all be in the /app directory of the Docker
 # container
 jq -n \
-  --arg apps "$apps" \
-  --arg app_names "$(echo ${app_names[@]})" \
-  '{"@openmrs/esm-primary-navigation-app": "next", "@openmrs/esm-home-app": "next"} + (
-    ($apps | split("\n")) as $apps | ($app_names | split(" ") | map("/app/" + .)) as $app_files
-    | [$apps, $app_files]
-    | transpose
-    | map({"key": .[0], "value": .[1]})
-    | from_entries
-  )' | jq '{"frontendModules": .}' > "$working_dir/spa-assemble-config.json"
+  --arg app_name "$app_name" \
+  --arg app_file "/app/$packed_app_name.tgz" \
+'{
+    "@openmrs/esm-primary-navigation-app": "next",
+    "@openmrs/esm-home-app": "next",
+    "@openmrs/esm-help-menu-app": "next",
+    "@openmrs/esm-patient-search-app": "next",
+    "@openmrs/esm-patient-registration-app": "next",
+    "@openmrs/esm-active-visits-app": "next",
+    "@openmrs/esm-appointments-app": "next"
+  } + {
+    ($app_name): $app_file
+  }' | jq '{"frontendModules": .}' > "$working_dir/spa-assemble-config.json"
 echo "Created dynamic spa-assemble-config.json"
 
 echo "Copying Docker configuration..."

package.json

@@ -55,7 +55,7 @@
   "devDependencies": {
     "@openmrs/esm-framework": "next",
     "@openmrs/esm-styleguide": "next",
-    "@playwright/test": "^1.42.1",
+    "@playwright/test": "1.44.0",
     "@swc/cli": "^0.3.12",
     "@swc/core": "^1.3.68",
     "@swc/jest": "^0.2.36",

playwright.config.ts

@@ -12,12 +12,19 @@ const config: PlaywrightTestConfig = {
   fullyParallel: true,
   forbidOnly: !!process.env.CI,
   retries: 0,
-  reporter: process.env.CI ? [['junit', { outputFile: 'results.xml' }], ['html']] : [['html']],
+  outputDir: "../test-results/results",
+  reporter: process.env.CI
+    ? [
+      ["junit", { outputFile: "results.xml" }],
+      ["html"],
+    ]
+    : [["html", { outputFolder: "./../test-results/report" }]],
   globalSetup: require.resolve('./e2e/core/global-setup'),
   use: {
     baseURL: `${process.env.E2E_BASE_URL}/spa/`,
     storageState: 'e2e/storageState.json',
-    video: 'retain-on-failure',
+    video: 'on',
+    trace: 'retain-on-failure',
   },
   projects: [
     {

src/config-schema.ts

@@ -12,14 +12,12 @@ export const configSchema = {
     _default: [
       {
         title: 'Basic Tutorial',
-        description:
-          'Learn how to efficiently search for patients, register new patients, access user settings, and view ongoing visits and appointments.',
-        steps: [
-          {
-            target: '[aria-label="OpenMRS"]',
-            content:
-              'Welcome to OpenMRS! This is the main dashboard where you can navigate to various features of the system.',
-          },
+        description: 'Learn how to efficiently search for patients, register new patients, access user settings, and view ongoing visits and appointments.',
+        steps: [{
+          target: '[aria-label="OpenMRS"]',
+          content: 'Welcome to OpenMRS! This is the main dashboard where you can navigate to various features of the system.',
+          disableBeacon: true
+        },
           {
             target: '[name="SearchPatientIcon"]',
             content: 'This is the search icon. Use it to find patients in the system quickly.',

src/tutorial/modal.component.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useConfig, useAppContext, navigate } from '@openmrs/esm-framework';
 import styles from './styles.scss';
 import { type TutorialContext } from '../types';
-import { ModalHeader, ModalBody } from '@carbon/react';
+import { ModalHeader, ModalBody, Button } from '@carbon/react';
 
 const TutorialModal = ({ open, onClose }) => {
   const { t } = useTranslation();
@@ -45,15 +45,17 @@ const TutorialModal = ({ open, onClose }) => {
         </p>
       </ModalHeader>
       <ModalBody className={styles.tutorialModal}>
-        {tutorials.map((tutorial, index) => (
-          <div className={styles.tutorialItem} key={index}>
-            <h3 className={styles.tutorialTitle}>{tutorial.title}</h3>
-            <p className={styles.tutorialDescription}>{tutorial.description}</p>
-            <div className={styles.walkthrough} onClick={() => handleWalkthroughClick(index)}>
-              {t('walkthrough', 'Walkthrough')}
-            </div>
-          </div>
-        ))}
+        <ul>
+          {tutorials.map((tutorial, index) => (
+            <li className={styles.tutorialItem} key={index}>
+              <h3 className={styles.tutorialTitle}>{tutorial.title}</h3>
+              <p className={styles.tutorialDescription}>{tutorial.description}</p>
+              <Button kind="ghost" onClick={() => handleWalkthroughClick(index)}>
+                {t('walkthrough', 'Walkthrough')}
+              </Button>
+            </li>
+          ))}
+        </ul>
       </ModalBody>
     </React.Fragment>
   );

src/tutorial/styles.scss

@@ -26,11 +26,5 @@
       @include type.type-style('body-compact-01');
     }
 
-    .walkthrough {
-      margin-bottom: spacing.$spacing-03;
-      margin-top: spacing.$spacing-03;
-      color: $color-blue-60-2;
-      @include type.type-style('body-compact-02');
-    }
   }
 }