Dlaliberte playwright 06 22

.devcontainer/Dockerfile

@@ -1,11 +1,14 @@
 # See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/python-3/.devcontainer/base.Dockerfile
 
 # [Choice] Python version (use -bullseye variants on local arm64/Apple Silicon): 3, 3.10, 3.9, 3.8, 3.7, 3.6, 3-bullseye, 3.10-bullseye, 3.9-bullseye, 3.8-bullseye, 3.7-bullseye, 3.6-bullseye, 3-buster, 3.10-buster, 3.9-buster, 3.8-buster, 3.7-buster, 3.6-buster
-ARG VARIANT=""
-FROM mcr.microsoft.com/vscode/devcontainers/python:0-${VARIANT}
+# Update 'VARIANT' to pick a version of Python: 3, 3.10, 3.9, 3.8, 3.7, 3.6
+# Append -bullseye or -buster to pin to an OS version.
+# Use -bullseye variants on local arm64/Apple Silicon.
+ARG VARIANT="3.11-bullseye"
+FROM mcr.microsoft.com/vscode/devcontainers/python:0-${VARIANT} as ide
 
 # [Choice] Node.js version: none, lts/*, 16, 14, 12, 10
-ARG NODE_VERSION="none"
+ARG NODE_VERSION="18"
 RUN if [ "${NODE_VERSION}" != "none" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install ${NODE_VERSION} 2>&1"; fi
 
 RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ 

.devcontainer/README.md

@@ -29,7 +29,8 @@ You can click on the appropriate badge to get the environment setup:
 | [Visual Studio Code Remote - Containers](https://code.visualstudio.com/docs/remote/create-dev-container) | [![Open in Remote - Containers](https://img.shields.io/static/v1?label=Remote%20-%20Containers&message=Open&color=blue&logo=visualstudiocode)](https://vscode.dev/redirect?url=vscode://ms-vscode-remote.remote-containers/cloneInVolume?url=https://github.com/GoogleChrome/chromium-dashboard) | Locally: Docker and Visual Studio Code | Runs locally. Have more resources | Need to have VS Code and Docker setup |
 | [GitHub Codespaces](https://docs.github.com/en/enterprise-cloud@latest/codespaces) | <ul><li>East US[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=8633551&machine=standardLinux32gb&location=EastUs&devcontainer_path=.devcontainer%2Fdevcontainer.json)</li><li>West US[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://github.com/codespaces/new?hide_repo_select=true&ref=main&repo=8633551&machine=standardLinux32gb&location=WestUs2&devcontainer_path=.devcontainer%2Fdevcontainer.json)</li></ul> | Access to Codespaces | Nothing to install locally | Limited resources: 4 cores, 8GB RAM, 32GB Storage |
 
-Upon creating the devcontainer by clicking the appropriate badge, `npm run setup` is ran automatically.
+Upon creating the devcontainer by clicking the appropriate badge, `npm run setup`
+is run automatically.
 
 *Note*: Sometimes when you open the terminal, it won't automatically activate
 the python environment. Either 1) Open a new terminal (usually it works the
@@ -61,11 +62,11 @@ There are other ports needed for the IDE itself but mainly, you only need to wat
 ## Upgrading versions of Node and Python
 
 In the docker-compose.yml file:
-- For Python: Change the `VARIANT` argument to the appropirate [variant](https://github.com/microsoft/vscode-dev-containers/tree/main/containers/python-3)
+- For Python: Change the `VARIANT` argument to the appropriate [variant](https://github.com/microsoft/vscode-dev-containers/tree/main/containers/python-3)
 - For Node: Change the `NODE_VERSION` to the appropriate version used by [nvm](https://github.com/nvm-sh/nvm)
 
 ## Troubleshooting
 
-When there are depedency changes and environment changes in requirements.txt or package.json, the Devcontainer needs to be rebuilt:
+When there are dependency changes and environment changes in requirements.txt or package.json, the Devcontainer needs to be rebuilt:
 - `rm -rf node_modules cs-env` in terminal
 - View -> Command Palette -> Rebuild container without cache

.devcontainer/db-docker-compose.yml

@@ -0,0 +1,17 @@
+version: '3.8'
+
+services:
+  db:
+    image: google/cloud-sdk:402.0.0-emulators
+    restart: unless-stopped
+    command: gcloud beta emulators datastore start --project=cr-status-staging --host-port 0.0.0.0:15606 --no-store-on-disk --use-firestore-in-datastore-mode
+
+  dsadmin:
+    image: ghcr.io/remko/dsadmin:v0.18.1
+    entrypoint: /ko-app/dsadmin -port 8888
+    depends_on:
+      - db
+    network_mode: service:db
+    environment:
+      DATASTORE_PROJECT_ID: cr-status-staging
+      DATASTORE_EMULATOR_HOST: "db:15606"

.devcontainer/devcontainer.json

@@ -2,8 +2,11 @@
 // https://github.com/microsoft/vscode-dev-containers/tree/v0.245.2/containers/python-3
 {
 	"name": "Chromium Dashboard",
-	"dockerComposeFile": "docker-compose.yml",
-	"service": "app",
+	"dockerComposeFile": [
+		"docker-compose.yml",
+		"db-docker-compose.yml"
+	],
+	"service": "ide",
 	"workspaceFolder": "/workspace",
 
 	// Configure tool-specific properties.
@@ -41,7 +44,8 @@
 			"extensions": [
 				"ms-python.python",
 				"bierner.lit-html",
-				"42Crunch.vscode-openapi"
+				"42Crunch.vscode-openapi",
+				"ms-playwright.playwright"
 			]
 		}
 	},
@@ -64,5 +68,12 @@
 	"postCreateCommand": "npm run clean-setup; . cs-env/bin/activate; npm run setup; python -m pip install pylint==2.13.4",
 
 	// Comment out to connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-	"remoteUser": "vscode"
+	"remoteUser": "vscode",
+
+	"features": {
+		// https://github.com/devcontainers/features/tree/main/src/docker-in-docker
+		"ghcr.io/devcontainers/features/docker-in-docker:2": {
+			"dockerDashComposeVersion": "v2"
+		}
+	}
 }

.devcontainer/docker-compose.yml

@@ -1,18 +1,11 @@
 version: '3.8'
 
 services:
-  app:
+  ide:
     build:
       context: ..
       dockerfile: .devcontainer/Dockerfile
-      args:
-        # Update 'VARIANT' to pick a version of Python: 3, 3.10, 3.9, 3.8, 3.7, 3.6
-        # Append -bullseye or -buster to pin to an OS version.
-        # Use -bullseye variants on local arm64/Apple Silicon.
-        VARIANT: 3.10-bullseye
-        # Optional Node.js version to install
-        NODE_VERSION: "18"
-
+      target: ide
     volumes:
       - ..:/workspace:cached
 
@@ -25,18 +18,3 @@ services:
     environment:
       DATASTORE_PROJECT_ID: cr-status-staging
       DATASTORE_EMULATOR_HOST: localhost:15606
-
-  db:
-    image: google/cloud-sdk:402.0.0-emulators
-    restart: unless-stopped
-    command: gcloud beta emulators datastore start --project=cr-status-staging --host-port 0.0.0.0:15606 --no-store-on-disk --consistency=1.0
-
-  dsadmin:
-    image: ghcr.io/remko/dsadmin:v0.18.1
-    entrypoint: /ko-app/dsadmin -port 8888
-    depends_on:
-      - db
-    network_mode: service:db
-    environment:
-      DATASTORE_PROJECT_ID: cr-status-staging
-      DATASTORE_EMULATOR_HOST: "db:15606"

.dockerignore

@@ -0,0 +1,10 @@
+cs-env
+node_modules
+test-results
+playwright-report/
+playwright/.cache/
+
+# Web test runner coverage report
+coverage
+
+__pycache__

.github/workflows/ci.yml

@@ -45,14 +45,14 @@ jobs:
       - name: installation
         run: |
           npm install -g gulp
-          npm ci
-          npm run deps
+          npm config set script-shell bash --global
+          npm run setup
 
       - name: lint
         run: npm run lint
 
       - name: mypy
-        run: mypy --ignore-missing-imports --exclude cs-env/ --exclude gen/ --exclude appengine_config.py .
+        run: npm run mypy
 
       - name: test
         run: npm test

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches-ignore:
+      - "dependabot/**"
+      - "daily-test-sync"
+
+jobs:
+  playwright:
+    name: 'Playwright Tests'
+    runs-on: ubuntu-latest
+    steps:
+        - uses: actions/checkout@v3
+
+        # Steps for Playwright testing with container
+        - uses: actions/setup-node@v3
+          with:
+            node-version: 18
+        - name: Run your tests
+          timeout-minutes: 15
+          run: npm run pwtests-shutdown --workspace=playwright; npm run test --workspace=playwright
+        - uses: actions/upload-artifact@v3
+          if: failure()
+          with:
+            name: test-results
+            path: packages/playwright/test-results/
+            retention-days: 30

.github/workflows/web_tests.yml

@@ -55,11 +55,9 @@ jobs:
         run: |
           npm install -g gulp
 
-      - run: npm ci
-      - run: npm run deps
+      - run: npm config set script-shell bash --global
+      - run: npm run setup
       - run: npm run build --if-present
 
-      - run: npx playwright install-deps
-
       - name: Run web test runner
         run: npm run webtest

.gitignore

@@ -2,7 +2,8 @@
 *.pyc
 *.swp
 .sass-cache
-.vscode
+.vscode/*
+!.vscode/launch.json
 *oauth2.data
 .fcm_server_key
 *.iml
@@ -18,7 +19,7 @@ env_vars.yaml
 node_modules
 
 # Generated files
-# static/css/
+static/css/
 static/dist/
 static/js/
 
@@ -35,5 +36,10 @@ coverage
 # venv directory
 cs-env
 
+# playwright
+test-results/
+/playwright-report/
+/playwright/.cache/
+
 # API Key for local development
 ot_api_key.txt

.vscode/launch.json

@@ -0,0 +1,24 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Python: Remote Attach",
+            "type": "python",
+            "request": "attach",
+            "connect": {
+                "host": "localhost",
+                "port": 5678
+            },
+            "pathMappings": [
+                {
+                    "localRoot": "${workspaceFolder}",
+                    "remoteRoot": "/workspace"
+                }
+            ],
+            "justMyCode": false
+        }
+    ]
+}

Dockerfile

@@ -0,0 +1,41 @@
+ARG PYTHON_VARIANT=3.11-bullseye
+FROM python:${PYTHON_VARIANT} as app
+
+RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ 
+    # openapi-generator-cli dependencies
+    && apt-get install -y openjdk-17-jre
+
+RUN groupadd -g 1001 appuser && \
+    useradd appuser -u 1001 -g 1001 -m -d /home/appuser -s /bin/bash
+USER appuser
+
+# Install node
+RUN mkdir /home/appuser/.nvm
+ENV NVM_DIR /home/appuser/.nvm
+# Need the full major.minor.patch version for NODE_VERISON
+# https://nodejs.org/en/download/releases
+ENV NODE_VERSION 18.17.1
+
+RUN curl https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.4/install.sh | bash \
+    && . $NVM_DIR/nvm.sh \
+    && nvm install $NODE_VERSION \
+    && nvm alias default $NODE_VERSION \
+    && nvm use default \
+    && npm config set script-shell bash
+
+
+ENV NODE_PATH $NVM_DIR/v$NODE_VERSION/lib/node_modules
+ENV PATH="${PATH}:$NVM_DIR/versions/node/v$NODE_VERSION/bin"
+
+# Reload shell
+SHELL ["/bin/bash", "-c"] 
+
+
+WORKDIR /workspace
+COPY --chown=appuser:appuser openapi /workspace/openapi/
+COPY --chown=appuser:appuser gen /workspace/gen/
+# Cache the infrequent but time consuming changes early
+COPY --chown=appuser:appuser requirements.txt requirements.dev.txt package.json package-lock.json /workspace/
+RUN npm install -g gulp-cli && npm run setup && cs-env/bin/python -m pip install debugpy==1.6.7.post1
+# Copy the rest
+COPY --chown=appuser:appuser . /workspace

README.md

@@ -62,7 +62,31 @@ npm test
 
 This will start a local datastore emulator, run unit tests, and then shut down the emulator.
 
-There are some developing information in developer-documentation.md.
+To update test_html_rendering.html, modify the `test_html_rendering` method in
+the corresponding test file, uncomment the line that looks like:
+
+```python
+ # TESTDATA.make_golden(template_text, 'test_html_rendering.html')
+```
+
+Then run the test again (and maybe one more time), and then you can revert
+your change of the test files.
+
+To run the Playwright visual tests (aka end-to-end tests), the command to use is:
+```bash
+npm run pwtests --packages/playwright
+```
+
+If there are errors, or if you need to update any of the screeenshot images,
+you can update all images for all tests with:
+```bash
+npm run pwtests-update --packages/playwright
+```
+
+Then check the `packages/playwright/test-results` directory for any changes.
+
+
+There is some additional information for developers in developer-documentation.md.
 
 ### Origin Trials
 To test the functionality of this application locally that interacts with data from the Origin Trials API, an API key will need to be acquired. To do this, run the following command:

client-src/elements/chromedash-app.js

@@ -100,6 +100,7 @@ class ChromedashApp extends LitElement {
       loading: {type: Boolean},
       appTitle: {type: String},
       googleSignInClientId: {type: String},
+      devMode: {type: String},
       currentPage: {type: String},
       bannerMessage: {type: String},
       bannerTime: {type: Number},
@@ -117,6 +118,7 @@ class ChromedashApp extends LitElement {
     this.loading = true;
     this.appTitle = '';
     this.googleSignInClientId = '',
+    this.devMode = '';
     this.currentPage = '';
     this.bannerMessage = '';
     this.bannerTime = null;
@@ -543,6 +545,7 @@ class ChromedashApp extends LitElement {
               <chromedash-header
                 .user=${this.user}
                 .appTitle=${this.appTitle}
+                .devMode=${this.devMode}
                 .googleSignInClientId=${this.googleSignInClientId}
                 .currentPage=${this.currentPage}
                 @drawer-clicked=${this.handleShowDrawer}>
@@ -557,6 +560,7 @@ class ChromedashApp extends LitElement {
                 .user=${this.user}
                 .currentPage=${this.currentPage}
                 ?defaultOpen=${true}
+                .devMode=${this.devMode}
                 .googleSignInClientId=${this.googleSignInClientId}>
               </chromedash-drawer>
             </div>