[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 <[email protected]>

.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

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

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 () => {