add tests covering json upload

jest.config.ts

@@ -7,12 +7,7 @@ const jestConfig: JestConfigWithTsJest = {
   transform: {
     // '^.+\\.[tj]sx?$' to process js/ts with `ts-jest`
     // '^.+\\.m?[tj]sx?$' to process js/ts/mjs/mts with `ts-jest`
-    '^.+\\.tsx?$': [
-      'ts-jest',
-      {
-        // ts-jest configuration goes here
-      },
-    ],
+    '^.+\\.tsx?$': ['ts-jest', { tsconfig: 'tsconfig.jest.json' }],
   },
   setupFilesAfterEnv: ['./src/setupTests.ts'],
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],

src/app/page.test.tsx

@@ -1,26 +1,7 @@
-import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import Home from './page';
-import { FunnelType } from 'src/funnel.types';
 
 describe('Home', () => {
-  const mockFunnel: FunnelType = {
-    name: 'Test Funnel',
-    bgColor: '#ffffff',
-    pages: [
-      {
-        id: 'page-1',
-        blocks: [
-          {
-            id: 'image-1',
-            type: 'image',
-            src: 'https://example.com/image.jpg',
-          },
-        ],
-      },
-    ],
-  };
-
   it('renders without crashing', () => {
     render(<Home />);
 

src/components/UploadDropzone.test.tsx

@@ -0,0 +1,61 @@
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import { UploadDropzone } from './UploadDropzone';
+import { FunnelType } from 'src/funnel.types';
+
+const mockFunnel: FunnelType = {
+  name: 'My Custom Funnel',
+  bgColor: '#ffffff',
+  pages: [
+    {
+      id: 'page-1',
+      blocks: [
+        {
+          id: 'image-1',
+          type: 'image',
+          src: 'https://example.com/image.jpg',
+        },
+      ],
+    },
+  ],
+};
+
+// Create a Blob that looks like a File.
+const invalidFunnelFile = new File(['(⌐□_□)'], 'funnel.json', { type: 'application/json' });
+const validFunnelFile = new File([JSON.stringify(mockFunnel)], 'funnel.json', {
+  type: 'application/json',
+});
+
+describe('UploadDropzone', () => {
+  it('handles invalid files', async () => {
+    // prepare
+    const onUploadSuccess = jest.fn();
+    const { getByLabelText } = render(<UploadDropzone onUploadSuccess={onUploadSuccess} />);
+
+    // act
+    fireEvent.change(getByLabelText(/upload your own JSON file/i), {
+      target: { files: [invalidFunnelFile] },
+    });
+
+    // assert
+    expect(await screen.findByText('Oops!')).toBeVisible();
+    expect(onUploadSuccess).not.toHaveBeenCalled();
+  });
+
+  it('handles valid json and previews them right away', async () => {
+    // prepare
+    const onUploadSuccess = jest.fn();
+    render(<UploadDropzone onUploadSuccess={onUploadSuccess} />);
+
+    //act
+    fireEvent.change(screen.getByLabelText(/upload your own JSON file/i), {
+      target: { files: [validFunnelFile] },
+    });
+
+    // assert
+    await waitFor(() => {
+      expect(onUploadSuccess).toHaveBeenCalledWith(expect.objectContaining(mockFunnel));
+    });
+
+    expect(screen.queryByText('Oops!')).not.toBeInTheDocument();
+  });
+});

src/components/UploadDropzone.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useRef, useState } from 'react';
+import { useCallback, useState } from 'react';
 import { FileRejection, useDropzone } from 'react-dropzone';
 import { FunnelType } from 'src/funnel.types';
 import { cn } from 'src/utils/cn';
@@ -10,8 +10,6 @@ type Props = {
 };
 
 export const UploadDropzone = ({ onUploadSuccess }: Props) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-
   const [error, setError] = useState<string | undefined>();
 
   const uploadFile = useCallback(
@@ -102,7 +100,6 @@ export const UploadDropzone = ({ onUploadSuccess }: Props) => {
         )}
 
         <input
-          ref={inputRef}
           type="file"
           multiple={false}
           name="previewJson"

tsconfig.jest.json

@@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react-jsx" // this is necessary for Jest to run properly, but Nextjs doesnt like it
+  }
+}

tsconfig.json

@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,10 +23,21 @@
       }
     ],
     "paths": {
-      "src/*": ["./src/*"]
+      "src/*": [
+        "./src/*"
+      ]
     },
-    "types": ["@testing-library/jest-dom"]
+    "types": [
+      "@testing-library/jest-dom"
+    ]
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"]
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }