Grading: Viewable Assessment Briefings (#2783)

* Added briefing (long summary) to Grading (source-academy#2310)

* Updated grading briefing to be inline with backend's camelCase

* resolve on some type conflicts

* fix for TypeError on test action

* Added subtype for GradingQuery with GradingAssessment; added GradingMock data; code cleanup

* resolved edited export type

Updates the grading query fetched from the backend to include the assessment briefing, as per changes made in source-academy/backend#1059. Also includes a new tab to view briefings during grading.

Author: melnyk1997

src/commons/application/ApplicationTypes.ts

@@ -3,7 +3,7 @@ import { Chapter, Language, SourceError, Variant } from 'js-slang/dist/types';
 import { AcademyState } from '../../features/academy/AcademyTypes';
 import { AchievementState } from '../../features/achievement/AchievementTypes';
 import { DashboardState } from '../../features/dashboard/DashboardTypes';
-import { Grading } from '../../features/grading/GradingTypes';
+import { GradingQuery } from '../../features/grading/GradingTypes';
 import { PlaygroundState } from '../../features/playground/PlaygroundTypes';
 import { PlaybackStatus, RecordingStatus } from '../../features/sourceRecorder/SourceRecorderTypes';
 import { StoriesEnvState, StoriesState } from '../../features/stories/StoriesTypes';
@@ -508,7 +508,7 @@ export const defaultSession: SessionState = {
   sessionId: Date.now(),
   githubOctokitObject: { octokit: undefined },
   gradingOverviews: undefined,
-  gradings: new Map<number, Grading>(),
+  gradings: new Map<number, GradingQuery>(),
   notifications: []
 };
 

src/commons/application/actions/SessionActions.ts

@@ -1,6 +1,6 @@
 import { action } from 'typesafe-actions'; // EDITED
 
-import { Grading, GradingOverview } from '../../../features/grading/GradingTypes';
+import { GradingOverview, GradingQuery } from '../../../features/grading/GradingTypes';
 import {
   Assessment,
   AssessmentConfiguration,
@@ -209,7 +209,7 @@ export const updateGradingOverviews = (overviews: GradingOverview[]) =>
  * An extra id parameter is included here because of
  * no id for Grading.
  */
-export const updateGrading = (submissionId: number, grading: Grading) =>
+export const updateGrading = (submissionId: number, grading: GradingQuery) =>
   action(UPDATE_GRADING, {
     submissionId,
     grading

src/commons/application/actions/__tests__/SessionActions.ts

@@ -1,6 +1,6 @@
 import { Chapter, Variant } from 'js-slang/dist/types';
 
-import { Grading, GradingOverview } from '../../../../features/grading/GradingTypes';
+import { GradingOverview, GradingQuery } from '../../../../features/grading/GradingTypes';
 import { Assessment, AssessmentOverview } from '../../../assessment/AssessmentTypes';
 import { Notification } from '../../../notificationBadge/NotificationBadgeTypes';
 import { GameState, Role, Story } from '../../ApplicationTypes';
@@ -542,26 +542,38 @@ test('updateGradingOverviews generates correct action object', () => {
 
 test('updateGrading generates correct action object', () => {
   const submissionId = 3;
-  const grading: Grading = [
-    {
-      question: jest.genMockFromModule('../../../../features/grading/GradingTypes'),
-      student: {
-        name: 'test student',
-        username: 'E0123456',
-        id: 234
-      },
-      grade: {
-        xp: 100,
-        xpAdjustment: 0,
-        comments: 'Well done.',
-        grader: {
-          name: 'HARTIN MENZ',
-          id: 100
+  const grading: GradingQuery = {
+    answers: [
+      {
+        question: jest.genMockFromModule('../../../../features/grading/GradingTypes'),
+        student: {
+          name: 'test student',
+          username: 'E0123456',
+          id: 234
         },
-        gradedAt: '2019-08-16T13:26:32+00:00'
+        grade: {
+          xp: 100,
+          xpAdjustment: 0,
+          comments: 'Well done.',
+          grader: {
+            name: 'HARTIN MENZ',
+            id: 100
+          },
+          gradedAt: '2019-08-16T13:26:32+00:00'
+        }
       }
+    ],
+    assessment: {
+      coverPicture: 'https://i.imgur.com/dR7zBPI.jpeg',
+      id: 1,
+      number: '5',
+      reading: 'reading here',
+      story: 'story here',
+      summaryLong: 'long summary here',
+      summaryShort: 'short summary here',
+      title: 'assessment title here'
     }
-  ];
+  };
 
   const action = updateGrading(submissionId, grading);
   expect(action).toEqual({

src/commons/application/reducers/__tests__/SessionReducer.ts

@@ -1,6 +1,6 @@
 import { Chapter, Variant } from 'js-slang/dist/types';
 
-import { Grading, GradingOverview } from '../../../../features/grading/GradingTypes';
+import { GradingOverview, GradingQuery } from '../../../../features/grading/GradingTypes';
 import {
   Assessment,
   AssessmentOverview,
@@ -381,37 +381,61 @@ test('UPDATE_ASSESSMENT_OVERVIEWS works correctly in updating assessment overvie
 });
 
 // Test data for UPDATE_GRADING
-const gradingTest1: Grading = [
-  {
-    question: jest.genMockFromModule('../../../../features/grading/GradingTypes'),
-    student: {
-      name: 'test student',
-      username: 'E0123456',
-      id: 234
-    },
-    grade: {
-      xp: 100,
-      xpAdjustment: 0,
-      comments: 'Well done. Please try the quest!'
+const gradingTest1: GradingQuery = {
+  answers: [
+    {
+      question: jest.genMockFromModule('../../../../features/grading/GradingTypes'),
+      student: {
+        name: 'test student',
+        username: 'E0123456',
+        id: 234
+      },
+      grade: {
+        xp: 100,
+        xpAdjustment: 0,
+        comments: 'Well done. Please try the quest!'
+      }
     }
+  ],
+  assessment: {
+    coverPicture: 'test string',
+    id: 1,
+    number: 'M1A',
+    reading: 'test string',
+    story: 'test string',
+    summaryLong: 'test string',
+    summaryShort: 'test string',
+    title: 'test string'
   }
-];
+};
 
-const gradingTest2: Grading = [
-  {
-    question: jest.genMockFromModule('../../../../features/grading/GradingTypes'),
-    student: {
-      name: 'another test student',
-      username: 'E0000000',
-      id: 345
-    },
-    grade: {
-      xp: 500,
-      xpAdjustment: 20,
-      comments: 'Good job! All the best for the finals.'
+const gradingTest2: GradingQuery = {
+  answers: [
+    {
+      question: jest.genMockFromModule('../../../../features/grading/GradingTypes'),
+      student: {
+        name: 'another test student',
+        username: 'E0000000',
+        id: 345
+      },
+      grade: {
+        xp: 500,
+        xpAdjustment: 20,
+        comments: 'Good job! All the best for the finals.'
+      }
     }
+  ],
+  assessment: {
+    coverPicture: 'another test string',
+    id: 2,
+    number: 'P2',
+    reading: 'another test string',
+    story: 'another test string',
+    summaryLong: 'another test string',
+    summaryShort: 'another test string',
+    title: 'another test string'
   }
-];
+};
 
 test('UPDATE_GRADING works correctly in inserting gradings', () => {
   const submissionId = 23;
@@ -423,14 +447,14 @@ test('UPDATE_GRADING works correctly in inserting gradings', () => {
     }
   };
 
-  const gradingMap: Map<number, Grading> = SessionsReducer(defaultSession, action).gradings;
+  const gradingMap: Map<number, GradingQuery> = SessionsReducer(defaultSession, action).gradings;
   expect(gradingMap.get(submissionId)).toEqual(gradingTest1);
 });
 
 test('UPDATE_GRADING works correctly in inserting gradings and retains old data', () => {
   const submissionId1 = 45;
   const submissionId2 = 56;
-  const gradings = new Map<number, Grading>();
+  const gradings = new Map<number, GradingQuery>();
   gradings.set(submissionId1, gradingTest1);
 
   const newDefaultSession = {
@@ -446,14 +470,14 @@ test('UPDATE_GRADING works correctly in inserting gradings and retains old data'
     }
   };
 
-  const gradingMap: Map<number, Grading> = SessionsReducer(newDefaultSession, action).gradings;
+  const gradingMap: Map<number, GradingQuery> = SessionsReducer(newDefaultSession, action).gradings;
   expect(gradingMap.get(submissionId1)).toEqual(gradingTest1);
   expect(gradingMap.get(submissionId2)).toEqual(gradingTest2);
 });
 
 test('UPDATE_GRADING works correctly in updating gradings', () => {
   const submissionId = 23;
-  const gradings = new Map<number, Grading>();
+  const gradings = new Map<number, GradingQuery>();
   gradings.set(submissionId, gradingTest1);
   const newDefaultSession = {
     ...defaultSession,
@@ -468,7 +492,7 @@ test('UPDATE_GRADING works correctly in updating gradings', () => {
     }
   };
 
-  const gradingMap: Map<number, Grading> = SessionsReducer(newDefaultSession, action).gradings;
+  const gradingMap: Map<number, GradingQuery> = SessionsReducer(newDefaultSession, action).gradings;
   expect(gradingMap.get(submissionId)).toEqual(gradingTest2);
 });
 

src/commons/application/types/SessionTypes.ts

@@ -1,7 +1,7 @@
 import { Octokit } from '@octokit/rest';
 import { Chapter, Variant } from 'js-slang/dist/types';
 
-import { Grading, GradingOverview } from '../../../features/grading/GradingTypes';
+import { GradingOverview, GradingQuery } from '../../../features/grading/GradingTypes';
 import { Device, DeviceSession } from '../../../features/remoteExecution/RemoteExecutionTypes';
 import {
   Assessment,
@@ -115,7 +115,7 @@ export type SessionState = {
   readonly assessmentOverviews?: AssessmentOverview[];
   readonly assessments: Map<number, Assessment>;
   readonly gradingOverviews?: GradingOverview[];
-  readonly gradings: Map<number, Grading>;
+  readonly gradings: Map<number, GradingQuery>;
   readonly notifications: Notification[];
   readonly googleUser?: string;
   readonly githubAssessment?: MissionRepoData;

src/commons/mocks/BackendMocks.ts

@@ -2,7 +2,11 @@ import { SagaIterator } from 'redux-saga';
 import { call, put, select, takeEvery } from 'redux-saga/effects';
 
 import { FETCH_GROUP_GRADING_SUMMARY } from '../../features/dashboard/DashboardTypes';
-import { Grading, GradingOverview, GradingQuestion } from '../../features/grading/GradingTypes';
+import {
+  GradingOverview,
+  GradingQuery,
+  GradingQuestion
+} from '../../features/grading/GradingTypes';
 import {
   OverallState,
   Role,
@@ -177,7 +181,7 @@ export function* mockBackendSaga(): SagaIterator {
     const accessToken = yield select((state: OverallState) => state.session.accessToken);
     const grading = yield call(() => mockFetchGrading(accessToken, submissionId));
     if (grading !== null) {
-      yield put(actions.updateGrading(submissionId, [...grading]));
+      yield put(actions.updateGrading(submissionId, grading));
     }
   });
 
@@ -217,10 +221,10 @@ export function* mockBackendSaga(): SagaIterator {
 
     const { submissionId, questionId, xpAdjustment, comments } = action.payload;
     // Now, update the grade for the question in the Grading in the store
-    const grading: Grading = yield select((state: OverallState) =>
+    const grading: GradingQuery = yield select((state: OverallState) =>
       state.session.gradings.get(submissionId)
     );
-    const newGrading = grading.slice().map((gradingQuestion: GradingQuestion) => {
+    const newGrading = grading.answers.slice().map((gradingQuestion: GradingQuestion) => {
       if (gradingQuestion.question.id === questionId) {
         gradingQuestion.grade = {
           xpAdjustment,
@@ -230,7 +234,9 @@ export function* mockBackendSaga(): SagaIterator {
       }
       return gradingQuestion;
     });
-    yield put(actions.updateGrading(submissionId, newGrading));
+    yield put(
+      actions.updateGrading(submissionId, { answers: newGrading, assessment: grading.assessment })
+    );
     yield call(showSuccessMessage, 'Submitted!', 1000);
   };
 

src/commons/mocks/GradingMocks.ts

@@ -1,5 +1,10 @@
 import { GradingSummary } from '../../features/dashboard/DashboardTypes';
-import { Grading, GradingOverview } from '../../features/grading/GradingTypes';
+import {
+  GradingAnswer,
+  GradingAssessment,
+  GradingOverview,
+  GradingQuery
+} from '../../features/grading/GradingTypes';
 import { Role } from '../application/ApplicationTypes';
 import { Testcase, TestcaseTypes } from '../assessment/AssessmentTypes';
 import { mockLibrary } from './AssessmentMocks';
@@ -102,7 +107,7 @@ export const mockTestcases: Testcase[] = [
   { type: TestcaseTypes.opaque, program: `remainder(17, 23) === 17;`, score: 2, answer: `true` }
 ];
 
-export const mockGrading: Grading = [
+export const mockGradingAnswer: GradingAnswer = [
   {
     question: {
       answer: `function remainder(n, d) {
@@ -386,20 +391,47 @@ New message from **Avenger**!
   }
 ];
 
+export const mockGradingAssessment: GradingAssessment = {
+  coverPicture: 'https://i.imgur.com/dR7zBPI.jpeg',
+  id: 1,
+  number: '10',
+  reading:
+    'This is for you to read. Read it carefully. Perhaps you will find the answer to life here.',
+  story: `Story:
+Start of story.
+End of story.
+The End.
+
+Credits
+Starring: Source Academy`,
+  summaryLong:
+    'This is the long summary of the assessment. It is a very very very very long summary',
+  summaryShort: 'This is short summary',
+  title: 'Assessment 1: Some Title'
+};
+
+export const mockGradingQuery: GradingQuery = {
+  answers: mockGradingAnswer,
+  assessment: mockGradingAssessment
+};
+
 /**
  * Mock for fetching a trainer/admin's student grading information.
  * A null value is returned for invalid token or role.
  *
  * @param accessToken a valid access token for the cadet backend.
  */
-export const mockFetchGrading = (accessToken: string, submissionId: number): Grading | null => {
+export const mockFetchGrading = (
+  accessToken: string,
+  submissionId: number
+): GradingQuery | null => {
   // mocks backend role fetching
   const permittedRoles: Role[] = [Role.Admin, Role.Staff];
   const role: Role | null = mockFetchRole(accessToken);
   if (role === null || !permittedRoles.includes(role)) {
     return null;
   } else {
-    return mockGrading;
+    return mockGradingQuery;
   }
 };