@openmrs/esm-user-onboarding-app 4.0.1-pre.25 → 4.0.1-pre.253

package/e2e/README.md

@@ -1,7 +1,7 @@
 # E2E Tests
 
 This directory contains an E2E test suite using the [Playwright](https://playwright.dev)
-framework. 
+framework.
 
 ## Getting Started
 
@@ -12,6 +12,7 @@ Once everything is set up, make sure the dev server is running by using:
 ```sh
 yarn start --sources 'packages/esm-*-app/'
 ```
+
 Then, in a separate terminal, run:
 
 ```sh
@@ -28,15 +29,16 @@ export E2E_BASE_URL=https://dev3.openmrs.org/openmrs
 # Run all e2e tests:
 yarn test-e2e --headed
 ```
+
 To run a specific test by title:
+
 ```sh
 yarn test-e2e --headed -g "title of the test"
 ```
-Check [this documentation](https://playwright.dev/docs/running-tests#command-line) for more running options.  
 
-It is also highly recommended to install the companion VS Code extension:
-https://playwright.dev/docs/getting-started-vscode
+Check [this documentation](https://playwright.dev/docs/running-tests#command-line) for more running options.  
 
+It is also highly recommended to install the companion [VS Code extension](https://playwright.dev/docs/getting-started-vscode).
 
 ## Writing New Tests
 
@@ -44,7 +46,7 @@ In general, it is recommended to read through the official [Playwright docs](htt
 before writing new test cases. The project uses the official Playwright test runner and,
 generally, follows a very simple project structure:
 
-```
+```sh
 e2e
 |__ commands
 |   ^ Contains "commands" (simple reusable functions) that can be used in test cases/specs,
@@ -92,14 +94,14 @@ This is very much underdeveloped/WIP. At the moment, there exists a (git-shared)
 file which can be used for configuring certain test attributes. This is most likely
 about to change in the future. Stay tuned for updates!
 
-
 ## Github Action integration
+
 The e2e.yml workflow is made up of two jobs: one for running on pull requests (PRs) and
 one for running on commits.
 
 1. When running on PRs, the workflow will start the dev server, use dev3.openmrs.org as the backend, 
 and run tests only on chromium. This is done in order to quickly provide feedback to the developer. 
-The tests are designed to generate their own data and clean up after themselves once they are finished. 
+The tests are designed to generate their own data and clean up after themselves once they are finished.
 This ensures that the tests will have minimum effect from changes made to dev3 by other developers. 
 In the future, we plan to use a docker container to run the tests in an isolated environment once we 
 figure out a way to spin up the container within a small amount of time.

package/e2e/core/test.ts

@@ -1,4 +1,4 @@
-import { APIRequestContext, Page, test as base } from '@playwright/test';
+import { type APIRequestContext, type Page, test as base } from '@playwright/test';
 import { api } from '../fixtures';
 
 // This file sets up our custom test harness using the custom fixtures.

package/e2e/fixtures/api.ts

@@ -1,4 +1,4 @@
-import { APIRequestContext, PlaywrightWorkerArgs, WorkerFixture } from '@playwright/test';
+import type { APIRequestContext, PlaywrightWorkerArgs, WorkerFixture } from '@playwright/test';
 
 /**
  * A fixture which initializes an [`APIRequestContext`](https://playwright.dev/docs/api/class-apirequestcontext)

package/e2e/pages/home-page.ts

@@ -1,9 +1,9 @@
-import { Page } from '@playwright/test';
+import type { Page } from '@playwright/test';
 
 export class HomePage {
   constructor(readonly page: Page) {}
 
   async goto() {
-    await this.page.goto(`home`);
+    await this.page.goto('/openmrs/spa/home/service-queues');
   }
 }

package/e2e/specs/onboarding-test.spec.ts

@@ -1,6 +1,5 @@
-import { test } from '@playwright/test';
+import { test, expect } from '@playwright/test';
 import { HomePage } from '../pages';
-import { expect } from '@playwright/test';
 
 test('Basic Walkthrough', async ({ page }) => {
   const homePage = new HomePage(page);
@@ -10,7 +9,10 @@ test('Basic Walkthrough', async ({ page }) => {
   });
 
   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 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 () => {
@@ -25,11 +27,7 @@ test('Basic Walkthrough', async ({ page }) => {
   });
 
   await test.step('And I click on the Basic Overview Tutorial', async () => {
-    await page
-      .locator('li')
-      .filter({ hasText: 'Basic Overview' })
-      .locator('a', { hasText: 'Walkthrough' })
-      .click();
+    await page.locator('li').filter({ hasText: 'Basic Overview' }).locator('a', { hasText: 'Walkthrough' }).click();
   });
 
   await test.step('Then I should see the first Joyride tooltip', async () => {
@@ -49,6 +47,7 @@ test('Basic Walkthrough', async ({ page }) => {
       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();
   });
@@ -58,6 +57,7 @@ test('Basic Walkthrough', async ({ page }) => {
       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();
   });
@@ -67,25 +67,6 @@ test('Basic Walkthrough', async ({ page }) => {
       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();

package/jest.config.js

@@ -4,6 +4,7 @@
 const path = require('path');
 
 module.exports = {
+  clearMocks: true,
   collectCoverageFrom: [
     '**/src/**/*.component.tsx',
     '!**/node_modules/**',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openmrs/esm-user-onboarding-app",
-  "version": "4.0.1-pre.25",
+  "version": "4.0.1-pre.253",
   "license": "MPL-2.0",
   "description": "An OpenMRS microfrontend for user onboarding walkthroughs",
   "browser": "dist/openmrs-esm-user-onboarding-app.js",
@@ -48,7 +48,7 @@
     "@openmrs/esm-framework": "*",
     "dayjs": "1.x",
     "react": "18.x",
-    "react-i18next": "11.x",
+    "react-i18next": "16.x",
     "react-router-dom": "6.x",
     "rxjs": "6.x"
   },
@@ -64,8 +64,8 @@
     "@testing-library/react": "^15.0.6",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.12",
-    "@types/react": "^18.2.14",
-    "@types/react-dom": "^18.2.6",
+    "@types/react": "^18.3.21",
+    "@types/react-dom": "^18.3.0",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/webpack-env": "^1.18.1",
@@ -79,8 +79,8 @@
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "husky": "^8.0.3",
-    "i18next": "^23.2.8",
-    "i18next-parser": "^8.0.0",
+    "i18next": "^25.0.0",
+    "i18next-parser": "^9.3.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
@@ -88,14 +88,14 @@
     "lint-staged": "^15.2.2",
     "openmrs": "next",
     "prettier": "^2.8.8",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-i18next": "^11.18.6",
     "react-router-dom": "^6.14.1",
     "rxjs": "^6.6.7",
     "swc-loader": "^0.2.3",
     "turbo": "^2.5.2",
-    "typescript": "^4.9.5",
+    "typescript": "^5.0.0",
     "webpack": "^5.99.9",
     "webpack-cli": "^6.0.1"
   },
@@ -103,6 +103,6 @@
     "packages/**/src/**/*.{ts,tsx}": "eslint --cache --fix --max-warnings 0",
     "*.{css,scss,ts,tsx}": "prettier --write --list-different"
   },
-  "packageManager": "yarn@4.9.1",
+  "packageManager": "yarn@4.10.3",
   "stableVersion": "4.0.0"
 }

package/src/config-schema.ts

@@ -12,11 +12,14 @@ export const configSchema = {
     _default: [
       {
         title: 'Basic Overview',
-        description: 'This guide provides a quick look at the essential components that shape the layout and user experience of our homepage.',
-        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:
+          'This guide provides a quick look at the essential components that shape the layout and user experience of our homepage.',
+        steps: [
+          {
+            target: '[aria-label="OpenMRS"]',
+            content:
+              'Welcome to OpenMRS! This is the main dashboard where you can navigate to various features of the system.',
+          },
           {
             target: '[name="SearchPatientIcon"]',
             content: 'This is the search icon. Use it to find patients in the system quickly.',
@@ -29,14 +32,6 @@ export const configSchema = {
             target: '[name="User"]',
             content: 'The user icon. Click here to change your user preferences and settings.',
           },
-          {
-            target: '[data-extension-id="active-visits-widget"]',
-            content: 'This table displays active visits. Here you can see all the ongoing patient visits.',
-          },
-          {
-            target: '[data-extension-id="home-appointments"]',
-            content: 'This table shows appointments. View and manage patient appointments from this section.',
-          },
         ],
       },
       {
@@ -83,31 +78,28 @@ export const configSchema = {
           'Patient chart is the main point of interaction between healthcare professionals and patient data, where you can manage everything related to a single patient.',
         steps: [
           {
-            target: '[data-testid="searchPatientIcon"]',
+            target: '[data-tutorial-target="search-patient-icon"]',
             content:
               'To access the patient chart, first, you need to select a patient. To start, click here to open the search box so that we can search for a patient.',
             spotlightClicks: true,
             hideNextButton: true,
             data: {
-              autoNextOn: '[data-testid="patientSearchBar"]',
+              autoNextOn: '[data-tutorial-target="patient-search-bar"]',
             },
           },
           {
-            target: '[data-testid="patientSearchBar"]',
+            target: '[data-tutorial-target="patient-search-bar"]',
             content:
               'Now, enter the name or the ID of the patient here. Some example patient names that you can search for are: John, Smith, Mary.',
-            hideNextButton: true,
+            hideNextButton: false,
             hideBackButton: true,
             spotlightClicks: true,
-            data: {
-              autoNextOn: '[data-testid="floatingSearchResultsContainer"]',
-            },
           },
           {
-            target: '[data-testid="floatingSearchResultsContainer"]',
+            target: '[data-tutorial-target="floating-search-results-container"]',
             content: 'Click on the patient you want to go to their patient chart.',
             spotlightClicks: true,
-            disableOverlay : true,
+            disableOverlay: false,
             placement: 'left',
             hideNextButton: true,
             hideBackButton: true,
@@ -118,7 +110,8 @@ export const configSchema = {
           {
             target: 'body',
             title: 'Patient Chart',
-            content: "Welcome to the Patient Chart View! Here, you can quickly see everything about your patient's health history, visits, medications, allergies, and test results—all in one place. It's designed to help you provide the best care efficiently.",
+            content:
+              "Welcome to the Patient Chart View! Here, you can quickly see everything about your patient's health history, visits, medications, allergies, and test results—all in one place. It's designed to help you provide the best care efficiently.",
             spotlightClicks: true,
             hideBackButton: true,
             placement: 'center',
@@ -161,32 +154,38 @@ export const configSchema = {
       },
       {
         title: 'Finding a Patient',
-        description: 'Learn how to find a patient in the system using basic and advanced search features, including the use of filters to refine results.',
+        description:
+          'Learn how to find a patient in the system using basic and advanced search features, including the use of filters to refine results.',
         steps: [
           {
-            target: '[data-testid="searchPatientIcon"]',
+            target: '[data-tutorial-target="search-patient-icon"]',
             content: 'Click on the search icon to open the search box so that we can search for a patient.',
             spotlightClicks: true,
             hideNextButton: true,
             data: {
-              autoNextOn: '[data-testid="patientSearchBar"]',
+              autoNextOn: '[data-tutorial-target="patient-search-bar"]',
             },
           },
           {
-            target: '[data-testid="patientSearchBar"]',
+            target: '[data-tutorial-target="patient-search-bar"]',
             content:
               'Now, enter the name of the patient here. If you know the patient ID, you can use that as well. You will see the results if the patient you entered exists in the system. Some example patient names that you can search for are: John, Smith, Mary.',
-            hideNextButton: true,
+            hideNextButton: false,
             hideBackButton: true,
             spotlightClicks: true,
-            data: {
-              autoNextOn: '[data-testid="floatingSearchResultsContainer"]',
-            },
+          },
+          {
+            target: '[data-tutorial-target="floating-search-results-container"]',
+            content: 'The search container shows only the top results and if they are not the patient you want, or you cannot find the patient by name or the patient ID, you can use advanced search tools to narrow down your search. Click next to learn more about the advanced search options.',
+            spotlightClicks: false,
+            disableOverlay: false,
+            hideNextButton: false,
+            hideBackButton: true,
           },
           {
             target: 'button[type="submit"]',
             content:
-              'If there are a lot of patients in the system, you may need additional fields to search other than the name. Also, the patient you are looking for may not be displayed in the top results if there are multiple patients with the same name. In these scenarios, you can click here to open the advanced search.',
+              'The advanced search provides additional search fields like date of birth and phone number to help find the right patient, which comes in helpful in scenarios where multiple patients have the same name. Click here to access the advanced search tool.',
             spotlightClicks: true,
             placement: 'bottom',
             hideNextButton: true,
@@ -210,7 +209,7 @@ export const configSchema = {
             placement: 'right',
           },
           {
-            target: '[data-testid="closeSearchIcon"]',
+            target: '[data-tutorial-target="close-search-icon"]',
             content: 'That’s the end of the tutorial. Click on the close button to go back to the home page.',
             spotlightClicks: true,
             placement: 'bottom',
@@ -234,18 +233,7 @@ export const configSchema = {
             spotlightClicks: true,
             hideNextButton: true,
             data: {
-              autoNextOn: '[title="All lists"]',
-            },
-          },
-          {
-            target: '[title="All lists"]',
-            content: 'Click here to see all the patient lists we have in the system.',
-            hideNextButton: true,
-            hideBackButton: true,
-            spotlightClicks: true,
-            spotlightPadding: 20,
-            data: {
-              autoNextOn: '[data-testid="patientListsTable"]',
+              autoNextOn: '[data-openmrs-role="New List"]',
             },
           },
           {
@@ -256,11 +244,11 @@ export const configSchema = {
             hideNextButton: true,
             hideBackButton: true,
             data: {
-              autoNextOn: '[data-openmrs-role="Patient List Form"]',
+              autoNextOn: '[data-tutorial-target="patient-list-form"]',
             },
           },
           {
-            target: '[data-openmrs-role="Patient List Form"]',
+            target: '[data-tutorial-target="patient-list-form"]',
             content: 'Enter the necessary details and click on "Create List" to create the list.',
             spotlightClicks: true,
             hideBackButton: true,
@@ -271,7 +259,18 @@ export const configSchema = {
             },
           },
           {
-            target: '[data-testid="patientListsTable"]',
+            target: '[data-tutorial-target="all-patient-lists-tab"]',
+            content: 'Click here to see all the patient lists we have in the system.',
+            hideNextButton: true,
+            hideBackButton: true,
+            spotlightClicks: true,
+            spotlightPadding: 20,
+            data: {
+              autoNextOn: '[data-tutorial-target="patient-lists-table"]',
+            },
+          },
+          {
+            target: '[data-tutorial-target="patient-lists-table"]', 
             content:
               'Great! We have successfully created a new patient list. Find and click on the patient list you created to proceed. You can use the search option at the top right if needed.',
             disableOverlay: true,
@@ -285,38 +284,34 @@ export const configSchema = {
           },
           {
             target: '[data-openmrs-role="Patient Empty tile"]',
-            content: "You can see the patient list is empty since we haven't added any patients to the list yet.",
+            content: "You can see the patient list is empty since we haven't added any patients to the list yet. Click on Next to Continue",
             hideBackButton: true,
             disableOverlay: true,
           },
           {
-            target: '[data-testid="searchPatientIcon"]',
+            target: '[data-tutorial-target="search-patient-icon"]',
             content:
               'To add a patient to the list, we have to go to the respective patient’s chart view. Click here to open the search box so that we can search for a patient.',
             spotlightClicks: true,
             hideNextButton: true,
             hideBackButton: true,
             data: {
-              autoNextOn: '[data-testid="patientSearchBar"]',
+              autoNextOn: '[data-tutorial-target="patient-search-bar"]',
             },
           },
           {
-            target: '[data-testid="patientSearchBar"]',
+            target: '[data-tutorial-target="patient-search-bar"]',
             content:
               'Now, enter the name or the ID of the patient here. Some example patient names that you can search for are: John, Smith, Mary.',
-            hideNextButton: true,
+            hideNextButton: false,
             hideBackButton: true,
             spotlightClicks: true,
-            data: {
-              autoNextOn: '[data-testid="floatingSearchResultsContainer"]',
-            },
           },
           {
-            target: '[data-testid="floatingSearchResultsContainer"]',
+            target: '[data-tutorial-target="floating-search-results-container"]',
             content:
               'Click on the patient to go to the patient chart, where we can add the patient to our newly created list.',
             spotlightClicks: true,
-            disableOverlay: true,
             placement: 'left',
             hideNextButton: true,
             hideBackButton: true,
@@ -326,9 +321,9 @@ export const configSchema = {
           },
           {
             target: '#custom-actions-overflow-menu-trigger',
-            content: 'Click on "Action" and select "Add to List" from the drop-down menu.',
+            content: 'Click on "Actions" and select "Add to List" from the drop-down menu.',
             disableOverlay: true,
-            placement: 'left',
+            placement: 'bottom',
             spotlightClicks: true,
             hideBackButton: true,
             hideNextButton: true,
@@ -346,64 +341,36 @@ export const configSchema = {
             hideNextButton: true,
             placement: 'left',
             data: {
-              autoNextOn: '.omrs-snackbars-container div',
+              autoNextOn: '.omrs-snackbars-container div', 
             },
-          },
-          {
-            target: '[aria-label="Close"]',
-            content:
-              "We have successfully added a patient to the patient list. Let's go back to the patient lists by closing the patient chart by clicking here.",
-            spotlightClicks: true,
-            hideBackButton: true,
-            hideNextButton: true,
-            data: {
-              autoNextOn: '[data-testid="patientsTable"]',
-            },
-          },
-          {
-            target: '[data-testid="patientsTable"]',
-            title: 'Patients List',
-            content: 'You can see the added patient on the list of patients.',
-            spotlightClicks: true,
-            hideBackButton: true,
-          },
-          {
-            target: 'body',
-            content:
-              'Congrats! You have now completed the tutorial on creating patient lists and adding patients to the lists.',
-            placement: 'center',
-            hideBackButton: true,
-          },
+          }
         ],
       },
       {
         title: 'Recording Vitals',
         description:
-          'Learn how to record a patient\'s vitals and biometric data, and review the records through the patient chart.',
+          "Learn how to record a patient's vitals and biometric data, and review the records through the patient chart.",
         steps: [
           {
-            target: '[data-testid="searchPatientIcon"]',
+            target: '[data-tutorial-target="search-patient-icon"]',
             content:
               'To capture the vitals of a patient, you need to start by going to the patient chart view of the respective patient. Click on the search icon to open the search box so that you can search for the patient.',
             spotlightClicks: true,
             hideNextButton: true,
             data: {
-               autoNextOn: '[data-testid="patientSearchBar"]'
-              },
+              autoNextOn: '[data-tutorial-target="patient-search-bar"]',
+            },
           },
           {
-            target: '[data-testid="patientSearchBar"]',
+            target: '[data-tutorial-target="patient-search-bar"]',
             content:
               'Now, enter the name or the ID of the patient here. Some example patient names you can search for are: John, Smith, Mary.',
-            hideNextButton: true,
+            hideNextButton: false,
             hideBackButton: true,
             spotlightClicks: true,
-            data: {
-              autoNextOn: '[data-testid="floatingSearchResultsContainer"]'
-            },
           },
           {
-            target: '[data-testid="floatingSearchResultsContainer"]',
+            target: '[data-tutorial-target="floating-search-results-container"]',
             content: 'Click on the patient to go to their patient chart.',
             placement: 'left',
             spotlightClicks: true,
@@ -436,7 +403,7 @@ export const configSchema = {
             hideBackButton: true,
             hideNextButton: true,
             data: {
-              autoNextOn: '.omrs-snackbars-container div'
+              autoNextOn: '.omrs-snackbars-container div',
             },
           },
           {
@@ -452,7 +419,7 @@ export const configSchema = {
             hideNextButton: true,
             spotlightClicks: true,
             data: {
-              autoNextOn: '[data-extension-slot-name="patient-chart-vitals-biometrics-dashboard-slot"]'
+              autoNextOn: '[data-extension-slot-name="patient-chart-vitals-biometrics-dashboard-slot"]',
             },
           },
           {
@@ -476,37 +443,34 @@ export const configSchema = {
       },
       {
         title: 'Starting a Patient Visit',
-        description:
-          'Learn how to start a visit for a patient.',
+        description: 'Learn how to start a visit for a patient.',
         steps: [
           {
-            target: '[data-testid="searchPatientIcon"]',
+            target: '[data-tutorial-target="search-patient-icon"]',
             content:
               'To fill out any forms or encounters of a patient, you have to start a visit. To start a patient visit, first you need to go to the patient chart view of the respective patient. Click on the search icon to open the search box so that we can search for the patient. ',
             disableBeacon: true,
             spotlightClicks: true,
             hideNextButton: true,
             data: {
-              autoNextOn: '[data-testid="patientSearchBar"]',
+              autoNextOn: '[data-tutorial-target="patient-search-bar"]',
             },
           },
           {
-            target: '[data-testid="patientSearchBar"]',
+            target: '[data-tutorial-target="patient-search-bar"]',
             content:
               'Now, enter the name or the ID of the patient here. Some example patient names that you can search for are: John, Smith, Mary.',
-            hideNextButton: true,
+            hideNextButton: false,
             hideBackButton: true,
             spotlightClicks: true,
-            data: {
-              autoNextOn: '[data-testid="floatingSearchResultsContainer"]',
-            },
+
           },
           {
-            target: '[data-testid="floatingSearchResultsContainer"]',
+            target: '[data-tutorial-target="floating-search-results-container"]',
             content:
               'Click on the patient whose chart you want to access. Make sure to select a patient without the "Active visit" label, as we will start a visit in the next steps of the tutorial.',
             spotlightClicks: true,
-            disableOverlay: true,
+            disableOverlay: false,
             placement: 'left',
             hideNextButton: true,
             hideBackButton: true,
@@ -608,7 +572,7 @@ export const configSchema = {
               'Great job! You found the allergies section! This is the end of the tutorial. Feel free to explore the system on your own or check out the other tutorials.',
           },
         ],
-      }
+      },
     ],
   },
 };
@@ -623,7 +587,7 @@ export type Config = {
       title: string;
       content: string;
       data?: {
-        autoNextOn?: boolean;
+        autoNextOn?: string;
       };
     }[];
   }[];

package/src/index.ts

@@ -1,6 +1,6 @@
 import { getAsyncLifecycle, defineConfigSchema, getSyncLifecycle } from '@openmrs/esm-framework';
 import { configSchema } from './config-schema';
-import Tutorial from './tutorial/tutorial';
+import Tutorial from './tutorial/tutorial.component';
 
 const moduleName = '@openmrs/esm-user-onboarding-app';