feat: Create Exercise card

__tests__/__snapshots__/storyshots.test.js.snap

@@ -127,6 +127,195 @@ exports[`Storyshots Components/AdminLessonCard Basic 1`] = `
 </div>
 `;
 
+exports[`Storyshots Components/AdminLessonExerciseCard Basic 1`] = `
+<div
+  className="card"
+>
+  <div
+    className="card__header"
+  >
+    <div
+      className="card__badges"
+    >
+      <span
+        className="card__header__badge card__header__badge__flagged"
+      >
+        FLAGGED
+      </span>
+      <span
+        className="card__header__badge card__header__badge__module"
+      >
+        VARIABLES
+      </span>
+    </div>
+    <p
+      className="card__header__username"
+    >
+      noob
+    </p>
+    <div
+      className="card__header__contact__container"
+    >
+      <div
+        className="card__header__contact"
+      >
+        <span>
+          [email protected]
+        </span>
+        <button
+          className="btn borderless btn-outline-primary btn-outline-bg-primary"
+          onClick={[Function]}
+          style={
+            Object {
+              "color": "primary",
+            }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-copy"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </button>
+      </div>
+      <div
+        className="card__header__contact"
+      >
+        <span>
+          noob#123
+        </span>
+        <button
+          className="btn borderless btn-outline-primary btn-outline-bg-primary"
+          onClick={[Function]}
+          style={
+            Object {
+              "color": "primary",
+            }
+          }
+        >
+          <svg
+            aria-hidden="true"
+            className="octicon octicon-copy"
+            dangerouslySetInnerHTML={
+              Object {
+                "__html": "<path fill-rule=\\"evenodd\\" d=\\"M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 010 1.5h-1.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-1.5a.75.75 0 011.5 0v1.5A1.75 1.75 0 019.25 16h-7.5A1.75 1.75 0 010 14.25v-7.5z\\"></path><path fill-rule=\\"evenodd\\" d=\\"M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0114.25 11h-7.5A1.75 1.75 0 015 9.25v-7.5zm1.75-.25a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25h-7.5z\\"></path>",
+              }
+            }
+            fill="currentColor"
+            height={16}
+            role="img"
+            style={
+              Object {
+                "display": "inline-block",
+                "overflow": "visible",
+                "userSelect": "none",
+                "verticalAlign": "text-bottom",
+              }
+            }
+            viewBox="0 0 16 16"
+            width={16}
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+  <div
+    className="card__section"
+  >
+    <h3
+      className="card__section__header"
+    >
+      Description
+    </h3>
+    <p
+      className="card__section__desc"
+    >
+      It’s all about context. The reason you get the above error is because, when you invoke setTimeout(), you are actually invoking window.setTimeout(). As a result, the anonymous function being passed to setTimeout()
+    </p>
+  </div>
+  <div
+    className="card__section"
+  >
+    <h3
+      className="card__section__header"
+    >
+      Answer
+    </h3>
+    <p
+      className="card__section__desc"
+    >
+      The right answer is setTimeout
+    </p>
+    <button
+      className="card__section--explanation"
+      onClick={[Function]}
+    >
+      Show
+       explanation
+    </button>
+    <div
+      aria-expanded={null}
+      className="card__section__explanation collapse"
+      id="explanation-collapse-text"
+    >
+      It's setTimeout because it's an async function and not sync
+    </div>
+  </div>
+  <div
+    className="card__section"
+  >
+    <h3
+      className="card__section__header"
+    >
+      Reason for flag
+    </h3>
+    <p
+      className="card__section__desc"
+    >
+      setTimeout takes a callback function and not a number
+    </p>
+  </div>
+  <div
+    className="card__footer"
+  >
+    <button
+      className="card__footer__btn"
+      disabled={false}
+      onClick={[Function]}
+    >
+      <span>
+        REMOVE EXERCISE
+      </span>
+    </button>
+    <button
+      className="card__footer__btn"
+      onClick={[Function]}
+    >
+      <span>
+        UNFLAG EXERCISE
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`Storyshots Components/AdminLessonNav Basic 1`] = `
 <div>
   <div

components/admin/lessons/AdminLessonExerciseCard.test.js

