test: rework snapshot tests

Author: kentcdodds

jest.config.js

@@ -6,6 +6,7 @@ const {
 } = require('kcd-scripts/jest')
 
 module.exports = {
+  resetMocks: true,
   collectCoverageFrom,
   coveragePathIgnorePatterns: [
     ...coveragePathIgnorePatterns,

package.json

@@ -51,6 +51,7 @@
     "jest-watch-select-projects": "^2.0.0",
     "jsdom": "^16.2.2",
     "kcd-scripts": "^6.2.0",
+    "redent": "^3.0.0",
     "typescript": "^3.9.5"
   },
   "eslintConfig": {

src/user-event/__mocks__/utils.js

@@ -0,0 +1,49 @@
+const {getElementDisplayName} = require('../__tests__/helpers/utils')
+const actual = jest.requireActual('../utils')
+
+function getTrackedElementValues(element) {
+  return {
+    value: element.value,
+    checked: element.checked,
+    selectionStart: element.selectionStart,
+    selectionEnd: element.selectionEnd,
+    selectedOptions: element.selectedOptions
+      ? Array.from(element.selectedOptions).map(o => o.value)
+      : null,
+  }
+}
+
+function wrapWithTestData(fn) {
+  return async (element, init) => {
+    const before = getTrackedElementValues(element)
+    const testData = {
+      before,
+      elementDisplayName: getElementDisplayName(element),
+    }
+
+    // put it on the element so the event handler can grab it
+    element.testData = testData
+    const result = await fn(element, init)
+
+    const after = getTrackedElementValues(element)
+    Object.assign(testData, {after})
+
+    // elete the testData for the next event
+    delete element.testData
+    return result
+  }
+}
+
+const mockFireEvent = wrapWithTestData(actual.fireEvent)
+for (const key of Object.keys(actual.fireEvent)) {
+  if (typeof actual.fireEvent[key] === 'function') {
+    mockFireEvent[key] = wrapWithTestData(actual.fireEvent[key], key)
+  } else {
+    mockFireEvent[key] = actual.fireEvent[key]
+  }
+}
+
+module.exports = {
+  ...actual,
+  fireEvent: mockFireEvent,
+}

src/user-event/__tests__/clear.js

@@ -8,13 +8,14 @@ test('clears text', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    focus
-    select
-    select
-    keydown: Delete (46)
-    input: "{SELECTION}hello{/SELECTION}" -> ""
-    select
-    keyup: Delete (46)
+    input[value="hello"] - focus
+    input[value="hello"] - select
+    input[value="hello"] - select
+    input[value="hello"] - keydown: Delete (46)
+    input[value="hello"] - input
+      "{SELECTION}hello{/SELECTION}" -> "{CURSOR}"
+    input[value=""] - select
+    input[value=""] - keyup: Delete (46)
   `)
 })
 
@@ -40,11 +41,11 @@ test('does not clear text on readonly inputs', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value="hello"]
 
-    focus
-    select
-    select
-    keydown: Delete (46)
-    keyup: Delete (46)
+    input[value="hello"] - focus
+    input[value="hello"] - select
+    input[value="hello"] - select
+    input[value="hello"] - keydown: Delete (46)
+    input[value="hello"] - keyup: Delete (46)
   `)
 })
 

src/user-event/__tests__/click.js

@@ -7,13 +7,13 @@ test('click in input', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[value=""]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    focusin
-    mouseup: Left (0)
-    click: Left (0)
+    input[value=""] - mouseover: Left (0)
+    input[value=""] - mousemove: Left (0)
+    input[value=""] - mousedown: Left (0)
+    input[value=""] - focus
+    input[value=""] - focusin
+    input[value=""] - mouseup: Left (0)
+    input[value=""] - click: Left (0)
   `)
 })
 
@@ -23,13 +23,13 @@ test('click in textarea', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: textarea[value=""]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    focusin
-    mouseup: Left (0)
-    click: Left (0)
+    textarea[value=""] - mouseover: Left (0)
+    textarea[value=""] - mousemove: Left (0)
+    textarea[value=""] - mousedown: Left (0)
+    textarea[value=""] - focus
+    textarea[value=""] - focusin
+    textarea[value=""] - mouseup: Left (0)
+    textarea[value=""] - click: Left (0)
   `)
 })
 
