Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-29T13:25:39Z

Sdalal2: /* Manual Tests */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:SS-1.jpg|800px|center|Screenshot of Manage Assignments page]]

[[File:SS-3.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files Modified ==

=== Part 1: Backend Files Changed ===

* database.yml
* routes.rb
* docker-compose.yml
* Participants Controller
* Assignments Controller

=== Part 2: Frontend Files Changed ===

* src/pages/Assignments/Assignment.tsx
* src/pages/Participants/Participants.tsx
* src/App.tsx

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''

* Ensure the Courses table (Course.tsx) loads all available course records using backend data.
* Verify that assignment lists (CourseAssignments.tsx) expand correctly under each course and fetch backend data as expected.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
*Confirm that assignment data is rendered only within its associated course section.
*Simulate API failure by mocking bad responses and verify that appropriate error messages are shown

'''UI Tests'''
* Confirm correct icons are used for actions in the Courses and Assignments sections.
* Ensure the assignment table layout is consistent with the rest of the application (font, spacing, alignment).
* Validate that the expand/collapse toggle for assignments works smoothly beneath each course row.
* Check layout behavior across multiple screen sizes, especially in responsive or paginated views.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==
'''Mentor:''' Mitesh Anil Agarwal [mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu]

'''Team Members:'''
* Yuvraj Singh Bhatia [mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu]
* Sanjana Dalal [mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu]

== Relevant Links ==
*https://github.com/expertiza/reimplementation-front-end/pull/102
*https://github.com/expertiza/reimplementation-back-end/pull/203
*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-29T13:22:28Z

Sdalal2: /* Files That May Be Modified */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:SS-1.jpg|800px|center|Screenshot of Manage Assignments page]]

