Unit Test Report: Fix icon for errored status

Use status_warning_borderless icon for errored test cases
Use status_notfound_borderless as fallback icon for unknown status

app/assets/javascripts/pipelines/constants.js

@@ -13,6 +13,8 @@ export const TestStatus = {
   FAILED: 'failed',
   SKIPPED: 'skipped',
   SUCCESS: 'success',
+  ERROR: 'error',
+  UNKNOWN: 'unknown',
 };
 
 export const FETCH_AUTHOR_ERROR_MESSAGE = __('There was a problem fetching project users.');

app/assets/javascripts/pipelines/stores/test_reports/utils.js

 import { __, sprintf } from '../../../locale';
+import { TestStatus } from '../../constants';
 
 export function iconForTestStatus(status) {
   switch (status) {
-    case 'success':
+    case TestStatus.SUCCESS:
       return 'status_success_borderless';
-    case 'failed':
+    case TestStatus.FAILED:
       return 'status_failed_borderless';
-    default:
+    case TestStatus.ERROR:
+      return 'status_warning_borderless';
+    case TestStatus.SKIPPED:
       return 'status_skipped_borderless';
+    case TestStatus.UNKNOWN:
+    default:
+      return 'status_notfound_borderless';
   }
 }
 

app/assets/stylesheets/framework/icons.scss

@@ -9,6 +9,7 @@
   }
 }
 
+.ci-status-icon-error,
 .ci-status-icon-failed {
   svg {
     fill: $red-500;

changelogs/unreleased/249368-unit-test-report-test-cases-with-errored-status-show-skipped-icon.yml

+---
+title: 'Unit Test Report: Fix icon for errored status'
+merge_request: 42540
+author:
+type: fixed

spec/frontend/pipelines/test_reports/mock_data.js

@@ -9,4 +9,20 @@ export default [
     status: TestStatus.SKIPPED,
     system_output: null,
   },
+  {
+    classname: 'spec.test_spec',
+    execution_time: 0,
+    name: 'Test#error text',
+    stack_trace: null,
+    status: TestStatus.ERROR,
+    system_output: null,
+  },
+  {
+    classname: 'spec.test_spec',
+    execution_time: 0,
+    name: 'Test#unknown text',
+    stack_trace: null,
+    status: TestStatus.UNKNOWN,
+    system_output: null,
+  },
 ];

spec/frontend/pipelines/test_reports/test_suite_table_spec.js

@@ -61,18 +61,17 @@ describe('Test reports suite table', () => {
       expect(allCaseRows().length).toBe(testCases.length);
     });
 
-    it('renders the correct icon for each status', () => {
-      const failedTest = testCases.findIndex(x => x.status === TestStatus.FAILED);
-      const skippedTest = testCases.findIndex(x => x.status === TestStatus.SKIPPED);
-      const successTest = testCases.findIndex(x => x.status === TestStatus.SUCCESS);
+    it.each([
+      TestStatus.ERROR,
+      TestStatus.FAILED,
+      TestStatus.SKIPPED,
+      TestStatus.SUCCESS,
+      'unknown',
+    ])('renders the correct icon for test case with %s status', status => {
+      const test = testCases.findIndex(x => x.status === status);
+      const row = findCaseRowAtIndex(test);
 
-      const failedRow = findCaseRowAtIndex(failedTest);
-      const skippedRow = findCaseRowAtIndex(skippedTest);
-      const successRow = findCaseRowAtIndex(successTest);
-
-      expect(findIconForRow(failedRow, TestStatus.FAILED).exists()).toBe(true);
-      expect(findIconForRow(skippedRow, TestStatus.SKIPPED).exists()).toBe(true);
-      expect(findIconForRow(successRow, TestStatus.SUCCESS).exists()).toBe(true);
+      expect(findIconForRow(row, status).exists()).toBe(true);
     });
   });
 });