Merge pull request #2265 from bryanjenningz/add-exercises-nav

Add DOJO exercises nav card

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

@@ -18,6 +18,7 @@ const session = {
 describe('Exercises page', () => {
   const { query } = useRouter()
   query['lessonSlug'] = 'js0'
+
   test('Should render correctly', async () => {
     const mocks = [
       {
@@ -41,6 +42,42 @@ describe('Exercises page', () => {
     await waitFor(() =>
       screen.getByRole('heading', { name: /Foundations of JavaScript/i })
     )
+
+    screen.getByRole('link', { name: 'CHALLENGES' })
+    screen.getByRole('link', { name: 'EXERCISES' })
+    screen.getByRole('link', { name: 'LESSONS' })
+  })
+
+  test('Should not render lessons nav card tab if lesson docUrl is null', async () => {
+    const mocks = [
+      {
+        request: { query: GET_APP },
+        result: {
+          data: {
+            session,
+            lessons: dummyLessonData.map(lesson => ({
+              ...lesson,
+              docUrl: null
+            })),
+            alerts: dummyAlertData
+          }
+        }
+      }
+    ]
+
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <Exercises />
+      </MockedProvider>
+    )
+
+    await waitFor(() =>
+      screen.getByRole('heading', { name: /Foundations of JavaScript/i })
+    )
+
+    screen.getByRole('link', { name: 'CHALLENGES' })
+    screen.getByRole('link', { name: 'EXERCISES' })
+    expect(screen.queryByRole('link', { name: 'LESSONS' })).toBeNull()
   })
 
   test('Should render a 500 error page if the lesson data is null', async () => {

pages/exercises/[lessonSlug].tsx

@@ -9,6 +9,7 @@ import Error, { StatusCode } from '../../components/Error'
 import LoadingSpinner from '../../components/LoadingSpinner'
 import GET_APP from '../../graphql/queries/getApp'
 import AlertsDisplay from '../../components/AlertsDisplay'
+import NavCard from '../../components/NavCard'
 
 const Exercises: React.FC<QueryDataProps<GetAppQuery>> = ({ queryData }) => {
   const { lessons, alerts } = queryData
@@ -23,9 +24,21 @@ const Exercises: React.FC<QueryDataProps<GetAppQuery>> = ({ queryData }) => {
   if (!currentLesson)
     return <Error code={StatusCode.NOT_FOUND} message="Lesson not found" />
 
+  const tabs = [
+    ...(currentLesson.docUrl
+      ? [{ text: 'lessons', url: currentLesson.docUrl }]
+      : []),
+    { text: 'challenges', url: `/curriculum/${currentLesson.slug}` },
+    { text: 'exercises', url: `/exercises/${currentLesson.slug}` }
+  ]
+
   return (
     <Layout title={currentLesson.title}>
-      <h1>{currentLesson.title}</h1>
+      <NavCard
+        tabSelected={tabs.findIndex(tab => tab.text === 'exercises')}
+        tabs={tabs}
+      />
+      <h1 className="mt-3">{currentLesson.title}</h1>
       {alerts && <AlertsDisplay alerts={alerts} />}
     </Layout>
   )