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 ( +
  • + + +
    + {description[0]} + {isSubmitted && ( + + {description[1].description} + + )} +
    +
    + +
    +
    + +
    +
    + +
    +
    + +
    +
    +
    +
  • + ); + }; + + Assertion.propTypes = { + data: PropTypes.object, + assertionIndex: PropTypes.number, + commandIndex: PropTypes.number + }; + return ( {submitResult && @@ -647,7 +797,6 @@ const TestRenderer = ({ const { header, atOutput, - assertionsHeader, assertions, unexpectedBehaviors } = value; @@ -697,196 +846,33 @@ const TestRenderer = ({ } /> - - - - - - - - {assertions.map( - ( - assertion, - assertionIndex - ) => { - const { - description, - passChoice, - failChoices - } = assertion; - - const [ - missingChoice, - failureChoice - ] = failChoices; - - return ( - - {/*Assertion*/} - - {/*Success case*/} - - {/*Failure cases*/} - - - ); - } - )} - -
    - {assertionsHeader.descriptionHeader || - 'Assertion'} - - {assertionsHeader.passHeader || - 'Success case'} - - {assertionsHeader.failHeader || - 'Failure cases'} -
    - { - description[0] - } - {isSubmitted && ( - - { - description[1] - .description - } - - )} - - - - - - - - - -
    +

    + Assertions {header} +

    + + {assertions.map((data, index) => ( + + ))} + {/*Unexpected Behaviors*/}
    - {unexpectedBehaviors.description[0]} + + { + unexpectedBehaviors + .description[0] + } + {isSubmitted && (