finished Test Results component testing

This commit is contained in:
Meghan McLaughlin committed 2020-05-02 17:35:03 -05:00
1 parent a1bc1196c9
commit 4aabbda32a
2 files changed
+100 -9

No files matched your search

+73 -3
View File
@@ -4,6 +4,7 @@ import {
fireEvent,
getByTestId,
queryByTestId,
within,
} from '@testing-library/react'
import TestResultsForm from './TestResultsForm'
@@ -62,7 +63,41 @@ test('pregnancy-results div is only displayed if pregnancy test is selected', ()
expect(getByTestId(re)).toBeTruthy()
})
test('pregnancy results is displayed as a checkbox and is able to be checked / unchecked', () => {})
test('pregnancy results is displayed as a checkbox and is able to be checked / unchecked', () => {
const { getByTestId, queryByTestId } = render(<TestResultsForm />)
// check the pregnancy-test checkbox to display the pregnancy-results div
const checkBoxInput = getByTestId('pregnancy-test')
.getElementsByTagName('span')[0]
.getElementsByClassName('am-checkbox-input')[0]
fireEvent.click(checkBoxInput)
// ensure negative and positive checkboxes are initilaly displayed unchecked
const negativeRadioButtonDiv = getByTestId('pregnancy-results-negative')
const positiveRadioButtonDiv = getByTestId('pregnancy-results-positive')
const negativeRadioButton = negativeRadioButtonDiv.getElementsByTagName(
'span',
)[0]
const positiveRadioButton = positiveRadioButtonDiv.getElementsByTagName(
'span',
)[0]
expect(negativeRadioButton).not.toHaveClass('am-radio-checked')
expect(positiveRadioButton).not.toHaveClass('am-radio-checked')
// select "Negative"
fireEvent.click(negativeRadioButtonDiv)
// ensure negative is checked and positive is unchecked
expect(negativeRadioButton).toHaveClass('am-radio-checked')
expect(positiveRadioButton).not.toHaveClass('am-radio-checked')
// select "Positive"
fireEvent.click(positiveRadioButtonDiv)
// ensure negative is unchecked and positive is checked
expect(negativeRadioButton).not.toHaveClass('am-radio-checked')
expect(positiveRadioButton).toHaveClass('am-radio-checked')
})
test('blood-sugar-results div is only displayed if blood sugar test is selected', () => {
const { getByTestId, queryByTestId } = render(<TestResultsForm />)
@@ -83,7 +118,22 @@ test('blood-sugar-results div is only displayed if blood sugar test is selected'
expect(getByTestId(re)).toBeTruthy()
})
test('blood sugar results fields is a number input box', () => {})
test('blood sugar results fields is a number input box', () => {
const { getByTestId } = render(<TestResultsForm />)
// check the blood-sugar-test checkbox to display the blood-sugar-results div
const checkBoxInput = getByTestId('blood-sugar-test')
.getElementsByTagName('span')[0]
.getElementsByClassName('am-checkbox-input')[0]
fireEvent.click(checkBoxInput)
// ensure result field is displayed as a number input box
expect(getByTestId('blood-sugar-results-val')).toBeTruthy()
expect(getByTestId('blood-sugar-results-val')).toHaveAttribute(
'type',
'text',
)
})
test('ua-results div is only displayed if UA test is selected', () => {
const { getByTestId, queryByTestId } = render(<TestResultsForm />)
@@ -104,4 +154,24 @@ test('ua-results div is only displayed if UA test is selected', () => {
expect(getByTestId(re)).toBeTruthy()
})
test('ua test results are rendered as number input boxes', () => {})
test('ua test results are rendered as number input boxes', () => {
const { getByTestId, queryByTestId } = render(<TestResultsForm />)
const uaResultFieldID = [
'glucose-results-val',
'nitrites-results-val',
'protein-results-val',
'leukocytes-results-val',
]
// check the ua-test checkbox to display the ua-results div
const checkBoxInput = getByTestId('ua-test')
.getElementsByTagName('span')[0]
.getElementsByClassName('am-checkbox-input')[0]
fireEvent.click(checkBoxInput)
// ensure each result field is displayed as a number input box
uaResultFieldID.forEach((field) => {
expect(getByTestId(field)).toBeTruthy()
expect(getByTestId(field)).toHaveAttribute('type', 'text')
})
})
+27 -6
View File
@@ -45,7 +45,11 @@ export default function TestResultsForm(): ReactElement {
`pregnancy-results-` +
i.label.toLowerCase()
}
name="pregnancy-results-radio"
name={
`pregnancy-results-` +
i.label.toLowerCase()
}
// name="pregnancy-results-radio"
checked={pregnancyTestPositive === i.value}
onClick={() =>
setPregnancyTestPositive(i.value)
@@ -74,6 +78,7 @@ export default function TestResultsForm(): ReactElement {
<InputItem
type="number"
id="blood-sugar-results-val"
data-testid="blood-sugar-results-val"
placeholder="mg/dL" // TOOD: unsure if the unit is mg/dL or mmol/L, could leave this out
maxLength={3}
></InputItem>
@@ -91,17 +96,33 @@ export default function TestResultsForm(): ReactElement {
{ua ? (
<div id="ua-results" data-testid="ua-results">
<List renderHeader={() => 'UA Results'}>
{/* TODO: I am unsure about the range/type of these fields */}
<InputItem id="glucose-results-val">
{/* TODO: I am unsure about the range/type of these fields - check DB */}
<InputItem
id="glucose-results-val"
data-testid="glucose-results-val"
placeholder="0"
>
Glucose
</InputItem>
<InputItem id="nitrites-results-val">
<InputItem
id="nitrites-results-val"
data-testid="nitrites-results-val"
placeholder="0"
>
Nitrites
</InputItem>
<InputItem id="protein-results-val">
<InputItem
id="protein-results-val"
data-testid="protein-results-val"
placeholder="0"
>
Protein
</InputItem>
<InputItem id="leukocytes-results-val">
<InputItem
id="leukocytes-results-val"
data-testid="leukocytes-results-val"
placeholder="0"
>
Leukocytes
</InputItem>
</List>