Fix testing

Author: Bunlong

test/CSVReader.spec.tsx

@@ -1,17 +1,21 @@
+/**
+ * @jest-environment jsdom
+ */
+
 import React from 'react';
-import expect from 'expect';
+// import expect from 'expect';
 import CustomReader from './CustomReader';
 import renderer from 'react-test-renderer';
 
 // eslint-disable-next-line no-undef
 describe('CSVReader', () => {
   // eslint-disable-next-line no-undef
-  it('should match snapshot', function () {
-    const handleFileUploaded = jest.fn().mockImplementation();
+  it('should match snapshot', async function () {
+    const handleUploadAccepted = jest.fn().mockImplementation();
     const tree = renderer
       .create(
         <CustomReader
-          onFileLoaded={handleFileUploaded}
+          onUploadAccepted={handleUploadAccepted}
           label="Chargez votre offre"
         />
       )

test/CustomReader.tsx

@@ -1,19 +1,42 @@
 import React from 'react';
-import { CSVReader } from '../src/react-papaparse';
+import { useCSVReader } from '../src/react-papaparse';
 
 interface CustomReaderProps {
-  onFileLoaded?: ((data: any, file?: any) => void) | undefined;
+  onUploadAccepted?: ((data: any, file?: any) => void) | undefined;
   label: string;
 }
 
 const CustomReader: React.FC<CustomReaderProps> = (
   props: CustomReaderProps
 ) => {
-  const { onFileLoaded, label } = props;
+  const { CSVReader } = useCSVReader();
+  const { onUploadAccepted, label } = props;
 
   return (
-    <CSVReader onFileLoad={onFileLoaded}>
-      <span>{label}</span>
+    <CSVReader
+      onUploadAccepted={onUploadAccepted}
+    >
+      {({
+        getRootProps,
+        acceptedFile,
+        ProgressBar,
+        getRemoveFileProps,
+      }: any) => (
+        <>
+          <div>
+            <button type='button' {...getRootProps()}>
+              {label}
+            </button>
+            <div>
+              {acceptedFile && acceptedFile.name}
+            </div>
+            <button {...getRemoveFileProps()}>
+              Remove
+            </button>
+          </div>
+          <ProgressBar />
+        </>
+      )}
     </CSVReader>
   );
 };

test/__snapshots__/CSVReader.spec.tsx.snap

@@ -4,35 +4,52 @@ exports[`CSVReader should match snapshot 1`] = `
 Array [
   <input
     accept="text/csv, .csv, application/vnd.ms-excel"
+    autoComplete="off"
+    multiple={false}
     onChange={[Function]}
+    onClick={[Function]}
     style={
       Object {
         "display": "none",
       }
     }
+    tabIndex={-1}
     type="file"
   />,
-  <div
-    onClick={[Function]}
+  <div>
+    <button
+      onBlur={[Function]}
+      onClick={[Function]}
+      onDragEnter={[Function]}
+      onDragLeave={[Function]}
+      onDragOver={[Function]}
+      onDrop={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      type="button"
+    >
+      Chargez votre offre
+    </button>
+    <div />
+    <button
+      onClick={[Function]}
+    >
+      Remove
+    </button>
+  </div>,
+  <span
     style={
       Object {
-        "alignItems": "center",
-        "borderColor": "#CCC",
-        "borderRadius": 20,
-        "borderStyle": "dashed",
-        "borderWidth": 2,
-        "cursor": "pointer",
-        "display": "flex",
-        "flexDirection": "column",
-        "height": "100%",
-        "justifyContent": "center",
-        "padding": 20,
+        "backgroundColor": "#659cef",
+        "borderRadius": 3,
+        "bottom": 14,
+        "boxShadow": "inset 0 1px 3px rgba(0, 0, 0, .2)",
+        "display": "none",
+        "height": 10,
+        "transition": "width 500ms ease-in-out",
+        "width": "0%",
       }
     }
-  >
-    <span>
-      Chargez votre offre
-    </span>
-  </div>,
+  />,
 ]
 `;

test/utils.spec.ts

@@ -1,11 +1,11 @@
 import expect from 'expect'
-import getSize from '../src/utils'
+import { formatFileSize } from '../src/utils'
 
 // eslint-disable-next-line no-undef
 describe('util', () => {
   // eslint-disable-next-line no-undef
   it('should return 1 KB', function() {
-    const strSize = getSize(1000)
+    const strSize = formatFileSize(1000)
     expect(strSize).toEqual('1 KB')
   })
 })