diff --git a/client/components/TestRenderer/index.jsx b/client/components/TestRenderer/index.jsx index 50bfce59d..4799096cb 100644 --- a/client/components/TestRenderer/index.jsx +++ b/client/components/TestRenderer/index.jsx @@ -203,6 +203,50 @@ const ResultsBulletList = styled.ul` } `; +const AssertionFieldsetList = styled.ul` + > li { + margin-top: 1em; + } + + > li:last-child { + margin-bottom: 2em; + } + + > li + li { + margin-top: 1em; + } +`; + +const AssertionFieldset = styled.fieldset` + border: 1px solid #000; + + legend { + display: inline-block; + width: auto; + font-size: 1em; + margin-left: 1em; + margin-bottom: 0; + padding: 0.2em; + } + + h5 { + margin: 0; + } + + .assertion-input-list { + margin-left: 0.5em; + display: flex; + } + + .assertion-input-list > .assertion-input-group + .assertion-input-group { + margin-left: 1em; + } + + input { + margin-right: 0.5em; + } +`; + const Button = styled.button``; const ResultsSection = styled.section``; @@ -597,6 +641,112 @@ const TestRenderer = ({ // pageContent to render instructions; submitResult.resultsJSON indicates results have been submitted if (!pageContent) return null; + const Assertion = ({ data, assertionIndex, commandIndex }) => { + const { description, passChoice, failChoices } = data; + + const [missingChoice, failureChoice] = failChoices; + + return ( +
- {assertionsHeader.descriptionHeader || - 'Assertion'} - | -- {assertionsHeader.passHeader || - 'Success case'} - | -- {assertionsHeader.failHeader || - 'Failure cases'} - | -
---|---|---|
- {
- description[0]
- }
- {isSubmitted && (
- |
- {/*Success case*/}
- - - - | - {/*Failure cases*/} -- - - - - - | -