CSC/ECE 517 Fall 2024 - E2494. UI for Teammate Review View

From Expertiza_Wiki
Jump to navigation Jump to search

Overview

After the previous design document submission, we changed projects, with the suggestion and approval of our mentor and Dr. Gehringer, to a reimplementation of the UI for Teammate Review view, which has a larger scope than our previous project. The previous implementation of this UI proposed changes to not only the view files, but the controller and model files as well. This was beyond the scope of the project and complicated the integration of the UI to the existing Expertiza. Thus, our current project will focus on reimplementing the Teammate Review view isolated from other components of the current Expertiza application. Additionally, we focus on implementing a clear and user-friendly UI for both students and instructors. Following the current review display, our main display will show the numerical scores with an associated color as a heat map.

Previous Design

Specifications

  • Display teammate reviews as a colormap corresponding to the numerical scores
  • Students should be able to view reviews they have given to their teammates and the reviews their teammates have given them
  • There should be a clear indication in the view which reviews the student is viewing (i.e. those they have given or those they have received)
  • Instructors should also be able to view a student's reviews from their teammates and the reviews a student has given to their teammates
  • The instructor should be able to choose whether teammate reviews are visible to the student or not by a checkbox
  • An average score should be shown, for all the relevant reviews, in a clear and useful way
  • There should be an anonymized view option where the names of the reviewers should not be shown

Design

The previous implementation focussed on a few main improvements to the view.

  • Displaying the average score for instructors based on the following:
    • A student's average received teammate score
    • A student's average score given to teammates
  • Improving the functionality of the automized view for students when selected by the instructor
    • Use case diagram for the anonymized view:

UML for Anonymized

Testing

Main components to the testing plan included:

  • Verifying the different displays for students vs. instructors
  • Verifying login credentials
  • Improvement in unit tests
  • Addition of tests for calculating the average score
  • Manual testing of the main display with the correct functionality

Proposed Design

Specifications

Following the previous project specifications, our project will focus on further development of the user experience and testing, with particular emphasis on team collaboration features.

  • Review Interface Layout
    • Clean tabbed interface separating "Reviews given" and "Reviews received"
    • Toggle controls for showing/hiding review details
    • Comprehensive data grid with:
      • Question numbers for easy reference
      • Question text column
      • Individual reviewer columns
      • Average score column
      • Color-coded scoring cells for visual feedback
  • Interactive Elements
    • Toggle switches for feature controls
    • Hide/Show functionality for review details
    • Anonymous mode toggle with visual indicator
    • Click-through navigation between different review states
  • Visual Hierarchy
    • Clear section headers and subheaders
    • Consistent spacing and alignment
    • Data-dense yet readable table design
    • Score highlighting using appropriate color coding:
      • Green for high scores
      • Orange for medium scores
      • Red for attention areas
  • Responsive Components
    • Flexible grid system for review displays
    • Adaptive table layout for different screen sizes
    • Maintainable component structure for future extensions
    • Consistent padding and margin systems

Design

Core Architecture

  • The system follows a component-based architecture with five key components:
    • TeammateReview (Root)**: Main container component managing application state and user roles
    • CompositeScore**: Handles score aggregation and display
    • ReviewToggle**: Controls view switching between given/received reviews
    • TeammateHeatmap**: Visualizes review data in a color-coded matrix
    • ShowReviews**: Displays detailed review information

Design Decisions

  • State Management
    • Redux for global authentication state
    • React hooks for local component state
    • Local storage for persistent user preferences
  • Role-Based Access
    • Distinct views for instructors, and students
    • Feature toggling based on user roles
    • Anonymous review mode option

UML Design

  • Instructor: Has full access to manage and view all team reviews, including the ability to view all students' reviews and control students' access permissions to view reviews.
  • Student: Can view their own received teammate reviews only if granted permission by the instructor, with no access to other students' review information.

Control Flow to access the concerned screens

From the student's perspective, they can see the comments he made to his teammates and there is a button available to choose to hide information or view details.

