1+ import React from "react" ;
2+ import { ImageUpload } from "./ImageUpload" ;
3+ import { render , screen } from "@testing-library/react" ;
4+ import userEvent from "@testing-library/user-event" ;
5+ import MockDataTransfer from "./_MockDataTransfer" ;
6+ import "@testing-library/jest-dom" ;
7+
8+
9+ const defaultAltText = "Image uploader input" ;
10+ const defaultArgs = {
11+ id : 'test-uploader' ,
12+ accept : 'image/jpeg' ,
13+ multiSelect : false ,
14+ maxSize : 2
15+ } ;
16+
17+ /**
18+ * Monkeypatch JSDOM file input to allow modification (this is a thing in the browser but
19+ * not in JSDOM for some reason.)
20+ */
21+ const fileCache = new WeakMap ( ) ;
22+
23+ Object . defineProperty ( HTMLInputElement . prototype , 'files' , {
24+ // set(fileList) {
25+ // // use the input itself as the map key to avoid collisions
26+ // fileCache.set(this, fileList);
27+
28+ // the first time we set install a new set of getter/setter that point to the cache
29+ // Object.defineProperty(this, 'files', {
30+ get ( ) {
31+ return fileCache . get ( this ) ;
32+ } ,
33+ set ( value ) {
34+ fileCache . set ( this , value ) ;
35+ } ,
36+ // });
37+ // },
38+ } ) ;
39+
40+ // @ts -expect-error MockDataTransfer is a minimal mock
41+ global . DataTransfer = MockDataTransfer ;
42+
43+ Object . defineProperty ( URL , 'createObjectURL' , {
44+ value : jest . fn ( ( file ) => `http://localhost/${ Buffer . from ( file . name ) . toString ( 'base64' ) } ) ,
45+ } ) ;
46+
47+ describe ( "========== C4 IMAGE UPLOAD - RUNNING TESTS ==========" , ( ) => {
48+ test ( "Renders input with custom id and accepted types" , ( ) => {
49+ render ( < ImageUpload { ...defaultArgs } /> ) ;
50+ const input : HTMLInputElement = screen . getByAltText ( defaultAltText ) ;
51+ expect ( input ) . toHaveAttribute ( 'id' , defaultArgs . id ) ;
52+ expect ( input ) . toHaveAttribute ( 'accept' , defaultArgs . accept ) ;
53+ } ) ;
54+
55+ test ( "Displays correct size limit to user" , ( ) => {
56+ const maxSize = 10 ;
57+ render ( < ImageUpload { ...defaultArgs } maxSize = { maxSize } /> ) ;
58+ const sizeHelperMessage = screen . getByText ( `Max file size: ${ maxSize } ) ;
59+ expect ( sizeHelperMessage ) . not . toBeNull ( ) ;
60+ } ) ;
61+
62+ // test("Triggers correct onChange event logic", async () => {
63+ // const user = userEvent.setup();
64+ // render(<ImageUpload {...defaultArgs} />);
65+ // const file = new File(['(⌐□_□)'], "test.jpeg", { type: "image/jpeg" });
66+ // const input: HTMLInputElement = screen.getByAltText(defaultAltText);
67+
68+ // await userEvent.upload(input, file);
69+ // console.log(input.files);
70+ // input = screen.getByAltText(defaultAltText);
71+ // console.log(input.files)
72+ // const caption = screen.getByText("1 file selected");
73+ // expect(caption).not.toBeNull();
74+ // })
75+
76+
77+ } ) ;
0 commit comments