Add header and alerts and errors to the DOJO exercises page

__tests__/pages/exercises/[lessonSlug].test.js

@@ -1,12 +1,117 @@
 import React from 'react'
-import { render, waitFor } from '@testing-library/react'
+import { render, waitFor, screen } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import Exercises from '../../../pages/exercises/[lessonSlug]'
+import { useRouter } from 'next/router'
+import { MockedProvider } from '@apollo/client/testing'
+import dummyLessonData from '../../../__dummy__/lessonData'
+import dummySessionData from '../../../__dummy__/sessionData'
+import dummyAlertData from '../../../__dummy__/alertData'
+import GET_APP from '../../../graphql/queries/getApp'
+
+const session = {
+  ...dummySessionData,
+  submissions: [],
+  lessonStatus: []
+}
 
 describe('Exercises page', () => {
+  const { query } = useRouter()
+  query['lessonSlug'] = 'js0'
   test('Should render correctly', async () => {
-    const { getByRole } = render(<Exercises />)
+    const mocks = [
+      {
+        request: { query: GET_APP },
+        result: {
+          data: {
+            session,
+            lessons: dummyLessonData,
+            alerts: dummyAlertData
+          }
+        }
+      }
+    ]
+
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <Exercises />
+      </MockedProvider>
+    )
+
+    await waitFor(() =>
+      screen.getByRole('heading', { name: /Foundations of JavaScript/i })
+    )
+  })
+
+  test('Should render a 500 error page if the lesson data is null', async () => {
+    const mocks = [
+      {
+        request: { query: GET_APP },
+        result: {
+          data: {
+            session,
+            lessons: null,
+            alerts: dummyAlertData
+          }
+        }
+      }
+    ]
+
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <Exercises />
+      </MockedProvider>
+    )
+
+    await waitFor(() => screen.getByRole('heading', { name: /500 Error/i }))
+  })
+
+  test('Should render a 404 error page if the lesson is not found', async () => {
+    const mocks = [
+      {
+        request: { query: GET_APP },
+        result: {
+          data: {
+            session,
+            lessons: [],
+            alerts: dummyAlertData
+          }
+        }
+      }
+    ]
+
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <Exercises />
+      </MockedProvider>
+    )
+
+    await waitFor(() => screen.getByRole('heading', { name: /404 Error/i }))
+  })
+
+  test('Should render a loading spinner if useRouter is not ready', async () => {
+    useRouter.mockImplementation(() => ({
+      isReady: false
+    }))
+    const mocks = [
+      {
+        request: { query: GET_APP },
+        result: {
+          data: {
+            session,
+            lessons: dummyLessonData,
+            alerts: dummyAlertData
+          }
+        }
+      }
+    ]
+
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <Exercises />
+      </MockedProvider>
+    )
 
-    getByRole('heading', { name: /Foundations of JavaScript/i })
+    await waitFor(() => screen.getByText('Loading...'))
   })
 })

pages/exercises/[lessonSlug].tsx

@@ -1,7 +1,39 @@
+import { useRouter } from 'next/router'
 import React from 'react'
+import Layout from '../../components/Layout'
+import withQueryLoader, {
+  QueryDataProps
+} from '../../containers/withQueryLoader'
+import { GetAppQuery } from '../../graphql'
+import Error, { StatusCode } from '../../components/Error'
+import LoadingSpinner from '../../components/LoadingSpinner'
+import GET_APP from '../../graphql/queries/getApp'
+import AlertsDisplay from '../../components/AlertsDisplay'
 
-const Exercises = () => {
-  return <h1>Foundations of JavaScript</h1>
+const Exercises: React.FC<QueryDataProps<GetAppQuery>> = ({ queryData }) => {
+  const { lessons, alerts } = queryData
+  const router = useRouter()
+  if (!router.isReady) return <LoadingSpinner />
+
+  const slug = router.query.lessonSlug as string
+  if (!lessons || !alerts)
+    return <Error code={StatusCode.INTERNAL_SERVER_ERROR} message="Bad data" />
+
+  const currentLesson = lessons.find(lesson => lesson.slug === slug)
+  if (!currentLesson)
+    return <Error code={StatusCode.NOT_FOUND} message="Lesson not found" />
+
+  return (
+    <Layout title={currentLesson.title}>
+      <h1>{currentLesson.title}</h1>
+      {alerts && <AlertsDisplay alerts={alerts} />}
+    </Layout>
+  )
 }
 
-export default Exercises
+export default withQueryLoader<GetAppQuery>(
+  {
+    query: GET_APP
+  },
+  Exercises
+)