From 3ef51afaebccfe97028252f823cb6dcc654abc0c Mon Sep 17 00:00:00 2001
From: Anan Wolf <ananwolf1@gmail.com>
Date: Sat, 19 Jun 2021 12:39:31 -0700
Subject: [PATCH 1/2] Testing suite for Q&A complete

---
 client/src/QA/QAcomponents/AddQuestion.jsx | 32 ++++----
 client/src/QA/Test /QAcomponents.test.js   | 88 ++++++++++++++++------
 client/src/QA/Test /sampleData.js          |  2 +
 3 files changed, 86 insertions(+), 36 deletions(-)

diff --git a/client/src/QA/QAcomponents/AddQuestion.jsx b/client/src/QA/QAcomponents/AddQuestion.jsx
index 814d41b..d1c35c2 100644
--- a/client/src/QA/QAcomponents/AddQuestion.jsx
+++ b/client/src/QA/QAcomponents/AddQuestion.jsx
@@ -12,7 +12,7 @@ const AddQuestion = ({ productId, handleModalClose, openModal, prodName }) => {
   };
 
   const regexVerifyEmail = (email) => {
-    const characterTest = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+    const characterTest = /^(([^<>()[\]\\.,;:\s@']+(\.[^<>()[\]\\.,;:\s@']+)*)|('.+'))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
     return characterTest.test(email);
   };
 
