Skip to content

testing fixed and cleanup #144

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ananwolf wants to merge 3 commits into
base: master
Choose a base branch
from
Open

testing fixed and cleanup #144

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3ef51af
Testing suite for Q&A complete
ananwolf Jun 19, 2021
92457fe
testing fixed and some cleanup
ananwolf Jun 19, 2021
2c16ec0
Merge branch 'teamDidUpdate:master' into master
ananwolf Jul 9, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion client/dist/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
34 changes: 18 additions & 16 deletions client/src/QA/QAcomponents/AddQuestion.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
};

Expand All @@ -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);
Expand All @@ -43,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)}
>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion client/src/QA/QAcomponents/AnswerHelpful.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion client/src/QA/QAcomponents/AnswerPhotos.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const AnswerPhotos = ({ photo }) => {
);

return (
<div>
<div data-testid='answer-photo-test'>
<div className='answer-photo-box'>
<img
className='answer-photo'
Expand Down
2 changes: 1 addition & 1 deletion client/src/QA/QAcomponents/Answers.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => (
Expand Down
2 changes: 1 addition & 1 deletion client/src/QA/QAcomponents/MoreAnswers.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const MoreAnswers = ({ answer, answerList }) => {
const [collapseAnswers, setCollapseAnswers] = useState(true);

return (
<div>
<div data-testid='more-answer-test'>
{
collapseAnswers
? <>
Expand Down
2 changes: 1 addition & 1 deletion client/src/QA/QAcomponents/MoreQuestions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const MoreQuestions = ({ questions }) => {
const [collapseQuestions, setCollapseQuestions] = useState(true);

return (
<div>
<div data-testid='more-questions-test'>
{
collapseQuestions
? <>
Expand Down
2 changes: 1 addition & 1 deletion client/src/QA/QAcomponents/Question.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
8 changes: 1 addition & 7 deletions client/src/QA/QAcomponents/QuestionHelpful.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
2 changes: 1 addition & 1 deletion client/src/QA/QAcomponents/QuestionList.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
?
Expand Down
2 changes: 1 addition & 1 deletion client/src/QA/QAcomponents/Search.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
156 changes: 114 additions & 42 deletions client/src/QA/Test /QAcomponents.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -9,71 +12,140 @@ 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={[{
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'
}]
}
}/>);
const answerListElement = screen.getByTestId('answer-list-test');
expect(answerListElement).toBeInTheDocument();
});

// npm test -- -t 'render More Answer button without crashing'
test ('render More Answer button without crashing', () => {
render(<MoreAnswers
answerList={[{
0: {
answerer_name: "notKathy!",
body: "This is a an answer!",
date: "2021-06-19T00:00:00.000Z",
/* 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'
}]
}
}]}
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'
}]
}}/>);
const moreAnswersElement = screen.getByTestId('more-answer-test');
expect(moreAnswersElement).toBeInTheDocument();
});

// it ('render More Answer button without crashing', () => {
// const div = document.createElement('div');
// ReactDOM.render(<MoreAnswers />, div);
// });
// npm test -- -t 'render Individual Questions without crashing'
test ('render Individual Questions without crashing', () => {
render(<Question
question={sample.questions.results[0]}
key={sample.questions.results[0].question_id}/>);
const individualQuestionElement = screen.getByTestId('individual-question-test');
expect(individualQuestionElement).toBeInTheDocument();
});

// it ('render Individual Questions without crashing', () => {
// const div = document.createElement('div');
// ReactDOM.render(<Question />, div);
// });
// npm test -- -t 'render Question Helpfulness section without crashing'
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}/>);
const questionHelpfulElement = screen.getByTestId('question-helpful-test');
expect(questionHelpfulElement).toBeInTheDocument();
});

// it ('render Question Helpfulness section without crashing', () => {
// const div = document.createElement('div');
// ReactDOM.render(<QuestionHelpful />, div);
// });
// 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();
});
2 changes: 2 additions & 0 deletions client/src/QA/Test /sampleData.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable */
var sample = {
"questions": {
"product_id": "5",
Expand Down Expand Up @@ -83,6 +84,7 @@ var sample = {
]
}
};
/* eslint-enable */


module.exports = sample;