Add tc-test-case class to testcase-widget (#8744)

* add tc-tesc-case class to testcase-widget

* add default and custom class to testcase-widget

* Testcase widget update tests for default and custom class definitions

core/modules/widgets/testcase.js

@@ -33,6 +33,7 @@ TestCaseWidget.prototype.render = function(parent,nextSibling) {
 	this.execute();
 	// Create container DOM node
 	var domNode = this.document.createElement("div");
+	domNode.setAttribute("class", "tc-test-case " + this.testcaseClass);
 	this.domNodes.push(domNode);
 	parent.insertBefore(domNode,nextSibling);
 	// Render the children into a hidden DOM node
@@ -145,6 +146,7 @@ TestCaseWidget.prototype.execute = function() {
 	this.testcaseTestActions = this.getAttribute("testActions");
 	this.testcaseTestExpectedResult = this.getAttribute("testExpectedResult");
 	this.testcaseHideIfPass = this.getAttribute("testHideIfPass");
+	this.testcaseClass = this.getAttribute("class","");
 };
 
 /*

editions/test/tiddlers/tests/data/data-widget/ImportCompound.tid

@@ -24,4 +24,4 @@ This is a payload tiddler from a compound tiddler
 +
 title: ExpectedResult
 
-<p><div><div>[{"title":"Payload Tiddler","tags":"Alpha Beta Gamma","text":"This is a payload tiddler from a compound tiddler","custom":"Alpha"}]</div></div></p>
+<p><div class="tc-test-case "><div>[{"title":"Payload Tiddler","tags":"Alpha Beta Gamma","text":"This is a payload tiddler from a compound tiddler","custom":"Alpha"}]</div></div></p>

editions/test/tiddlers/tests/data/data-widget/ImportCustomTitle.tid

@@ -20,4 +20,4 @@ This is the tiddler HelloThere
 +
 title: ExpectedResult
 
-<p><div><div>[{"title":"RealTitle","tags":"Definitions","text":"This is the tiddler HelloThere"}]</div></div></p>
+<p><div class="tc-test-case "><div>[{"title":"RealTitle","tags":"Definitions","text":"This is the tiddler HelloThere"}]</div></div></p>

editions/test/tiddlers/tests/data/data-widget/ImportFilter.tid

@@ -25,4 +25,4 @@ This is the tiddler AnotherDefinition
 +
 title: ExpectedResult
 
-<p><div><div>[{"title":"AnotherDefinition","tags":"Definitions","text":"This is the tiddler AnotherDefinition","custom":"Alpha"},{"title":"HelloThere","tags":"Definitions","text":"This is the tiddler HelloThere","custom":"Alpha"}]</div></div></p>
+<p><div class="tc-test-case "><div>[{"title":"AnotherDefinition","tags":"Definitions","text":"This is the tiddler AnotherDefinition","custom":"Alpha"},{"title":"HelloThere","tags":"Definitions","text":"This is the tiddler HelloThere","custom":"Alpha"}]</div></div></p>

editions/test/tiddlers/tests/data/data-widget/ImportTiddler.tid

@@ -20,4 +20,4 @@ This is the tiddler HelloThere
 +
 title: ExpectedResult
 
-<p><div><div>[{"title":"HelloThere","tags":"Definitions","text":"This is the tiddler HelloThere","custom":"Alpha"}]</div></div></p>
+<p><div class="tc-test-case "><div>[{"title":"HelloThere","tags":"Definitions","text":"This is the tiddler HelloThere","custom":"Alpha"}]</div></div></p>

editions/test/tiddlers/tests/data/data-widget/Simple.tid

@@ -9,10 +9,10 @@ text: Standalone data widget to create individual tiddlers
 title: Output
 
 \whitespace trim
-<$testcase template="$:/core/ui/testcases/RawJSONTemplate">
+<$testcase template="$:/core/ui/testcases/RawJSONTemplate" class="my-class an-other-class">
 <$data title="Epsilon" text="Theta"/>
 </$testcase>
 +
 title: ExpectedResult
 
-<p><div><div>[{"title":"Epsilon","text":"Theta"}]</div></div></p>
+<p><div class="tc-test-case my-class an-other-class"><div>[{"title":"Epsilon","text":"Theta"}]</div></div></p>

editions/tw5.com/tiddlers/widgets/TestCaseWidget.tid

@@ -1,6 +1,6 @@
 caption: testcase
 created: 20240507221902644
-modified: 20240507221902644
+modified: 20241113203728572
 tags: Widgets
 title: TestCaseWidget
 type: text/vnd.tiddlywiki
@@ -55,6 +55,7 @@ The content of the `<$testcase>` widget is not displayed but instead is scanned
 |<<.attr testExpectedResult>> |Optional title of the tiddler whose content is the expected result of rendering the output tiddler (note that both <<.attr testOutput>> and  <<.attr testExpectedResult>> must be provided in order for testing to occur)  |
 |<<.attr testActions>> |Optional title of the tiddler containing actions that should be executed before the test occurs |
 |<<.attr testHideIfPass>> |If set to "yes", hides the <<.wid testcase>> widget if the test passes |
+|<<.attr class>> |<<.from-version "5.3.7">> Optional CSS classes in addition to the default `tc-test-case` class |
 
 ! Payload Tiddlers