@@ -31,7 +31,9 @@ const AddQuestion = ({ productId, handleModalClose, openModal, prodName }) => {
         body: questionBody,
         name: name,
         email: email,
+        /* eslint-disable */
         product_id: productId
+        /* eslint-enable */
       })
         .then((response) => {
           console.log('succesful question post', response.data);
@@ -66,11 +68,11 @@ const AddQuestion = ({ productId, handleModalClose, openModal, prodName }) => {
           <input
             className='question-email-input'
             onChange={(event) => { dataFill(event); }}
-            placeholder="Example: jack@email.com"
-            type="email"
+            placeholder='Example: jack@email.com'
+            type='email'
             name='email'
-            maxLength="60"
-            autoComplete="off"
+            maxLength='60'
+            autoComplete='off'
             value={email}
             required
           ></input>
@@ -83,11 +85,11 @@ const AddQuestion = ({ productId, handleModalClose, openModal, prodName }) => {
           <input
             className='question-name-input'
             onChange={(event) => { dataFill(event); }}
-            placeholder="Examples: jackson11!"
-            type="text"
+            placeholder='Examples: jackson11!'
+            type='text'
             name='name'
-            maxLength="60"
-            autoComplete="off"
+            maxLength='60'
+            autoComplete='off'
             value={name}
             required
           ></input>
@@ -100,12 +102,12 @@ const AddQuestion = ({ productId, handleModalClose, openModal, prodName }) => {
           <textarea
             className='question-ask'
             onChange={(event) => { dataFill(event); }}
-            placeholder="Enter Question Here..."
-            type="text"
-            name="question"
-            maxLength="1000"
-            minLength=""
-            autoComplete="off"
+            placeholder='Enter Question Here...'
+            type='text'
+            name='question'
+            maxLength='1000'
+            minLength=''
+            autoComplete='off'
             value={questionBody}
             required
           ></textarea>
diff --git a/client/src/QA/Test /QAcomponents.test.js b/client/src/QA/Test /QAcomponents.test.js
index 8b47d1c..f7e4c2b 100644
--- a/client/src/QA/Test /QAcomponents.test.js	
+++ b/client/src/QA/Test /QAcomponents.test.js	
@@ -17,6 +17,7 @@ it ('render Q&A Search without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<Search />, div);
 });
+
 // npm test -- -t 'render Question List without crashing'
 it ('render Question List without crashing', () => {
   const div = document.createElement('div');
@@ -25,11 +26,13 @@ it ('render Question List without crashing', () => {
     searchInput={null}
     productId={13023}/>, div);
 });
+
 // npm test -- -t 'render Add Question Button Modal crashing'
 it ('render Add Question Button Modal crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<AddQuestion />, div);
 });
+
 // npm test -- -t 'render Answer Helpfulness without crashing'
 it ('render Answer Helpfulness without crashing', () => {
   const div = document.createElement('div');
@@ -39,6 +42,7 @@ it ('render Answer Helpfulness without crashing', () => {
     answerDate={'2018-08-18T00:00:00.000Z'}
     answerName={sample.questions.results[0].answers.answerer_name}/>, div);
 });
+
 // npm test -- -t 'render Answer Photos without crashing'
 it ('render Answer Photos without crashing', () => {
   const div = document.createElement('div');
@@ -46,34 +50,76 @@ it ('render Answer Photos without crashing', () => {
     photo={'urlplaceholder/answer_5_photo_number_1.jpg'}
     key={1}/>, div);
 });
+
 // npm test -- -t 'render Answer List without crashing'
 it ('render Answer List without crashing', () => {
   const div = document.createElement('div');
   ReactDOM.render(<Answers
     key={sample.questions.results[0].answers.id}
-    answer={[{
-      0: {
-        answerer_name: "notKathy!",
-        body: "This is a an answer!",
-        date: "2021-06-19T00:00:00.000Z",
+    answer={
+      {
+        /* eslint-disable */
+        answerer_name: 'notKathy!',
+        /* eslint-enable */
+        body: 'This is a an answer!',
+        date: '2021-06-19T00:00:00.000Z',
         helpfulness: 0,
-        id: 1992060
-      },
-      photos: []
-    }]}/>, div);
+        id: 1992060,
+        photos: [{
+          'id': 1,
+          'url': 'urlplaceholder/answer_5_photo_number_1.jpg'
+        }]
+      }
+    }/>, div);
 });
 
-// it ('render More Answer button without crashing', () => {
-//   const div = document.createElement('div');
-//   ReactDOM.render(<MoreAnswers />, div);
-// });
+// npm test -- -t 'render More Answer button without crashing'
+it ('render More Answer button without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<MoreAnswers
+    answerList={[{
+      0: {
+        /* eslint-disable */
+        answerer_name: 'notKathy!',
+        /* eslint-enable */
+        body: 'This is a an answer!',
+        date: '2021-06-19T00:00:00.000Z',
+        helpfulness: 0,
+        id: 1992060,
+        photos: [{
+          'id': 1,
+          'url': 'urlplaceholder/answer_5_photo_number_1.jpg'
+        }]
+      }
+    }]}
+    answer={{
+      /* eslint-disable */
+      answerer_name: 'notKathy!',
+      /* eslint-enable */
+      body: 'This is a an answer!',
+      date: '2021-06-19T00:00:00.000Z',
+      helpfulness: 0,
+      id: 1992060,
+      photos: [{
+        'id': 1,
+        'url': 'urlplaceholder/answer_5_photo_number_1.jpg'
+      }]
+    }}/>, div);
+});
 
-// it ('render Individual Questions without crashing', () => {
-//   const div = document.createElement('div');
-//   ReactDOM.render(<Question />, div);
-// });
+// npm test -- -t 'render Individual Questions without crashing'
+it ('render Individual Questions without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<Question
+    question={sample.questions.results[0]}
+    key={sample.questions.results[0].question_id}/>, div);
+});
 
-// it ('render Question Helpfulness section without crashing', () => {
-//   const div = document.createElement('div');
-//   ReactDOM.render(<QuestionHelpful />, div);
-// });
+// npm test -- -t 'render Question Helpfulness section without crashing'
+it ('render Question Helpfulness section without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<QuestionHelpful
+    questionBody={sample.questions.results[0].question_body}
+    helpfulness={sample.questions.results[0].question_helpfulness}
+    questionId={sample.questions.results[0].question_id}/>, div);
+});
diff --git a/client/src/QA/Test /sampleData.js b/client/src/QA/Test /sampleData.js
index f9a24c0..7d0433e 100644
--- a/client/src/QA/Test /sampleData.js	
+++ b/client/src/QA/Test /sampleData.js	
@@ -1,3 +1,4 @@
+/* eslint-disable */
 var sample = {
   "questions": {
     "product_id": "5",
@@ -83,6 +84,7 @@ var sample = {
     ]
   }
 };
