Testcase UI enhancements (#8292)

* Include the ExpectedResults in the displayed tabs

* Lighted testcase background

* Add testcase toolbar with export and import options

* Further styling tweaks

core/language/en-GB/Buttons.multids

@@ -104,6 +104,8 @@ ShowSideBar/Caption: show sidebar
 ShowSideBar/Hint: Show sidebar
 TagManager/Caption: tag manager
 TagManager/Hint: Open tag manager
+TestCaseImport/Caption: import tiddlers
+TestCaseImport/Hint: Import tiddlers
 Timestamp/Caption: timestamps
 Timestamp/Hint: Choose whether modifications update timestamps
 Timestamp/On/Caption: timestamps are on

core/modules/saver-handler.js

@@ -95,6 +95,7 @@ function SaverHandler(options) {
 	if($tw.browser) {
 		$tw.rootWidget.addEventListener("tm-save-wiki",function(event) {
 			self.saveWiki({
+				wiki: event.widget.wiki,
 				template: event.param,
 				downloadType: "text/plain",
 				variables: event.paramObject
@@ -102,6 +103,7 @@ function SaverHandler(options) {
 		});
 		$tw.rootWidget.addEventListener("tm-download-file",function(event) {
 			self.saveWiki({
+				wiki: event.widget.wiki,
 				method: "download",
 				template: event.param,
 				downloadType: "text/plain",
@@ -147,20 +149,22 @@ Save the wiki contents. Options are:
 	method: "save", "autosave" or "download"
 	template: the tiddler containing the template to save
 	downloadType: the content type for the saved file
+	wiki: optional wiki, overriding the default wiki specified in the constructor
 */
 SaverHandler.prototype.saveWiki = function(options) {
 	options = options || {};
 	var self = this,
+		wiki = options.wiki || this.wiki,
 		method = options.method || "save";
 	// Ignore autosave if disabled
-	if(method === "autosave" && ($tw.config.disableAutoSave || this.wiki.getTiddlerText(this.titleAutoSave,"yes") !== "yes")) {
+	if(method === "autosave" && ($tw.config.disableAutoSave || wiki.getTiddlerText(this.titleAutoSave,"yes") !== "yes")) {
 		return false;
 	}
 	var	variables = options.variables || {},
 		template = (options.template || 
-		           this.wiki.getTiddlerText("$:/config/SaveWikiButton/Template","$:/core/save/all")).trim(),
+		           wiki.getTiddlerText("$:/config/SaveWikiButton/Template","$:/core/save/all")).trim(),
 		downloadType = options.downloadType || "text/plain",
-		text = this.wiki.renderTiddler(downloadType,template,options),
+		text = wiki.renderTiddler(downloadType,template,options),
 		callback = function(err) {
 			if(err) {
 				alert($tw.language.getString("Error/WhileSaving") + ":\n\n" + err);

core/palettes/Vanilla.tid

@@ -99,7 +99,7 @@ table-footer-background: #a8a8a8
 table-header-background: #f0f0f0
 tag-background: #ec6
 tag-foreground: #ffffff
-testcase-accent-level-1: #84C5E6
+testcase-accent-level-1: #c1eaff
 testcase-accent-level-2: #E3B740
 testcase-accent-level-3: #5FD564
 tiddler-background: <<colour background>>

core/ui/TestCases/DefaultTemplate.tid

@@ -27,6 +27,31 @@ title: $:/core/ui/testcases/DefaultTemplate
 					<%endif%>
 					<$view tiddler="Description" mode="inline"/>
 				</$genesis>
+				<span class="tc-test-case-toolbar">
+					<$button popup=`$(state)$-more`
+						tooltip={{$:/language/Buttons/More/Hint}}
+						aria-label={{$:/language/Buttons/More/Caption}}
+						class="tc-btn-invisible"
+						selectedClass="tc-selected"
+					>
+						{{$:/core/images/down-arrow}}
+					</$button>
+					<$let 
+						tv-config-toolbar-icons="yes"
+						tv-config-toolbar-text="yes"
+						tv-config-toolbar-class="tc-btn-invisible"
+					>
+						<$reveal state=`$(state)$-more` type="popup" position="belowleft" animate="yes">
+							<div class="tc-drop-down">
+								<$list filter="[all[shadows+tiddlers]tag[$:/tags/TestCase/Actions]!has[draft.of]]"
+									variable="listItem"
+								>
+									<$transclude tiddler=<<listItem>> mode="inline"/>
+								</$list>
+							</div>
+						</$reveal>
+					</$let>
+				</span>
 			</h2>
 		</div>
 		<%if [[Narrative]is[tiddler]] %>
@@ -46,7 +71,7 @@ title: $:/core/ui/testcases/DefaultTemplate
 		<%endif%>
 		<div class="tc-test-case-panes">
 			<div class="tc-test-case-source">
-				<$macrocall $name="tabs" tabsList="[all[tiddlers]sort[]] -[prefix<state>] -Description -Narrative -ExpectedResult -Output Output +[putfirst[]] -[has[plugin-type]]" state=<<state>> default="Output" template="$:/core/ui/testcases/DefaultTemplate/SourceTabs"/>
+				<$macrocall $name="tabs" tabsList="[all[tiddlers]sort[]] -[prefix<state>] -Description -Narrative -Output Output +[putfirst[]] -[has[plugin-type]]" state=<<state>> default="Output" template="$:/core/ui/testcases/DefaultTemplate/SourceTabs"/>
 			</div>
 			<div class="tc-test-case-divider">
 			</div>

core/ui/TestCases/DefaultTemplateSourceTabs.tid

@@ -19,6 +19,9 @@ title: $:/core/ui/testcases/DefaultTemplate/SourceTabs
 	</table>
 </$list>
 <$edit class="tc-edit-texteditor" tiddler=<<currentTab>>/>
+<div class="tc-test-case-footer-toolbar">
+<$macrocall $name="copy-to-clipboard" src={{{ [<currentTab>get[text]] }}}/>
+</div>
 \end
 
 <$transclude $variable="body" $mode="inline"/>

core/ui/TestCases/actions/Export.tid

@@ -0,0 +1,4 @@
+title: $:/core/ui/testcases/actions/Export
+tags: $:/tags/TestCase/Actions
+
+<$macrocall $name="exportButton" exportFilter="[all[tiddlers]sort[]] -[prefix[$:/state/]] -Description -Narrative -ExpectedResult -Output Output +[putfirst[]] -[has[plugin-type]]" lingoBase="$:/language/Buttons/ExportTiddlers/"/>

core/ui/TestCases/actions/Import.tid

@@ -0,0 +1,11 @@
+title: $:/core/ui/testcases/actions/Import
+tags: $:/tags/TestCase/Actions
+
+\whitespace trim
+<$button tooltip={{$:/language/Buttons/TestCaseImport/Hint}} aria-label={{$:/language/Buttons/TestCaseImport/Caption}} class=<<tv-config-toolbar-class>>>
+<$action-sendmessage $message="tm-import-tiddlers" $param=<<payloadTiddlers>>/>
+{{$:/core/images/permalink-button}}
+<span class="tc-btn-text">
+<$text text={{$:/language/Buttons/TestCaseImport/Caption}}/>
+</span>
+</$button>

core/wiki/tags/TestCaseActions.tid

@@ -0,0 +1,2 @@
+title: $:/tags/TestCase/Actions
+list:

editions/tw5.com/tiddlers/testcases/TestCaseWidget/FailingTest.tid

@@ -5,7 +5,7 @@ description: An example of a failing test
 
 title: Narrative
 
-This test case intentionally fails (in order to show how failures are displayed)
+This test case intentionally fails (in order to show how failures are displayed). The expected result is set to <code><$text text={{ExpectedResult}}/></code>, but the result computes to <code><$wikify name="html" text={{Output}} mode="block" output="html"><$text text=<<html>>/></$wikify></code>
 +
 title: Output
 

themes/tiddlywiki/vanilla/base.tid

@@ -3297,7 +3297,7 @@ span.tc-translink > a:first-child {
 	display: inline-block;
 	line-height: 0;
 	border-radius: 1em;
-	vertical-align: bottom;
+	vertical-align: text-bottom;
 	margin-right: 0.25em;
 }
 
@@ -3314,6 +3314,12 @@ span.tc-translink > a:first-child {
 	height: 0.5em;
 }
 
+.tc-test-case-header > h2 {
+	background: <<colour background>>;
+	border-radius: 4px;
+	padding: 0.25em;
+}
+
 .tc-test-case-header > h2,
 .tc-test-case-source > pre {
 	margin: 0;
@@ -3323,6 +3329,18 @@ span.tc-translink > a:first-child {
 	font-style: normal;
 }
 
+.tc-test-case-toolbar {
+	float: right;
+}
+
+.tc-test-case-toolbar svg {
+	fill: <<colour tiddler-controls-foreground>>;
+}
+
+.tc-test-case-toolbar .tc-drop-down {
+	font-size: 0.8em;
+}
+
 .tc-test-case-result-fail {
 	border: 1px solid <<colour foreground>>;
 	background-color: <<colour background>>;
@@ -3366,10 +3384,14 @@ span.tc-translink > a:first-child {
 }
 
 .tc-test-case-source .tc-tab-content {
-	background: <<colour background>>;
+	background: inherit;
 	margin: 0;
 }
 
+.tc-test-case-source .tc-tab-content .tc-field-table {
+	background: <<colour background>>;
+}
+
 .tc-test-case-source .tc-field-table {
 	width: 100%;
 }
@@ -3390,11 +3412,16 @@ span.tc-translink > a:first-child {
 	padding-top: 0;
 }
 
+.tc-test-case-footer-toolbar {
+	display: flex;
+	justify-content: flex-end;
+}
+
 .tc-test-case-output {
 	box-shadow: inset 2px 2px 10px 0px <<colour muted-foreground>>;
 	background: <<colour background>>;
 	border-radius: 4px;
-	border: 1px solid <<colour foreground>>;
+	border: 1px solid <<colour muted-foreground>>;
 	flex: 1 0 49%;
 	min-width: 250px;
 	padding: 0.25em 1em;