Merge pull request #231 from rpearce/fix/gatsby-ssr

Fix: gatsby SSR

__tests__/Controlled.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { renderToString } from 'react-dom/server'
 import { act, fireEvent, render } from '@testing-library/react'
 import { Controlled as ControlledZoom } from '../source'
 
@@ -15,6 +16,8 @@ test('when closed and then open', () => {
   const openTrigger = getByLabelText('Zoom image')
   expect(openTrigger).toBeVisible()
 
+  expect(document.body).toMatchSnapshot()
+
   fireEvent.click(openTrigger)
   expect(handleZoomChange).toHaveBeenLastCalledWith(true)
 
@@ -24,6 +27,8 @@ test('when closed and then open', () => {
     </ControlledZoom>
   )
 
+  expect(document.body).toMatchSnapshot()
+
   // nothing should happen
   fireEvent.click(openTrigger)
 
@@ -40,12 +45,15 @@ test('when closed and then open', () => {
     </ControlledZoom>
   )
 
+  expect(document.body).toMatchSnapshot()
+
   act(() => {
     jest.advanceTimersByTime(300)
   })
 
   expect(closeTrigger).not.toBeInTheDocument()
   expect(modal).not.toBeInTheDocument()
+  expect(document.body).toMatchSnapshot()
 })
 
 test('when open and then closed', () => {
@@ -69,6 +77,8 @@ test('when open and then closed', () => {
     </ControlledZoom>
   )
 
+  expect(document.body).toMatchSnapshot()
+
   act(() => {
     jest.advanceTimersByTime(300)
   })
@@ -78,6 +88,8 @@ test('when open and then closed', () => {
 
   const openTrigger = getByLabelText('Zoom image')
   expect(openTrigger).toBeVisible()
+
+  expect(document.body).toMatchSnapshot()
 })
 
 test('sends unzoom message when ESC key pressed', () => {
@@ -148,6 +160,7 @@ test('custom open/close text', () => {
 
   const openTrigger = getByLabelText('Open me')
   expect(openTrigger).toBeVisible()
+  expect(document.body).toMatchSnapshot()
 
   rerender(
     <ControlledZoom
@@ -162,4 +175,17 @@ test('custom open/close text', () => {
 
   const closeTrigger = getByLabelText('Close me')
   expect(closeTrigger).toBeVisible()
+
+  expect(document.body).toMatchSnapshot()
+})
+
+test('renders without browser environment', () => {
+  const html = renderToString(
+    <ControlledZoom isZoomed={false} onZoomChange={jest.fn()}>
+      <img alt="foo" src="foo.jpg" width="500" />
+    </ControlledZoom>
+  )
+
+  document.body.innerHTML = html
+  expect(document.body).toMatchSnapshot()
 })

__tests__/ControlledActivated.test.js

@@ -0,0 +1,27 @@
+import React, { createRef } from 'react'
+import { render } from '@testing-library/react'
+import ControlledActivated from '../source/UncontrolledActivated'
+
+test('uses pseudo-parent when no parentRef.current', async () => {
+  render(
+    <ControlledActivated
+      closeText="Unzoom image"
+      isActive={true}
+      onLoad={jest.fn()}
+      onUnload={jest.fn()}
+      onZoomChange={jest.fn()}
+      overlayBgColorEnd="rgba(255, 255, 255, 0.95)"
+      overlayBgColorStart="rgba(255, 255, 255, 0)"
+      parentRef={createRef(null)}
+      portalEl={document.body}
+      scrollableEl={window}
+      transitionDuration={300}
+      zoomMargin={0}
+      zoomZindex={2147483647}
+    >
+      <img alt="foo" src="foo.jpg" width="500" />
+    </ControlledActivated>
+  )
+
+  expect(document.body).toMatchSnapshot()
+})

__tests__/Uncontrolled.js

@@ -1,4 +1,5 @@
 import React from 'react'
+import { renderToString } from 'react-dom/server'
 import { act, fireEvent, render } from '@testing-library/react'
 import testA11y from '../testA11y'
 import Zoom from '../source'
@@ -12,8 +13,9 @@ test('is accessible with defaults & <img />', async () => {
     </main>
   )
   const openTrigger = getByLabelText('Zoom image')
-
   expect(openTrigger).toBeVisible()
+
+  expect(document.body).toMatchSnapshot()
   expect(await testA11y(document.body)).toEqual(true)
 
   fireEvent.click(openTrigger)
@@ -22,8 +24,9 @@ test('is accessible with defaults & <img />', async () => {
   fireEvent.click(openTrigger)
 
   const closeTrigger = getByLabelText('Unzoom image')
-
   expect(closeTrigger).toBeVisible()
+
+  expect(document.body).toMatchSnapshot()
   expect(await testA11y(document.body)).toEqual(true)
 })
 
@@ -43,8 +46,9 @@ test('is accessible with custom open/close text & <img />', async () => {
   fireEvent.click(openTrigger)
 
   const closeTrigger = getByLabelText('Close me')
-
   expect(closeTrigger).toBeVisible()
+
+  expect(document.body).toMatchSnapshot()
   expect(await testA11y(document.body)).toEqual(true)
 })
 
@@ -59,12 +63,15 @@ test('zooms/unzooms with defaults & <img />', () => {
   const openTrigger = getByLabelText('Zoom image')
   expect(openTrigger).toBeVisible()
 
+  expect(document.body).toMatchSnapshot()
+
   fireEvent.click(openTrigger)
 
   const closeTrigger = getByLabelText('Unzoom image')
   const modal = getByRole('dialog')
 
   expect(closeTrigger).toBeVisible()
+  expect(document.body).toMatchSnapshot()
 
   fireEvent.click(closeTrigger)
 
@@ -74,6 +81,7 @@ test('zooms/unzooms with defaults & <img />', () => {
 
   expect(closeTrigger).not.toBeInTheDocument()
   expect(modal).not.toBeInTheDocument()
+  expect(document.body).toMatchSnapshot()
 })
 
 test('zooms/unzooms with custom open/close text & <img />', async () => {
@@ -94,6 +102,7 @@ test('zooms/unzooms with custom open/close text & <img />', async () => {
 
   expect(closeTrigger).toBeVisible()
   expect(modal).toBeVisible()
+  expect(document.body).toMatchSnapshot()
 
   fireEvent.click(closeTrigger)
 
@@ -103,6 +112,7 @@ test('zooms/unzooms with custom open/close text & <img />', async () => {
 
   expect(closeTrigger).not.toBeInTheDocument()
   expect(modal).not.toBeInTheDocument()
+  expect(document.body).toMatchSnapshot()
 })
 
 test('unzooms using ESC key', () => {
@@ -120,6 +130,8 @@ test('unzooms using ESC key', () => {
   const modal = getByRole('dialog')
   expect(modal).toBeVisible()
 
+  expect(document.body).toMatchSnapshot()
+
   // should do nothing
   fireEvent.keyDown(document, { key: 'ArrowLeft' })
 
@@ -128,6 +140,7 @@ test('unzooms using ESC key', () => {
   })
 
   expect(modal).toBeVisible()
+  expect(document.body).toMatchSnapshot()
 
   fireEvent.keyDown(document, { key: 'Escape' })
 
@@ -136,6 +149,7 @@ test('unzooms using ESC key', () => {
   })
 
   expect(modal).not.toBeInTheDocument()
+  expect(document.body).toMatchSnapshot()
 
   fireEvent.click(openTrigger)
   expect(modal).toBeVisible()
@@ -147,6 +161,7 @@ test('unzooms using ESC key', () => {
   })
 
   expect(modal).not.toBeInTheDocument()
+  expect(document.body).toMatchSnapshot()
 })
 
 test('unzooms on scroll', () => {
@@ -164,6 +179,8 @@ test('unzooms on scroll', () => {
   const modal = getByRole('dialog')
   expect(modal).toBeVisible()
 
+  expect(document.body).toMatchSnapshot()
+
   act(() => {
     window.dispatchEvent(new Event('scroll', {}))
   })
@@ -175,6 +192,7 @@ test('unzooms on scroll', () => {
   })
 
   expect(modal).not.toBeInTheDocument()
+  expect(document.body).toMatchSnapshot()
 })
 
 test('passes on original transform style', () => {
@@ -188,6 +206,8 @@ test('passes on original transform style', () => {
   const openTrigger = getByLabelText('Zoom image')
   expect(openTrigger).toBeVisible()
 
+  expect(document.body).toMatchSnapshot()
+
   fireEvent.click(openTrigger)
   const modal = getByRole('dialog')
   expect(modal).toBeVisible()
@@ -198,4 +218,17 @@ test('passes on original transform style', () => {
 
   const wrapEl = modal.querySelector('.content')
   expect(wrapEl.style.transform).toContain('rotate(45deg)')
+
+  expect(document.body).toMatchSnapshot()
+})
+
+test('renders without browser environment', () => {
+  const html = renderToString(
+    <Zoom>
+      <img alt="foo" src="foo.jpg" width="500" />
+    </Zoom>
+  )
+
+  document.body.innerHTML = html
+  expect(document.body).toMatchSnapshot()
 })

__tests__/UncontrolledActivated.test.js

@@ -0,0 +1,25 @@
+import React, { createRef } from 'react'
+import { render } from '@testing-library/react'
+import UncontrolledActivated from '../source/UncontrolledActivated'
+
+test('uses pseudo-parent when no parentRef.current', async () => {
+  render(
+    <UncontrolledActivated
+      closeText="Unzoom image"
+      onLoad={jest.fn()}
+      onUnload={jest.fn()}
+      overlayBgColorEnd="rgba(255, 255, 255, 0.95)"
+      overlayBgColorStart="rgba(255, 255, 255, 0)"
+      parentRef={createRef(null)}
+      portalEl={document.body}
+      scrollableEl={window}
+      transitionDuration={300}
+      zoomMargin={0}
+      zoomZindex={2147483647}
+    >
+      <img alt="foo" src="foo.jpg" width="500" />
+    </UncontrolledActivated>
+  )
+
+  expect(document.body).toMatchSnapshot()
+})