diff --git a/packages/bruno-app/src/components/RequestPane/Assert/StyledWrapper.js b/packages/bruno-app/src/components/RequestPane/Assert/StyledWrapper.js new file mode 100644 index 000000000..b7c95b473 --- /dev/null +++ b/packages/bruno-app/src/components/RequestPane/Assert/StyledWrapper.js @@ -0,0 +1,56 @@ +import styled from 'styled-components'; + +const Wrapper = styled.div` + table { + width: 100%; + border-collapse: collapse; + font-weight: 600; + table-layout: fixed; + + thead, + td { + border: 1px solid ${(props) => props.theme.table.border}; + } + + thead { + color: ${(props) => props.theme.table.thead.color}; + font-size: 0.8125rem; + user-select: none; + } + td { + padding: 6px 10px; + + &:nth-child(1) { + width: 30%; + } + + &:nth-child(3) { + width: 70px; + } + } + } + + .btn-add-assertion { + font-size: 0.8125rem; + } + + input[type='text'] { + width: 100%; + border: solid 1px transparent; + outline: none !important; + background-color: inherit; + + &:focus { + outline: none !important; + border: solid 1px transparent; + } + } + + input[type='checkbox'] { + cursor: pointer; + position: relative; + top: 1px; + } +`; + +export default Wrapper; diff --git a/packages/bruno-app/src/components/RequestPane/Assert/index.js b/packages/bruno-app/src/components/RequestPane/Assert/index.js new file mode 100644 index 000000000..256a77c9e --- /dev/null +++ b/packages/bruno-app/src/components/RequestPane/Assert/index.js @@ -0,0 +1,129 @@ +import React from 'react'; +import get from 'lodash/get'; +import cloneDeep from 'lodash/cloneDeep'; +import { IconTrash } from '@tabler/icons'; +import { useDispatch } from 'react-redux'; +import { useTheme } from 'providers/Theme'; +import { addAssertion, updateAssertion, deleteAssertion } from 'providers/ReduxStore/slices/collections'; +import { sendRequest, saveRequest } from 'providers/ReduxStore/slices/collections/actions'; +import SingleLineEditor from 'components/SingleLineEditor'; +import StyledWrapper from './StyledWrapper'; + +const Assertions = ({ item, collection }) => { + const dispatch = useDispatch(); + const { storedTheme } = useTheme(); + const assertions = item.draft ? get(item, 'draft.request.assertions') : get(item, 'request.assertions'); + + const handleAddAssertion = () => { + dispatch( + addAssertion({ + itemUid: item.uid, + collectionUid: collection.uid + }) + ); + }; + + const onSave = () => dispatch(saveRequest(item.uid, collection.uid)); + const handleRun = () => dispatch(sendRequest(item, collection.uid)); + const handleAssertionChange = (e, _assertion, type) => { + const assertion = cloneDeep(_assertion); + switch (type) { + case 'name': { + assertion.name = e.target.value; + break; + } + case 'value': { + assertion.value = e.target.value; + break; + } + case 'enabled': { + assertion.enabled = e.target.checked; + break; + } + } + dispatch( + updateAssertion({ + assertion: assertion, + itemUid: item.uid, + collectionUid: collection.uid + }) + ); + }; + + const handleRemoveAssertion = (assertion) => { + dispatch( + deleteAssertion({ + assertUid: assertion.uid, + itemUid: item.uid, + collectionUid: collection.uid + }) + ); + }; + + return ( + + + + + + + + + + + {assertions && assertions.length + ? assertions.map((assertion, index) => { + return ( + + + + + + ); + }) + : null} + +
ExprValue
+ handleAssertionChange(e, assertion, 'name')} + /> + + handleAssertionChange({ + target: { + value: newValue + } + }, assertion, 'value')} + onRun={handleRun} + collection={collection} + /> + +
+ handleAssertionChange(e, assertion, 'enabled')} + /> + +
+
+ +
+ ); +}; +export default Assertions; diff --git a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js index 502a70e83..5ddf2393f 100644 --- a/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js +++ b/packages/bruno-app/src/components/RequestPane/HttpRequestPane/index.js @@ -8,6 +8,7 @@ import RequestHeaders from 'components/RequestPane/RequestHeaders'; import RequestBody from 'components/RequestPane/RequestBody'; import RequestBodyMode from 'components/RequestPane/RequestBody/RequestBodyMode'; import Vars from 'components/RequestPane/Vars'; +import Assert from 'components/RequestPane/Assert'; import Script from 'components/RequestPane/Script'; import Tests from 'components/RequestPane/Tests'; import StyledWrapper from './StyledWrapper'; @@ -40,6 +41,9 @@ const HttpRequestPane = ({ item, collection, leftPaneWidth }) => { case 'vars': { return ; } + case 'assert': { + return ; + } case 'script': { return