(chore) Bump form entry app to Angular 15 (#1466)

openmrs · Nov 20, 2023 · f094b92 · f094b92
1 parent ca33a3b
commit f094b92
Show file tree

Hide file tree

Showing 15 changed files with 2,270 additions and 6,336 deletions.
diff --git a/e2e/specs/conditions.spec.ts b/e2e/specs/conditions.spec.ts
@@ -11,10 +11,9 @@ test.beforeEach(async ({ api }) => {
 
 test('Record, edit and delete a condition', async ({ page, api }) => {
   const conditionsPage = new ConditionsPage(page);
-  const row = conditionsPage.conditionsTable().locator('tr');
-  const conditionCell = row.locator('td:first-child');
-  const dateCell = row.locator('td').nth(1);
-  const statusCell = row.locator('td').nth(2);
+  const table = conditionsPage.page.getByRole('table', { name: /conditions summary/i });
+  const headerRow = table.locator('thead > tr');
+  const dataRow = table.locator('tbody > tr');
 
   await test.step('When I go to the Conditions page', async () => {
     await conditionsPage.goTo(patient.uuid);
@@ -40,14 +39,19 @@ test('Record, edit and delete a condition', async ({ page, api }) => {
   });
 
   await test.step('And I should see the new condition added to the list', async () => {
-    await expect(conditionCell).toHaveText('Mental status change');
-    await expect(dateCell).toHaveText('Jul 2023');
-    await expect(statusCell).toHaveText('Active');
+    await expect(headerRow).toContainText(/condition/i);
+    await expect(headerRow).toContainText(/date of onset/i);
+    await expect(headerRow).toContainText(/status/i);
+    await expect(dataRow).toContainText(/mental status change/i);
+    await expect(dataRow).toContainText(/jul 2023/i);
+    await expect(dataRow).toContainText(/active/i);
   });
 
   await test.step('Then if I click on the overflow menu and click the `Edit` button', async () => {
-    await page.getByRole('button', { name: /edit or delete condition/i }).click();
-    await page.getByRole('menuitem', { name: /edit/i }).click();
+    await expect(conditionsPage.page.getByRole('button', { name: /options/i })).toBeVisible();
+    await conditionsPage.page.getByRole('button', { name: /options/i }).click();
+    await expect(conditionsPage.page.getByRole('menu', { name: /edit or delete condition/i })).toBeVisible();
+    await conditionsPage.page.getByRole('menuitem', { name: /edit/i }).click();
   });
 
   await test.step('And I edit the condition', async () => {
@@ -65,17 +69,25 @@ test('Record, edit and delete a condition', async ({ page, api }) => {
   });
 
   await test.step('And I should see the updated condition in the list', async () => {
-    await page.getByRole('button', { name: 'Show: Active Open menu' }).click();
-    await page.getByText('All').click();
-    await expect(conditionCell).toHaveText('Mental status change');
-    await expect(dateCell).toHaveText('Jul 2023');
-    await expect(statusCell).toHaveText('Inactive');
+    await page.getByRole('combobox', { name: /show/i }).click();
+    await page.getByText(/all/i).click();
+
+    await expect(dataRow).toContainText(/mental status change/i);
+    await expect(dataRow).toContainText(/jul 2023/i);
+    await expect(dataRow).toContainText(/inactive/i);
   });
 
   await test.step('And if I click the overflow menu and then click the `Delete` button', async () => {
-    await page.getByRole('button', { name: /edit or delete condition/i }).click();
-    await page.getByRole('menuitem', { name: 'Delete' }).click();
-    await page.getByRole('button', { name: 'danger Delete' }).click();
+    await expect(conditionsPage.page.getByRole('button', { name: /options/i })).toBeVisible();
+    await conditionsPage.page.getByRole('button', { name: /options/i }).click();
+    await expect(conditionsPage.page.getByRole('menu', { name: /edit or delete condition/i })).toBeVisible();
+    await conditionsPage.page.getByRole('menuitem', { name: /delete/i }).click();
+
+    await expect(conditionsPage.page.getByRole('heading', { name: /delete condition/i })).toBeVisible();
+    await expect(conditionsPage.page.getByText(/are you sure you want to delete this condition/i)).toBeVisible();
+    await expect(conditionsPage.page.getByRole('button', { name: /danger delete/i })).toBeVisible();
+
+    await page.getByRole('button', { name: /danger delete/i }).click();
   });
 
   await test.step('Then I should see a success notification', async () => {
@@ -84,6 +96,7 @@ test('Record, edit and delete a condition', async ({ page, api }) => {
 
   await test.step('And I should not see the deleted condition in the list', async () => {
     await expect(conditionsPage.page.getByText(/mental status change/i)).not.toBeVisible();
+    await expect(conditionsPage.page.getByText(/There are no conditions to display for this patient/i)).toBeVisible();
   });
 });
 

diff --git a/packages/esm-form-entry-app/angular.json b/packages/esm-form-entry-app/angular.json
@@ -24,8 +24,13 @@
 					"builder": "ngx-build-plus:browser",
 					"options": {
             "allowedCommonJsDependencies": [
+              "core-js",
+              "dompurify",
+              "html2canvas",
               "lodash",
               "moment",
+              "raf",
+              "rgbcolor",
               "zone.js"
             ],
 						"preserveSymlinks": true,

diff --git a/packages/esm-form-entry-app/package.json b/packages/esm-form-entry-app/package.json
@@ -35,29 +35,29 @@
     "url": "https://github.com/openmrs/openmrs-esm-patient-chart/issues"
   },
   "dependencies": {
-    "@angular-extensions/elements": "^14.1.0",
-    "@angular/animations": "^14.3.0",
-    "@angular/cdk": "^14.2.7",
-    "@angular/common": "^14.3.0",
-    "@angular/compiler": "^14.3.0",
-    "@angular/core": "^14.3.0",
-    "@angular/forms": "^14.3.0",
-    "@angular/platform-browser": "^14.3.0",
-    "@angular/platform-browser-dynamic": "^14.3.0",
-    "@angular/router": "^14.3.0",
+    "@angular-extensions/elements": "^15.3.0",
+    "@angular/animations": "^15.2.10",
+    "@angular/cdk": "^15.2.9",
+    "@angular/common": "^15.2.10",
+    "@angular/compiler": "^15.2.10",
+    "@angular/compiler-cli": "^15.2.10",
+    "@angular/core": "^15.2.10",
+    "@angular/forms": "^15.2.10",
+    "@angular/platform-browser": "^15.2.10",
+    "@angular/platform-browser-dynamic": "^15.2.10",
+    "@angular/router": "^15.2.10",
     "@carbon/styles": "~1.14.0",
-    "@ng-select/ng-select": "^8.3.0",
+    "@ng-select/ng-select": "^10.0.4",
     "@ngx-translate/core": "^13.0.0",
     "@openmrs/ngx-file-uploader": "next",
     "@openmrs/ngx-formentry": "next",
-    "hammerjs": "^2.0.8",
-    "jspdf": "^1.5.3",
+    "jspdf": "^2.5.1",
     "moment": "^2.29.4",
-    "ngx-bootstrap": "^6.0.0",
-    "ngx-webcam": "^0.3.2",
+    "ngx-bootstrap": "^10.3.0",
+    "ngx-webcam": "^0.4.1",
     "reflect-metadata": "^0.1.13",
-    "single-spa-angular": "^5.0.2",
-    "slick-carousel": "^1.6.0",
+    "single-spa-angular": "^8.1.1",
+    "slick-carousel": "^1.8.1",
     "systemjs-webpack-interop": "^2.3.7",
     "tree-model": "^1.0.5",
     "tslib": "^2.4.1",
@@ -70,13 +70,13 @@
     "single-spa": "5.x"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^14.2.13",
-    "@angular/cli": "^14.2.13",
-    "@angular/compiler-cli": "^14.3.0",
-    "@angular/language-service": "^14.3.0",
-    "@angular/localize": "^14.3.0",
+    "@angular-devkit/build-angular": "^15.2.10",
+    "@angular/cli": "^15.2.10",
+    "@angular/compiler-cli": "^15.2.10",
+    "@angular/language-service": "^15.2.10",
+    "@angular/localize": "^15.2.10",
     "@openmrs/esm-framework": "next",
-    "@types/jasmine": "~3.6.0",
+    "@types/jasmine": "~3.6.11",
     "@types/jasminewd2": "~2.0.3",
     "@types/webpack-env": "^1.18.2",
     "codelyzer": "^6.0.2",
@@ -88,11 +88,11 @@
     "karma-coverage-istanbul-reporter": "~3.0.3",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "^2.1.0",
-    "ngx-build-plus": "^14.0.0",
+    "ngx-build-plus": "^15.0.0",
     "openmrs": "next",
     "protractor": "~7.0.0",
     "rxjs": "~6.6.7",
     "style-loader": "2.x",
-    "webpack": "~5.76.3"
+    "webpack": "~5.89.0"
   }
 }
diff --git a/packages/esm-form-entry-app/src/index.ts b/packages/esm-form-entry-app/src/index.ts
@@ -1,13 +1,17 @@
-import 'zone.js/dist/zone';
 import 'reflect-metadata';
-import './styles.css';
+import 'zone.js';
 import { defineConfigSchema, messageOmrsServiceWorker } from '@openmrs/esm-framework';
-import { configSchema } from './config-schema';
 import { setupDynamicOfflineFormDataHandler, setupStaticDataOfflinePrecaching } from './app/offline/caching';
+import { configSchema } from './config-schema';
+import './styles.css';
 
 const moduleName = '@openmrs/esm-form-entry-app';
 
-export const importTranslation = require.context('../translations', false, /.json$/, 'lazy');
+export const importTranslation = import.meta.webpackContext('../translations', {
+  regExp: /\.json$/,
+  recursive: false,
+  mode: 'lazy',
+});
 
 export function startupApp() {
   setupStaticDataOfflinePrecaching();

diff --git a/packages/esm-form-entry-app/src/styles.css b/packages/esm-form-entry-app/src/styles.css
@@ -1,3 +1 @@
 /* You can add global styles to this file, and also import other style files */
-@import "~@openmrs/ngx-formentry/styles/ngx-formentry.css";
-@import "~@openmrs/ngx-formentry/styles/picker.min.css";
diff --git a/packages/esm-form-entry-app/src/test.ts b/packages/esm-form-entry-app/src/test.ts
@@ -4,11 +4,5 @@ import 'zone.js/testing';
 import { getTestBed } from '@angular/core/testing';
 import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
-
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
diff --git a/packages/esm-form-entry-app/tsconfig.app.json b/packages/esm-form-entry-app/tsconfig.app.json
@@ -7,22 +7,22 @@
       "node",
       "webpack-env",
     ],
-    "target": "es2020",
+    "target": "ES2022",
     "paths": {
       "@openmrs/esm-framework": [
         "../../node_modules/@openmrs/esm-framework/src/internal"
       ],
     }
   },
   "files": [
-    "src/index.ts"
+    "src/index.ts",
   ],
   "include": [
-    "src/**/*.d.ts"
+    "src/**/*.d.ts",
   ],
   "exclude": [
     "src/test.ts",
     "src/**/*.spec.ts",
-    "src/**/*.mock.ts"
+    "src/**/*.mock.ts",
   ]
 }
diff --git a/packages/esm-form-entry-app/tsconfig.json b/packages/esm-form-entry-app/tsconfig.json
@@ -12,16 +12,17 @@
     "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
-    "target": "es2020",
+    "target": "ES2022",
     "types": [
       "node",
-      "webpack-env",
+      "webpack-env"
     ],
     "lib": [
       "es2015",
       "dom"
     ],
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "useDefineForClassFields": false,
   },
   "angularCompilerOptions": {
     "disableTypeScriptVersionCheck": true,

diff --git a/...art-app/src/visit/visits-widget/past-visits-components/visits-table/visits-table.test.tsx b/...art-app/src/visit/visits-widget/past-visits-components/visits-table/visits-table.test.tsx
@@ -63,10 +63,12 @@ describe('EncounterList', () => {
 
     renderVisitsTable();
 
-    expect(screen.getByRole('table')).toBeInTheDocument();
+    await screen.findByRole('table');
+
+    const filterDropdown = screen.getByRole('combobox', { name: /filter by encounter type/i });
+
     const searchbox = screen.getByRole('searchbox', { name: /filter table/i });
     expect(searchbox).toBeInTheDocument();
-    expect(screen.getByRole('listbox', { name: /filter by encounter type/i }));
 
     const expectedColumnHeaders = [/date & time/, /visit type/, /encounter type/, /provider/];
     expectedColumnHeaders.forEach((header) => {
@@ -87,26 +89,24 @@ describe('EncounterList', () => {
     expect(screen.getAllByRole('button', { name: /expand current row/i }).length).toEqual(3);
 
     // filter table to show only `Admission` encounters
-    const encounterTypeFilter = screen.getByRole('button', { name: /filter by encounter type/i });
-
-    await waitFor(() => user.click(encounterTypeFilter));
-    await waitFor(() => user.click(screen.getByRole('option', { name: /Admission/i })));
+    await user.click(filterDropdown);
+    await user.click(screen.getByRole('option', { name: /Admission/i }));
 
     expect(screen.queryByRole('cell', { name: /visit note/i })).not.toBeInTheDocument();
     expect(screen.getByRole('cell', { name: /admission/i })).toBeInTheDocument();
 
     // show all encounter types
-    await waitFor(() => user.click(encounterTypeFilter));
-    await waitFor(() => user.click(screen.getByRole('option', { name: /all/i })));
+    await user.click(filterDropdown);
+    await user.click(screen.getByRole('option', { name: /all/i }));
 
     // filter table by typing in the searchbox
-    await waitFor(() => user.type(searchbox, 'Visit Note'));
+    await user.type(searchbox, 'Visit Note');
 
     expect(screen.getByText(/visit note/i)).toBeInTheDocument();
     expect(screen.queryByText(/consultation/i)).not.toBeInTheDocument();
 
-    await waitFor(() => user.clear(searchbox));
-    await waitFor(() => user.type(searchbox, 'triage'));
+    await user.clear(searchbox);
+    await user.type(searchbox, 'triage');
 
     expect(screen.getByText(/no encounters to display/i)).toBeInTheDocument();
     expect(screen.getByText(/check the filters above/i)).toBeInTheDocument();
@@ -131,12 +131,11 @@ describe('Delete Encounter', () => {
     expect(screen.getAllByRole('button', { name: /expand current row/i }).length).toEqual(3);
     const expandEncounterButton = screen.getAllByRole('button', { name: /expand current row/i });
 
-    await waitFor(() => user.click(expandEncounterButton[0]));
+    await user.click(expandEncounterButton[0]);
 
     expect(screen.getByRole('button', { name: /Delete this encounter/i })).toBeInTheDocument();
 
-    const deleteButton = screen.getByRole('button', { name: /Delete/i });
-    await waitFor(() => user.click(deleteButton));
+    await user.click(screen.getByRole('button', { name: /Delete/i }));
   });
 });
 

diff --git a/packages/esm-patient-common-lib/src/siderail-nav-button/siderail-nav-button.component.tsx b/packages/esm-patient-common-lib/src/siderail-nav-button/siderail-nav-button.component.tsx
@@ -7,7 +7,7 @@ import styles from './siderail-nav-button.scss';
 
 interface SiderailNavButtonProps {
   name: string;
-  getIcon: (props: Object) => JSX.Element;
+  getIcon: (props: object) => JSX.Element;
   label: string;
   iconDescription: string;
   handler: () => void;

diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-action-menu.component.tsx b/packages/esm-patient-conditions-app/src/conditions/conditions-action-menu.component.tsx
@@ -35,7 +35,7 @@ export const ConditionsActionMenu = ({ condition, patientUuid }: conditionsActio
 
   return (
     <Layer className={styles.layer}>
-      <OverflowMenu ariaLabel="Edit or delete condition" size={isTablet ? 'lg' : 'sm'} flipped>
+      <OverflowMenu aria-label="Edit or delete condition" size={isTablet ? 'lg' : 'sm'} flipped>
         <OverflowMenuItem
           className={styles.menuItem}
           id="editCondition"

diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-detailed-summary.component.tsx b/packages/esm-patient-conditions-app/src/conditions/conditions-detailed-summary.component.tsx
@@ -138,7 +138,7 @@ function ConditionsDetailedSummary({ patient }) {
           {({ rows, headers, getHeaderProps, getTableProps, getRowProps }) => (
             <>
               <TableContainer>
-                <Table {...getTableProps()}>
+                <Table aria-label="conditions summary" {...getTableProps()}>
                   <TableHead>
                     <TableRow>
                       {headers.map((header) => (

diff --git a/packages/esm-patient-conditions-app/src/conditions/conditions-overview.component.tsx b/packages/esm-patient-conditions-app/src/conditions/conditions-overview.component.tsx
@@ -135,6 +135,7 @@ const ConditionsOverview: React.FC<ConditionsOverviewProps> = ({ patientUuid })
           </div>
         </CardHeader>
         <DataTable
+          aria-label="conditions overview"
           rows={tableRows}
           headers={tableHeaders}
           isSortable

diff --git a/...ages/esm-patient-medications-app/src/add-drug-order/drug-search/drug-search.component.tsx b/...ages/esm-patient-medications-app/src/add-drug-order/drug-search/drug-search.component.tsx
@@ -31,7 +31,7 @@ export default function DrugSearch({ openOrderForm }: DrugSearchProps) {
       <div className={styles.searchPopupContainer}>
         <ResponsiveWrapper isTablet={isTablet}>
           <Search
-            autofocus
+            autoFocus
             size="lg"
             placeholder={t('searchFieldPlaceholder', 'Search for a drug or orderset (e.g. "Aspirin")')}
             labelText={t('searchFieldPlaceholder', 'Search for a drug or orderset (e.g. "Aspirin")')}