+/* eslint-enable */
 
 
 module.exports = sample;
\ No newline at end of file

From 92457fee776c8e57cbe7278a77c642a7a1a121b9 Mon Sep 17 00:00:00 2001
From: Anan Wolf <ananwolf1@gmail.com>
Date: Sat, 19 Jun 2021 15:22:35 -0700
Subject: [PATCH 2/2] testing fixed and some cleanup

---
 client/dist/styles.css                        |  8 +-
 client/src/QA/QAcomponents/AddQuestion.jsx    |  2 +-
 client/src/QA/QAcomponents/AnswerHelpful.jsx  |  2 +-
 client/src/QA/QAcomponents/AnswerPhotos.jsx   |  2 +-
 client/src/QA/QAcomponents/Answers.jsx        |  2 +-
 client/src/QA/QAcomponents/MoreAnswers.jsx    |  2 +-
 client/src/QA/QAcomponents/MoreQuestions.jsx  |  2 +-
 client/src/QA/QAcomponents/Question.jsx       |  2 +-
 .../src/QA/QAcomponents/QuestionHelpful.jsx   |  8 +-
 client/src/QA/QAcomponents/QuestionList.jsx   |  2 +-
 client/src/QA/QAcomponents/Search.jsx         |  2 +-
 client/src/QA/Test /QAcomponents.test.js      | 96 ++++++++++++-------
 12 files changed, 78 insertions(+), 52 deletions(-)

diff --git a/client/dist/styles.css b/client/dist/styles.css
index 1be02e5..efbde70 100644
--- a/client/dist/styles.css
+++ b/client/dist/styles.css
@@ -548,9 +548,15 @@ input:checked+.slider:before {
   margin-top: 20px;
   border-bottom: solid grey 2px;
 }
