Summary Report: Program 2
Team: {dummyData.team}
+ {/* Displaying team members */}
+
Team members: {teamMembers.map((member, index) => (
+
+ {member}
+ {index !== teamMembers.length - 1 && ', '}
+
+ ))}
+
Average peer review score:{" "}
{averagePeerReviewScore}
Tagging: 97/97
-
{ e.preventDefault(); setOpen(!open); }}>
- {open ? 'Hide Submission' : 'Show Submission'}
+ { e.preventDefault(); setShowSubmission(!showSubmission); }}>
+ {showSubmission ? 'Hide Submission' : 'Show Submission'}
{/* Collapsible content */}
-
+
diff --git a/src/pages/ViewTeamGrades/ReviewTableRow.tsx b/src/pages/ViewTeamGrades/ReviewTableRow.tsx
index d9825be0..a5cb0adf 100644
--- a/src/pages/ViewTeamGrades/ReviewTableRow.tsx
+++ b/src/pages/ViewTeamGrades/ReviewTableRow.tsx
@@ -6,10 +6,15 @@ import { ReviewData } from './App'; // Importing the ReviewData interface from A
interface ReviewTableRowProps {
row: ReviewData; // Data for the row
showToggleQuestion: boolean; // Flag to toggle the question column
+ showToggle10WordComments: boolean; // Flag to toggle the > 10 word column
+ showToggle20WordComments: boolean; // Flag to toggle the > 20 word column
+ showToggleCustomWordComment: boolean; // Flag to toggle the custom feature
+ customCharacterNumber: number; //
}
// Functional component ReviewTableRow
-const ReviewTableRow: React.FC = ({ row, showToggleQuestion }) => {
+const ReviewTableRow: React.FC = ({ row, showToggleQuestion, showToggle10WordComments, showToggle20WordComments, showToggleCustomWordComment, customCharacterNumber}) => {
+
return (
@@ -32,9 +37,9 @@ const ReviewTableRow: React.FC = ({ row, showToggleQuestion
{/* Review Cells */}
{row.reviews.map((review, idx) => (
|
{review.score}
|
@@ -42,6 +47,22 @@ const ReviewTableRow: React.FC = ({ row, showToggleQuestion
{/* Row Average */}
{row.RowAvg.toFixed(2)} |
+
+ {/* Toggle >= 10 word comments */}
+ {showToggle10WordComments && (
+ {row.reviews.filter(review => review?.comment && review.comment.split(' ').length >= 10).length} |
+ )}
+
+ {/* Toggle >= 20 word comments */}
+ {showToggle20WordComments && (
+ {row.reviews.filter(review => review?.comment && review.comment.split(' ').length >= 20).length} |
+ )}
+
+ {/* Toggle >= (input value) character */}
+ {showToggleCustomWordComment && (
+ {row.reviews.filter(review => review?.comment && review.comment.length >= customCharacterNumber).length} |
+ )}
+
);
};
diff --git a/src/pages/ViewTeamGrades/RoundSelector.tsx b/src/pages/ViewTeamGrades/RoundSelector.tsx
index fd87daf4..0edbdbb4 100644
--- a/src/pages/ViewTeamGrades/RoundSelector.tsx
+++ b/src/pages/ViewTeamGrades/RoundSelector.tsx
@@ -1,6 +1,5 @@
import React, { useState, useEffect } from 'react';
import dummyDataRounds from './Data/heatMapData.json';
-import teamData from './Data/dummyData.json';
interface RoundSelectorProps {
currentRound: number;
@@ -9,12 +8,6 @@ interface RoundSelectorProps {
// RoundSelector component to display buttons for selecting rounds
const RoundSelector: React.FC = ({ currentRound, handleRoundChange }) => {
- const [teamMembers, setTeamMembers] = useState([]);
-
- // Fetch team members from the teamData.json file on component mount
- useEffect(() => {
- setTeamMembers(teamData.members);
- }, []); // Empty dependency array means it runs only once on component mount
return (
@@ -29,18 +22,10 @@ const RoundSelector: React.FC = ({ currentRound, handleRound
Round {index + 1}
))}
- {/* Displaying team members */}
-
- Team members: {teamMembers.map((member, index) => (
-
- ({member})
- {index !== teamMembers.length - 1 && ' '}
-
- ))}
-
);
};
export default RoundSelector;
+
diff --git a/src/pages/ViewTeamGrades/Statistics.test.tsx b/src/pages/ViewTeamGrades/Statistics.test.tsx
new file mode 100644
index 00000000..b8105b5e
--- /dev/null
+++ b/src/pages/ViewTeamGrades/Statistics.test.tsx
@@ -0,0 +1,67 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect'; // Import jest-dom for custom assertions
+import Statistics from './Statistics'; // Import the component to test
+
+describe('Statistics', () => {
+ test('renders the correct labels', () => {
+ render(
);
+ // Find the scores within the underlined spans
+ const element_1 = screen.getByRole('columnheader', { name: 'Submitted Work' });
+ const element_2 = screen.getByRole('columnheader', { name: 'Author Feedback' });
+ const element_3 = screen.getByRole('columnheader', { name: 'Teammate Review' });
+ const element_4 = screen.getByRole('columnheader', { name: 'Contributor' });
+
+ const element_5 = screen.getAllByText(/Average/i);
+ const element_6 = screen.getAllByText(/Range/i);
+ const element_7 = screen.getByRole('columnheader', { name: 'Final Score' });
+
+ // Assert that the elements are present
+ expect(element_1).toBeInTheDocument();
+ expect(element_2).toBeInTheDocument();
+ expect(element_3).toBeInTheDocument();
+ expect(element_4).toBeInTheDocument();
+ expect(element_5[0]).toBeInTheDocument();
+ expect(element_6[0]).toBeInTheDocument();
+ expect(element_7).toBeInTheDocument();
+
+ });
+
+ test('renders correct statistical information for each label', () => {
+ render(
);
+ // Find the scores within the underlined spans
+ const element_1 = screen.getByRole('cell', { name: 'ssshah26 (Siddharth Shah)' });
+ const element_2 = screen.getByRole('cell', { name: 'Show Reviews (20)' });
+ const element_3 = screen.getByRole('cell', { name: '99.99% - 100%' });
+ const element_4 = screen.getByRole('cell', { name: '96.67 Show Author Feedback (10)' });
+ const element_5 = screen.getByRole('cell', { name: '87% - 100%' });
+ const element_6 = screen.getByRole('cell', { name: '4.64' });
+ const element_7 = screen.getByRole('cell', { name: '90% - 100%' });
+ const element_8 = screen.getByRole('cell', { name: '75% (in Finished)' });
+
+ // Assert that the elements are present
+ expect(element_1).toBeInTheDocument();
+ expect(element_2).toBeInTheDocument();
+ expect(element_3).toBeInTheDocument();
+ expect(element_4).toBeInTheDocument();
+ expect(element_5).toBeInTheDocument();
+ expect(element_6).toBeInTheDocument();
+ expect(element_7).toBeInTheDocument();
+ expect(element_8).toBeInTheDocument();
+ });
+
+ test('renders correct links', () => {
+ render(
);
+ // Find the scores within the underlined spans
+ const element_1 = screen.getByRole('link', { name: 'show stats' });
+ const element_2 = screen.getByRole('link', { name: 'ssshah26' });
+ const element_3 = screen.getByRole('link', { name: 'Show Reviews' });
+ const element_4 = screen.getByRole('link', { name: 'Show Author Feedback' });
+
+ // Assert that the elements are present
+ expect(element_1).toBeInTheDocument();
+ expect(element_2).toBeInTheDocument();
+ expect(element_3).toBeInTheDocument();
+ expect(element_4).toBeInTheDocument();
+
+ });
+});
\ No newline at end of file
diff --git a/src/pages/ViewTeamGrades/Statistics.tsx b/src/pages/ViewTeamGrades/Statistics.tsx
index c8c5c138..0d795606 100644
--- a/src/pages/ViewTeamGrades/Statistics.tsx
+++ b/src/pages/ViewTeamGrades/Statistics.tsx
@@ -77,7 +77,7 @@ const Statistics: React.FC
= ({average}) => {
-
+
-
+
{showReviews && (
Reviews
diff --git a/src/pages/ViewTeamGrades/grades.scss b/src/pages/ViewTeamGrades/grades.scss
index 8434ae5c..0651bca7 100644
--- a/src/pages/ViewTeamGrades/grades.scss
+++ b/src/pages/ViewTeamGrades/grades.scss
@@ -293,3 +293,20 @@
.review-container {
margin-bottom: 200px;
}
+
+
+.toggle-button {
+ color: rgb(226, 23, 23);
+ display: inline;
+ cursor: pointer;
+}
+.toggle-button:hover {
+ text-decoration: underline;
+}
+
+.toggle-pannel {
+ background-color: #f8f5f5;
+ width: fit-content;
+ padding-right: 1%;
+ padding-left: 1%;
+}
\ No newline at end of file