@@ -0,0 +1,190 @@
+import React from 'react'
+import Component from './AdminLessonExerciseCard'
+import userEvent from '@testing-library/user-event'
+import { render, screen } from '@testing-library/react'
+import { MockedProvider } from '@apollo/client/testing'
+import DELETE_EXERCISE from '../../../graphql/queries/deleteExercise'
+import REMOVE_EXERCISE_FLAG from '../../../graphql/queries/removeExerciseFlag'
+
+// Imported to be able to use expect(...).toBeInTheDocument()
+import '@testing-library/jest-dom'
+
+const user = {
+  username: 'noob',
+  discordUsername: 'noob#123',
+  email: '[email protected]'
+}
+
+const exercise = {
+  id: 1,
+  description:
+    'It’s all about context. The reason you get the above error is because, when you invoke setTimeout(), you are actually invoking window.setTimeout(). As a result, the anonymous function being passed to setTimeout()',
+  answer: 'The right answer is setTimeout',
+  explanation: "It's setTimeout because it's an async function and not sync",
+  flagReason: 'setTimeout takes a callback function and not a number',
+  module: {
+    name: 'Variables',
+    moduleId: 1
+  }
+}
+
+const mocks = [
+  {
+    request: {
+      query: DELETE_EXERCISE,
+      variables: { id: 1 }
+    },
+    result: {
+      data: {
+        deleteExercise: {
+          id: 1
+        }
+      }
+    }
+  },
+  {
+    request: {
+      query: REMOVE_EXERCISE_FLAG,
+      variables: {
+        id: 1
+      }
+    },
+    result: {
+      data: {
+        removeExerciseFlag: {
+          id: 1
+        }
+      }
+    }
+  }
+]
+
+const loadingMocks = [
+  {
+    request: {
+      query: DELETE_EXERCISE,
+      variables: { id: 1 }
+    },
+    result: {
+      data: {
+        deleteExercise: {
+          id: 1
+        }
+      }
+    },
+    // Keep the query at loading state for ~3170 years
+    delay: 100_000_000_000_000
+  }
+]
+
+describe('AdminLessonExerciseCard component', () => {
+  it('Should show explanation on click', async () => {
+    expect.assertions(1)
+
+    render(
+      <MockedProvider>
+        <Component user={user} exercise={exercise} />
+      </MockedProvider>
+    )
+
+    const btn = screen.getByText('Show explanation')
+    await userEvent.click(btn)
+
+    expect(screen.getByText('Hide explanation')).toBeInTheDocument()
+  })
+
+  it('Should remove exercise', async () => {
+    expect.assertions(1)
+
+    const onRemoveMock = jest.fn()
+
+    render(
+      <MockedProvider mocks={mocks}>
+        <Component user={user} exercise={exercise} onRemove={onRemoveMock} />
+      </MockedProvider>
+    )
+
+    const btn = screen.getByText('REMOVE EXERCISE')
+    await userEvent.click(btn)
+
+    expect(onRemoveMock).toBeCalled()
+  })
+
+  it('Should not call onRemove if not passed', async () => {
+    expect.assertions(1)
+
+    const onRemoveMock = jest.fn()
+
+    render(
+      <MockedProvider mocks={mocks}>
+        <Component user={user} exercise={exercise} />
+      </MockedProvider>
+    )
+
+    const btn = screen.getByText('REMOVE EXERCISE')
+    await userEvent.click(btn)
+
+    expect(onRemoveMock).not.toBeCalled()
+  })
+
+  it('Should unflag exercise', async () => {
+    expect.assertions(1)
+
+    const onUnflag = jest.fn()
+
+    render(
+      <MockedProvider mocks={mocks}>
+        <Component user={user} exercise={exercise} onUnflag={onUnflag} />
+      </MockedProvider>
+    )
+
+    const btn = screen.getByText('UNFLAG EXERCISE')
+    await userEvent.click(btn)
+
+    expect(onUnflag).toBeCalled()
+  })
+
+  it('Should not call unflag if not passed', async () => {
+    expect.assertions(1)
+
+    const onUnflag = jest.fn()
+
+    render(
+      <MockedProvider mocks={mocks}>
+        <Component user={user} exercise={exercise} />
+      </MockedProvider>
+    )
+
+    const btn = screen.getByText('UNFLAG EXERCISE')
+    await userEvent.click(btn)
+
+    expect(onUnflag).not.toBeCalled()
+  })
+
+  it('Should show loading spinner', async () => {
+    expect.assertions(1)
+
+    render(
+      <MockedProvider mocks={loadingMocks}>
+        <Component user={user} exercise={exercise} onRemove={() => {}} />
+      </MockedProvider>
+    )
+
+    const btn = screen.getByText('REMOVE EXERCISE')
+    await userEvent.click(btn)
+
+    expect(screen.queryByText('REMOVE EXERCISE')).not.toBeInTheDocument()
+  })
+
+  it('Should not show the explanation if not provided', () => {
+    expect.assertions(1)
+
+    render(
+      <MockedProvider mocks={mocks}>
+        <Component user={user} exercise={{ ...exercise, explanation: '' }} />
+      </MockedProvider>
+    )
+
+    expect(screen.queryByText('Show explanation')).not.toBeInTheDocument()
+  })
+})