From cf9a131f66d660a82d550bd2337022bf6ab179a5 Mon Sep 17 00:00:00 2001
From: Mark Brocato <mark.brocato@moovweb.com>
Date: Thu, 26 Mar 2020 06:04:48 -0400
Subject: [PATCH] Adds a window.rsf_toggleLoading function that allows
 developers to easily toggle skeletons using chrome developer tools. (#65)

---
 package.json                        |  2 +-
 src/hooks/useLazyState.js           | 11 +++++++++++
 test/carousel/MediaCarousel.test.js |  2 --
 test/hooks/useLazyState.test.js     | 26 ++++++++++++++++++++++++++
 test/nav/NavTab.test.js             | 24 +++++++++++++++++++++---
 5 files changed, 59 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 1f031f41..d57fe616 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-storefront",
-  "version": "7.9.2",
+  "version": "7.10.0",
   "description": "Build and deploy e-commerce progressive web apps (PWAs) in record time.",
   "module": "./index.js",
   "license": "Apache-2.0",
diff --git a/src/hooks/useLazyState.js b/src/hooks/useLazyState.js
index 7552926c..367d3ef6 100644
--- a/src/hooks/useLazyState.js
+++ b/src/hooks/useLazyState.js
@@ -64,6 +64,17 @@ export default function useLazyState(lazyProps, additionalData = {}) {
 
   useEffect(() => {
     isInitialMount.current = false
+
+    if (process.env.NODE_ENV !== 'production') {
+      // expose a global function that makes it easy to toggle skeletons during development via chrome develeoper console
+      window.rsf_toggleLoading = () =>
+        updateState(state => ({
+          ...state,
+          loading: !state.loading,
+        }))
+
+      return () => delete window.rsf_toggleLoading
+    }
   }, [])
 
   // save the page state in history.state before navigation
diff --git a/test/carousel/MediaCarousel.test.js b/test/carousel/MediaCarousel.test.js
index 529f13ed..49ac6630 100644
--- a/test/carousel/MediaCarousel.test.js
+++ b/test/carousel/MediaCarousel.test.js
@@ -145,7 +145,6 @@ describe('MediaCarousel', () => {
   it('should hide the magnify hint if the lightbox is opened and the window is wider than the image', () => {
     wrapper = mount(<MediaCarousel media={media} />)
     wrapper.find(Carousel).simulate('click')
-    console.log(wrapper.find(MagnifyHint))
     expect(wrapper.find(MagnifyHint)).toExist()
 
     window.innerWidth = 1300
@@ -153,7 +152,6 @@ describe('MediaCarousel', () => {
 
     wrapper = mount(<MediaCarousel media={media} />)
     wrapper.find(Carousel).simulate('click')
-    console.log(wrapper.find(MagnifyHint))
     expect(wrapper.find(MagnifyHint)).not.toExist()
   })
 
diff --git a/test/hooks/useLazyState.test.js b/test/hooks/useLazyState.test.js
index b686402d..51be556b 100644
--- a/test/hooks/useLazyState.test.js
+++ b/test/hooks/useLazyState.test.js
@@ -204,4 +204,30 @@ describe('useLazyState', () => {
       value: 1,
     })
   })
+
+  it('should expose rsf_toggleLoading', () => {
+    wrapper = mount(<Test value={1} />)
+    act(() => window.rsf_toggleLoading())
+    expect(state.loading).toBe(true)
+    wrapper.unmount()
+    expect(window.rsf_toggleLoading).not.toBeDefined()
+  })
+
+  describe('production', () => {
+    let { NODE_ENV } = process.env
+
+    beforeAll(() => {
+      process.env.NODE_ENV = 'production'
+    })
+
+    afterAll(() => {
+      process.env.NODE_ENV = NODE_ENV
+    })
+
+    it('should not expose rsf_toggleLoading in production', () => {
+      wrapper = mount(<Test value={1} />)
+      act(() => {})
+      expect(window.rsf_toggleLoading).not.toBeDefined()
+    })
+  })
 })
diff --git a/test/nav/NavTab.test.js b/test/nav/NavTab.test.js
index 92a53c0c..b1963b9a 100644
--- a/test/nav/NavTab.test.js
+++ b/test/nav/NavTab.test.js
@@ -172,13 +172,25 @@ describe('NavTab', () => {
         .find(Link)
         .first()
         .simulate('keydown', { key: 'Enter' })
-      setImmediate(() => wrapper.update())
+
+      return new Promise(resolve => {
+        setTimeout(() => {
+          wrapper.update()
+          resolve()
+        })
+      })
     })
     expect(wrapper.find(Popover).prop('open')).toBe(true)
 
     await act(async () => {
       await navigate()
-      setImmediate(() => wrapper.update())
+
+      return new Promise(resolve => {
+        setTimeout(() => {
+          wrapper.update()
+          resolve()
+        })
+      })
     })
 
     expect(wrapper.find(Popover).prop('open')).toBe(false)
@@ -249,7 +261,13 @@ describe('NavTab', () => {
           .find('a')
           .first()
           .simulate('blur')
-        setImmediate(() => wrapper.update())
+
+        return new Promise(resolve => {
+          setTimeout(() => {
+            wrapper.update()
+            resolve()
+          }, 1)
+        })
       })
 
       expect(wrapper.find(Popover).prop('open')).toBe(false)