@@ -40,14 +40,17 @@ test('should fire the correct events for <input type="checkbox">', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[checked=true]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    mouseup: Left (0)
-    click: unchecked -> checked
-    input: checked
-    change
+    input[checked=false] - mouseover: Left (0)
+    input[checked=false] - mousemove: Left (0)
+    input[checked=false] - mousedown: Left (0)
+    input[checked=false] - focus
+    input[checked=false] - mouseup: Left (0)
+    input[checked=false] - click: Left (0)
+      unchecked -> checked
+    input[checked=false] - input
+      unchecked -> checked
+    input[checked=false] - change
+      unchecked -> checked
   `)
 })
 
@@ -70,14 +73,17 @@ test('should fire the correct events for <input type="radio">', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[checked=true]
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focus
-    mouseup: Left (0)
-    click: unchecked -> checked
-    input: checked
-    change
+    input[checked=false] - mouseover: Left (0)
+    input[checked=false] - mousemove: Left (0)
+    input[checked=false] - mousedown: Left (0)
+    input[checked=false] - focus
+    input[checked=false] - mouseup: Left (0)
+    input[checked=false] - click: Left (0)
+      unchecked -> checked
+    input[checked=false] - input
+      unchecked -> checked
+    input[checked=false] - change
+      unchecked -> checked
   `)
 
   expect(element).toHaveProperty('checked', true)
@@ -102,12 +108,12 @@ test('should fire the correct events for <div>', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: div
 
-    mouseover: Left (0)
-    mousemove: Left (0)
-    mousedown: Left (0)
-    focusin
-    mouseup: Left (0)
-    click: Left (0)
+    div - mouseover: Left (0)
+    div - mousemove: Left (0)
+    div - mousedown: Left (0)
+    div - focusin
+    div - mouseup: Left (0)
+    div - click: Left (0)
   `)
 })
 
@@ -143,8 +149,15 @@ test('should blur the previous element', async () => {
   expect(getEventCalls()).toMatchInlineSnapshot(`
     Events fired on: input[name="a"][value=""]
 
-    blur
-    focusout (bubbled from input[name="a"][value=""])
+    input[name="a"][value=""] - mouseover: Left (0)
+    input[name="a"][value=""] - mousemove: Left (0)
+    input[name="a"][value=""] - mousedown: Left (0)
+    input[name="a"][value=""] - focus
+    input[name="a"][value=""] - focusin
+    input[name="a"][value=""] - mouseup: Left (0)
+    input[name="a"][value=""] - click: Left (0)
+    input[name="a"][value=""] - blur
+    input[name="a"][value=""] - focusout
   `)
 })
 
@@ -161,9 +174,17 @@ test('should not blur the previous element when mousedown prevents default', asy
   await userEvent.click(a)
   clearEventCalls()
   await userEvent.click(b)
-  expect(getEventCalls()).toMatchInlineSnapshot(
-    `No events were fired on: input[name="a"][value=""]`,
-  )
+  expect(getEventCalls()).toMatchInlineSnapshot(`
+    Events fired on: input[name="a"][value=""]
+
+    input[name="a"][value=""] - mouseover: Left (0)
+    input[name="a"][value=""] - mousemove: Left (0)
+    input[name="a"][value=""] - mousedown: Left (0)
+    input[name="a"][value=""] - focus
+    input[name="a"][value=""] - focusin
+    input[name="a"][value=""] - mouseup: Left (0)
+    input[name="a"][value=""] - click: Left (0)
+  `)
 })
 
 test('does not lose focus when click updates focus', async () => {