Adds a window.rsf_toggleLoading function that allows developers to easily toggle skeletons using chrome developer tools. (#65)

Author: markbrocato

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",

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

test/carousel/MediaCarousel.test.js

@@ -145,15 +145,13 @@ 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
     window.dispatchEvent(new Event('resize'))
 
     wrapper = mount(<MediaCarousel media={media} />)
     wrapper.find(Carousel).simulate('click')
-    console.log(wrapper.find(MagnifyHint))
     expect(wrapper.find(MagnifyHint)).not.toExist()
   })
 

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()
+    })
+  })
 })

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)