Merge pull request #27 from oss-slu/24-jest-addnotescreen

24 jest addnotescreen

app/__tests__/noteComponent.test.tsx

@@ -0,0 +1,37 @@
+import Layout from "../layout";
+import "@testing-library/jest-dom";
+import { fireEvent, render, screen } from "@testing-library/react";
+import NoteComponent from "../lib/components/noteComponent";
+import { RichUtils } from 'draft-js';
+
+jest.mock('draft-js', () => ({
+  ...jest.requireActual('draft-js'),
+  RichUtils: {
+    ...jest.requireActual('draft-js').RichUtils,
+    toggleInlineStyle: jest.fn(jest.requireActual('draft-js').RichUtils.toggleInlineStyle),
+  },
+}));
+
+describe("NoteComponent Component", () => {
+
+  it("renders the note component without crashing", () => {
+    render(<NoteComponent />);
+    expect(screen.getByText("Draft.js Testing Environment")).toBeInTheDocument();
+  });
+
+  describe("Button interactions", () => {
+    it("toggles bold style when Bold button is clicked", () => {
+      render(<NoteComponent />);
+      const boldButton = screen.getByText("Bold");
+      fireEvent.click(boldButton);
+      expect(RichUtils.toggleInlineStyle).toHaveBeenCalledWith(expect.anything(), 'BOLD');
+    });
+
+    it("toggles italic style when Italic button is clicked", () => {
+      render(<NoteComponent />);
+      const italicButton = screen.getByText("Italic");
+      fireEvent.click(italicButton);
+      expect(RichUtils.toggleInlineStyle).toHaveBeenCalledWith(expect.anything(), 'ITALIC');
+    });
+  });
+});

app/lib/components/noteComponent.tsx

@@ -0,0 +1,90 @@
+"use client";
+import { Editor, EditorState, RichUtils } from "draft-js";
+import "draft-js/dist/Draft.css";
+import { useState, useEffect } from "react";
+import { stateToHTML } from 'draft-js-export-html';
+
+export default function NoteComponent() {
+  const [editorState, setEditorState] = useState(EditorState.createEmpty());
+  const [plainText, setPlainText] = useState("");
+  const [rawHTML, setRawHTML] = useState("");
+  const [isClient, setIsClient] = useState(false);
+
+  useEffect(() => {
+    setIsClient(true);
+  }, []);
+
+  useEffect(() => {
+    setPlainText(editorState.getCurrentContent().getPlainText());
+  }, [editorState])
+
+  useEffect(() => {
+    // Updates the rawHTML component as the editorState changes
+    const html = stateToHTML(editorState.getCurrentContent());
+    setRawHTML(html);
+  }, [editorState]);
+
+  const handleKeyCommand = (command: any) => {
+    const newState = RichUtils.handleKeyCommand(editorState, command);
+    if (newState) {
+      setEditorState(newState);
+      return "handled";
+    }
+    return "not-handled";
+  };
+
+  const toggleBold = () => {
+    setEditorState(RichUtils.toggleInlineStyle(editorState, "BOLD"));
+  };
+
+  const toggleItalic = () => {
+    setEditorState(RichUtils.toggleInlineStyle(editorState, "ITALIC"));
+  };
+
+  const toggleUnderline = () => {
+    setEditorState(RichUtils.toggleInlineStyle(editorState, "UNDERLINE"));
+  };
+
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <div className="">
+        <h1 className="text-blue-500 text-xl">Draft.js Testing Environment</h1>
+        <div className="border border-black p-4 rounded-lg">
+          <button onClick={toggleBold} className="border border-black p-2 m-1 rounded-md text-black">
+            Bold
+          </button>
+          <button onClick={toggleItalic} className="border border-black p-2 m-1 rounded-md text-black">
+            Italic
+          </button>
+          <button onClick={toggleUnderline} className="border border-black p-2 m-1 rounded-md text-black">
+            Underline
+          </button>
+        </div>
+        <div style={editorStyles}>
+          {isClient && (
+            <Editor
+              editorState={editorState}
+              onChange={setEditorState}
+              handleKeyCommand={handleKeyCommand}
+              editorKey="editor"
+              placeholder="Start writing your notes here . . ."
+              spellCheck={true}
+              ariaLabel="Text editor"
+              ariaMultiline={true}
+            />
+          )}
+        </div>
+      </div>
+    </main>
+  );
+}
+
+const editorStyles = {
+  border: "1px solid black",
+  padding: "10px",
+  borderRadius: "4px",
+  minHeight: "300px",
+  width: "800px",
+  color: "black",
+  backgroundColor: "white",
+};

app/page.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import SearchBar from './lib/components/searchBar';
-import AddNotePage from "./lib/pages/AddNotePage";
+import NoteComponent from "./lib/components/noteComponent";
 import Sidebar from "./lib/components/Sidebar";
 
 export default function Home() {
@@ -10,8 +10,7 @@ export default function Home() {
         <Sidebar />
         <h1 className="text-blue-500 text-xl mb-4">Where's Religion?</h1>
         <SearchBar />
-        <h1 className="text-blue-500 text-xl">Where's Religion?</h1>
-        <AddNotePage />
+        <NoteComponent />
       </div>
     </main>
   );

jest.config.js

@@ -2,8 +2,13 @@ const nextJest = require("next/jest");
 const createJestConfig = nextJest({
   dir: "./",
 });
+
 const customJestConfig = {
   moduleDirectories: ["node_modules", "<rootDir>/"],
   testEnvironment: "jest-environment-jsdom",
+  setupFilesAfterEnv: ["<rootDir>/setupTests.ts"],
 };
-module.exports = createJestConfig(customJestConfig);
+
+module.exports = createJestConfig({
+  ...customJestConfig,
+});

package.json

@@ -10,12 +10,12 @@
     "test": "jest"
   },
   "dependencies": {
-    "@lexical/react": "^0.12.2",
     "@babel/core": "^7.23.0",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.23.0",
-    "@testing-library/jest-dom": "^6.1.3",
+    "@lexical/react": "^0.12.2",
+    "@testing-library/jest-dom": "^6.1.4",
     "@testing-library/react": "^14.0.0",
     "@types/enzyme-adapter-react-16": "^1.0.7",
     "@types/jest": "^29.5.5",
@@ -27,19 +27,21 @@
     "babel-jest": "^29.7.0",
     "create-next-app": "^13.4.19",
     "draft-js": "^0.11.7",
-    "lexical": "^0.12.2",
+    "draft-js-export-html": "^1.4.1",
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.7",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-enzyme": "^7.1.2",
     "jest-fetch-mock": "^3.0.3",
+    "lexical": "^0.12.2",
     "moxios": "^0.4.0",
     "next": "^13.5.1",
     "postcss": "8.4.30",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-test-renderer": "^18.2.0",
     "tailwindcss": "3.3.3",
     "ts-jest": "^29.1.1",
     "typescript": "5.2.2"

setupTests.ts

@@ -1,4 +1,4 @@
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import fetchMock from 'jest-fetch-mock';
 
 fetchMock.enableMocks();