(test): ensure resizing works correctly

- clearOnResize and fixed/unfixed width & height should affect
  resizing as expected
  - also yea the tests run in parallel, but readability-wise it makes
    more sense I think(?)

- add a window.resizeTo polyfill as jsdom doesn't implement it o.o
  - and there doesn't seem to be an NPM package for this(?)

Author: agilgur5

jest.config.js

@@ -5,7 +5,9 @@ module.exports = {
   },
   setupFilesAfterEnv: [
     // configure enzyme w/ react adapter
-    '<rootDir>/test-utils/configure-enzyme.js'
+    '<rootDir>/test-utils/configure-enzyme.js',
+    // polyfill window.resizeTo
+    '<rootDir>/test-utils/window-resizeTo.js'
   ],
   transform: {
     // use babel-jest@23 for babel@6 support (https://github.com/facebook/jest/issues/8230#issuecomment-479470547)

src/index.spec.js

@@ -116,6 +116,7 @@ describe('SigCanvas wrapper methods return equivalent to SigPad', () => {
   })
 })
 
+// comes after props and wrapper methods as it uses both
 describe('get methods return correct canvases', () => {
   const instance = mount(
     <SignatureCanvas canvasProps={dotF.canvasProps} />
@@ -133,3 +134,60 @@ describe('get methods return correct canvases', () => {
     expect(trimmed.height).toBe(dotF.trimmedSize.height)
   })
 })
+
+// comes after props, wrappers, and gets as it uses them all
+describe('resizing works correctly', () => {
+  const wrapper = mount(<SignatureCanvas />)
+  const instance = wrapper.instance()
+  const canvas = instance.getCanvas()
+
+  test('canvas should clear on resize', () => {
+    instance.fromData(dotF.data)
+    expect(instance.isEmpty()).toBe(false)
+
+    window.resizeTo(500, 500)
+    expect(instance.isEmpty()).toBe(true)
+  })
+
+  test('canvas should not clear when clearOnResize is false', () => {
+    wrapper.setProps({ clearOnResize: false })
+
+    instance.fromData(dotF.data)
+    expect(instance.isEmpty()).toBe(false)
+
+    window.resizeTo(500, 500)
+    expect(instance.isEmpty()).toBe(false)
+  })
+
+  const size = { width: 100, height: 100 }
+  test('canvas should not change size if fixed width & height', () => {
+    wrapper.setProps({ canvasProps: size })
+    window.resizeTo(500, 500)
+
+    expect(canvas.width).toBe(size.width)
+    expect(canvas.height).toBe(size.height)
+  })
+
+  test('canvas should change size if no width or height', () => {
+    wrapper.setProps({ canvasProps: {} })
+    window.resizeTo(500, 500)
+
+    expect(canvas.width).not.toBe(size.width)
+    expect(canvas.height).not.toBe(size.height)
+  })
+
+  test('canvas should partially change size if one of width or height', () => {
+    wrapper.setProps({ canvasProps: { width: size.width } })
+    window.resizeTo(500, 500)
+
+    expect(canvas.width).toBe(size.width)
+    expect(canvas.height).not.toBe(size.height)
+
+    // now do height instead
+    wrapper.setProps({ canvasProps: { height: size.height } })
+    window.resizeTo(500, 500)
+
+    expect(canvas.width).not.toBe(size.width)
+    expect(canvas.height).toBe(size.height)
+  })
+})

test-utils/window-resizeTo.js

@@ -0,0 +1,10 @@
+// polyfill window.resizeTo in jsdom environment
+// https://spectrum.chat/testing-library/help-react/how-to-set-window-innerwidth-to-test-mobile~70aa9572-b7cc-4397-92f5-a09d75ed24b8?m=MTU1OTU5MTI2MTI0MQ==
+window.resizeTo = function resizeTo (width, height) {
+  Object.assign(window, {
+    innerWidth: width,
+    innerHeight: height,
+    outerWidth: width,
+    outerHeight: height
+  }).dispatchEvent(new window.Event('resize'))
+}