When the student presses the button.

When the instructor grants students permission to view teammate reviews, students can see score and comments from their teammates.

In the instructor view, the instructor can choose to enable teammate review visibility permissions.

Testing Overview

Our testing suite utilizes **React Testing Library (RTL)** with **Jest** as the test runner, focusing on component-level testing that prioritizes user interaction patterns over implementation details. The testing stack includes:

  • *React Testing Library* for DOM manipulation and assertions
  • *Jest* as the testing framework and runner
  • *Redux Mock Store* for simulating Redux state in tests
  • *@testing-library/react* for React-specific testing utilities

Test Coverage

Our test suite covers several key areas:

Component Rendering

  • Verification of component mounting and proper display of UI elements
  • Testing of conditional rendering based on props
  • Validation of anonymous vs. identified user displays

User Interactions

  • Toggle functionality between different view modes
  • Button click handlers and state changes
  • Form interactions and user input handling

State Management

  • Redux store integration testing
  • State changes based on user roles (Student vs. Instructor)
  • Component state management for features like anonymous mode

Edge Cases

  • Empty data handling
  • Extreme score values
  • Permission-based rendering differences
  • Anonymous mode functionality
  • Missing or incomplete data scenarios

The tests follow RTL's best practices by focusing on user-centric behavior rather than implementation details, ensuring our components remain maintainable and resilient to refactoring while maintaining their expected functionality from an end-user perspective.

Test Files Overview

TeammateHeatmap.test.tsx

Tests the heatmap visualization component that displays peer review scores. This component is responsible for showing a matrix of review scores with optional anonymization.

  • Renders review scores in a heatmap format
  • Handles anonymous mode by masking reviewer names
  • Manages empty data states
  • Displays question text when enabled
  • Shows column averages correctly

CompositeScore.test.tsx

Tests the component that calculates and displays aggregate scores for both given and received reviews.

  • Renders all score sections (given, received, overall)
  • Handles empty review sets appropriately
  • Correctly calculates scores for extreme cases (0 and 5)
  • Displays formatted scores with proper decimal places
  • Maintains correct score calculations across different review types

ReviewToggle.test.tsx

Tests the toggle mechanism that switches between "Reviews Given" and "Reviews Received" views.

  • Renders appropriate buttons based on user permissions
  • Handles toggle state changes correctly
  • Shows/hides received reviews based on permissions
  • Special handling for instructor views
  • Maintains correct active states for buttons

TeammateReview.test.tsx

Tests the main container component that orchestrates the entire teammate review feature.

  • Renders the main interface elements
  • Toggles between review views (given/received)
  • Controls question list visibility
  • Manages anonymous mode
  • Handles different user roles (student/instructor)
  • Shows/hides review sections
  • Integrates with Redux store

ShowReviews.test.tsx

Tests the component responsible for displaying individual review entries with comments and scores.

  • Renders review content correctly
  • Handles anonymous mode for reviewer names
  • Manages empty review states
  • Displays comments and scores appropriately
  • Integrates with Redux for user authentication

Common Testing Patterns

All files share several common testing patterns:

  • Use of `beforeEach` for test setup
  • Mock data initialization
  • Edge case handling
  • Role-based permission testing
  • Integration with Redux store where needed
  • Consistent use of RTL's query methods
  • Focus on user-centric behavior testing

These tests ensure robust functionality across the teammate review system while maintaining good testing practices and comprehensive coverage of both happy paths and edge cases.

Team

Mentor

  • Sahil Sawant

Members

  • Arlee Shelby (ashelby@ncsu.edu)
  • Aryan Tapkire (atapkir@ncsu.edu)
  • Haojie Zhou (hzhou33@ncsu.edu)

Links

References

[1]https://wiki.expertiza.ncsu.edu/index.php?title=Main_Page

[2]https://github.com/expertiza/reimplementation-front-end

[3]https://github.com/expertiza/reimplementation-back-end

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2494._UI_for_Teammate_Review_View&oldid=160809"