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