Fix missing pipeline test report bug

The pipeline test report was no longer showing up
when there was no classname or name properties
in the test case. This was due to a change in the
friendly-wrapper component.
We now default the value to an empty string.

app/assets/javascripts/pipelines/components/test_reports/test_case_details.vue

@@ -18,8 +18,6 @@ export default {
     testCase: {
       type: Object,
       required: true,
-      validator: ({ classname, formattedTime, name }) =>
-        Boolean(classname) && Boolean(formattedTime) && Boolean(name),
     },
   },
   computed: {

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

@@ -20,6 +20,8 @@ export const getSuiteTests = (state) => {
   return testCases
     .map((testCase) => ({
       ...testCase,
+      classname: testCase.classname || '',
+      name: testCase.name || '',
       filePath: testCase.file ? `${state.blobPath}/${formatFilePath(testCase.file)}` : null,
     }))
     .map(addIconStatus)

changelogs/unreleased/301236-fix-test-report-not-rendering.yml

+---
+title: Fix pipeline test report not rendering when missing properties
+merge_request: 54363
+author:
+type: fixed

spec/frontend/pipelines/test_reports/stores/getters_spec.js

@@ -94,6 +94,70 @@ describe('Getters TestReports Store', () => {
 
       expect(getters.getSuiteTests(state)).toEqual([]);
     });
+
+    describe('when a test case classname property is null', () => {
+      it('should return an empty string value for the classname property', () => {
+        const testCases = testReports.test_suites[0].test_cases;
+        setupState({
+          ...defaultState,
+          testReports: {
+            ...testReports,
+            test_suites: [
+              {
+                test_cases: testCases.map((testCase) => ({
+                  ...testCase,
+                  classname: null,
+                })),
+              },
+            ],
+          },
+        });
+
+        const expected = testCases
+          .map((x) => ({
+            ...x,
+            classname: '',
+            filePath: `${state.blobPath}/${formatFilePath(x.file)}`,
+            formattedTime: formattedTime(x.execution_time),
+            icon: iconForTestStatus(x.status),
+          }))
+          .slice(0, state.pageInfo.perPage);
+
+        expect(getters.getSuiteTests(state)).toEqual(expected);
+      });
+    });
+
+    describe('when a test case name property is null', () => {
+      it('should return an empty string value for the name property', () => {
+        const testCases = testReports.test_suites[0].test_cases;
+        setupState({
+          ...defaultState,
+          testReports: {
+            ...testReports,
+            test_suites: [
+              {
+                test_cases: testCases.map((testCase) => ({
+                  ...testCase,
+                  name: null,
+                })),
+              },
+            ],
+          },
+        });
+
+        const expected = testCases
+          .map((x) => ({
+            ...x,
+            name: '',
+            filePath: `${state.blobPath}/${formatFilePath(x.file)}`,
+            formattedTime: formattedTime(x.execution_time),
+            icon: iconForTestStatus(x.status),
+          }))
+          .slice(0, state.pageInfo.perPage);
+
+        expect(getters.getSuiteTests(state)).toEqual(expected);
+      });
+    });
   });
 
   describe('getSuiteTestCount', () => {

spec/frontend/pipelines/test_reports/test_suite_table_spec.js

@@ -114,4 +114,32 @@ describe('Test reports suite table', () => {
       expect(wrapper.find(GlPagination).exists()).toBe(true);
     });
   });
+
+  describe('when a test case classname property is null', () => {
+    it('still renders all test cases', () => {
+      createComponent({
+        ...testSuite,
+        test_cases: testSuite.test_cases.map((testCase) => ({
+          ...testCase,
+          classname: null,
+        })),
+      });
+
+      expect(allCaseRows().length).toBe(testCases.length);
+    });
+  });
+
+  describe('when a test case name property is null', () => {
+    it('still renders all test cases', () => {
+      createComponent({
+        ...testSuite,
+        test_cases: testSuite.test_cases.map((testCase) => ({
+          ...testCase,
+          name: null,
+        })),
+      });
+
+      expect(allCaseRows().length).toBe(testCases.length);
+    });
+  });
 });