Fix e2e visual regression tests by always showing Updates badge in CI

- ensure that window.__IS_VISUAL_REGRESSION_TESTING is true when CI=1

packages/playground/devEnv/build.ts

@@ -25,6 +25,8 @@ const testDir = playgroundDir('src/tests')
 export async function start(options: {
   /** enable live reload and watching stuff */
   dev: boolean
+  /** make some UI elements predictable by setting the __IS_VISUAL_REGRESSION_TESTING value on window */
+  isVisualRegressionTesting: boolean
   serve?: {
     findAvailablePort: boolean
     openBrowser: boolean
@@ -169,7 +171,9 @@ export async function start(options: {
     },
     define: {
       ...definedGlobals,
-      'window.__IS_VISUAL_REGRESSION_TESTING': 'true',
+      'window.__IS_VISUAL_REGRESSION_TESTING': JSON.stringify(
+        options.isVisualRegressionTesting,
+      ),
     },
     banner: liveReload?.esbuildBanner,
     watch: liveReload?.esbuildWatch && {

packages/playground/devEnv/cli.js

@@ -21,6 +21,7 @@ function onUpdatedBuildScript(rebuild) {
     module
       .start({
         dev: !isCI && dev,
+        isVisualRegressionTesting: isCI,
         serve: serve && {
           findAvailablePort: !isCI,
           // If not in CI, try to spawn a browser

theatre/studio/src/toolbars/GlobalToolbar.tsx

@@ -1,6 +1,6 @@
 import {usePrism, useVal} from '@theatre/react'
 import getStudio from '@theatre/studio/getStudio'
-import React, {useRef} from 'react'
+import React, {useMemo, useRef} from 'react'
 import styled from 'styled-components'
 import type {$IntentionalAny} from '@theatre/dataverse/dist/types'
 import useTooltip from '@theatre/studio/uiComponents/Popover/useTooltip'
@@ -65,6 +65,8 @@ const GroupDivider = styled.div`
   opacity: 0.4;
 `
 
+let showedVisualTestingWarning = false
+
 const GlobalToolbar: React.FC = () => {
   const conflicts = usePrism(() => {
     const ephemeralStateOfAllProjects = val(
@@ -123,6 +125,20 @@ const GlobalToolbar: React.FC = () => {
   )
   const moreMenuTriggerRef = useRef<HTMLButtonElement>(null)
 
+  const showUpdatesBadge = useMemo(() => {
+    if (hasUpdates || window.__IS_VISUAL_REGRESSION_TESTING) {
+      if (!showedVisualTestingWarning) {
+        showedVisualTestingWarning = true
+        console.warn(
+          "Visual regression testing enabled, so we're showing the updates badge unconditionally",
+        )
+      }
+      return true
+    }
+
+    return hasUpdates
+  }, [hasUpdates])
+
   return (
     <Container>
       <SubContainer>
@@ -158,7 +174,7 @@ const GlobalToolbar: React.FC = () => {
           }}
         >
           <Ellipsis />
-          {hasUpdates && <HasUpdatesBadge />}
+          {showUpdatesBadge && <HasUpdatesBadge />}
         </ToolbarIconButton>
         <PinButton
           ref={triggerButtonRef as $IntentionalAny}