HTML Reporter: Fix broken "Rerun without a depth limit" link (really)

Follows-up 91db92d, which recently fixed another part of the `maxDepth` feature, but left the HTML still invalid. Follows-up 47e3b99, which broke the HTML by mistakenly swapping one of the double quotes for a single quote, thus leaving the anchor element unclosed.
qunitjs · Dec 5, 2024 · 73c03cf · 73c03cf
1 parent 3d8aae7
commit 73c03cf
Show file tree

Hide file tree

Showing 4 changed files with 121 additions and 9 deletions.
diff --git a/demos/qunit-config-maxDepth.html b/demos/qunit-config-maxDepth.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>qunit-config-maxDepth</title>
+  <link rel="stylesheet" href="../src/core/qunit.css">
+</head>
+<body>
+  <div id="qunit"></div>
+  <script src="../qunit/qunit.js"></script>
+  <script>
+  QUnit.test('example', function (assert) {
+    // Assume default of QUnit.config.maxDepth of 5.
+    assert.deepEqual(
+      {
+        one: {
+          two: {
+            three: {
+              four: {
+                five: {
+                  six: true
+                }
+              }
+            }
+          }
+        }
+      },
+      {
+        one: {
+          two: {
+            three: {
+              four: {
+                five: {
+                  six: false
+                }
+              }
+            }
+          }
+        }
+      }
+    );
+  });
+  </script>
+</body>
+</html>
diff --git a/src/core/qunit.css b/src/core/qunit.css
@@ -313,11 +313,13 @@ body {
 	cursor: pointer;
 }
 
-.qunit-test a {
+.qunit-test > a {
 	padding: 0.5em;
+	user-select: none;
+}
+.qunit-test a {
 	color: inherit;
 	text-decoration: underline;
-	user-select: none;
 }
 .qunit-test a:hover,
 .qunit-test a:focus {

diff --git a/src/core/reporters/HtmlReporter.js b/src/core/reporters/HtmlReporter.js
@@ -900,14 +900,17 @@ export default class HtmlReporter {
           message += '<tr class="test-diff"><th>Diff: </th><td><pre>'
             + diffHtml + '</pre></td></tr>';
         }
-      } else if (expected.indexOf('[object Array]') !== -1
-        || expected.indexOf('[object Object]') !== -1) {
+      } else if (
+        expected.indexOf('[object Array]') !== -1
+        || expected.indexOf('[object Object]') !== -1
+      ) {
+        // To test this interatively, use /demos/qunit-config-maxDepth.html
         message += '<tr class="test-message"><th>Message: </th><td>'
-          + 'Diff suppressed as the depth of object is more than current max depth ('
-          + this.config.maxDepth + ').<p>Hint: Use <code>QUnit.dump.maxDepth</code> to '
-          + ' run with a higher max depth or <a href="'
-          + escapeText(this.makeUrl({ maxDepth: 0 })) + "'>"
-          + 'Rerun</a> without max depth.</p></td></tr>';
+          + 'Diff suppressed because the object is more than ' + this.config.maxDepth
+          + ' levels deep.<p>Hint: Use <code>QUnit.config.maxDepth</code> to '
+          + 'set a higher limit, or <a href="'
+          + escapeText(this.makeUrl({ maxDepth: 0 })) + '">Rerun without a depth limit</a>'
+          + '.</p><br/></td></tr>';
       } else {
         message += '<tr class="test-message"><th>Message: </th><td>'
           + 'Diff suppressed as the expected and actual results have an equivalent'

diff --git a/test/main/HtmlReporter.js b/test/main/HtmlReporter.js
@@ -235,6 +235,68 @@ QUnit.test('test-output [trace]', function (assert) {
   );
 });
 
+// For an interative test, refer to /demos/qunit-config-maxDepth.html
+QUnit.test('test-output [maxDepth exceeded]', function (assert) {
+  var element = document.createElement('div');
+  new QUnit.reporters.html(this.MockQUnit, {
+    element: element,
+    config: {
+      maxDepth: 2,
+      urlConfig: []
+    }
+  });
+  QUnit.dump.maxDepth = 2;
+
+  this.MockQUnit.emit('runStart', { testCounts: { total: 1 } });
+  this.MockQUnit.emit('begin', { modules: [] });
+  this.MockQUnit.emit('testStart', { testId: '00A', name: 'A' });
+  this.MockQUnit.emit('log', {
+    testId: '00A',
+    message: 'boo',
+    result: false,
+    actual: {
+      one: {
+        two: {
+          three: 1
+        }
+      }
+    },
+    expected: {
+      one: {
+        two: {
+          three: 2
+        }
+      }
+    },
+    runtime: 1
+  });
+  this.MockQUnit.emit('testDone', {
+    testId: '00A',
+    name: 'A',
+    total: 1,
+    passed: 1,
+    failed: 0,
+    runtime: 2
+  });
+
+  var testOutput = element.querySelector('#qunit-test-output-00A');
+  assert.strictEqual(
+    testOutput.textContent,
+    'A (1)' + 'Rerun' + '2 ms' + 'boo' + '@ 1 ms'
+      + 'Expected: {\n'
+      + '  "one": {\n'
+      + '    "two": [object Object]\n'
+      + '  }\n'
+      + '}'
+      + 'Message: Diff suppressed because the object is more than 2 levels deep.'
+      + 'Hint: Use QUnit.config.maxDepth to set a higher limit, or Rerun without a depth limit.',
+    'test output'
+  );
+
+  // Restore default
+  QUnit.dump.maxDepth = 5;
+});
+
 QUnit.test('onError [early]', function (assert) {
   var element = document.createElement('div');
   new QUnit.reporters.html(this.MockQUnit, {