feat(dev): add Cypress and Puppeteer to GitPod (freeCodeCamp#40862)

Author: ShaunSHamilton

.gitpod.yml

@@ -1,60 +1,61 @@
 image: gitpod/workspace-mongodb
 ports:
-- port: 27017 # mongodb
-  onOpen: ignore
-- port: 8000 # client
-  onOpen: open-preview
-- port: 9228 # node debug
-  onOpen: ignore
-- port: 3000 # api
-  onOpen: ignore
-- port: 9229 # node debug
-  onOpen: ignore
+  - port: 27017 # mongodb
+    onOpen: ignore
+  - port: 8000 # client
+    onOpen: open-preview
+  - port: 9228 # node debug
+    onOpen: ignore
+  - port: 3000 # api
+    onOpen: ignore
+  - port: 9229 # node debug
+    onOpen: ignore
 
 tasks:
-- before: |
-    echo '
-    export COOKIE_DOMAIN=gitpod.io
-    export HOME_LOCATION=$(gp url 8000)
-    export API_LOCATION=$(gp url 3000)
-    ' >> ~/.bashrc;
-    exit;
+  - before: |
+      echo '
+      export COOKIE_DOMAIN=gitpod.io
+      export HOME_LOCATION=$(gp url 8000)
+      export API_LOCATION=$(gp url 3000)
+      export CYPRESS_BASE_URL=$(gp url 8000)
+      ' >> ~/.bashrc;
+      exit;
 
-- name: db
-  # starting mongo in background, so it doesn't block prebuilds
-  before: >
-    mkdir -p /workspace/data &&
-    (mongod --dbpath /workspace/data &)
+  - name: db
+    # starting mongo in background, so it doesn't block prebuilds
+    before: >
+      mkdir -p /workspace/data &&
+      (mongod --dbpath /workspace/data &)
 
-- name: server
-  before: export COOKIE_DOMAIN=gitpod.io && export HOME_LOCATION=$(gp url 8000) && export API_LOCATION=$(gp url 3000)
-  # init is not executed for prebuilt workspaces and restarts,
-  # so we should put all the heavy initialization here
-  init: >
-    cp sample.env .env &&
-    npm ci &&
-    gp sync-done npm-ci &&
-    gp await-port 27017 &&
-    npm run seed &&
-    mongo --eval "db.fsyncLock(); db.fsyncUnlock()"
-  command: >
-    npm run ensure-env &&
-    gp await-port 27017 &&
-    npm run develop:server
+  - name: server
+    before: export COOKIE_DOMAIN=gitpod.io && export HOME_LOCATION=$(gp url 8000) && export API_LOCATION=$(gp url 3000) && export CYPRESS_BASE_URL=$(gp url 8000)
+    # init is not executed for prebuilt workspaces and restarts,
+    # so we should put all the heavy initialization here
+    init: >
+      cp sample.env .env &&
+      npm ci &&
+      gp sync-done npm-ci &&
+      gp await-port 27017 &&
+      npm run seed &&
+      mongo --eval "db.fsyncLock(); db.fsyncUnlock()"
+    command: >
+      npm run ensure-env &&
+      gp await-port 27017 &&
+      npm run develop:server
 
-- name: client
-  before: export HOME_LOCATION=$(gp url 8000) && export API_LOCATION=$(gp url 3000)
-  init: >
-    cd ./client &&
-    gp sync-await npm-ci &&
-    npm run prebuild &&
-    npm run build:workers &&
-    cd ..
-  command: >
-    gp await-port 3000 &&
-    cd ./client &&
-    npm run develop -- -H '0.0.0.0'
-  openMode: split-right
+  - name: client
+    before: export HOME_LOCATION=$(gp url 8000) && export API_LOCATION=$(gp url 3000) && export CYPRESS_BASE_URL=$(gp url 8000)
+    init: >
+      cd ./client &&
+      gp sync-await npm-ci &&
+      npm run prebuild &&
+      npm run build:workers &&
+      cd ..
+    command: >
+      gp await-port 3000 &&
+      cd ./client &&
+      npm run develop -- -H '0.0.0.0'
+    openMode: split-right
 
 github:
   prebuilds:

cypress-install.sh

@@ -0,0 +1,53 @@
+InstallCypress() {
+    sudo apt-get update && sudo apt-get install -y \
+        libgtk2.0-0 \
+        libgtk-3-0 \
+        libgbm-dev \
+        libnotify-dev \
+        libgconf-2-4 \
+        libnss3 \
+        libxss1 \
+        libasound2 \
+        libxtst6 \
+        xauth \
+        xvfb
+}
+
+InstallPuppeteer() {
+    sudo apt-get install -y \
+        ca-certificates \
+        fonts-liberation \
+        libappindicator3-1 \
+        libatk-bridge2.0-0 \
+        libatk1.0-0 \
+        libc6 \
+        libcairo2 \
+        libcups2 \
+        libdbus-1-3 \
+        libexpat1 \
+        libfontconfig1 \
+        libgbm1 \
+        libgcc1 \
+        libglib2.0-0 \
+        libnspr4 \
+        libpango-1.0-0 \
+        libpangocairo-1.0-0 \
+        libstdc++6 \
+        libx11-6 \
+        libx11-xcb1 \
+        libxcb1 \
+        libxcomposite1 \
+        libxcursor1 \
+        libxdamage1 \
+        libxext6 \
+        libxfixes3 \
+        libxi6 \
+        libxrandr2 \
+        libxrender1 \
+        lsb-release \
+        wget \
+        xdg-utils
+}
+
+InstallCypress
+InstallPuppeteer

package.json

@@ -19,6 +19,7 @@
     "precypress": "node ./cypress-install.js",
     "cypress": "cypress",
     "cypress:install": "cypress install && echo 'for use with ./cypress-install.js'",
+    "cypress:install-build-tools": "sh ./cypress-install.sh",
     "cypress:dev:run": "npm run cypress -- run",
     "cypress:dev:watch": "npm run cypress -- open",
     "cypress:prd:run": "npm run cypress -- run",