display individual test cases even if they have <system-out> or `<s…

…ystem-err>` children (#8135) (I mucked up the history for #8131, so am starting over). Addressing a customer issue: buildbuddy-io/buildbuddy-internal#4272 Previously, if a successful test case had any child content (including text content), we would not render an individual card for the test case. Successful test cases with Playwright attachments, for example, would not show up. @jdhollen suggested handling `<system-out>` and `<system-err>` specially instead of trying to peek into the `<![CDATA[`.
buildbuddy-io · Jan 9, 2025 · 1d1c02e · 1d1c02e
1 parent 9776cd1
commit 1d1c02e
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 17 deletions.
diff --git a/app/target/target_test_cases_card.tsx b/app/target/target_test_cases_card.tsx
@@ -55,8 +55,7 @@ export default class TargetTestCasesCardComponent extends React.Component<Props>
   render() {
     let testCases = Array.from(this.props.testSuite.getElementsByTagName("testcase")).filter(
       (testCase) =>
-        (!this.props.tagName && testCase.children.length == 0) ||
-        (this.props.tagName && testCase.getElementsByTagName(this.props.tagName).length > 0)
+        !this.props.tagName || (this.props.tagName && testCase.getElementsByTagName(this.props.tagName).length > 0)
     );
     return (
       testCases.length > 0 && (

diff --git a/app/target/target_test_suite.tsx b/app/target/target_test_suite.tsx
@@ -24,22 +24,24 @@ export default class TargetTestSuiteComponent extends React.Component<Props> {
                   </div>
                   <div className="test-case-time">{testCase.getAttribute("time")} s</div>
                 </div>
-                {Array.from(testCase.children).map((child) => (
-                  <div className="test-case-info">
-                    <div className="test-case-message">
-                      {child.getAttribute("message")} {child.getAttribute("type")}
+                {Array.from(testCase.children)
+                  .filter((child) => child.tagName != "system-out" && child.tagName != "system-err")
+                  .map((child) => (
+                    <div className="test-case-info">
+                      <div className="test-case-message">
+                        {child.getAttribute("message")} {child.getAttribute("type")}
+                      </div>
+                      {!!child.textContent?.trim() && (
+                        <TerminalComponent
+                          value={child.textContent
+                            .replaceAll(`�[`, `\u001b[`)
+                            .replaceAll(`#x1b[`, `\u001b[`)
+                            .replaceAll(`#x1B[`, `\u001b[`)}
+                          lightTheme={!this.props.dark}
+                        />
+                      )}
                     </div>
-                    {!!child.textContent?.trim() && (
-                      <TerminalComponent
-                        value={child.textContent
-                          .replaceAll(`�[`, `\u001b[`)
-                          .replaceAll(`#x1b[`, `\u001b[`)
-                          .replaceAll(`#x1B[`, `\u001b[`)}
-                        lightTheme={!this.props.dark}
-                      />
-                    )}
-                  </div>
-                ))}
+                  ))}
               </div>
             ))}
           </div>