From ed42e0c89478f3074e71766699bdfebc1469d3aa Mon Sep 17 00:00:00 2001
From: Danny Gleckler <daniel.gleckler@gmail.com>
Date: Thu, 27 Jul 2023 19:34:09 -0400
Subject: [PATCH] fix: Headed test title improvements (#105)

* Separate root suite name

* Make test title copying grep-friendly

* Update src/server/pause.js
---
 src/server/pause.js | 35 +++++++++++++++++++++++++++++------
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/src/server/pause.js b/src/server/pause.js
index 3cfb1d5c..e5cd1360 100644
--- a/src/server/pause.js
+++ b/src/server/pause.js
@@ -43,7 +43,6 @@ const controls = `
 		#d2l-test-controls #run {
 			display: flex;
 			gap: 0.65em;
-			flex-wrap: wrap;
 			align-items: center;
 		}
 
@@ -60,13 +59,31 @@ const controls = `
 			box-shadow: none;
 		}
 
-		#d2l-test-controls #test-name {
-			font-size: 0.9em;
+		#d2l-test-controls #title {
 			flex: 1;
+			text-align: left;
 			white-space: nowrap;
+			margin: 0 0.5em;
+			overflow: hidden;
+		}
+
+		#d2l-test-controls #test-name .title-sep {
+			-webkit-user-select: none;
+			user-select: none;
+		}
+
+		#d2l-test-controls #root-name {
+			font-size: .7em;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			color: #999;
+			line-height: 1;
+		}
+
+		#d2l-test-controls #test-name {
+			font-size: 0.9em;
 			overflow: hidden;
 			text-overflow: ellipsis;
-			text-align: left;
 		}
 
 		#d2l-test-controls button {
@@ -129,7 +146,10 @@ const controls = `
 		</div>
 		<div id="run" hidden>
 			<button id="run-button" class="primary">Run</button>
-			<span id="test-name"></span>
+			<div id="title">
+				<div id="root-name"></div>
+				<div id="test-name"></div>
+			</div>
 			<button id="skip-button" class="subtle">Skip</button>
 			<button id="run-all-button">Run All</button>
 		</div>
@@ -153,6 +173,7 @@ const runBtn = document.querySelector('#run-button');
 runBtn.addEventListener('click', run);
 
 const testName = document.querySelector('#test-name');
+const rootName = document.querySelector('#root-name');
 
 /* eslint-disable no-undef, no-invalid-this */
 let currentTest, focusEl = runBtn;
@@ -166,7 +187,9 @@ beforeEach(async function() {
 	setTimeout(async() => {
 		await fixture;
 
-		testName.innerText = currentTest.fullTitle();
+		const titlePath = currentTest.titlePath();
+		testName.innerHTML = testName.title = titlePath.slice(1).join('<span class="title-sep"> ></span> ');
+		rootName.innerText = titlePath[0];
 
 		if (test.pause) {
 			runBtn.disabled = false;