Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feature(frontend): adding test spec snippets (#2366)
* feature(frontend): adding test spec snippets * feature(frontend): adding test spec snippets * feature(frontend): updating based on feedback
- Loading branch information
Showing
5 changed files
with
200 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import React, {useCallback, useEffect, useMemo, useRef} from 'react'; | ||
| import {CaretDownOutlined} from '@ant-design/icons'; | ||
| import {Dropdown, Menu} from 'antd'; | ||
| import SpanService from 'services/Span.service'; | ||
| import Span from 'models/Span.model'; | ||
| import {TEST_SPEC_SNIPPETS, TSnippet} from 'constants/TestSpecs.constants'; | ||
| import * as S from './TestResults.styled'; | ||
| import {useTestSpecForm} from '../TestSpecForm/TestSpecForm.provider'; | ||
|
|
||
| interface IProps { | ||
| selectedSpan: Span; | ||
| visibleByDefault?: boolean; | ||
| } | ||
|
|
||
| const AddTestSpecButton = ({selectedSpan, visibleByDefault = false}: IProps) => { | ||
| const {open} = useTestSpecForm(); | ||
| const caretRef = useRef<HTMLElement>(null); | ||
| const handleEmptyTestSpec = useCallback(() => { | ||
| const selector = SpanService.getSelectorInformation(selectedSpan); | ||
|
|
||
| open({ | ||
| isEditing: false, | ||
| selector, | ||
| defaultValues: { | ||
| selector, | ||
| }, | ||
| }); | ||
| }, [open, selectedSpan]); | ||
|
|
||
| const onSnippetClick = useCallback( | ||
| (snippet: TSnippet) => { | ||
| open({ | ||
| isEditing: false, | ||
| selector: snippet.selector, | ||
| defaultValues: snippet, | ||
| }); | ||
| }, | ||
| [open] | ||
| ); | ||
|
|
||
| useEffect(() => { | ||
| if (visibleByDefault && caretRef.current) { | ||
| caretRef.current?.click(); | ||
| } | ||
| }, [visibleByDefault]); | ||
|
|
||
| const menu = useMemo( | ||
| () => ( | ||
| <Menu | ||
| items={[ | ||
| { | ||
| label: 'Try these snippets for quick testing:', | ||
| key: 'test', | ||
| type: 'group', | ||
| children: TEST_SPEC_SNIPPETS.map(snippet => ({ | ||
| label: snippet.name, | ||
| key: snippet.name, | ||
| onClick: () => onSnippetClick(snippet), | ||
| })), | ||
| }, | ||
| {type: 'divider'}, | ||
| { | ||
| label: 'Empty Test Spec', | ||
| key: 'empty-test-spec', | ||
| onClick: handleEmptyTestSpec, | ||
| }, | ||
| ]} | ||
| /> | ||
| ), | ||
| [handleEmptyTestSpec, onSnippetClick] | ||
| ); | ||
|
|
||
| return ( | ||
| <Dropdown.Button | ||
| overlay={menu} | ||
| trigger={['click']} | ||
| placement="bottomRight" | ||
| onClick={handleEmptyTestSpec} | ||
| type="primary" | ||
| buttonsRender={([leftButton]) => [ | ||
| React.cloneElement(leftButton as React.ReactElement<any, string>, {'data-cy': 'add-test-spec-button'}), | ||
| <S.CaretDropdownButton ref={caretRef} type="primary" data-cy="create-button"> | ||
| <CaretDownOutlined /> | ||
| </S.CaretDropdownButton>, | ||
| ]} | ||
| > | ||
| Add Test Spec | ||
| </Dropdown.Button> | ||
| ); | ||
| }; | ||
|
|
||
| export default AddTestSpecButton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| import {IValues} from 'components/TestSpecForm/TestSpecForm'; | ||
|
|
||
| export type TSnippet = Required<IValues>; | ||
|
|
||
| export const HTTP_SPANS_STATUS_CODE: TSnippet = { | ||
| name: 'All HTTP Spans: Status code is 200', | ||
| selector: 'span[tracetest.span.type="http"]', | ||
| assertions: [ | ||
| { | ||
| left: 'attr:http.status_code', | ||
| comparator: '=', | ||
| right: '200', | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export const TRIGGER_SPAN_RESPONSE_TIME: TSnippet = { | ||
| name: 'Trigger Span: Response time is less than 200ms', | ||
| selector: 'span[tracetest.span.type="general" name="Tracetest trigger"]', | ||
| assertions: [ | ||
| { | ||
| left: 'attr:tracetest.span.duration', | ||
| comparator: '<', | ||
| right: '200ms', | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export const DB_SPANS_RESPONSE_TIME: TSnippet = { | ||
| name: 'All Database Spans: Processing time is less than 100ms', | ||
| selector: 'span[tracetest.span.type="database"]', | ||
| assertions: [ | ||
| { | ||
| left: 'attr:tracetest.span.duration', | ||
| comparator: '<', | ||
| right: '100ms', | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export const TRIGGER_SPAN_RESPONSE_BODY_CONTAINS: TSnippet = { | ||
| name: 'Trigger Span: Response body contains "this string"', | ||
| selector: 'span[tracetest.span.type="general" name="Tracetest trigger"]', | ||
| assertions: [ | ||
| { | ||
| left: 'attr:tracetest.response.body', | ||
| comparator: 'contains', | ||
| right: '"this string"', | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export const GRPC_SPANS_STATUS_CODE: TSnippet = { | ||
| name: 'All gRPC Spans: Status is Ok', | ||
| selector: 'span[tracetest.span.type="rpc" rpc.system="grpc"]', | ||
| assertions: [ | ||
| { | ||
| left: 'attr:grpc.status_code', | ||
| comparator: '=', | ||
| right: '0', | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export const DB_SPANS_QUALITY_DB_STATEMENT_PRESENT: TSnippet = { | ||
| name: 'All Database Spans: db.statement should always be defined (QUALITY)', | ||
| selector: 'span[tracetest.span.type="database"]', | ||
| assertions: [ | ||
| { | ||
| left: 'attr:db.system', | ||
| comparator: '!=', | ||
| right: '""', | ||
| }, | ||
| ], | ||
| }; | ||
|
|
||
| export const TEST_SPEC_SNIPPETS: TSnippet[] = [ | ||
| HTTP_SPANS_STATUS_CODE, | ||
| GRPC_SPANS_STATUS_CODE, | ||
| TRIGGER_SPAN_RESPONSE_TIME, | ||
| TRIGGER_SPAN_RESPONSE_BODY_CONTAINS, | ||
| DB_SPANS_RESPONSE_TIME, | ||
| DB_SPANS_QUALITY_DB_STATEMENT_PRESENT, | ||
| ]; |