Skip to content

Commit

Permalink
Merge pull request #2383 from bryanjenningz/add-dojo-exercise-filtering
Browse files Browse the repository at this point in the history
Add DOJO exercise filtering checkbox
  • Loading branch information
bryanjenningz authored Oct 1, 2022
2 parents a854ae2 + 4159728 commit 14e6751
Show file tree
Hide file tree
Showing 3 changed files with 236 additions and 71 deletions.
131 changes: 117 additions & 14 deletions __tests__/pages/exercises/[lessonSlug].test.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react'
import { render, waitFor, screen, fireEvent } from '@testing-library/react'
import { render, screen, fireEvent } from '@testing-library/react'
import '@testing-library/jest-dom'
import Exercises from '../../../pages/exercises/[lessonSlug]'
import { useRouter } from 'next/router'
Expand Down Expand Up @@ -28,9 +28,7 @@ describe('Exercises page', () => {
</MockedProvider>
)

await waitFor(() =>
screen.getByRole('heading', { name: /Foundations of JavaScript/i })
)
await screen.findByRole('heading', { name: /Foundations of JavaScript/i })

screen.getByRole('link', { name: 'CHALLENGES' })
screen.getByRole('link', { name: 'EXERCISES' })
Expand Down Expand Up @@ -66,15 +64,13 @@ describe('Exercises page', () => {
}
]

const { getByRole, queryByRole, getByLabelText } = render(
const { getByRole, findByRole, queryByRole, getByLabelText } = render(
<MockedProvider mocks={mocks} addTypename={false}>
<Exercises />
</MockedProvider>
)

await waitFor(() =>
getByRole('heading', { name: /Foundations of JavaScript/i })
)
await findByRole('heading', { name: /Foundations of JavaScript/i })

const solveExercisesButton = getByRole('button', {
name: 'SOLVE EXERCISES'
Expand Down Expand Up @@ -111,6 +107,115 @@ describe('Exercises page', () => {
expect(queryByRole('button', { name: 'SKIP' })).not.toBeInTheDocument()
})

test('Renders different exercises depending on whether the show-only-incompleted checkbox is checked', async () => {
const mocks = [
{
request: { query: GET_EXERCISES },
result: {
data: getExercisesData
}
},
{
request: {
query: ADD_EXERCISE_SUBMISSION,
variables: {
exerciseId: 2,
userAnswer: 'blah blah'
}
},
result: {
data: {
addExerciseSubmissions: {
id: 1,
exerciseId: 2,
userId: 4,
userAnswer: 'blah blah'
}
}
}
},
{
request: {
query: ADD_EXERCISE_SUBMISSION,
variables: {
exerciseId: 3,
userAnswer: '-1'
}
},
result: {
data: {
addExerciseSubmissions: {
id: 1,
exerciseId: 3,
userId: 4,
userAnswer: '-1'
}
}
}
}
]

const { findByLabelText, findAllByText, findByRole } = render(
<MockedProvider mocks={mocks} addTypename={false}>
<Exercises />
</MockedProvider>
)

let checkbox = await findByLabelText('Show incomplete exercises only')

let exercisePreviews = await findAllByText('Problem')
expect(exercisePreviews).toHaveLength(3)
let notAnsweredExercisePreviews = await findAllByText('NOT ANSWERED')
expect(notAnsweredExercisePreviews).toHaveLength(2)

fireEvent.click(checkbox)

exercisePreviews = await findAllByText('Problem')
expect(exercisePreviews).toHaveLength(2)
notAnsweredExercisePreviews = await findAllByText('NOT ANSWERED')
expect(notAnsweredExercisePreviews).toHaveLength(2)

const solveExercisesButton = await findByRole('button', {
name: 'SOLVE EXERCISES'
})
fireEvent.click(solveExercisesButton)

let inputBox = await findByLabelText('User answer')
fireEvent.change(inputBox, {
target: { value: 'blah blah' }
})
let submitButton = await findByRole('button', { name: 'SUBMIT' })
fireEvent.click(submitButton)

const skipButton = await findByRole('button', { name: 'SKIP' })
fireEvent.click(skipButton)

inputBox = await findByLabelText('User answer')
fireEvent.change(inputBox, {
target: { value: '-1' }
})
submitButton = await findByRole('button', { name: 'SUBMIT' })
fireEvent.click(submitButton)

const nextQuestionButton = await findByRole('button', {
name: 'NEXT QUESTION'
})
fireEvent.click(nextQuestionButton)

exercisePreviews = await findAllByText('Problem')
expect(exercisePreviews).toHaveLength(1)
let incorrectExercisePreviews = await findAllByText('INCORRECT')
expect(incorrectExercisePreviews).toHaveLength(1)

checkbox = await findByLabelText('Show incomplete exercises only')
fireEvent.click(checkbox)

exercisePreviews = await findAllByText('Problem')
expect(exercisePreviews).toHaveLength(3)
incorrectExercisePreviews = await findAllByText('INCORRECT')
expect(incorrectExercisePreviews).toHaveLength(1)
})

test('Should not render lessons nav card tab if lesson docUrl is null', async () => {
const mocks = [
{
Expand All @@ -133,9 +238,7 @@ describe('Exercises page', () => {
</MockedProvider>
)

await waitFor(() =>
screen.getByRole('heading', { name: /Foundations of JavaScript/i })
)
await screen.findByRole('heading', { name: /Foundations of JavaScript/i })

screen.getByRole('link', { name: 'CHALLENGES' })
screen.getByRole('link', { name: 'EXERCISES' })
Expand All @@ -161,7 +264,7 @@ describe('Exercises page', () => {
</MockedProvider>
)

await waitFor(() => screen.getByRole('heading', { name: /500 Error/i }))
await screen.findByRole('heading', { name: /500 Error/i })
})

test('Should render a 404 error page if the lesson is not found', async () => {
Expand All @@ -183,7 +286,7 @@ describe('Exercises page', () => {
</MockedProvider>
)

await waitFor(() => screen.getByRole('heading', { name: /404 Error/i }))
await screen.findByRole('heading', { name: /404 Error/i })
})

test('Should render a loading spinner if useRouter is not ready', async () => {
Expand All @@ -205,6 +308,6 @@ describe('Exercises page', () => {
</MockedProvider>
)

await waitFor(() => screen.getByText('Loading...'))
await screen.findByText('Loading...')
})
})
2 changes: 1 addition & 1 deletion components/ExercisePreviewCard/ExercisePreviewCard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styles from './exercisePreviewCard.module.scss'

export type ExercisePreviewCardProps = {
moduleName: string
state: 'NOT ANSWERED' | 'ANSWERED'
state: 'NOT ANSWERED' | 'INCORRECT' | 'ANSWERED'
problem: string
className?: string
}
Expand Down
Loading

1 comment on commit 14e6751

@vercel
Copy link

@vercel vercel bot commented on 14e6751 Oct 1, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.