[[File:SS-3.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files Modified ==

=== Part 1: Backend Files Changed ===

* database.yml
* routes.rb
* docker-compose.yml
* Participants Controller
* Assignments Controller

=== Part 2: Frontend Files CHanged ===

* src/pages/Assignments/Assignment.tsx
* src/pages/Participants/Participants.tsx
* src/App.tsx

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==
'''Mentor:''' Mitesh Anil Agarwal [mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu]

'''Team Members:'''
* Yuvraj Singh Bhatia [mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu]
* Sanjana Dalal [mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu]

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

File:Frontend.png

2025-04-29T13:04:59Z

Sdalal2: Sdalal2 uploaded a new version of File:Frontend.png

CSC/ECE 517 Spring 2025 - E2506. Implement testing for new Bookmarks Controller

2025-03-25T04:33:00Z

Sdalal2: /* E2516: Reimplement teams_users_controller.rb */

==E2516: Reimplement testing for new Bookmarks Controller==

===Introduction===
Expertiza is an open-source Ruby on Rails application designed to help teachers manage classrooms. It is maintained by the teaching staff at NC State, along with the students who use it. The application includes various models, such as assignments, questions, and users. Expertiza, students can organize into different teams to work on different assignments and projects. Also, students have the capability to peer review as a way for students to evaluate each other's work. Expertiza allows submissions from a variety of document types, such as PDFs, wiki pages and URLs.

===Project Overview===
This project focuses on enhancing the BookmarksController in the Expertiza platform by adding comprehensive test coverage, generating API documentation, and improving code quality and maintainability. The main objectives are to:

* Develop Tests: Achieve at least 90% test coverage for CRUD operations, bookmark ratings, and score calculations, ensuring edge cases and error handling are properly validated.
* Generate API Documentation: Use Swagger UI to create clear and accurate API documentation for the BookmarksController.
* Refactor Code: Optimize the code using Rubocop and Code Climate, remove unused functionality, and clarify ambiguous methods to improve maintainability and performance.
* Authorization & Error Handling: Ensure proper authorization rules are enforced, and handle errors with informative messages.

===Files Modified===
The following files have been modified to achieve the mentioned functionalities:
* Role_test.rb

===role_test.rb===
The changes made were:

* Test 1: test_bookmark_creation_validity
This test case verifies the validity of a bookmark creation process. It checks that a bookmark is successfully created when valid parameters are provided, ensuring the bookmark is saved to the database. Additionally, it validates that the bookmark creation fails if essential attributes (e.g., title or URL) are missing, returning the appropriate error message to guide the user.
* Test 2: test_bookmark_rating
This test case ensures the correct functionality of the bookmark rating feature. It verifies that a bookmark can receive a rating, and that the average rating is updated correctly when a user rates it. Additionally, it checks that the system properly handles invalid ratings, such as out-of-range values or duplicate ratings from the same user.
* Test 3: test_bookmark_deletion
This test case tests the functionality of bookmark deletion. It ensures that a bookmark can be successfully deleted when a user requests it, and that it is no longer present in the database afterward. Additionally, it checks that attempting to delete a non-existent bookmark returns the appropriate error message.

test 'validates name length' do
role = Role.new(name: 'A' * 51) # assuming max length is 50
assert_not role.valid?
assert_equal ['is too long (maximum is 50 characters)'], role.errors[:name]
role.name = 'A' * 2 # assuming min length is 3
assert_not role.valid?
assert_equal ['is too short (minimum is 3 characters)'], role.errors[:name]
end

# Test for role parent-child relationships
test 'parent-child relationship' do
parent_role = Role.create!(name: 'Parent Role')
child_role = Role.create!(name: 'Child Role', parent: parent_role)
assert_equal parent_role, child_role.parent
assert_includes parent_role.subordinate_roles, child_role
end

# Test for role deletion behavior
test 'role deletion cascade' do
parent_role = Role.create!(name: 'Parent Role')
child_role = Role.create!(name: 'Child Role', parent: parent_role)
parent_role.destroy
assert_raises(ActiveRecord::RecordNotFound) { child_role.reload }
end

===Mentor===
* Mitesh Anil Agarawal ([mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu])
* Kartiki Bhandakkar ([mailto:kbhanda3@ncsu.edu kbhanda3@ncsu.edu])

===Team Members===

* Sanjana Dalal ([mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu])
* Yuvraj Singh Bhatia ([mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu])

CSC/ECE 517 Spring 2025 - E2506. Implement testing for new Bookmarks Controller

2025-03-25T04:32:29Z

Sdalal2: Created page with "==E2516: Reimplement teams_users_controller.rb== ===Introduction=== Expertiza is an open-source Ruby on Rails application designed to help teachers manage classrooms. It is maintained by the teaching staff at NC State, along with the students who use it. The application includes various models, such as assignments, questions, and users. Expertiza, students can organize into different teams to work on different assignments and projects. Also, students have the capability..."

==E2516: Reimplement teams_users_controller.rb==

===Introduction===
Expertiza is an open-source Ruby on Rails application designed to help teachers manage classrooms. It is maintained by the teaching staff at NC State, along with the students who use it. The application includes various models, such as assignments, questions, and users. Expertiza, students can organize into different teams to work on different assignments and projects. Also, students have the capability to peer review as a way for students to evaluate each other's work. Expertiza allows submissions from a variety of document types, such as PDFs, wiki pages and URLs.

===Project Overview===
This project focuses on enhancing the BookmarksController in the Expertiza platform by adding comprehensive test coverage, generating API documentation, and improving code quality and maintainability. The main objectives are to:

* Develop Tests: Achieve at least 90% test coverage for CRUD operations, bookmark ratings, and score calculations, ensuring edge cases and error handling are properly validated.
* Generate API Documentation: Use Swagger UI to create clear and accurate API documentation for the BookmarksController.
* Refactor Code: Optimize the code using Rubocop and Code Climate, remove unused functionality, and clarify ambiguous methods to improve maintainability and performance.
* Authorization & Error Handling: Ensure proper authorization rules are enforced, and handle errors with informative messages.

===Files Modified===
The following files have been modified to achieve the mentioned functionalities:
* Role_test.rb

===role_test.rb===
The changes made were:

* Test 1: test_bookmark_creation_validity
This test case verifies the validity of a bookmark creation process. It checks that a bookmark is successfully created when valid parameters are provided, ensuring the bookmark is saved to the database. Additionally, it validates that the bookmark creation fails if essential attributes (e.g., title or URL) are missing, returning the appropriate error message to guide the user.
* Test 2: test_bookmark_rating
This test case ensures the correct functionality of the bookmark rating feature. It verifies that a bookmark can receive a rating, and that the average rating is updated correctly when a user rates it. Additionally, it checks that the system properly handles invalid ratings, such as out-of-range values or duplicate ratings from the same user.
* Test 3: test_bookmark_deletion
This test case tests the functionality of bookmark deletion. It ensures that a bookmark can be successfully deleted when a user requests it, and that it is no longer present in the database afterward. Additionally, it checks that attempting to delete a non-existent bookmark returns the appropriate error message.

test 'validates name length' do
role = Role.new(name: 'A' * 51) # assuming max length is 50
assert_not role.valid?
assert_equal ['is too long (maximum is 50 characters)'], role.errors[:name]
role.name = 'A' * 2 # assuming min length is 3
assert_not role.valid?
assert_equal ['is too short (minimum is 3 characters)'], role.errors[:name]
end

# Test for role parent-child relationships
test 'parent-child relationship' do
parent_role = Role.create!(name: 'Parent Role')
child_role = Role.create!(name: 'Child Role', parent: parent_role)
assert_equal parent_role, child_role.parent
assert_includes parent_role.subordinate_roles, child_role
end

# Test for role deletion behavior
test 'role deletion cascade' do
parent_role = Role.create!(name: 'Parent Role')
child_role = Role.create!(name: 'Child Role', parent: parent_role)
parent_role.destroy
assert_raises(ActiveRecord::RecordNotFound) { child_role.reload }
end

===Mentor===
* Mitesh Anil Agarawal ([mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu])
* Kartiki Bhandakkar ([mailto:kbhanda3@ncsu.edu kbhanda3@ncsu.edu])

===Team Members===

* Sanjana Dalal ([mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu])
* Yuvraj Singh Bhatia ([mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu])