test: create test for UploadNotesStep component

babel.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+    presets: [
+      '@babel/preset-env',
+      '@babel/preset-react',
+      '@babel/preset-typescript',
+    ],
+  };
+

components/notes/CreateWorksheetForm/UploadNotesPage/NotesUploadBox.tsx

@@ -1,15 +1,10 @@
 "use client";
-
-import { useState } from "react";
-import {
-  FileUploader,
-  FileUploaderContent,
-  FileUploaderItem,
-  FileInput,
-} from "@/components/ui/FileUploader"; 
-import { Paperclip } from "lucide-react";
-import { useCreateWorksheetContext } from "@/context/CreateWorksheetConext";
-import { LoadingSpinner } from "@/components/ui/LoadingSpinner";
+import React, { useState } from 'react';
+import { FileUploader, FileUploaderContent, FileUploaderItem, FileInput } from '@/components/ui/FileUploader'; 
+import { Paperclip } from 'lucide-react';
+import { useCreateWorksheetContext } from '@/context/CreateWorksheetConext';
+import { LoadingSpinner } from '@/components/ui/LoadingSpinner';
+import { FormState } from '@/lib/interfaces';
 
 type NotesUploadBoxProps = {
   onUploadSuccess: () => void;
@@ -53,13 +48,10 @@ const NotesUploadBox: React.FC<NotesUploadBoxProps> = ({ onUploadSuccess }) => {
             }
 
             const data = await response.json();
-            console.log(data.text);
-
-            setFormState((prev) => ({
+            setFormState((prev: FormState) => ({
               ...prev,
               notes: { ...prev.notes, text: data.text },
             }));
-
 
             onUploadSuccess(); 
           } catch (error) {
@@ -74,7 +66,9 @@ const NotesUploadBox: React.FC<NotesUploadBoxProps> = ({ onUploadSuccess }) => {
       reader.readAsDataURL(file);
     }
   };
- console.log("formState in notesupload component code" ,formState.notes.text)
+
+
+
   return (
     <div className="relative">
       {loading && (
@@ -88,7 +82,7 @@ const NotesUploadBox: React.FC<NotesUploadBoxProps> = ({ onUploadSuccess }) => {
         dropzoneOptions={dropZoneConfig}
         className="relative bg-background rounded-lg p-4 border border-border theme-custom"
       >
-        <FileInput className=" outline-1 outline-border text-foreground">
+        <FileInput className="outline-dashed outline-1 outline-border text-foreground">
           <div className="flex items-center justify-center flex-col pt-3 pb-4 w-full">
             <img src="/file-upload-icon.svg" alt="File upload icon" width={40} height={32} />
             <p className="mb-1 text-sm text-muted-foreground">

components/ui/FileUploader.tsx

@@ -1,5 +1,5 @@
 "use client";
-
+import React from "react";
 import { Input } from "@/components/ui/input";
 import { cn } from "@/lib/utils";
 import {

context/CreateWorksheetConext.tsx

@@ -1,11 +1,6 @@
-"use client"
-import { createContext, useContext, useState, ReactNode, FC } from 'react';
-import { Notes, Worksheet } from '@/lib/types';
-
-type FormState = {
-  notes: Notes;
-  worksheet: Worksheet;
-};
+"use client";
+import React, { createContext, useContext, useState, ReactNode, FC } from 'react';
+import { FormState, Notes, Worksheet } from '@/lib/interfaces';
 
 const defaultNotes: Notes = { text: '', id: '', level: '' };
 const defaultWorksheet: Worksheet = { date: '', id: '', text: '', level: '' };

jest.config.ts

@@ -1,16 +1,18 @@
 import type { Config } from '@jest/types';
 
 const config: Config.InitialOptions = {
-  testEnvironment: 'jsdom',
+  testEnvironment: 'jest-environment-jsdom',
   setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
   moduleNameMapper: {
     '\\.(css|less|scss|sass)$': 'identity-obj-proxy',
-    '^@/(.*)$': '<rootDir>/app/$1',
+    '^@/(.*)$': '<rootDir>/$1',
   },
   testPathIgnorePatterns: ['<rootDir>/.next/', '<rootDir>/node_modules/', '<rootDir>/api/'],
   testMatch: ['<rootDir>/tests/**/*.[jt]s?(x)'],
   transform: {
-    '^.+\\.ts?$': 'ts-jest',
+    '^.+\\.(ts|tsx)$': ['ts-jest', {
+      tsconfig: '<rootDir>/tsconfig.jest.json',
+    }],
   },
 };
 

jest.setup.ts

@@ -1 +1,3 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
+
+

lib/interfaces.ts

@@ -0,0 +1,17 @@
+export interface Notes {
+    text: string;
+    id: string;
+    level: string;
+  }
+
+  export interface Worksheet {
+    date: string;
+    id: string;
+    text: string;
+    level: string;
+  }
+
+  export interface FormState {
+    notes: Notes;
+    worksheet: Worksheet;
+  }

package.json

@@ -8,7 +8,8 @@
     "dev": "concurrently \"pnpm run next-dev\" \"pnpm run flask-dev\"",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "test": "jest"
   },
   "dependencies": {
     "@hookform/resolvers": "^3.6.0",
@@ -58,13 +59,18 @@
     "node": "18.x"
   },
   "devDependencies": {
+    "@jest/globals": "^29.7.0",
     "@testing-library/jest-dom": "^6.4.6",
     "@testing-library/react": "^16.0.0",
     "@testing-library/user-event": "^14.5.2",
+    "@types/jest": "^29.5.12",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "babel-jest": "^29.7.0",
     "eslint-plugin-react": "^7.34.3",
-    "jest": "^29.7.0"
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "ts-jest": "^29.1.5",
+    "ts-node": "^10.9.2"
   }
 }

tests/components/UploadNotesStep.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import UploadNotesStep from '@/components/notes/CreateWorksheetForm/UploadNotesPage/UploadNotesStep';
+
+describe('UploadNotesStep', () => {
+  it('renders upload document button', () => {
+    render(<UploadNotesStep next={() => {}} />);
+    const uploadButton = screen.getByText('Upload Document');
+    expect(uploadButton).toBeInTheDocument();
+  });
+
+  it('renders paste YouTube link button', () => {
+    render(<UploadNotesStep next={() => {}} />);
+    const youtubeButton = screen.getByText('Paste YouTube Link');
+    expect(youtubeButton).toBeInTheDocument();
+  });
+
+  it('renders paste text button', () => {
+    render(<UploadNotesStep next={() => {}} />);
+    const pasteTextButton = screen.getByText('Paste Text');
+    expect(pasteTextButton).toBeInTheDocument();
+  });
+
+  it('changes active tab on button click', () => {
+    render(<UploadNotesStep next={() => {}} />);
+    const youtubeButton = screen.getByText('Paste YouTube Link');
+    fireEvent.click(youtubeButton);
+    const youtubeLinkInput = screen.getByPlaceholderText('Enter YouTube link');
+    expect(youtubeLinkInput).toBeInTheDocument();
+  });
+});

tsconfig.jest.json

@@ -0,0 +1,8 @@
+{
+    "extends": "./tsconfig.json",
+    "compilerOptions": {
+      "module": "commonjs",
+      "jsx": "react"
+    }
+  }
+

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "ESNext",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -25,15 +21,9 @@
     ],
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "./*"
-      ],
-      "@/lib/*": [
-        "lib/*"
-      ],
-      "@/components/*": [
-        "components/*"
-      ]
+      "@/*": ["./*"],
+      "@/lib/*": ["lib/*"],
+      "@/components/*": ["components/*"]
     }
   },
   "include": [
@@ -44,8 +34,5 @@
     "lib/**/*",
     "components/**/*"
   ],
-  "exclude": [
-    "node_modules"
-  ]
+  "exclude": ["node_modules"]
 }
-