From 7f3a6b73daa116268eb602979f5b5c5ff283f049 Mon Sep 17 00:00:00 2001 From: Hiroshi Ogawa Date: Sat, 7 Dec 2024 10:31:53 +0900 Subject: [PATCH] fix: move all to createUserEvent --- packages/browser/src/client/tester/context.ts | 70 ++++++++++++++++++- .../src/client/tester/locators/preview.ts | 40 ++--------- 2 files changed, 72 insertions(+), 38 deletions(-) diff --git a/packages/browser/src/client/tester/context.ts b/packages/browser/src/client/tester/context.ts index cd1f90876c99..6057d55eb77e 100644 --- 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 index 511ccb7ca7a3..7df1a14670ce 100644 --- 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 { - 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 { - 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 { - 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 { - throw new Error('The "preview" provider doesn\'t support `dropTo` method.') + selectOptions(options: string | string[] | HTMLElement | HTMLElement[] | Locator | Locator[]): Promise { + return ensureAwaited(() => userEvent.selectOptions(this.element(), options)) } clear(): Promise { return ensureAwaited(() => userEvent.clear(this.element())) } - async screenshot(): Promise { - throw new Error('The "preview" provider doesn\'t support `screenshot` method.') - } - protected locator(selector: string) { return new PreviewLocator(`${this._pwSelector} >> ${selector}`, this._container) }