Simplify Playwright test config and document how to run locally (#374)

.env.example

@@ -1,5 +1,17 @@
 # This .env file will be used by default by docker-compose.yml
+# It is also used to set the environment for running tests.
 # To get started, copy this file to .env
+
+# REACT_APP_ environment variables are inlined at build time into the bundled
+# JavaScript served to the client. Do not store sensitive info in
+# REACT_APP_-prefixed variables.
+#
+# Note: Potential source of confusion. Think of "REACT_APP_" as a variable
+# namespace. For example, REACT_APP_LOGIN_PAGE_URL does not point to a login
+# page in this repo, despite the fact that this repo (conda-store-ui) is a React
+# app; it points instead to the server (conda-store) login page, just like
+# REACT_APP_API_URL points to the server API, which is not contained in this
+# repo.
 REACT_APP_API_URL=http://localhost:8080/conda-store/
 REACT_APP_AUTH_METHOD=cookie
 REACT_APP_LOGIN_PAGE_URL=http://localhost:8080/conda-store/login?next=
@@ -8,6 +20,7 @@ REACT_APP_STYLE_TYPE=green-accent
 REACT_APP_CONTEXT=webapp
 REACT_APP_SHOW_AUTH_BUTTON=true
 REACT_APP_LOGOUT_PAGE_URL=http://localhost:8080/conda-store/logout?next=/
+
 # If you want to use a version other than the pinned conda-store-server version
 # Set the CONDA_STORE_SERVER_VERSION to the package version that you want
 # CONDA_STORE_SERVER_VERSION="2023.10.1"

.github/workflows/test.yml

@@ -1,21 +1,5 @@
 name: Playwright Tests
 
-env:
-  CONDA_STORE_SERVER_PORT: 8000
-  CONDA_STORE_BASE_URL: http://localhost:8000
-  CONDA_STORE_AUTH: basic
-  CONDA_STORE_USERNAME: username
-  CONDA_STORE_PASSWORD: password
-  REACT_APP_API_URL: http://localhost:8080/conda-store/
-  REACT_APP_AUTH_METHOD: cookie
-  REACT_APP_LOGIN_PAGE_URL: http://localhost:8080/conda-store/login?next=
-  REACT_APP_AUTH_TOKEN:
-  REACT_APP_STYLE_TYPE: green-accent
-  REACT_APP_CONTEXT: webapp
-  REACT_APP_SHOW_AUTH_BUTTON: true
-  REACT_APP_LOGOUT_PAGE_URL: http://localhost:8080/conda-store/logout?next=/
-  YARN_ENABLE_IMMUTABLE_INSTALLS: false
-
 on:
   pull_request:
   push:
@@ -47,6 +31,10 @@ jobs:
           environment-file: environment_dev.yml
           auto-activate-base: false
 
+      - name: "Set up environment variables"
+        run: |
+          cp .env.example .env
+
       - name: "Install Dependencies"
         run: |
           sudo apt install wait-for-it -y

README.md

@@ -83,6 +83,74 @@ To create a new version of this package, follow these steps:
 
 [^github-activity]: If you wish, use [`github-activity` to generate a Changelog](https://github.com/choldgraf/github-activity), e.g. `github-activity conda-incubator/conda-store-ui --since 2023.9.1 --until 2023.10.1 --auth <GH personal access token>`
 
+### Running Tests
+
+This repo contains two types of tests: Jest and Playwright
+
+#### Jest tests
+
+To run the Jest tests, run the following command:
+
+```sh
+yarn test
+```
+
+#### Playwright tests
+
+Steps to install and set up:
+
+1. Create Conda environment
+   ```sh
+   conda env create -f environment_dev.yml
+   ```
+2. Activate Conda environment
+   ```sh
+   conda activate cs-ui-dev-env
+   ```
+3. Install Playwright-usable browser
+   ```sh
+   playwright install chromium
+   ```
+4. Copy environment variables
+   ```sh
+   cp .env.example .env
+   ```
+5. Install JavaScript dependencies
+   ```sh
+   yarn install --immutable
+   ```
+6. Build app
+   ```sh
+   yarn build
+   ```
+
+To run the tests, you will need to run commands in two separate terminal windows
+or tabs.
+
+Steps to run:
+
+1. In the first terminal window/tab, enter the following:
+   ```sh
+   conda activate cs-ui-dev-env
+   yarn start
+   ```
+2. Wait for server to start (you'll know it's ready when it says "webpack 5.xx.x
+compiled successfully"). Open a **new terminal window or tab** and enter the
+following:
+   ```sh
+   conda activate cs-ui-dev-env
+   pytest
+   ```
+
+If you need to debug, try replacing the last command with:
+
+```sh
+PWDEBUG=1 pytest
+```
+
+Note: PW stands for Playwright. `PWDEBUG=1` puts [Playwright in debug
+mode](https://playwright.dev/python/docs/debug).
+
 ## Code of Conduct 🤝
 
 To guarantee a welcoming and friendly community, we require all community members to follow our [Code of Conduct](https://github.com/conda-incubator/governance/blob/main/CODE_OF_CONDUCT.md).