CI action for comments test

.github/workflows/pull-requests.yml

@@ -358,3 +358,43 @@ jobs:
           HEADLESS: 'true'
         run: |
           nix-shell --arg includeServerBuildSupport false --arg includeRunLocallySupport false --run "cd puppeteer-tests; pnpm install --unsafe-perm; pnpm run system-test"
+
+  comments-test:
+    name: Run Comments Tests
+    timeout-minutes: 12
+    runs-on: ubuntu-latest
+    needs: [deploy-staging, cache-pnpm-store]
+    env:
+      UTOPIA_SHA: ${{ github.sha }}
+      AUTH0_CLIENT_ID: KB7euFO46rVYeOaWmrEdktdhAFxEO266
+      AUTH0_ENDPOINT: enter.utopia.app
+      AUTH0_REDIRECT_URI: https://utopia.pizza/authenticate
+    steps:
+      # Gets the branch that this PR is targeting and replaces forward slashes in the name with hyphens.
+      # So that later steps can produce a bundle incorporating that into the name and upload it.
+      - name: Extract branch name
+        shell: bash
+        run: |
+          FIXED_REF="${GITHUB_HEAD_REF////-}"
+          echo "##[set-output name=branch;]$FIXED_REF"
+        id: extract_branch
+      - name: Install nix
+        uses: cachix/install-nix-action@v12
+        with:
+          nix_path: nixpkgs=https://github.com/NixOS/nixpkgs/archive/6120ac5cd201f6cb593d1b80e861be0342495be9.tar.gz
+      - name: Check out the repo
+        uses: actions/checkout@v2
+      - name: Cache .pnpm-store
+        uses: actions/cache@v2
+        with:
+          path: ${{ needs.cache-pnpm-store.outputs.pnpm-store-path }}
+          key: ${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}-captured-location
+      - name: Build Comments Tests
+        run: |
+          nix-shell --arg includeServerBuildSupport false --arg includeRunLocallySupport false --run "build-puppeteer-tests"
+      - name: Run Comments Test
+        id: run-comments-test
+        env:
+          BRANCH_NAME: ${{ steps.extract_branch.outputs.branch }}
+        run: |
+          nix-shell --arg includeServerBuildSupport false --arg includeRunLocallySupport false --run "xvfb-run --server-args='-screen 0 1920x1080x24 -ac -nolisten tcp -dpi 96 +extension RANDR' run-comments-test"

editor/src/components/canvas/controls/comment-indicator.tsx

@@ -323,7 +323,7 @@ const CommentIndicator = React.memo(({ thread }: CommentIndicatorProps) => {
   const draggingCallback = React.useCallback((isDragging: boolean) => setDragging(isDragging), [])
 
   return (
-    <div onMouseOver={onMouseOver} onMouseOut={onMouseOut}>
+    <div onMouseOver={onMouseOver} onMouseOut={onMouseOut} data-testid='comment-indicator'>
       {when(
         (isActive || !hovered) && !dragging,
         <CommentIndicatorUI

puppeteer-tests/src/comments/place-comment.spec.tsx

@@ -3,17 +3,20 @@ import type { Browser } from 'puppeteer'
 
 const TIMEOUT = 120000
 
+const BRANCH_NAME = process.env.BRANCH_NAME ? `&branch_name=${process.env.BRANCH_NAME}` : ''
+
 describe('Comments test', () => {
   it(
     'can place a comment',
     async () => {
       const { page, browser } = await setupBrowser(
-        'http://localhost:8000/p/?fakeUser=alice&Multiplayer=true',
+        `https://utopia.pizza/p/?fakeUser=alice&Multiplayer=true${BRANCH_NAME}`,
         TIMEOUT,
       )
 
       const signInButton = await page.waitForSelector('div[data-testid="sign-in-button"]')
       await signInButton!.click()
+      await page.waitForSelector('#playground-scene') // wait for the scene to render
       const commentModeButton = await page.waitForSelector(
         'div[data-testid="canvas-toolbar-comment-mode-connected"]',
       )
@@ -31,6 +34,10 @@ describe('Comments test', () => {
 
       expect(thread).not.toBeNull()
 
+      const commentIndicator = await page.waitForSelector('div[data-testid="comment-indicator"]')
+
+      expect(commentIndicator).not.toBeNull()
+
       const resolveButton = await page.waitForSelector('div[data-testid="resolve-thread-button"]')
       await resolveButton!.click()
 

shell.nix

@@ -253,6 +253,13 @@ let
       ${pnpm}/bin/pnpm install --unsafe-perm
       ${pnpm}/bin/pnpm run performance-test
     '')
+    (pkgs.writeScriptBin "run-comments-test" ''
+      #!/usr/bin/env bash
+      set -e
+      cd $(${pkgs.git}/bin/git rev-parse --show-toplevel)/puppeteer-tests
+      ${pnpm}/bin/pnpm install --unsafe-perm
+      ${pnpm}/bin/pnpm run comments-test
+    '')
   ];
 
   withPuppeteerScripts = withBaseEditorScripts ++ (lib.optionals stdenv.isLinux puppeteerScripts);