From ea3e7434c668722dc369b9a35ea68e0b95a5fa8e Mon Sep 17 00:00:00 2001
From: Cole Lawrence <cole@colelawrence.com>
Date: Tue, 2 Aug 2022 09:11:19 -0400
Subject: [PATCH] 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           |  6 +++++-
 packages/playground/devEnv/cli.js             |  1 +
 theatre/studio/src/toolbars/GlobalToolbar.tsx | 20 +++++++++++++++++--
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/packages/playground/devEnv/build.ts b/packages/playground/devEnv/build.ts
index 99c3caf..7734898 100644
--- a/packages/playground/devEnv/build.ts
+++ b/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 && {
diff --git a/packages/playground/devEnv/cli.js b/packages/playground/devEnv/cli.js
index 5028c57..a8dfc24 100644
--- a/packages/playground/devEnv/cli.js
+++ b/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
diff --git a/theatre/studio/src/toolbars/GlobalToolbar.tsx b/theatre/studio/src/toolbars/GlobalToolbar.tsx
index bd54032..c42b5dc 100644
--- a/theatre/studio/src/toolbars/GlobalToolbar.tsx
+++ b/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}