In this project, we added two new features:
- A search bar that can search for topics within a category.
- A system to tag questions as answered/closed and tag answers as verified by a teacher (similar to Piazza)
The front-end components of these new features are implemented using our custom theme: nodebb-theme-slackers.
Here is how to set up and use our custom theme.
- Make sure the directory
nodebb-theme-slackersis located in the root directory (along withpublic,srcfor example) - Navigate to
nodebb-theme-slackers(runcd nodebb-theme-slackers/from the root directory) - Run
npm link - Navigate back to the root directory (run
cd ..) - Run
npm link nodebb-theme-slackers
- After making sure NodeBB is not running (run
./nodebb stop), run./nodebb reset -t nodebb-theme-slackers. Now our new custom theme will be used when NodeBB is relaunched. - Make sure
redis-serveris running so that we can launch our project. - Launch NodeBB in your preferred way:
./nodebb reset -t nodebb-theme-slackers && ./nodebb build && ./nodebb start
- Go to http://localhost:4567/ to see the new theme in action!
Our search bar component is found under any category. After launching the local NodeBB app, navigate to a category (such as General Discussion or Announcements).
If you set up the theme properly, you should see a search bar in between the title and the tags/filters. Simply click on this search bar and type a search query. If there are existing topics within this category that contain that search query, they will be displayed. You can still click on any of these topics after being filtered and it will properly navigate you to within the topic.
The automated tests for the search bar component can be found in the tests/search.js file. The key aspects covered in these tests include: Search by Query in Titles and Posts: Ensures that searching for a keyword returns the correct topics and posts containing that keyword within a category. User-based Search: Confirms that searching for a specific user returns the correct results. Tag-based Search: Verifies that searching for specific tags brings back topics tagged appropriately. Category-based Search: Ensures that search results within a category and its subcategories return accurate matches. Error Handling: Tests that incorrect or empty search queries are handled gracefully, returning appropriate error messages or undefined results. These tests validate searching within categories, ensuring proper results are returned for different search queries, and also check for edge cases like empty queries or invalid filters.
Navigate to the project root directory. Run npm run test to execute all tests after lint etc
Our verify message component is found under the dropdown beside a post. Notice how there is a cross beside the post/comment. This indicates that the post/comment is not yet verified. If you are an administrator or moderator, you can click verify message to verify the post/comment. Refresh the page to notice that the cross has now been changed to a tick.
Automated tests for permissions and for backend APIs for verify/unverify message can be found in tests/posts.js.
The Answer question component works similarly to the verify message functionality. You can navigate to a topic and click on the dropdown tools. There will then be a "answer/unanswer" button. When pressed you can see a tag appear under the topic title stating if it has been answered.
Automated tests for the backend can be found in tests/topics.js.