tests: add a helper to clean test dom after each test (#85557)

tests/godo.test.js

@@ -1,12 +1,16 @@
 import Godo from '../src-js/godo'
-import {test, expect} from 'vitest'
+import {expect} from 'vitest'
+import { domTest } from './helpers.mjs'
 
-test('test create editor', async () => {
-  const form = document.createElement('form')
-  const textArea = document.createElement('textarea')
-  form.appendChild(textArea)
+domTest('test create editor', async ({appendToDom}) => {
+  const form = appendToDom(`
+    <form>
+      <textarea></textarea>
+    </form>
+  `)
+  const textArea = form.querySelector('textarea')
   const godo = new Godo(textArea, {})
   expect(godo).not.toBe(undefined)
-  expect(document.querySelector('.godo')).not.toBe(undefined)
+  expect(form.querySelector('.godo')).not.toBe(undefined)
 })
 

tests/helpers.mjs

@@ -1,7 +1,7 @@
 import {EditorState, Selection, TextSelection} from 'prosemirror-state'
 import {DOMParser, DOMSerializer} from 'prosemirror-model'
 import {history} from 'prosemirror-history'
-import {vi} from 'vitest'
+import {vi, test} from 'vitest'
 
 import {loadSchema} from '../src-js/utils'
 import {buildKeymap} from '../src-js/utils.mjs'
@@ -99,3 +99,21 @@ export class TestState {
   clickMarksMenu (name) { this.marksMenu[name].run(this.state, tr => this.apply(tr), viewMock) }
 }
 
+export const domTest = test.extend({
+  // Empty {} is required by vitest
+  // eslint-disable-next-line no-empty-pattern
+  appendToDom: async ({}, use) => {
+    const wrappers = []
+    const appendToDom = (htmlContent) => {
+      const wrapper = document.createElement('div')
+      wrapper.innerHTML = htmlContent
+      document.appendChild(wrapper)
+      wrappers.push(wrapper)
+      return wrapper
+    }
+    await use(appendToDom)
+    for (const wrapper of wrappers) {
+      wrapper.remove()
+    }
+  },
+})