(test): ensure wrapper methods have equivalent output

- add describe as this is several tests in one
- add a fixture of just a dot
- add tests for toData, fromData, toDataURL, fromDataURL, isEmpty,
  and clear

Author: agilgur5

src/index.spec.js

@@ -1,12 +1,87 @@
-import { test, expect } from 'jest'
+import { describe, test, expect } from 'jest'
 import { mount } from 'enzyme'
 import React from 'react'
 
 import SignatureCanvas from './index.js'
+import { dotData } from '../test-utils/fixtures.js'
 
 test('mounts canvas and instance properly', () => {
   const wrapper = mount(<SignatureCanvas />)
   expect(wrapper.exists('canvas')).toBe(true)
   const instance = wrapper.instance()
   expect(instance.isEmpty()).toBe(true)
 })
+
+describe('SigCanvas wrapper methods return equivalent to SigPad', () => {
+  const rSigPad = mount(<SignatureCanvas />).instance()
+  const sigPad = rSigPad.getSignaturePad()
+
+  test('toData should be equivalent', () => {
+    const rData = rSigPad.toData()
+    expect(rData).toStrictEqual([])
+    expect(rData).toBe(sigPad.toData())
+  })
+
+  test('fromData should be equivalent', () => {
+    rSigPad.fromData(dotData)
+    const rData = rSigPad.toData()
+    expect(rData).toBe(dotData)
+    expect(rData).toBe(sigPad.toData())
+
+    // test reverse as both froms should be equivalent
+    sigPad.fromData(dotData)
+    const data = sigPad.toData()
+    expect(rData).toBe(data)
+    expect(rSigPad.toData()).toBe(data)
+  })
+
+  test('toDataURL should be equivalent', () => {
+    rSigPad.fromData(dotData)
+    expect(rSigPad.toDataURL()).toBe(sigPad.toDataURL())
+    expect(rSigPad.toDataURL('image/jpg')).toBe(sigPad.toDataURL('image/jpg'))
+    expect(rSigPad.toDataURL('image/jpg', 0.7)).toBe(sigPad.toDataURL('image/jpg', 0.7))
+    expect(rSigPad.toDataURL('image/svg+xml')).toBe(sigPad.toDataURL('image/svg+xml'))
+  })
+
+  test('fromDataURL should be equivalent', () => {
+    // convert data fixture to dataURL
+    rSigPad.fromData(dotData)
+    const dotDataURL = rSigPad.toDataURL()
+
+    rSigPad.fromDataURL(dotDataURL)
+    const rDataURL = rSigPad.toDataURL()
+    expect(rDataURL).toBe(dotDataURL)
+    expect(rDataURL).toBe(sigPad.toDataURL())
+
+    // test reverse as both froms should be equivalent
+    sigPad.fromDataURL(dotDataURL)
+    const dataURL = sigPad.toDataURL()
+    expect(rDataURL).toBe(dataURL)
+    expect(rSigPad.toDataURL()).toBe(dataURL)
+  })
+
+  test('isEmpty & clear should be equivalent', () => {
+    rSigPad.fromData(dotData)
+    let isEmpty = rSigPad.isEmpty()
+    expect(isEmpty).toBe(false)
+    expect(isEmpty).toBe(sigPad.isEmpty())
+
+    // both empty after clear
+    rSigPad.clear()
+    isEmpty = rSigPad.isEmpty()
+    expect(isEmpty).toBe(true)
+    expect(isEmpty).toBe(sigPad.isEmpty())
+
+    // test reverse
+    sigPad.fromData(dotData)
+    isEmpty = rSigPad.isEmpty()
+    expect(isEmpty).toBe(false)
+    expect(isEmpty).toBe(sigPad.isEmpty())
+
+    // both empty after internal sigPad clear
+    sigPad.clear()
+    isEmpty = rSigPad.isEmpty()
+    expect(isEmpty).toBe(true)
+    expect(isEmpty).toBe(sigPad.isEmpty())
+  })
+})

test-utils/fixtures.js

@@ -0,0 +1,3 @@
+export const dotData = [
+  [{ x: 466.59375, y: 189, time: 1564339579755, color: 'black' }]
+]

test-utils/jest-export.js

@@ -1,4 +1,4 @@
 // export Jest as an ES Module (https://github.com/facebook/jest/pull/7571#issuecomment-498634094)
 /* global jest */
 export default jest
-export const { expect, test } = global
+export const { expect, test, describe } = global