+
+.question-helpful-div {
+  display: inline-flex;
+  flex-direction: row;
+  font-size: 15px;
+}
 /* .question-list {
   width: auto;
-  height: 40vh;
+  height: 50vh;
   overflow-y: scroll;
 } */
 .question-control {
diff --git a/client/src/QA/QAcomponents/AddQuestion.jsx b/client/src/QA/QAcomponents/AddQuestion.jsx
index d1c35c2..b762781 100644
--- a/client/src/QA/QAcomponents/AddQuestion.jsx
+++ b/client/src/QA/QAcomponents/AddQuestion.jsx
@@ -45,7 +45,7 @@ const AddQuestion = ({ productId, handleModalClose, openModal, prodName }) => {
       : null;
   };
   const QuestionModalForm = (
-    <div
+    <div data-testid='add-question-test'
       className='question-modals'
       onClick={event => selectModal(event)}
     >
diff --git a/client/src/QA/QAcomponents/AnswerHelpful.jsx b/client/src/QA/QAcomponents/AnswerHelpful.jsx
index ea42b64..50a35ab 100644
--- a/client/src/QA/QAcomponents/AnswerHelpful.jsx
+++ b/client/src/QA/QAcomponents/AnswerHelpful.jsx
@@ -33,7 +33,7 @@ const AnswerHelpful = ({ answerHelpfulness, answerDate, answerId, answerName })
         : null;
   };
   return (
-    <div className='answer-helpfulness-div'>
+    <div className='answer-helpfulness-div' data-testid='answer-helpful-test'>
       <>by {answerName}, {convertDate(answerDate)} |</>
       &nbsp;Helpful?&nbsp;
       <p
diff --git a/client/src/QA/QAcomponents/AnswerPhotos.jsx b/client/src/QA/QAcomponents/AnswerPhotos.jsx
index 44ff7b5..676669e 100644
--- a/client/src/QA/QAcomponents/AnswerPhotos.jsx
+++ b/client/src/QA/QAcomponents/AnswerPhotos.jsx
@@ -20,7 +20,7 @@ const AnswerPhotos = ({ photo }) => {
   );
 
   return (
-    <div>
+    <div data-testid='answer-photo-test'>
       <div className='answer-photo-box'>
         <img
           className='answer-photo'
diff --git a/client/src/QA/QAcomponents/Answers.jsx b/client/src/QA/QAcomponents/Answers.jsx
index 57f4c4d..21e9967 100644
--- a/client/src/QA/QAcomponents/Answers.jsx
+++ b/client/src/QA/QAcomponents/Answers.jsx
@@ -4,7 +4,7 @@ import AnswerPhotos from './AnswerPhotos.jsx';
 import AnswerHelpful from './AnswerHelpful.jsx';
 
 const Answers = ({ answer }) => (
-  <div className='answer-div'>
+  <div className='answer-div' data-testid='answer-list-test'>
     <div className='answer'>A: {answer.body}</div>
     <div className='photo-div'>
       {answer.photos.length ? answer.photos.map((photo, id) => (
diff --git a/client/src/QA/QAcomponents/MoreAnswers.jsx b/client/src/QA/QAcomponents/MoreAnswers.jsx
index afef56f..f7ea939 100644
--- a/client/src/QA/QAcomponents/MoreAnswers.jsx
+++ b/client/src/QA/QAcomponents/MoreAnswers.jsx
@@ -5,7 +5,7 @@ const MoreAnswers = ({ answer, answerList }) => {
   const [collapseAnswers, setCollapseAnswers] = useState(true);
 
   return (
-    <div>
+    <div data-testid='more-answer-test'>
       {
         collapseAnswers
           ? <>
diff --git a/client/src/QA/QAcomponents/MoreQuestions.jsx b/client/src/QA/QAcomponents/MoreQuestions.jsx
index 018feda..00b7cbe 100644
--- a/client/src/QA/QAcomponents/MoreQuestions.jsx
+++ b/client/src/QA/QAcomponents/MoreQuestions.jsx
@@ -5,7 +5,7 @@ const MoreQuestions = ({ questions }) => {
   const [collapseQuestions, setCollapseQuestions] = useState(true);
 
   return (
-    <div>
+    <div data-testid='more-questions-test'>
       {
         collapseQuestions
           ? <>
diff --git a/client/src/QA/QAcomponents/Question.jsx b/client/src/QA/QAcomponents/Question.jsx
index 9a1f50d..8e65d08 100644
--- a/client/src/QA/QAcomponents/Question.jsx
+++ b/client/src/QA/QAcomponents/Question.jsx
@@ -8,7 +8,7 @@ const Question = ({ question, productId }) => {
   let answerList = answerKey.map(Ans => question.answers[Ans]);
 
   return (
-    <div className='question'>
+    <div className='question' data-testid='individual-question-test'>
       <span className='question-control'>
         Q: {question.question_body}
         <QuestionHelpful
diff --git a/client/src/QA/QAcomponents/QuestionHelpful.jsx b/client/src/QA/QAcomponents/QuestionHelpful.jsx
index 9c5c05e..22e56df 100644
--- a/client/src/QA/QAcomponents/QuestionHelpful.jsx
+++ b/client/src/QA/QAcomponents/QuestionHelpful.jsx
@@ -119,18 +119,12 @@ const QuestionHelpful = ({ questionBody, helpfulness, questionId, productId }) =
             Submit Answer
           </button>
         </form>
-
       </div>
-
     </div>
   );
 
   return (
-    <div style={{
-      display: 'inline-flex',
-      flexDirection: 'row',
-      fontSize: 15
-    }}>
+    <div className='question-helpful-div' data-testid='question-helpful-test'>
       Helpful?&nbsp;
       <p
         className='helpful-button'
diff --git a/client/src/QA/QAcomponents/QuestionList.jsx b/client/src/QA/QAcomponents/QuestionList.jsx
index 1be4624..7d15cb5 100644
--- a/client/src/QA/QAcomponents/QuestionList.jsx
+++ b/client/src/QA/QAcomponents/QuestionList.jsx
@@ -4,7 +4,7 @@ import MoreQuestions from './MoreQuestions.jsx';
 import AddQuestion from './AddQuestion.jsx';
 
 const QuestionList = ({ questions, searchInput, productId, openModal, handleModalOpen, handleModalClose }) => (
-  <div className='question-list'>
+  <div className='question-list' data-testid='qa-list-test'>
     {
       searchInput === null
         ?
diff --git a/client/src/QA/QAcomponents/Search.jsx b/client/src/QA/QAcomponents/Search.jsx
index 6d66a28..5661e9f 100644
--- a/client/src/QA/QAcomponents/Search.jsx
+++ b/client/src/QA/QAcomponents/Search.jsx
@@ -9,7 +9,7 @@ const Search = ({ handleSearch, searchInput }) => {
   };
 
   return (
-    <div className='qa-search'>
+    <div className='qa-search' data-testid='search-test'>
       <form>
         <input
           className='qa-search-bar'
diff --git a/client/src/QA/Test /QAcomponents.test.js b/client/src/QA/Test /QAcomponents.test.js
index f7e4c2b..518667e 100644
--- a/client/src/QA/Test /QAcomponents.test.js	
+++ b/client/src/QA/Test /QAcomponents.test.js	
@@ -1,5 +1,8 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render, screen, cleanup } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+import '@testing-library/jest-dom/extend-expect';
+
 import Search from '../QAcomponents/Search.jsx';
 import QuestionList from '../QAcomponents/QuestionList.jsx';
 import AddQuestion from '../QAcomponents/AddQuestion.jsx';
@@ -9,52 +12,62 @@ import Answers from '../QAcomponents/Answers.jsx';
 import MoreAnswers from '../QAcomponents/MoreAnswers.jsx';
 import Question from '../QAcomponents/Question.jsx';
 import QuestionHelpful from '../QAcomponents/QuestionHelpful.jsx';
+import MoreQuestions from '../QAcomponents/MoreQuestions.jsx';
 import sample from './sampleData.js';
 
+afterEach(() => {
+  cleanup();
+});
 
 // npm test -- -t 'render Q&A Search without crashing'
-it ('render Q&A Search without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<Search />, div);
+test ('render Q&A Search without crashing', () => {
+  render(<Search
+    searchInput={'tuna'}/>);
+  const searchElement = screen.getByTestId('search-test');
+  expect(searchElement).toBeInTheDocument();
 });
 
 // npm test -- -t 'render Question List without crashing'
-it ('render Question List without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<QuestionList
+test ('render Question List without crashing', () => {
+  render(<QuestionList
     questions={sample.questions.results}
     searchInput={null}
-    productId={13023}/>, div);
+    productId={13023}/>);
+  const questionListElement = screen.getByTestId('qa-list-test');
+  expect(questionListElement).toBeInTheDocument();
 });
 
 // npm test -- -t 'render Add Question Button Modal crashing'
-it ('render Add Question Button Modal crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<AddQuestion />, div);
+test ('render Add Question Button Modal crashing', () => {
+  render(<AddQuestion
+    openModal={true}/>);
+  const addQuestionElement = screen.getByTestId('add-question-test');
+  expect(addQuestionElement).toBeInTheDocument();
 });
 
 // npm test -- -t 'render Answer Helpfulness without crashing'
-it ('render Answer Helpfulness without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<AnswerHelpful
+test ('render Answer Helpfulness without crashing', () => {
+  render(<AnswerHelpful
     answerId={sample.questions.results[0].answers.id}
     answerHelpfulness={sample.questions.results[0].answers.helpfulness}
     answerDate={'2018-08-18T00:00:00.000Z'}
-    answerName={sample.questions.results[0].answers.answerer_name}/>, div);
+    answerName={sample.questions.results[0].answers.answerer_name}/>);
+  const answerHelpfulElement = screen.getByTestId('answer-helpful-test');
+  expect(answerHelpfulElement).toBeInTheDocument();
 });
 
 // npm test -- -t 'render Answer Photos without crashing'
-it ('render Answer Photos without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<AnswerPhotos
+test ('render Answer Photos without crashing', () => {
+  render(<AnswerPhotos
     photo={'urlplaceholder/answer_5_photo_number_1.jpg'}
-    key={1}/>, div);
+    key={1}/>);
+  const answerPhotosElement = screen.getByTestId('answer-photo-test');
+  expect(answerPhotosElement).toBeInTheDocument();
 });
 
 // npm test -- -t 'render Answer List without crashing'
-it ('render Answer List without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<Answers
+test ('render Answer List without crashing', () => {
+  render(<Answers
     key={sample.questions.results[0].answers.id}
     answer={
       {
@@ -70,13 +83,14 @@ it ('render Answer List without crashing', () => {
           'url': 'urlplaceholder/answer_5_photo_number_1.jpg'
         }]
       }
-    }/>, div);
+    }/>);
+  const answerListElement = screen.getByTestId('answer-list-test');
+  expect(answerListElement).toBeInTheDocument();
 });
 
 // npm test -- -t 'render More Answer button without crashing'
-it ('render More Answer button without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<MoreAnswers
+test ('render More Answer button without crashing', () => {
+  render(<MoreAnswers
     answerList={[{
       0: {
         /* eslint-disable */
@@ -104,22 +118,34 @@ it ('render More Answer button without crashing', () => {
         'id': 1,
         'url': 'urlplaceholder/answer_5_photo_number_1.jpg'
       }]
-    }}/>, div);
+    }}/>);
+  const moreAnswersElement = screen.getByTestId('more-answer-test');
+  expect(moreAnswersElement).toBeInTheDocument();
 });
 
 // npm test -- -t 'render Individual Questions without crashing'
-it ('render Individual Questions without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<Question
+test ('render Individual Questions without crashing', () => {
+  render(<Question
     question={sample.questions.results[0]}
-    key={sample.questions.results[0].question_id}/>, div);
+    key={sample.questions.results[0].question_id}/>);
+  const individualQuestionElement = screen.getByTestId('individual-question-test');
+  expect(individualQuestionElement).toBeInTheDocument();
 });
 
 // npm test -- -t 'render Question Helpfulness section without crashing'
-it ('render Question Helpfulness section without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<QuestionHelpful
+test ('render Question Helpfulness section without crashing', () => {
+  render(<QuestionHelpful
     questionBody={sample.questions.results[0].question_body}
     helpfulness={sample.questions.results[0].question_helpfulness}
-    questionId={sample.questions.results[0].question_id}/>, div);
+    questionId={sample.questions.results[0].question_id}/>);
+  const questionHelpfulElement = screen.getByTestId('question-helpful-test');
+  expect(questionHelpfulElement).toBeInTheDocument();
 });
+
+// npm test -- -t 'render More Questions without crashing'
+test ('render More Questions without crashing', () => {
+  render(<MoreQuestions
+    questions={sample.questions.results}/>);
+  const moreQuestionsElement = screen.getByTestId('more-questions-test');
+  expect(moreQuestionsElement).toBeInTheDocument();
+});
\ No newline at end of file