Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
e2272ab
commit f77c996
Showing
5 changed files
with
239 additions
and
17 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,140 @@ | ||
import React from "react"; | ||
import { cleanup, render, fireEvent } from "@testing-library/react"; | ||
import "@testing-library/jest-dom/extend-expect"; | ||
import userEvent from "../../src"; | ||
|
||
afterEach(cleanup); | ||
|
||
describe("userEvent.upload", () => { | ||
it("should fire the correct events for input", () => { | ||
const file = new File(["hello"], "hello.png", { type: "image/png" }); | ||
const events = []; | ||
const eventsHandler = jest.fn((evt) => events.push(evt.type)); | ||
const eventHandlers = { | ||
onMouseOver: eventsHandler, | ||
onMouseMove: eventsHandler, | ||
onMouseDown: eventsHandler, | ||
onFocus: eventsHandler, | ||
onMouseUp: eventsHandler, | ||
onClick: eventsHandler, | ||
}; | ||
|
||
const { getByTestId } = render( | ||
<input type="file" data-testid="element" {...eventHandlers} /> | ||
); | ||
|
||
userEvent.upload(getByTestId("element"), file); | ||
|
||
expect(events).toEqual([ | ||
"mouseover", | ||
"mousemove", | ||
"mousedown", | ||
"focus", | ||
"mouseup", | ||
"click", | ||
]); | ||
}); | ||
|
||
it("should fire the correct events with label", () => { | ||
const file = new File(["hello"], "hello.png", { type: "image/png" }); | ||
|
||
const inputEvents = []; | ||
const labelEvents = []; | ||
const eventsHandler = (events) => jest.fn((evt) => events.push(evt.type)); | ||
|
||
const getEventHandlers = (events) => ({ | ||
onMouseOver: eventsHandler(events), | ||
onMouseMove: eventsHandler(events), | ||
onMouseDown: eventsHandler(events), | ||
onFocus: eventsHandler(events), | ||
onMouseUp: eventsHandler(events), | ||
onClick: eventsHandler(events), | ||
}); | ||
|
||
const { getByTestId } = render( | ||
<> | ||
<label | ||
htmlFor="element" | ||
data-testid="label" | ||
{...getEventHandlers(labelEvents)} | ||
> | ||
Element | ||
</label> | ||
<input type="file" id="element" {...getEventHandlers(inputEvents)} /> | ||
</> | ||
); | ||
|
||
userEvent.upload(getByTestId("label"), file); | ||
|
||
expect(inputEvents).toEqual(["focus", "click"]); | ||
expect(labelEvents).toEqual([ | ||
"mouseover", | ||
"mousemove", | ||
"mousedown", | ||
"mouseup", | ||
"click", | ||
]); | ||
}); | ||
|
||
it("should upload the file", () => { | ||
const file = new File(["hello"], "hello.png", { type: "image/png" }); | ||
const { getByTestId } = render(<input type="file" data-testid="element" />); | ||
const input = getByTestId("element"); | ||
|
||
userEvent.upload(input, file); | ||
|
||
expect(input.files[0]).toStrictEqual(file); | ||
expect(input.files.item(0)).toStrictEqual(file); | ||
expect(input.files).toHaveLength(1); | ||
|
||
fireEvent.change(input, { | ||
target: { files: { item: () => {}, length: 0 } }, | ||
}); | ||
|
||
expect(input.files[0]).toBeUndefined(); | ||
expect(input.files.item[0]).toBeUndefined(); | ||
expect(input.files).toHaveLength(0); | ||
}); | ||
|
||
it("should upload multiple files", () => { | ||
const files = [ | ||
new File(["hello"], "hello.png", { type: "image/png" }), | ||
new File(["there"], "there.png", { type: "image/png" }), | ||
]; | ||
const { getByTestId } = render( | ||
<input type="file" multiple data-testid="element" /> | ||
); | ||
const input = getByTestId("element"); | ||
|
||
userEvent.upload(input, files); | ||
|
||
expect(input.files[0]).toStrictEqual(files[0]); | ||
expect(input.files.item(0)).toStrictEqual(files[0]); | ||
expect(input.files[1]).toStrictEqual(files[1]); | ||
expect(input.files.item(1)).toStrictEqual(files[1]); | ||
expect(input.files).toHaveLength(2); | ||
|
||
fireEvent.change(input, { | ||
target: { files: { item: () => {}, length: 0 } }, | ||
}); | ||
|
||
expect(input.files[0]).toBeUndefined(); | ||
expect(input.files.item[0]).toBeUndefined(); | ||
expect(input.files).toHaveLength(0); | ||
}); | ||
|
||
it("should not upload when is disabled", () => { | ||
const file = new File(["hello"], "hello.png", { type: "image/png" }); | ||
const { getByTestId } = render( | ||
<input type="file" data-testid="element" disabled /> | ||
); | ||
|
||
const input = getByTestId("element"); | ||
|
||
userEvent.upload(input, file); | ||
|
||
expect(input.files[0]).toBeUndefined(); | ||
expect(input.files.item[0]).toBeUndefined(); | ||
expect(input.files).toHaveLength(0); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,27 +1,39 @@ | ||
// Definitions by: Wu Haotian <https://github.com/whtsky> | ||
export interface IUserOptions { | ||
allAtOnce?: boolean; | ||
delay?: number; | ||
allAtOnce?: boolean; | ||
delay?: number; | ||
} | ||
|
||
export interface ITabUserOptions { | ||
shift?: boolean; | ||
focusTrap?: Document | Element; | ||
shift?: boolean; | ||
focusTrap?: Document | Element; | ||
} | ||
|
||
export type TargetElement = Element | Window; | ||
|
||
export type FilesArgument = File | File[]; | ||
|
||
export type UploadInitArgument = { | ||
clickInit?: MouseEventInit; | ||
changeInit?: Event; | ||
}; | ||
|
||
declare const userEvent: { | ||
clear: (element: TargetElement) => void; | ||
click: (element: TargetElement, init?: MouseEventInit) => void; | ||
dblClick: (element: TargetElement) => void; | ||
selectOptions: (element: TargetElement, values: string | string[]) => void; | ||
type: ( | ||
element: TargetElement, | ||
text: string, | ||
userOpts?: IUserOptions | ||
) => Promise<void>; | ||
tab: (userOpts?: ITabUserOptions) => void; | ||
clear: (element: TargetElement) => void; | ||
click: (element: TargetElement, init?: MouseEventInit) => void; | ||
dblClick: (element: TargetElement) => void; | ||
selectOptions: (element: TargetElement, values: string | string[]) => void; | ||
upload: ( | ||
element: TargetElement, | ||
files: FilesArgument, | ||
init?: UploadInitArgument | ||
) => void; | ||
type: ( | ||
element: TargetElement, | ||
text: string, | ||
userOpts?: IUserOptions | ||
) => Promise<void>; | ||
tab: (userOpts?: ITabUserOptions) => void; | ||
}; | ||
|
||
export default userEvent; |