feat:Create a folder for CommentBox component

Related to garageScript#2080
flacial · Aug 4, 2022 · dabd788 · dabd788
1 parent c45e2d4
commit dabd788
Show file tree

Hide file tree

Showing 5 changed files with 121 additions and 21 deletions.
diff --git a/components/CommentBox.test.js → components/CommentBox/CommentBox.test.js b/components/CommentBox.test.js → components/CommentBox/CommentBox.test.js
@@ -1,22 +1,21 @@
-import '../__mocks__/useIsMac.mock'
-import '../__mocks__/useBreakpoint.mock'
+import '../../__mocks__/useIsMac.mock'
+import '../../__mocks__/useBreakpoint.mock'
 import React from 'react'
-import { fireEvent, render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import AddComment from '../graphql/queries/addComment'
+import { fireEvent, render, screen } from '@testing-library/react'
+import AddComment from '../../graphql/queries/addComment'
 import '@testing-library/jest-dom'
 import CommentBox from './CommentBox'
 import { MockedProvider } from '@apollo/client/testing'
 import { InMemoryCache } from '@apollo/client'
-import GET_SUBMISSIONS from '../graphql/queries/getSubmissions'
-import GET_APP from '../graphql/queries/getApp'
-import dummySessionData from '../__dummy__/sessionData'
-import dummyLessonData from '../__dummy__/lessonData'
-import dummyAlertData from '../__dummy__/alertData'
-import { SubmissionStatus } from '../graphql'
-import { ContextProvider } from '../helpers/globalContext'
-import GET_PREVIOUS_SUBMISSIONS from '../graphql/queries/getPreviousSubmissions'
-import getPreviousSubmissionsData from '../__dummy__/getPreviousSubmissionsData'
+import GET_SUBMISSIONS from '../../graphql/queries/getSubmissions'
+import GET_APP from '../../graphql/queries/getApp'
+import dummySessionData from '../../__dummy__/sessionData'
+import dummyLessonData from '../../__dummy__/lessonData'
+import dummyAlertData from '../../__dummy__/alertData'
+import { SubmissionStatus } from '../../graphql'
+import { ContextProvider } from '../../helpers/globalContext'
+import GET_PREVIOUS_SUBMISSIONS from '../../graphql/queries/getPreviousSubmissions'
+import getPreviousSubmissionsData from '../../__dummy__/getPreviousSubmissionsData'
 
 describe('CommentBox component', () => {
   const comments = [

diff --git a/components/CommentBox.tsx → components/CommentBox/CommentBox.tsx b/components/CommentBox.tsx → components/CommentBox/CommentBox.tsx
@@ -1,17 +1,17 @@
 import React, { useState, useContext } from 'react'
-import { MdInput } from './MdInput'
-import { Button } from './theme/Button'
-import styles from '../scss/commentBox.module.scss'
+import { MdInput } from '.././MdInput'
+import { Button } from '.././theme/Button'
+import styles from './commentBox.module.scss'
 import {
   useAddCommentMutation,
   Comment,
   SubmissionStatus,
   Submission
-} from '../graphql'
+} from '../../graphql'
 import _ from 'lodash'
-import { GlobalContext } from '../helpers/globalContext'
-import { updateCache } from '../helpers/updateCache'
-import { SubmissionComments } from './SubmissionComments'
+import { GlobalContext } from '../../helpers/globalContext'
+import { updateCache } from '../../helpers/updateCache'
+import { SubmissionComments } from '.././SubmissionComments'
 
 const CommentBox: React.FC<{
   line: number

diff --git a/components/CommentBox/__snapshots__/CommentBox.test.js.snap b/components/CommentBox/__snapshots__/CommentBox.test.js.snap
@@ -0,0 +1,100 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CommentBox component Should render commentBox with comments 1`] = `
+<div>
+  <div
+    class="showHide"
+  >
+    Hide conversation
+  </div>
+  <div
+    class="commentBox bg-white d-auto"
+  >
+    <div
+      class="border border-lightgray rounded my-1"
+    >
+      <div
+        class="ms-3"
+      >
+        <span
+          wrapper="code_wrapper"
+        >
+          First Comment
+        </span>
+      </div>
+      <div
+        class="wrapper d-flex justify-content-between align-items-center p-1"
+      >
+        <div
+          class="wrapper"
+        >
+          <a
+            class="comment_author__inline mt-2 "
+            href="/profile/newbie"
+          >
+            <div
+              class="d-inline"
+            >
+              Noob Newbie
+            </div>
+            <div
+              class="d-inline text-muted"
+            >
+               @newbie
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+    <div
+      class="border border-lightgray rounded my-1"
+    >
+      <div
+        class="ms-3"
+      >
+        <span
+          wrapper="code_wrapper"
+        >
+          Second Comment
+        </span>
+      </div>
+      <div
+        class="wrapper d-flex justify-content-between align-items-center p-1"
+      >
+        <div
+          class="wrapper"
+        >
+          <a
+            class="comment_author__inline mt-2 "
+            href="/profile/newbie"
+          >
+            <div
+              class="d-inline"
+            >
+              Noob Newbie
+            </div>
+            <div
+              class="d-inline text-muted"
+            >
+               @newbie
+            </div>
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`CommentBox component Should render empty commentBox 1`] = `
+<div>
+  <div
+    class="showHide"
+  >
+    Hide conversation
+  </div>
+  <div
+    class="commentBox bg-white d-auto"
+  />
+</div>
+`;
diff --git a/scss/commentBox.module.scss → components/CommentBox/commentBox.module.scss b/scss/commentBox.module.scss → components/CommentBox/commentBox.module.scss
diff --git a/components/CommentBox/index.tsx b/components/CommentBox/index.tsx
@@ -0,0 +1 @@
+export { default } from './CommentBox'