'Codeless' UI test generation

- Add: Makefile commands to use 'playright codegen'
- Add: New test file for N3C recommended (WIP)
- Add: frontend/tests/utils.js (refactored func into here from another file)

frontend/tests/playwright/comparison.test.js → frontend/tests/playwright/comparison.todo.js

@@ -14,6 +14,7 @@ import asthmaGraphData from '../test-data/asthmaExampleGraphData.json';
 // diagramCase: last copied from test_graph.py test_get_missing_in_between_nodes(): 2024/02/11
 // edges only. see https://github.com/jhu-bids/TermHub/blob/develop/docs/graph.md
 import _diagramCase from '../test-data/diagramCase.json';
+import convertToArrayOfStrings from './utils';
 let diagramCase = convertToArrayOfStrings(_diagramCase);
 
 
@@ -25,12 +26,12 @@ testCases = [singleSmallTestData, ];
 let timeout = 20000;
 
 for (const envName in selectedConfigs) {
+  const appUrl =
+      deploymentConfigs[envName] +
+      '/cset-comparison?' +
+      codeset_ids.map(d => `codeset_ids=${d}`).join('&');
   for (const testData of testCases) {
     const {test_name, codeset_ids, graphData, roots, leaves, firstRow, } = testData;
-    const appUrl =
-        deploymentConfigs[envName] +
-        '/cset-comparison?' +
-        codeset_ids.map(d => `codeset_ids=${d}`).join('&');
 
     test.describe(`On ${envName} with case ${test_name}`, () => {
       test.describe(`GraphOptions and GraphContainer Tests`, async () => {
@@ -117,10 +118,6 @@ for (const envName in selectedConfigs) {
           const url = new URL(page.url());
           return url.pathname === 'cset-comparison';
         }).toBeTruthy();
-
-    /*
-
-    */
       });
     });
 
@@ -197,17 +194,3 @@ for (const envName in selectedConfigs) {
      */
   }
 }
-
-// UTILS
-/* Used to convert input to be same as graphology serialization (all strings). */
-function convertToArrayOfStrings(matrix) {
-  var stringMatrix = [];
-  for (var i = 0; i < matrix.length; i++) {
-    var stringRow = [];
-    for (var j = 0; j < matrix[i].length; j++) {
-      stringRow.push(matrix[i][j].toString());
-    }
-    stringMatrix.push(stringRow);
-  }
-  return stringMatrix;
-}

frontend/tests/playwright/n3c-recommended.todo.js

@@ -0,0 +1,42 @@
+import {selectedConfigs, deploymentConfigs} from "./setup-test-environments";
+// const { test, expect } = require('@playwright/test');
+import {test, expect, } from '@playwright/test';
+
+// Tests ---------------------------------------------------------------------------------------------------------------
+let timeout = 20000;
+
+// todo temp: toggle comment for development
+// for (const envName of ['dev']) {
+for (const envName in selectedConfigs) {
+
+  const appUrl = deploymentConfigs[envName];
+
+  test('N3C Recommended', async ({ page }) => {
+    await page.goto(appUrl);
+    await page.goto(appUrl + '/OMOPConceptSets');
+
+    await page.getByTestId('Help / About').click();
+    await page.getByRole('link', { name: 'N3C Recommended', exact: true }).click();
+    // TODO: make some assertions
+  });
+
+  test('N3C Recommended comparison', async ({ page }) => {
+    await page.goto(appUrl);
+    await page.goto(appUrl + '/OMOPConceptSets');
+
+    await page.getByTestId('Help / About').click();
+    await page.getByRole('link', { name: 'N3C Recommended comparison' }).click();
+    // todo: maybe try to dynamically select whatever row it is that has changes, rather than static case
+    await page.getByRole('row', { name: 'Expand Row CARDIOMYOPATHIES' }).getByTestId('expander-button-undefined').click();
+    // TODO: how to select the table dynamically? I want to assert that it shows rows are removed an added
+    //  - but the selector id is really weird: <div class="sc-jXbUNg cyUjzM rdt_ExpanderRow">. has another <div>, then
+    //    another <p>, then a <table id="n3ccompdiff">
+    //    Ahhh! We need unique IDs. It should be something like "n3ccompdiff-removed-CARDIOMYOPATHIES" (or whatever the
+    //    cset ID for that is).
+    // TODO: After solving the above, assert rows added/removed
+
+    // TODO: Next, find some way to dynamically select the hyperink in the rightmost column
+    // TODO: What do I expect to happen next? it says "downloading..."
+    await page.getByRole('link', { name: '12 removed , 12 added' }).click();
+  });
+}

frontend/tests/utils.js

@@ -0,0 +1,13 @@
+// UTILS
+/* Used to convert input to be same as graphology serialization (all strings). */
+function convertToArrayOfStrings(matrix) {
+  var stringMatrix = [];
+  for (var i = 0; i < matrix.length; i++) {
+    var stringRow = [];
+    for (var j = 0; j < matrix[i].length; j++) {
+      stringRow.push(matrix[i][j].toString());
+    }
+    stringMatrix.push(stringRow);
+  }
+  return stringMatrix;
+}

makefile

@@ -76,6 +76,20 @@ test-frontend-e2e-dev:
 test-frontend-e2e-prod:
 	(cd frontend; \
 	ENVIRONMENTS=prod ${TEST_FRONTEND_CMD})
+## - codegen: "codeless" Playwright generation of UI tests by recording browser interaction
+##   You don't need to use 'local' necessarily if you want to write the tests for local. Any of these commands can work
+##   to write tests that are theoretically compatible in any environment (as long as the UI is the same). The only
+##   difference is that when the test code is written, the first line will hard-code the URL to that environment. So
+##   after recording, the code should be repuprosed in the style of frontend/tests/.
+codegen-local:
+	(cd frontend; \
+	yarn playwright codegen https://localhost:3000)
+codegen-dev:
+	(cd frontend; \
+	yarn playwright codegen https://icy-ground-0416a040f.2.azurestaticapps.net)
+codegen-prod:
+	(cd frontend; \
+	yarn playwright codegen https://purple-plant-0f4023d0f.2.azurestaticapps.net)
 
 # QC
 fetch-missing-csets: