feat(frontend): improve test specs error handling (#2399)

kubeshop · Apr 19, 2023 · b211895 · b211895
1 parent daf930c
commit b211895
Show file tree

Hide file tree

Showing 6 changed files with 47 additions and 11 deletions.
diff --git a/web/src/components/TestSpec/Header.tsx b/web/src/components/TestSpec/Header.tsx
@@ -1,3 +1,4 @@
+import {Tooltip} from 'antd';
 import {singularOrPlural} from 'utils/Common';
 import {SupportedEditors} from 'constants/Editor.constants';
 import Editor from 'components/Editor';
@@ -7,11 +8,12 @@ interface IProps {
   affectedSpans: number;
   assertionsFailed: number;
   assertionsPassed: number;
+  hasError: boolean;
   selector: string;
   title: string;
 }
 
-const Header = ({affectedSpans, assertionsFailed, assertionsPassed, selector, title}: IProps) => {
+const Header = ({affectedSpans, assertionsFailed, assertionsPassed, hasError, selector, title}: IProps) => {
   return (
     <S.Column>
       {title ? (
@@ -27,13 +29,13 @@ const Header = ({affectedSpans, assertionsFailed, assertionsPassed, selector, ti
       )}
 
       <div>
-        {Boolean(assertionsPassed) && (
+        {!!assertionsPassed && (
           <S.HeaderDetail>
             <S.HeaderDot $passed />
             {assertionsPassed}
           </S.HeaderDetail>
         )}
-        {Boolean(assertionsFailed) && (
+        {!!assertionsFailed && (
           <S.HeaderDetail>
             <S.HeaderDot $passed={false} />
             {assertionsFailed}
@@ -43,6 +45,13 @@ const Header = ({affectedSpans, assertionsFailed, assertionsPassed, selector, ti
           <S.HeaderSpansIcon />
           {`${affectedSpans} ${singularOrPlural('span', affectedSpans)}`}
         </S.HeaderDetail>
+        {hasError && (
+          <span>
+            <Tooltip title="This spec has errors">
+              <S.WarningIcon />
+            </Tooltip>
+          </span>
+        )}
       </div>
     </S.Column>
   );

diff --git a/web/src/components/TestSpec/TestSpec.styled.ts b/web/src/components/TestSpec/TestSpec.styled.ts
@@ -1,4 +1,4 @@
-import {ApartmentOutlined} from '@ant-design/icons';
+import {ApartmentOutlined, InfoCircleFilled} from '@ant-design/icons';
 import {Typography} from 'antd';
 import styled from 'styled-components';
 
@@ -58,3 +58,9 @@ export const Title = styled(Typography.Text)`
   color: ${({theme}) => theme.color.text};
   font-size: ${({theme}) => theme.size.md};
 `;
+
+export const WarningIcon = styled(InfoCircleFilled)`
+  color: ${({theme}) => theme.color.warningYellow};
+  font-size: ${({theme}) => theme.size.lg};
+  margin-right: 4px;
+`;
diff --git a/web/src/components/TestSpec/TestSpec.tsx b/web/src/components/TestSpec/TestSpec.tsx
@@ -31,6 +31,7 @@ const TestSpec = ({
     name = '',
   } = useAppSelector(state => TestSpecsSelectors.selectSpecBySelector(state, selector)) || {};
   const totalPassedChecks = useMemo(() => AssertionService.getTotalPassedChecks(resultList), [resultList]);
+  const hasError = useMemo(() => AssertionService.hasError(resultList), [resultList]);
 
   return (
     <S.Container
@@ -44,6 +45,7 @@ const TestSpec = ({
         affectedSpans={spanIds.length}
         assertionsFailed={totalPassedChecks?.false ?? 0}
         assertionsPassed={totalPassedChecks?.true ?? 0}
+        hasError={hasError}
         selector={selector}
         title={!selector && !name ? 'All Spans' : name}
       />

diff --git a/web/src/components/TestSpecDetail/Assertion.tsx b/web/src/components/TestSpecDetail/Assertion.tsx
@@ -16,12 +16,23 @@ interface IProps {
 const Assertion = ({check, testId, runId, selector}: IProps) => (
   <S.CheckItemContainer>
     <S.GridContainer>
-      <S.Row $justify="center">{check.result.passed ? <S.IconSuccess /> : <S.IconError />}</S.Row>
-      <AttributeValue
-        strong
-        type={check.result.passed ? 'success' : 'danger'}
-        value={check.result.observedValue || '<Empty Value>'}
-      />
+      {check.result.error ? (
+        <>
+          <S.Row $justify="center">
+            <S.IconWarning />
+          </S.Row>
+          <AttributeValue strong type="warning" value={check.result.error} />
+        </>
+      ) : (
+        <>
+          <S.Row $justify="center">{check.result.passed ? <S.IconSuccess /> : <S.IconError />}</S.Row>
+          <AttributeValue
+            strong
+            type={check.result.passed ? 'success' : 'danger'}
+            value={check.result.observedValue || '<Empty Value>'}
+          />
+        </>
+      )}
       <div />
       <S.Row>
         <S.AssertionContainer>

diff --git a/web/src/components/TestSpecDetail/TestSpecDetail.styled.ts b/web/src/components/TestSpecDetail/TestSpecDetail.styled.ts
@@ -1,4 +1,4 @@
-import {CheckCircleFilled, MinusCircleFilled} from '@ant-design/icons';
+import {CheckCircleFilled, InfoCircleFilled, MinusCircleFilled} from '@ant-design/icons';
 import {Card, Drawer, Typography} from 'antd';
 import styled from 'styled-components';
 
@@ -87,6 +87,10 @@ export const IconSuccess = styled(CheckCircleFilled)`
   color: ${({theme}) => theme.color.success};
 `;
 
+export const IconWarning = styled(InfoCircleFilled)`
+  color: ${({theme}) => theme.color.warningYellow};
+`;
+
 export const Row = styled.div<{$align?: string; $hasGap?: boolean; $justify?: string}>`
   align-items: ${({$align}) => $align || 'center'};
   display: flex;

diff --git a/web/src/services/Assertion.service.ts b/web/src/services/Assertion.service.ts
@@ -42,6 +42,10 @@ const AssertionService = () => ({
     return countBy(passedResults);
   },
 
+  hasError(resultList: AssertionResult[]) {
+    return resultList.map(({spanResults}) => spanResults.some(({error}) => !!error)).some(result => !!result);
+  },
+
   getResultsHashedBySpanId(resultList: AssertionResult[]) {
     return resultList
       .flatMap(({assertion, spanResults}) => spanResults.map(spanResult => ({result: spanResult, assertion})))