fix: move all to createUserEvent

vitest-dev · Dec 7, 2024 · 7f3a6b7 · 7f3a6b7
1 parent e3d1a4c
commit 7f3a6b7
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 38 deletions.
diff --git a/packages/browser/src/client/tester/context.ts b/packages/browser/src/client/tester/context.ts
@@ -58,29 +58,95 @@ export function createUserEvent(__tl_user_event_base__?: TestingLibraryUserEvent
       return convertToLocator(element).click(processClickOptions(options))
     },
     dblClick(element: Element | Locator, options: UserEventClickOptions = {}) {
+      if (typeof __tl_user_event__ !== 'undefined') {
+        return __tl_user_event__.dblClick(
+          element instanceof Element ? element : element.element(),
+        )
+      }
       return convertToLocator(element).dblClick(processClickOptions(options))
     },
     tripleClick(element: Element | Locator, options: UserEventClickOptions = {}) {
+      if (typeof __tl_user_event__ !== 'undefined') {
+        return __tl_user_event__.tripleClick(
+          element instanceof Element ? element : element.element(),
+        )
+      }
       return convertToLocator(element).tripleClick(processClickOptions(options))
     },
     selectOptions(element, value) {
+      if (typeof __tl_user_event__ !== 'undefined') {
+        const options = (Array.isArray(value) ? value : [value]).map((option) => {
+          if (typeof option !== 'string' && 'element' in option) {
+            return option.element() as HTMLElement
+          }
+          return option
+        })
+        return __tl_user_event__.selectOptions(
+          element,
+          options as string[] | HTMLElement[],
+        )
+      }
       return convertToLocator(element).selectOptions(value)
     },
     clear(element: Element | Locator) {
+      if (typeof __tl_user_event__ !== 'undefined') {
+        return __tl_user_event__.clear(
+          element instanceof Element ? element : element.element(),
+        )
+      }
       return convertToLocator(element).clear()
     },
     hover(element: Element | Locator, options: UserEventHoverOptions = {}) {
+      if (typeof __tl_user_event__ !== 'undefined') {
+        return __tl_user_event__.hover(
+          element instanceof Element ? element : element.element(),
+        )
+      }
       return convertToLocator(element).hover(processHoverOptions(options))
     },
     unhover(element: Element | Locator, options: UserEventHoverOptions = {}) {
+      if (typeof __tl_user_event__ !== 'undefined') {
+        return __tl_user_event__.unhover(
+          element instanceof Element ? element : element.element(),
+        )
+      }
       return convertToLocator(element).unhover(options)
     },
-    upload(element: Element | Locator, files: string | string[] | File | File[]) {
+    async upload(element: Element | Locator, files: string | string[] | File | File[]) {
+      if (typeof __tl_user_event__ !== 'undefined') {
+        const uploadPromise = (Array.isArray(files) ? files : [files]).map(async (file) => {
+          if (typeof file !== 'string') {
+            return file
+          }
+
+          const { content: base64, basename, mime } = await triggerCommand<{
+            content: string
+            basename: string
+            mime: string
+          }>('__vitest_fileInfo', file, 'base64')
+
+          const fileInstance = fetch(`data:${mime};base64,${base64}`)
+            .then(r => r.blob())
+            .then(blob => new File([blob], basename, { type: mime }))
+          return fileInstance
+        })
+        const uploadFiles = await Promise.all(uploadPromise)
+        return __tl_user_event__.upload((element instanceof Element ? element : element.element()) as HTMLElement, uploadFiles)
+      }
       return convertToLocator(element).upload(files)
     },
 
     // non userEvent events, but still useful
-    fill(element: Element | Locator, text: string, options) {
+    async fill(element: Element | Locator, text: string, options) {
+      if (typeof __tl_user_event__ !== 'undefined') {
+        await __tl_user_event__.clear(
+          element instanceof Element ? element : element.element(),
+        )
+        return __tl_user_event__.type(
+          element instanceof Element ? element : element.element(),
+          text,
+        )
+      }
       return convertToLocator(element).fill(text, options)
     },
     dragAndDrop(source: Element | Locator, target: Element | Locator, options = {}) {

diff --git a/packages/browser/src/client/tester/locators/preview.ts b/packages/browser/src/client/tester/locators/preview.ts
@@ -77,53 +77,21 @@ class PreviewLocator extends Locator {
   }
 
   async fill(text: string): Promise<void> {
-    await this.clear()
-    return ensureAwaited(() => userEvent.type(this.element(), text))
+    return ensureAwaited(() => userEvent.fill(this.element(), text))
   }
 
   async upload(file: string | string[] | File | File[]): Promise<void> {
-    const uploadPromise = (Array.isArray(file) ? file : [file]).map(async (file) => {
-      if (typeof file !== 'string') {
-        return file
-      }
-
-      const { content: base64, basename, mime } = await this.triggerCommand<{
-        content: string
-        basename: string
-        mime: string
-      }>('__vitest_fileInfo', file, 'base64')
-
-      const fileInstance = fetch(`data:${mime};base64,${base64}`)
-        .then(r => r.blob())
-        .then(blob => new File([blob], basename, { type: mime }))
-      return fileInstance
-    })
-    const uploadFiles = await Promise.all(uploadPromise)
-    return ensureAwaited(() => userEvent.upload(this.element() as HTMLElement, uploadFiles))
-  }
-
-  selectOptions(options_: string | string[] | HTMLElement | HTMLElement[] | Locator | Locator[]): Promise<void> {
-    const options = (Array.isArray(options_) ? options_ : [options_]).map((option) => {
-      if (typeof option !== 'string' && 'element' in option) {
-        return option.element() as HTMLElement
-      }
-      return option
-    })
-    return ensureAwaited(() => userEvent.selectOptions(this.element(), options as string[] | HTMLElement[]))
+    return ensureAwaited(() => userEvent.upload(this.element(), file))
   }
 
-  async dropTo(): Promise<void> {
-    throw new Error('The "preview" provider doesn\'t support `dropTo` method.')
+  selectOptions(options: string | string[] | HTMLElement | HTMLElement[] | Locator | Locator[]): Promise<void> {
+    return ensureAwaited(() => userEvent.selectOptions(this.element(), options))
   }
 
   clear(): Promise<void> {
     return ensureAwaited(() => userEvent.clear(this.element()))
   }
 
-  async screenshot(): Promise<never> {
-    throw new Error('The "preview" provider doesn\'t support `screenshot` method.')
-  }
-
   protected locator(selector: string) {
     return new PreviewLocator(`${this._pwSelector} >> ${selector}`, this._container)
   }