From 541fa008bd07880b38952e7bbc83c6b51bca1564 Mon Sep 17 00:00:00 2001 From: yashb196 <113057400+yashb196@users.noreply.github.com> Date: Sun, 3 Dec 2023 23:12:23 -0600 Subject: [PATCH 1/9] the seachbar test case removed since everthing works on the sidebar and not on the top navbar --- app/__tests__/navbar.test.tsx | 6 ------ 1 file changed, 6 deletions(-) diff --git a/app/__tests__/navbar.test.tsx b/app/__tests__/navbar.test.tsx index 7bbb3e64..a728a182 100644 --- a/app/__tests__/navbar.test.tsx +++ b/app/__tests__/navbar.test.tsx @@ -83,10 +83,4 @@ describe("Navbar Component", () => { expect(screen.getByRole("navigation")).toBeInTheDocument(); }); - it("renders SearchBar component", async () => { - await act(async () => { - render(); - }); - expect(screen.getByPlaceholderText(/search.../i)).toBeInTheDocument(); - }); }); From 95ec037d3a7c48c5cf29887114be8fef8e88f774 Mon Sep 17 00:00:00 2001 From: Stuartwastaken <88628337+Stuartwastaken@users.noreply.github.com> Date: Mon, 4 Dec 2023 00:30:27 -0600 Subject: [PATCH 2/9] Merged from izaks branch --- app/lib/utils/api_service.ts | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/app/lib/utils/api_service.ts b/app/lib/utils/api_service.ts index 4b24a076..76ff6443 100644 --- a/app/lib/utils/api_service.ts +++ b/app/lib/utils/api_service.ts @@ -138,7 +138,7 @@ export default class ApiService { // Request body for retrieving messages of type "message" const body = { - type: "message", + type: "Agent", }; const response = await fetch(url, { @@ -149,23 +149,23 @@ export default class ApiService { let data = await response.json(); - // Convert the query to lowercase for case-insensitive matching - const lowerCaseQuery = query.toLowerCase(); + // // Convert the query to lowercase for case-insensitive matching + // const lowerCaseQuery = query.toLowerCase(); - // Filter the messages by title or tags containing the query string - data = data.filter((message: any) => { - // Check if title contains the query string - if (message.title && message.title.toLowerCase().includes(lowerCaseQuery)) { - return true; - } + // // Filter the messages by title or tags containing the query string + // data = data.filter((message: any) => { + // // Check if title contains the query string + // if (message.title && message.title.toLowerCase().includes(lowerCaseQuery)) { + // return true; + // } - // Check if any tags contain the query string - if (message.tags && message.tags.some((tag: string) => tag.toLowerCase().includes(lowerCaseQuery))) { - return true; - } + // // Check if any tags contain the query string + // if (message.tags && message.tags.some((tag: string) => tag.toLowerCase().includes(lowerCaseQuery))) { + // return true; + // } - return false; - }); + // return false; + // }); return data; } catch (error) { From 361c5dd61da6aa8dfe7a05b1fae1bb609d365ac9 Mon Sep 17 00:00:00 2001 From: Stuartwastaken <88628337+Stuartwastaken@users.noreply.github.com> Date: Mon, 4 Dec 2023 00:31:05 -0600 Subject: [PATCH 3/9] Made changes to api service --- app/lib/utils/api_service.ts | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/app/lib/utils/api_service.ts b/app/lib/utils/api_service.ts index 76ff6443..4b24a076 100644 --- a/app/lib/utils/api_service.ts +++ b/app/lib/utils/api_service.ts @@ -138,7 +138,7 @@ export default class ApiService { // Request body for retrieving messages of type "message" const body = { - type: "Agent", + type: "message", }; const response = await fetch(url, { @@ -149,23 +149,23 @@ export default class ApiService { let data = await response.json(); - // // Convert the query to lowercase for case-insensitive matching - // const lowerCaseQuery = query.toLowerCase(); + // Convert the query to lowercase for case-insensitive matching + const lowerCaseQuery = query.toLowerCase(); - // // Filter the messages by title or tags containing the query string - // data = data.filter((message: any) => { - // // Check if title contains the query string - // if (message.title && message.title.toLowerCase().includes(lowerCaseQuery)) { - // return true; - // } + // Filter the messages by title or tags containing the query string + data = data.filter((message: any) => { + // Check if title contains the query string + if (message.title && message.title.toLowerCase().includes(lowerCaseQuery)) { + return true; + } - // // Check if any tags contain the query string - // if (message.tags && message.tags.some((tag: string) => tag.toLowerCase().includes(lowerCaseQuery))) { - // return true; - // } + // Check if any tags contain the query string + if (message.tags && message.tags.some((tag: string) => tag.toLowerCase().includes(lowerCaseQuery))) { + return true; + } - // return false; - // }); + return false; + }); return data; } catch (error) { From ff9d62010bb7ee2431bedc6bf92ab7d1e466750e Mon Sep 17 00:00:00 2001 From: Stuartwastaken <88628337+Stuartwastaken@users.noreply.github.com> Date: Mon, 4 Dec 2023 00:33:30 -0600 Subject: [PATCH 4/9] Removed note list view 2 --- app/lib/components/note_listview 2.tsx | 41 -------------------------- 1 file changed, 41 deletions(-) delete mode 100644 app/lib/components/note_listview 2.tsx diff --git a/app/lib/components/note_listview 2.tsx b/app/lib/components/note_listview 2.tsx deleted file mode 100644 index 9f8726f3..00000000 --- a/app/lib/components/note_listview 2.tsx +++ /dev/null @@ -1,41 +0,0 @@ -// note_listview.tsx -import React, { useState, useEffect } from 'react'; -import { User } from "../models/user_class"; -import ApiService from '../utils/api_service'; -import { Note } from '../../types'; - -const NoteListView: React.FC = () => { - const [notes, setNotes] = useState([]); - - useEffect(() => { - const fetchNotes = async () => { - const user = User.getInstance(); - const userId = await user.getId(); - if (userId) { - try { - const userNotes = await ApiService.fetchMessages(false, false, userId); - setNotes(userNotes); - } catch (error) { - console.error('Error fetching notes:', error); - // Handle the error as appropriate for your application - } - } - }; - - fetchNotes(); - }, []); - - return ( -
- {notes.map((note) => ( -
-

{note.title}

-

{note.text}

- {/* Render other note properties as needed */} -
- ))} -
- ); -}; - -export default NoteListView; From e07137426c4b83dc699b60c2f8f91411e94602dc Mon Sep 17 00:00:00 2001 From: Stuartwastaken <88628337+Stuartwastaken@users.noreply.github.com> Date: Mon, 4 Dec 2023 00:41:14 -0600 Subject: [PATCH 5/9] Appended the api_service to have a fetch all user messages function --- app/lib/utils/api_service.ts | 33 +++++++++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/app/lib/utils/api_service.ts b/app/lib/utils/api_service.ts index 4b24a076..1f2169fc 100644 --- a/app/lib/utils/api_service.ts +++ b/app/lib/utils/api_service.ts @@ -174,5 +174,38 @@ export default class ApiService { } } + /** + * Fetches all messages for a specific user. + * @param {string} userId - The ID of the user whose messages are to be fetched. + * @returns {Promise} - The array of messages fetched from the API. + */ + static async fetchUserMessages(userId: string): Promise { + try { + const url = "http://lived-religion-dev.rerum.io/deer-lr/query"; + const headers = { + "Content-Type": "application/json", + }; + + // Body for the request: fetch messages of type 'message' created by the specified user + const body = { + type: "message", + creator: userId + }; + + const response = await fetch(url, { + method: "POST", + headers, + body: JSON.stringify(body), + }); + + const data = await response.json(); + return data; + } catch (error) { + console.error("Error fetching user messages:", error); + throw error; + } +} + + } \ No newline at end of file From 359c42afe7daff9fb016c9cf53f4c2541211e962 Mon Sep 17 00:00:00 2001 From: Stuartwastaken <88628337+Stuartwastaken@users.noreply.github.com> Date: Mon, 4 Dec 2023 00:48:48 -0600 Subject: [PATCH 6/9] Notes are not rendering but the code has been changed a lot this could be a good spot to fork --- app/lib/components/note_listview.tsx | 25 ++-------------- app/lib/components/search_bar.tsx | 32 ++++++++------------ app/lib/components/side_bar.tsx | 45 +++++++++++++++++++++++++--- 3 files changed, 55 insertions(+), 47 deletions(-) diff --git a/app/lib/components/note_listview.tsx b/app/lib/components/note_listview.tsx index 2e18e96e..717e218c 100644 --- a/app/lib/components/note_listview.tsx +++ b/app/lib/components/note_listview.tsx @@ -7,11 +7,11 @@ import { Button } from "@/components/ui/button"; import DataConversion from "../utils/data_conversion"; type NoteListViewProps = { + notes: Note[]; onNoteSelect: (note: Note) => void; }; -const NoteListView: React.FC = ({ onNoteSelect }) => { - const [notes, setNotes] = useState([]); +const NoteListView: React.FC = ({ notes, onNoteSelect }) => { const [fresh, setFresh] = useState(true); useEffect(() => { @@ -21,27 +21,6 @@ const NoteListView: React.FC = ({ onNoteSelect }) => { } }, [notes, onNoteSelect]); - useEffect(() => { - const fetchNotes = async () => { - const user = User.getInstance(); - const userId = await user.getId(); - if (userId) { - try { - const userNotes = await ApiService.fetchMessages( - false, - false, - userId - ); - setNotes(DataConversion.convertMediaTypes(userNotes).reverse()); - } catch (error) { - console.error("Error fetching notes:", error); - } - } - }; - - fetchNotes(); - }, []); - const handleLoadText = (note: Note) => { onNoteSelect(note); }; diff --git a/app/lib/components/search_bar.tsx b/app/lib/components/search_bar.tsx index c9f4fd5d..24e4ec70 100644 --- a/app/lib/components/search_bar.tsx +++ b/app/lib/components/search_bar.tsx @@ -5,21 +5,17 @@ import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { MagnifyingGlassIcon } from "@radix-ui/react-icons"; -const SearchBar = () => { +type SearchBarProps = { + onSearch: (query: string) => void; +}; + +const SearchBar: React.FC = ({ onSearch }) => { const [searchText, setSearchText] = useState(""); - const handleSearch = async () => { - console.log("Search text:", searchText); - if (!searchText) { - console.log("Search text is empty. Aborting search."); - return; - } - try { - const response = await ApiService.searchMessages(searchText); - console.log("API Response:", response); - } catch (error) { - console.error("API Error:", error); - } + const handleInputChange = (e: React.ChangeEvent) => { + const query = e.target.value; + setSearchText(query); + onSearch(query); }; return ( @@ -29,14 +25,10 @@ const SearchBar = () => { placeholder="Search..." className="border border-gray-300 rounded-md p-2 flex-grow" value={searchText} - onChange={(e) => setSearchText(e.target.value)} + onChange={handleInputChange} /> - ); diff --git a/app/lib/components/side_bar.tsx b/app/lib/components/side_bar.tsx index bfcfa3d7..f96a9183 100644 --- a/app/lib/components/side_bar.tsx +++ b/app/lib/components/side_bar.tsx @@ -7,26 +7,63 @@ import { Button } from "@/components/ui/button"; import SearchBar from "./search_bar"; import NoteListView from "./note_listview"; import { Note } from "@/app/types"; +import ApiService from "../utils/api_service"; type SidebarProps = { onNoteSelect: (note: Note) => void; }; const user = User.getInstance(); +const userId = user.getId(); + const Sidebar: React.FC = ({ onNoteSelect }) => { + const [notes, setNotes] = useState([]); + const [filteredNotes, setFilteredNotes] = useState([]); + + useEffect(() => { + const fetchUserMessages = async () => { + try { + const userId = await user.getId(); + if (userId) { + const userNotes = await ApiService.fetchUserMessages(userId); + setNotes(userNotes); + setFilteredNotes(userNotes); + } else { + console.error("User not logged in"); + } + } catch (error) { + console.error("Error fetching user messages:", error); + } + }; + + fetchUserMessages(); + }, []); + + const handleSearch = (searchQuery: string) => { + if (!searchQuery.trim()) { + setFilteredNotes(notes); + return; + } + const filtered = notes.filter(note => + note.title.toLowerCase().includes(searchQuery.toLowerCase()) + ); + setFilteredNotes(filtered); + }; + return (
-
- +
+
- +
); -} +}; + export default Sidebar; From a09c0cde8962b82e11583c3bc3db0ef4eae6f756 Mon Sep 17 00:00:00 2001 From: Stuartwastaken <88628337+Stuartwastaken@users.noreply.github.com> Date: Mon, 4 Dec 2023 00:52:07 -0600 Subject: [PATCH 7/9] Notes are being rendering instantly based on the search query --- app/lib/components/note_listview.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/lib/components/note_listview.tsx b/app/lib/components/note_listview.tsx index 717e218c..d4387e41 100644 --- a/app/lib/components/note_listview.tsx +++ b/app/lib/components/note_listview.tsx @@ -18,6 +18,7 @@ const NoteListView: React.FC = ({ notes, onNoteSelect }) => if (notes.length > 0 && fresh) { onNoteSelect(notes[0]); setFresh(false); + console.log("NoteListView: useEffect: onNoteSelect", notes[0]) } }, [notes, onNoteSelect]); From 47433de12616ea333db7f5e310de654cc513bf3d Mon Sep 17 00:00:00 2001 From: Stuartwastaken <88628337+Stuartwastaken@users.noreply.github.com> Date: Mon, 4 Dec 2023 10:03:19 -0600 Subject: [PATCH 8/9] Modified tests --- app/__tests__/navbar.test.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/app/__tests__/navbar.test.tsx b/app/__tests__/navbar.test.tsx index 3a74f804..4e031c16 100644 --- a/app/__tests__/navbar.test.tsx +++ b/app/__tests__/navbar.test.tsx @@ -82,8 +82,4 @@ describe("Navbar Component", () => { expect(screen.getByText(/where's religion?/i)).toBeInTheDocument(); expect(screen.getByRole("navigation")).toBeInTheDocument(); }); -<<<<<<< HEAD - -======= ->>>>>>> origin/52-render-notes-from-the-left-side-to-the-main-screen }); From 70c0cc07712795a5f4268b82356f2a85888cc915 Mon Sep 17 00:00:00 2001 From: yashb196 <113057400+yashb196@users.noreply.github.com> Date: Mon, 4 Dec 2023 12:20:13 -0600 Subject: [PATCH 9/9] All test cases are now passing result of using moxios and stubs which was missing while initially implementing the test cases --- app/__tests__/search_bar.test.tsx | 76 +++++++++++++++---------------- app/__tests__/sidebar.test.tsx | 22 +++++++-- 2 files changed, 56 insertions(+), 42 deletions(-) diff --git a/app/__tests__/search_bar.test.tsx b/app/__tests__/search_bar.test.tsx index 0535d0ec..2892e754 100644 --- a/app/__tests__/search_bar.test.tsx +++ b/app/__tests__/search_bar.test.tsx @@ -1,68 +1,66 @@ +import React from 'react'; import SearchBar from '../lib/components/search_bar'; // Make sure to adjust the import path import "@testing-library/jest-dom"; import { render, fireEvent } from '@testing-library/react'; +describe('SearchBar Component', () => { + let originalConsoleError: jest.Mock; + let mockOnSearch: jest.Mock; -test('renders the SearchBar component', () => { - render(); -}); -; + beforeEach(() => { + // Mock console.error + originalConsoleError = console.error; + console.error = jest.fn(); + + // Create a mock function for onSearch + mockOnSearch = jest.fn(); + }); + + afterEach(() => { + // Restore original console.error + console.error = originalConsoleError; + }); + + test('renders the SearchBar component', () => { + render(); + }); -test('updates the search input when the user types', () => { - const { getByPlaceholderText } = render(); + test('updates the search input when the user types', () => { + const { getByPlaceholderText } = render(); const searchInput = getByPlaceholderText('Search...'); // Assuming 'Search...' is the placeholder text - - // Simulate user input + fireEvent.change(searchInput, { target: { value: 'Sample Query' } }); - - // Check if the search input value updates correctly expect(searchInput).toHaveValue('Sample Query'); + expect(mockOnSearch).toHaveBeenCalledWith('Sample Query'); }); test('triggers search on pressing Enter key', () => { - const { getByPlaceholderText, getByTestId, queryByText } = render(); + const { getByPlaceholderText } = render(); const searchInput = getByPlaceholderText('Search...'); // Assuming 'Search...' is the placeholder text - const searchButton = getByTestId('search-button'); // Use your custom Test ID here - - // Enter a search query + fireEvent.change(searchInput, { target: { value: 'Sample Query' } }); - - // Press the Enter key fireEvent.keyPress(searchInput, { key: 'Enter', code: 'Enter', charCode: 13 }); - + expect(mockOnSearch).toHaveBeenCalledWith('Sample Query'); }); test('handles large amount of search input', () => { - const { getByPlaceholderText, getByTestId, queryByText } = render(); + const { getByPlaceholderText } = render(); const searchInput = getByPlaceholderText('Search...'); // Assuming 'Search...' is the placeholder text - const searchButton = getByTestId('search-button'); // Use your custom Test ID here - - // Enter a large amount of text in the search input const largeText = 'Lorem ipsum '.repeat(1000); // Creating a large text - + fireEvent.change(searchInput, { target: { value: largeText } }); - - // Press the Enter key fireEvent.keyPress(searchInput, { key: 'Enter', code: 'Enter', charCode: 13 }); - - // Check if the search is aborted or if the component handles it gracefully - // You can check if there are any performance issues - expect(queryByText('Sample Query')).not.toBeInTheDocument(); + expect(mockOnSearch).toHaveBeenCalledWith(largeText); }); test('handles search input with special characters', () => { - const { getByPlaceholderText, getByTestId, queryByText } = render(); + const { getByPlaceholderText } = render(); const searchInput = getByPlaceholderText('Search...'); // Assuming 'Search...' is the placeholder text - const searchButton = getByTestId('search-button'); // Use your custom Test ID here - - // Enter a search query with special characters const specialCharacters = '!@#$%^&*()'; - + fireEvent.change(searchInput, { target: { value: specialCharacters } }); - - // Press the Enter key fireEvent.keyPress(searchInput, { key: 'Enter', code: 'Enter', charCode: 13 }); - - // Check if the search is handled correctly or if any special characters are sanitized - expect(queryByText('Sample Query')).not.toBeInTheDocument(); - }); \ No newline at end of file + expect(mockOnSearch).toHaveBeenCalledWith(specialCharacters); + }); + +}); diff --git a/app/__tests__/sidebar.test.tsx b/app/__tests__/sidebar.test.tsx index fcaee888..1f5bb2b5 100644 --- a/app/__tests__/sidebar.test.tsx +++ b/app/__tests__/sidebar.test.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import { render, screen, fireEvent } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import { useRouter } from 'next/router'; import Sidebar from '../lib/components/side_bar'; // Update the path to your Sidebar component accordingly +import moxios from 'moxios'; jest.mock('next/router', () => ({ useRouter: jest.fn(), @@ -9,12 +10,28 @@ jest.mock('next/router', () => ({ describe('Sidebar Component', () => { let mockPush: jest.Mock; + let originalConsoleError: jest.Mock; beforeEach(() => { + // Install Moxios before each test + moxios.install(); + mockPush = jest.fn(); (useRouter as jest.Mock).mockImplementation(() => ({ push: mockPush, })); + + // Mock console.error + originalConsoleError = console.error; + console.error = jest.fn(); + }); + + afterEach(() => { + // Uninstall Moxios after each test + moxios.uninstall(); + + // Restore original console.error + console.error = originalConsoleError; }); it('renders the sidebar correctly', () => { @@ -34,7 +51,6 @@ describe('Sidebar Component', () => { expect(linkElement).toBeInTheDocument(); }); - - + // ... any other tests ... });