From 6ab81d69cdb7be681af9bcba41c3183f0db1ad43 Mon Sep 17 00:00:00 2001 From: Flacial Date: Sat, 10 Dec 2022 22:04:14 +0400 Subject: [PATCH 1/6] Use ExerciseReportCard in exercises page --- components/ExerciseCard/ExerciseCard.test.tsx | 93 +++++++++++-------- components/ExerciseCard/ExerciseCard.tsx | 6 +- pages/exercises/[lessonSlug].tsx | 1 + stories/components/ExerciseCard.stories.tsx | 28 +++--- 4 files changed, 75 insertions(+), 53 deletions(-) diff --git a/components/ExerciseCard/ExerciseCard.test.tsx b/components/ExerciseCard/ExerciseCard.test.tsx index 86a5e9886..6eed17375 100644 --- a/components/ExerciseCard/ExerciseCard.test.tsx +++ b/components/ExerciseCard/ExerciseCard.test.tsx @@ -2,6 +2,7 @@ import '@testing-library/jest-dom' import React from 'react' import { fireEvent, render } from '@testing-library/react' import ExerciseCard, { Message } from './ExerciseCard' +import { MockedProvider } from '@apollo/client/testing' const exampleProblem = `let a = 5 a = a + 10 @@ -16,16 +17,19 @@ describe('ExerciseCard component', () => { const submitUserAnswer = jest.fn() const { getByRole, queryByText } = render( - + + + ) // Test that an error message shows if the user is wrong @@ -48,16 +52,19 @@ describe('ExerciseCard component', () => { const submitUserAnswer = jest.fn() const { getByRole, queryByText, getByLabelText } = render( - + + + ) expect(queryByText(Message.ERROR)).toBeInTheDocument() @@ -87,16 +94,19 @@ describe('ExerciseCard component', () => { const submitUserAnswer = jest.fn() const { getByRole, queryByText } = render( - + + + ) expect(queryByText(Message.SUCCESS)).toBeInTheDocument() @@ -119,16 +129,19 @@ describe('ExerciseCard component', () => { const submitUserAnswer = jest.fn() const { queryByText, getByRole } = render( - + + + ) expect(queryByText(Message.SUCCESS)).toBeInTheDocument() diff --git a/components/ExerciseCard/ExerciseCard.tsx b/components/ExerciseCard/ExerciseCard.tsx index 59c2db6ad..9d5765157 100644 --- a/components/ExerciseCard/ExerciseCard.tsx +++ b/components/ExerciseCard/ExerciseCard.tsx @@ -1,5 +1,6 @@ import Markdown from 'markdown-to-jsx' import React, { useState } from 'react' +import ExerciseReportCard from '../ExerciseReportCard' import { NewButton } from '../theme/Button' import { Text } from '../theme/Text' import styles from './exerciseCard.module.scss' @@ -13,6 +14,7 @@ export type ExerciseCardProps = { message: Message setMessage: (message: Message) => void submitUserAnswer: (userAnswer: string) => void + exerciseId: number } export enum Message { @@ -29,7 +31,8 @@ const ExerciseCard = ({ setAnswerShown, message, setMessage, - submitUserAnswer + submitUserAnswer, + exerciseId }: ExerciseCardProps) => { const [studentAnswer, setStudentAnswer] = useState('') @@ -102,6 +105,7 @@ const ExerciseCard = ({ )} + ) } diff --git a/pages/exercises/[lessonSlug].tsx b/pages/exercises/[lessonSlug].tsx index 625ab4de4..252cb2b6a 100644 --- a/pages/exercises/[lessonSlug].tsx +++ b/pages/exercises/[lessonSlug].tsx @@ -168,6 +168,7 @@ const Exercise = ({ }) submitUserAnswer(exercise.id, userAnswer) }} + exerciseId={exercise.id} />
{hasPrevious ? ( diff --git a/stories/components/ExerciseCard.stories.tsx b/stories/components/ExerciseCard.stories.tsx index bef6dcf68..9249ec123 100644 --- a/stories/components/ExerciseCard.stories.tsx +++ b/stories/components/ExerciseCard.stories.tsx @@ -1,3 +1,4 @@ +import { MockedProvider } from '@apollo/client/testing' import React, { useState } from 'react' import ExerciseCard, { Message } from '../../components/ExerciseCard' @@ -19,17 +20,20 @@ export const Basic = () => { const [message, setMessage] = useState(Message.EMPTY) return ( - { - console.log(`User answer submitted: ${userAnswer}`) - }} - /> + + { + console.log(`User answer submitted: ${userAnswer}`) + }} + exerciseId={1} + /> + ) } From 57eee89fdb909722be0b5b2692bc5d9acb07fccf Mon Sep 17 00:00:00 2001 From: Flacial Date: Sat, 10 Dec 2022 22:04:25 +0400 Subject: [PATCH 2/6] test: Update snapshots --- __tests__/__snapshots__/storyshots.test.js.snap | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap index 84be56aaa..fc09382dc 100644 --- a/__tests__/__snapshots__/storyshots.test.js.snap +++ b/__tests__/__snapshots__/storyshots.test.js.snap @@ -6490,6 +6490,21 @@ a = a + 10
+
+ +
`; From f4b0d6af07f80f3a3b89212160e5cf6b0f1803b0 Mon Sep 17 00:00:00 2001 From: Flacial Date: Sun, 11 Dec 2022 18:07:36 +0400 Subject: [PATCH 3/6] Update the ExerciseReportCard design --- components/ExerciseCard/ExerciseCard.tsx | 2 +- .../ExerciseReportCard.test.js | 4 +-- .../ExerciseReportCard/ExerciseReportCard.tsx | 30 +++++++++---------- .../exerciseReportCard.module.scss | 6 ++-- .../components/ExerciseReportCard.stories.tsx | 2 +- 5 files changed, 21 insertions(+), 23 deletions(-) diff --git a/components/ExerciseCard/ExerciseCard.tsx b/components/ExerciseCard/ExerciseCard.tsx index 9d5765157..3062cc2c1 100644 --- a/components/ExerciseCard/ExerciseCard.tsx +++ b/components/ExerciseCard/ExerciseCard.tsx @@ -105,7 +105,7 @@ const ExerciseCard = ({ )} - + ) } diff --git a/components/ExerciseReportCard/ExerciseReportCard.test.js b/components/ExerciseReportCard/ExerciseReportCard.test.js index b5dff2aae..0d5dc6873 100644 --- a/components/ExerciseReportCard/ExerciseReportCard.test.js +++ b/components/ExerciseReportCard/ExerciseReportCard.test.js @@ -35,7 +35,7 @@ describe('ExerciseReportCard Component', () => { render( - + ) @@ -54,7 +54,7 @@ describe('ExerciseReportCard Component', () => { render( - + ) diff --git a/components/ExerciseReportCard/ExerciseReportCard.tsx b/components/ExerciseReportCard/ExerciseReportCard.tsx index 5d569e4d2..ec228c65a 100644 --- a/components/ExerciseReportCard/ExerciseReportCard.tsx +++ b/components/ExerciseReportCard/ExerciseReportCard.tsx @@ -85,10 +85,9 @@ const Body = ({ type Props = { exerciseId: number - answerShown: boolean } -const ExerciseReportCard = ({ exerciseId, answerShown }: Props) => { +const ExerciseReportCard = ({ exerciseId }: Props) => { const [reportMode, setReportMode] = useState(false) const [description, setDescription] = useState('') const [flagExercise, { data, loading, error }] = useFlagExerciseMutation({ @@ -98,11 +97,9 @@ const ExerciseReportCard = ({ exerciseId, answerShown }: Props) => { } }) - const marginOnExpand = answerShown ? 'mt-5' : '' - if (data && !loading) { return ( -
+
Reported a mistake in this exercise

We appreciate your input. We will shortly investigate the problem that @@ -113,17 +110,20 @@ const ExerciseReportCard = ({ exerciseId, answerShown }: Props) => { } return ( -

+
{reportMode ? ( - + <> +
+ + ) : (
) From dd801f8305badb7346d845bd1aef015e5bee2346 Mon Sep 17 00:00:00 2001 From: Flacial Date: Sun, 11 Dec 2022 18:07:42 +0400 Subject: [PATCH 4/6] test: Update snapshots --- __tests__/__snapshots__/storyshots.test.js.snap | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) diff --git a/__tests__/__snapshots__/storyshots.test.js.snap b/__tests__/__snapshots__/storyshots.test.js.snap index fc09382dc..0c65ff402 100644 --- a/__tests__/__snapshots__/storyshots.test.js.snap +++ b/__tests__/__snapshots__/storyshots.test.js.snap @@ -6490,9 +6490,7 @@ a = a + 10
-
+