From 95786240ce63722ab27ba6a20996ac3f6ff28513 Mon Sep 17 00:00:00 2001
From: Marc Dumais <marc.dumais@ericsson.com>
Date: Mon, 11 Mar 2024 11:02:56 -0400
Subject: [PATCH] [CI] [playwright] Run UI tests on the browser app

Since we have this minimal UI test suite, let's also use it on the
browser example app.

Signed-off-by: Marc Dumais <marc.dumais@ericsson.com>
---
 .github/workflows/ci-cd.yml                   |  7 +++++-
 README.md                                     | 25 ++++++++++++++++---
 .../tests/trace-viewer-app.test.ts            |  1 +
 3 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/.github/workflows/ci-cd.yml b/.github/workflows/ci-cd.yml
index 5d8a0b6e..370a3d86 100644
--- a/.github/workflows/ci-cd.yml
+++ b/.github/workflows/ci-cd.yml
@@ -51,11 +51,16 @@ jobs:
       env:
         GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # https://github.com/microsoft/vscode-ripgrep/issues/9
 
-    - name: Test
+    - name: Run Unit Tests
       run: yarn test
       env:
         CI: true
 
+    - name: Run UI tests on Browser Example App
+      run: 
+        yarn start:browser &
+        yarn test:browser-app
+
   code-lint:
     name: Lint and check format
     runs-on: ubuntu-latest
diff --git a/README.md b/README.md
index f5e16d1e..04ccc9eb 100644
--- a/README.md
+++ b/README.md
@@ -333,6 +333,8 @@ If there is no notification, you can open the application directly in the **Remo
 
 ## Tests
 
+### Unit tests
+
 To run tests once, at the root of the project, run:
 
 ```bash
@@ -345,12 +347,29 @@ To keep tests running, use:
 yarn test --verbose --watch
 ```
 
-### Test coverage
+#### Test coverage
+
+The following computes the test coverage for the unit tests and command prints a coverage report to the terminal. As of now, it covers all typescript files of the project, including those that are not supposed to have tests. To access a more detailed coverage report, open this file in a browser after running the command below: `./packages/react-components/coverage/lcov-report/index.html`
+
+```bash
+yarn test --coverage
+```
+
+### UI Tests
+
+To run the UI test suite, first start the browser example application or optionally the Docker example application using external port 3000:
+
+```bash
+yarn browser start
+# or
+docker run --init -d -p 0.0.0.0:3000:4000 tte
+
+```
 
-The following command prints a coverage report to the terminal. As of now, it covers all typescript files of the project, including those that are not supposed to have tests.
+Then run the UI test suite like so:
 
 ```bash
-yarn test --coverage --collectCoverageFrom='src/**/*.ts'
+yarn test:browser-app
 ```
 
 ## About ADRs
diff --git a/playwright-tests/tests/trace-viewer-app.test.ts b/playwright-tests/tests/trace-viewer-app.test.ts
index 485446a4..c2906125 100644
--- a/playwright-tests/tests/trace-viewer-app.test.ts
+++ b/playwright-tests/tests/trace-viewer-app.test.ts
@@ -71,6 +71,7 @@ test.describe('My Trace Explorer View', () => {
     test('From closed, can be re-opened using the command palette', async () => {
         expect(await traceExplorer.isDisplayed()).toBe(false);
         await traceExplorer.open();
+        await traceExplorer.activate();
         expect(await traceExplorer.isDisplayed()).toBe(true);
     });
     test('Trace Server status is shown as not started (red)', async () => {