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)