Merge branch 'testcase-widget' into geospatial-plugin
This commit is contained in:
Jeremy Ruston
commit
842434a6fb
|
|
@ -206,6 +206,12 @@ Stylesheets/Caption: Stylesheets
|
|||
Stylesheets/Expand/Caption: Expand All
|
||||
Stylesheets/Hint: This is the rendered CSS of the current stylesheet tiddlers tagged with <<tag "$:/tags/Stylesheet">>
|
||||
Stylesheets/Restore/Caption: Restore
|
||||
TestCases/Caption: Test Cases
|
||||
TestCases/Hint: Test cases are self contained examples for testing and learning
|
||||
TestCases/All/Caption: All Test Cases
|
||||
TestCases/All/Hint: All Test Cases
|
||||
TestCases/Failed/Caption: Failed Test Cases
|
||||
TestCases/Failed/Hint: Just Failed Test Cases
|
||||
Theme/Caption: Theme
|
||||
Theme/Prompt: Current theme:
|
||||
TiddlerFields/Caption: Tiddler Fields
|
||||
|
|
|
|||
|
|
@ -65,6 +65,9 @@ sidebar-tab-foreground-selected: Sidebar tab foreground for selected tabs
|
|||
sidebar-tab-foreground: Sidebar tab foreground
|
||||
sidebar-tiddler-link-foreground-hover: Sidebar tiddler link foreground hover
|
||||
sidebar-tiddler-link-foreground: Sidebar tiddler link foreground
|
||||
testcase-accent-level-1: Testcase accent colour with no nesting
|
||||
testcase-accent-level-2: Testcase accent colour with 2nd level nesting
|
||||
testcase-accent-level-3: Testcase accent colour with 3rd level nesting or higher
|
||||
site-title-foreground: Site title foreground
|
||||
static-alert-foreground: Static alert foreground
|
||||
tab-background-selected: Tab background for selected tabs
|
||||
|
|
|
|||
|
|
@ -31,7 +31,10 @@ DataWidget.prototype.render = function(parent,nextSibling) {
|
|||
this.parentDomNode = parent;
|
||||
this.computeAttributes();
|
||||
this.execute();
|
||||
this.renderChildren(parent,nextSibling);
|
||||
var jsonPayload = JSON.stringify(this.readDataTiddlerValues(),null,4);
|
||||
var textNode = this.document.createTextNode(jsonPayload);
|
||||
parent.insertBefore(textNode,nextSibling);
|
||||
this.domNodes.push(textNode);
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
@ -61,7 +64,10 @@ DataWidget.prototype.readDataTiddlerValues = function() {
|
|||
if(this.hasAttribute("$tiddler")) {
|
||||
title = this.getAttribute("$tiddler");
|
||||
if(title) {
|
||||
tiddlers.push(this.wiki.getTiddler(title));
|
||||
var tiddler = this.wiki.getTiddler(title);
|
||||
if(tiddler) {
|
||||
tiddlers.push(tiddler);
|
||||
}
|
||||
}
|
||||
}
|
||||
if(this.hasAttribute("$filter")) {
|
||||
|
|
|
|||
|
|
@ -79,8 +79,52 @@ TestCaseWidget.prototype.render = function(parent,nextSibling) {
|
|||
this.setVariable("transclusion",$tw.utils.hashString(jsonPayload));
|
||||
// Generate a `payloadTiddlers` variable that contains the payload in JSON format
|
||||
this.setVariable("payloadTiddlers",jsonPayload);
|
||||
// Render the test rendering if required
|
||||
if(this.testcaseTestOutput && this.testcaseTestExpectedResult) {
|
||||
var testcaseOutputContainer = $tw.fakeDocument.createElement("div");
|
||||
var testcaseOutputWidget = this.testcaseWiki.makeTranscludeWidget(this.testcaseTestOutput,{
|
||||
document: $tw.fakeDocument,
|
||||
parseAsInline: false,
|
||||
parentWidget: this,
|
||||
variables: {
|
||||
currentTiddler: this.testcaseTestOutput
|
||||
}
|
||||
});
|
||||
testcaseOutputWidget.render(testcaseOutputContainer);
|
||||
}
|
||||
// Clear changes queue
|
||||
this.testcaseWiki.clearTiddlerEventQueue();
|
||||
// Run the actions if provided
|
||||
if(this.testcaseWiki.tiddlerExists(this.testcaseTestActions)) {
|
||||
testcaseOutputWidget.invokeActionString(this.testcaseWiki.getTiddlerText(this.testcaseTestActions));
|
||||
testcaseOutputWidget.refresh(this.testcaseWiki.changedTiddlers,testcaseOutputContainer);
|
||||
}
|
||||
// Set up the test result variables
|
||||
var testResult = "",
|
||||
outputHTML = "",
|
||||
expectedHTML = "";
|
||||
if(this.testcaseTestOutput && this.testcaseTestExpectedResult) {
|
||||
outputHTML = testcaseOutputContainer.children[0].innerHTML;
|
||||
expectedHTML = this.testcaseWiki.getTiddlerText(this.testcaseTestExpectedResult);
|
||||
if(outputHTML === expectedHTML) {
|
||||
testResult = "pass";
|
||||
} else {
|
||||
testResult = "fail";
|
||||
}
|
||||
this.setVariable("outputHTML",outputHTML);
|
||||
this.setVariable("expectedHTML",expectedHTML);
|
||||
this.setVariable("testResult",testResult);
|
||||
}
|
||||
// Don't display anything if testHideIfPass is "yes" and the tests have passed
|
||||
if(this.testcaseHideIfPass === "yes" && testResult === "pass") {
|
||||
return;
|
||||
}
|
||||
// Render the page root template of the subwiki
|
||||
var rootWidget = this.testcaseWiki.makeTranscludeWidget(this.testcaseTemplate,{document: this.document, parseAsInline: false, parentWidget: this});
|
||||
var rootWidget = this.testcaseWiki.makeTranscludeWidget(this.testcaseTemplate,{
|
||||
document: this.document,
|
||||
parseAsInline: false,
|
||||
parentWidget: this
|
||||
});
|
||||
rootWidget.render(domNode);
|
||||
// Trap changes in the wiki and refresh the rendering
|
||||
this.testcaseWiki.addEventListener("change",function(changes) {
|
||||
|
|
@ -93,6 +137,10 @@ Compute the internal state of the widget
|
|||
*/
|
||||
TestCaseWidget.prototype.execute = function() {
|
||||
this.testcaseTemplate = this.getAttribute("template","$:/core/ui/testcases/DefaultTemplate");
|
||||
this.testcaseTestOutput = this.getAttribute("testOutput");
|
||||
this.testcaseTestActions = this.getAttribute("testActions");
|
||||
this.testcaseTestExpectedResult = this.getAttribute("testExpectedResult");
|
||||
this.testcaseHideIfPass = this.getAttribute("testHideIfPass");
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -95,6 +95,9 @@ table-footer-background: #a8a8a8
|
|||
table-header-background: #f0f0f0
|
||||
tag-background: #ec6
|
||||
tag-foreground: #ffffff
|
||||
testcase-accent-level-1: #84C5E6
|
||||
testcase-accent-level-2: #E3B740
|
||||
testcase-accent-level-3: #5FD564
|
||||
tiddler-background: <<colour background>>
|
||||
tiddler-border: <<colour background>>
|
||||
tiddler-controls-foreground-hover: #888888
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
title: $:/core/ui/ControlPanel/TestCases
|
||||
tags: $:/tags/ControlPanel/Advanced
|
||||
caption: {{$:/language/ControlPanel/TestCases/Caption}}
|
||||
|
||||
\whitespace trim
|
||||
{{$:/language/ControlPanel/TestCases/Hint}}
|
||||
|
||||
<div class="tc-control-panel">
|
||||
<$macrocall $name="tabs" tabsList="[all[shadows+tiddlers]tag[$:/tags/ControlPanel/TestCases]!has[draft.of]]" default="$:/core/ui/ControlPanel/TestCases/All"/>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
title: $:/core/ui/ControlPanel/TestCases/All
|
||||
tags: $:/tags/ControlPanel/TestCases
|
||||
caption: {{$:/language/ControlPanel/TestCases/All/Caption}}
|
||||
|
||||
\define lingo-base() $:/language/ControlPanel/
|
||||
<<lingo TestCases/All/Hint>>
|
||||
|
||||
<$list filter="[all[tiddlers+shadows]tag[$:/tags/wiki-test-spec]type[text/vnd.tiddlywiki-multiple]] [all[tiddlers+shadows]tag[$:/tags/wiki-test-spec-failing]type[text/vnd.tiddlywiki-multiple]]">
|
||||
|
||||
<h2>
|
||||
|
||||
<$link>
|
||||
|
||||
<$text text=<<currentTiddler>>/>
|
||||
|
||||
</$link>
|
||||
|
||||
</h2>
|
||||
|
||||
<$transclude
|
||||
$tiddler="$:/core/ui/TestCaseTemplate"
|
||||
/>
|
||||
|
||||
</$list>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
title: $:/core/ui/ControlPanel/TestCases/Failed
|
||||
tags: $:/tags/ControlPanel/TestCases
|
||||
caption: {{$:/language/ControlPanel/TestCases/Failed/Caption}}
|
||||
|
||||
\define lingo-base() $:/language/ControlPanel/
|
||||
<<lingo TestCases/Failed/Hint>>
|
||||
|
||||
<$list filter="[all[tiddlers+shadows]tag[$:/tags/wiki-test-spec]type[text/vnd.tiddlywiki-multiple]] [all[tiddlers+shadows]tag[$:/tags/wiki-test-spec-failing]type[text/vnd.tiddlywiki-multiple]]">
|
||||
|
||||
<$transclude
|
||||
$tiddler="$:/core/ui/TestCaseTemplate"
|
||||
hideIfPass="yes"
|
||||
/>
|
||||
|
||||
</$list>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
title: $:/core/ui/TestCaseTemplate
|
||||
|
||||
\parameters (hideIfPass:"no")
|
||||
\whitespace trim
|
||||
<$let
|
||||
linkTarget="yes"
|
||||
displayFormat={{!!display-format}}
|
||||
>
|
||||
<$testcase
|
||||
testOutput="Output"
|
||||
testExpectedResult="ExpectedResult"
|
||||
testActions="Actions"
|
||||
testHideIfPass=<<hideIfPass>>
|
||||
>
|
||||
<$data $compound-tiddler=<<currentTiddler>>/>
|
||||
<$data title="Description" text={{!!description}}/>
|
||||
</$testcase>
|
||||
</$let>
|
||||
|
|
@ -4,19 +4,46 @@ title: $:/core/ui/testcases/DefaultTemplate
|
|||
<$let
|
||||
state={{{ [<qualify "$:/state/testcase">] }}}
|
||||
>
|
||||
<div class="tc-testcase-wrapper">
|
||||
<div class="tc-testcase-header">
|
||||
<h2><$transclude tiddler="Description" mode="inline"/></h2>
|
||||
</div>
|
||||
<div class="tc-testcase-panes">
|
||||
<div class="tc-testcase-source">
|
||||
<$macrocall $name="tabs" tabsList="[all[tiddlers]sort[]] -[prefix<state>] -Description -ExpectedResult -Output Output +[putfirst[]] -[has[plugin-type]]" state=<<state>> default="Output" template="$:/core/ui/testcases/DefaultTemplate/Source"/>
|
||||
</div>
|
||||
<div class="tc-testcase-divider">
|
||||
</div>
|
||||
<div class="tc-testcase-output">
|
||||
<$transclude tiddler="Output"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tc-testcase-wrapper">
|
||||
<div class="tc-testcase-header">
|
||||
<h2>
|
||||
<$genesis $type={{{ [<linkTarget>!match[]then[$link]else[div]] }}}>
|
||||
<%if [<testResult>!match[]] %>
|
||||
<span class={{{ tc-testcase-result-icon [<testResult>!match[fail]then[tc-testcase-result-icon-pass]] [<testResult>match[fail]then[tc-testcase-result-icon-fail]] +[join[ ]] }}}>
|
||||
<%if [<testResult>!match[fail]] %>
|
||||
{{$:/core/images/done-button}}
|
||||
<%else%>
|
||||
{{$:/core/images/close-button}}
|
||||
<%endif%>
|
||||
</span>
|
||||
<%endif%>
|
||||
<$view tiddler="Description" mode="inline"/>
|
||||
</$genesis>
|
||||
</h2>
|
||||
</div>
|
||||
<%if [<testResult>match[fail]] %>
|
||||
<div class="tc-testcase-result-fail">
|
||||
<div class="tc-testcase-result-fail-header">
|
||||
TEST FAILED
|
||||
</div>
|
||||
<div class="tc-testcase-result-fail-body">
|
||||
<$diff-text source=<<expectedHTML>> dest=<<outputHTML>>/>
|
||||
</div>
|
||||
</div>
|
||||
<%endif%>
|
||||
<div class="tc-testcase-panes">
|
||||
<div class="tc-testcase-source">
|
||||
<$macrocall $name="tabs" tabsList="[all[tiddlers]sort[]] -[prefix<state>] -Description -ExpectedResult -Output Output +[putfirst[]] -[has[plugin-type]]" state=<<state>> default="Output" template="$:/core/ui/testcases/DefaultTemplate/Source"/>
|
||||
</div>
|
||||
<div class="tc-testcase-divider">
|
||||
</div>
|
||||
<div class="tc-testcase-output">
|
||||
<%if [<displayFormat>!match[]else[wikitext]match[plaintext]] %>
|
||||
<pre><$view tiddler="Output" format="plainwikified" mode="block"/></pre>
|
||||
<%else%>
|
||||
<$transclude $tiddler="Output" $mode="block"/>
|
||||
<%endif%>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</$let>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,7 @@
|
|||
title: $:/core/ui/testcases/DefaultTemplate/Source
|
||||
|
||||
\whitespace trim
|
||||
\procedure body()
|
||||
<$list filter="[<currentTab>fields[]] -text +[limit[1]]" variable="ignore">
|
||||
<table class="tc-field-table">
|
||||
<tbody>
|
||||
|
|
@ -17,3 +19,6 @@ title: $:/core/ui/testcases/DefaultTemplate/Source
|
|||
</table>
|
||||
</$list>
|
||||
<$edit class="tc-edit-texteditor" tiddler=<<currentTab>>/>
|
||||
\end
|
||||
|
||||
<$transclude $variable="body" $mode="inline"/>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
title: $:/config/ViewTemplateBodyFilters/
|
||||
tags: $:/tags/ViewTemplateBodyFilter
|
||||
|
||||
testcase: [tag[$:/tags/wiki-test-spec]type[text/vnd.tiddlywiki-multiple]then[$:/core/ui/TestCaseTemplate]]
|
||||
stylesheet: [tag[$:/tags/Stylesheet]then[$:/core/ui/ViewTemplate/body/rendered-plain-text]]
|
||||
core-ui-tags: [tag[$:/tags/PageTemplate]] [tag[$:/tags/EditTemplate]] [tag[$:/tags/ViewTemplate]] [tag[$:/tags/KeyboardShortcut]] [tag[$:/tags/ImportPreview]] [tag[$:/tags/EditPreview]][tag[$:/tags/EditorToolbar]] [tag[$:/tags/Actions]] :then[[$:/core/ui/ViewTemplate/body/code]]
|
||||
system: [prefix[$:/boot/]] [prefix[$:/config/]] [prefix[$:/core/macros]] [prefix[$:/core/save/]] [prefix[$:/core/templates/]] [prefix[$:/info/]] [prefix[$:/language/]] [prefix[$:/languages/]] [prefix[$:/snippets/]] [prefix[$:/state/]] [prefix[$:/status/]] [prefix[$:/info/]] [prefix[$:/temp/]] +[!is[image]limit[1]then[$:/core/ui/ViewTemplate/body/code]]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
title: $:/core/macros/testcase
|
||||
tags: $:/tags/Macro $:/tags/Global
|
||||
|
||||
\whitespace trim
|
||||
|
||||
\procedure testcase(tiddler)
|
||||
<$tiddler tiddler=<<tiddler>>>
|
||||
<$transclude $tiddler="$:/core/ui/TestCaseTemplate">
|
||||
</$tiddler>
|
||||
\end
|
||||
|
|
@ -1,2 +1,2 @@
|
|||
title: $:/tags/ViewTemplateBodyFilter
|
||||
list: $:/config/ViewTemplateBodyFilters/hide-body $:/config/ViewTemplateBodyFilters/code-body $:/config/ViewTemplateBodyFilters/stylesheet $:/config/ViewTemplateBodyFilters/core-ui-advanced-search $:/config/ViewTemplateBodyFilters/core-ui-tags $:/config/ViewTemplateBodyFilters/system $:/config/ViewTemplateBodyFilters/import $:/config/ViewTemplateBodyFilters/plugin $:/config/ViewTemplateBodyFilters/default
|
||||
list: $:/config/ViewTemplateBodyFilters/testcase $:/config/ViewTemplateBodyFilters/hide-body $:/config/ViewTemplateBodyFilters/code-body $:/config/ViewTemplateBodyFilters/stylesheet $:/config/ViewTemplateBodyFilters/core-ui-advanced-search $:/config/ViewTemplateBodyFilters/core-ui-tags $:/config/ViewTemplateBodyFilters/system $:/config/ViewTemplateBodyFilters/import $:/config/ViewTemplateBodyFilters/plugin $:/config/ViewTemplateBodyFilters/default
|
||||
|
|
@ -17,6 +17,7 @@
|
|||
"tiddlywiki/jszip",
|
||||
"tiddlywiki/geospatial",
|
||||
"tiddlywiki/xlsx-utils",
|
||||
"tiddlywiki/innerwiki",
|
||||
"tiddlywiki/confetti",
|
||||
"tiddlywiki/dynannotate",
|
||||
"tiddlywiki/tour"
|
||||
|
|
|
|||
|
|
@ -3,3 +3,7 @@ title: HelloThere
|
|||
This is TiddlyWiki's browser-based test runner for version <<version>>. See the bottom of this page for the test results.
|
||||
|
||||
https://tiddlywiki.com/
|
||||
|
||||
! Test Cases
|
||||
|
||||
{{$:/core/ui/ControlPanel/TestCases}}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"directories": [
|
||||
"../../../../tw5.com/tiddlers/testcases"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
title: TestCaseTiddlers
|
||||
|
||||
|
||||
|
||||
Behind the scenes, the templates used to view TestCaseTiddlers use the <<.wlink TestCaseWidget>> widget.
|
||||
|
||||
! Testcase Conventions
|
||||
|
||||
The following conventions are used for testcase tiddlers:
|
||||
|
||||
* `Description` contains a brief description of the test (rendered in inline mode)
|
||||
* `Output` contains the tiddler text to be rendered. It can also reference other tiddlers
|
||||
* `ExpectedResult` contains the HTML that should match the rendering of the tiddler `Output`
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
title: TestCases/DataWidget/ImportCompound
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
description: Importing a compound payload tiddler and adding custom fields
|
||||
display-format: plaintext
|
||||
|
||||
title: Output
|
||||
|
||||
<$data $compound-tiddler="Compound" custom="Alpha"/>
|
||||
+
|
||||
title: Compound
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
|
||||
title: Payload Tiddler
|
||||
tags: Alpha Beta Gamma
|
||||
|
||||
This is a payload tiddler from a compound tiddler
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p>[
|
||||
{
|
||||
"title": "Payload Tiddler",
|
||||
"tags": "Alpha Beta Gamma",
|
||||
"text": "This is a payload tiddler from a compound tiddler",
|
||||
"custom": "Alpha"
|
||||
}
|
||||
]</p>
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
title: TestCases/DataWidget/ImportedFilter
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
description: Imported filter definition
|
||||
display-format: plaintext
|
||||
|
||||
title: Output
|
||||
|
||||
<$data $filter="[prefix[Day: T]]" custom="Beta"/>
|
||||
+
|
||||
title: Day: Monday
|
||||
text: Today is Monday
|
||||
+
|
||||
title: Day: Tuesday
|
||||
text: Today is Tuesday
|
||||
+
|
||||
title: Day: Wednesday
|
||||
text: Today is Wednesday
|
||||
+
|
||||
title: Day: Thursday
|
||||
text: Today is Thursday
|
||||
+
|
||||
title: Day: Friday
|
||||
text: Today is Friday
|
||||
+
|
||||
title: Day: Saturday
|
||||
text: Today is Saturday
|
||||
+
|
||||
title: Day: Sunday
|
||||
text: Today is Sunday
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p>[
|
||||
{
|
||||
"title": "Day: Thursday",
|
||||
"text": "Today is Thursday",
|
||||
"custom": "Beta"
|
||||
},
|
||||
{
|
||||
"title": "Day: Tuesday",
|
||||
"text": "Today is Tuesday",
|
||||
"custom": "Beta"
|
||||
}
|
||||
]</p>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
title: TestCases/DataWidget/ImportedTiddler
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
description: Imported tiddler definition
|
||||
display-format: plaintext
|
||||
|
||||
title: Output
|
||||
|
||||
<$data $tiddler="HelloThere" custom="Alpha"/>
|
||||
+
|
||||
title: HelloThere
|
||||
modifier: JoeBloggs
|
||||
|
||||
This is the HelloThere tiddler
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p>[
|
||||
{
|
||||
"title": "HelloThere",
|
||||
"modifier": "JoeBloggs",
|
||||
"text": "This is the HelloThere tiddler",
|
||||
"custom": "Alpha"
|
||||
}
|
||||
]</p>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
title: TestCases/DataWidget/SimpleTiddler
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
description: Simple tiddler definition
|
||||
display-format: plaintext
|
||||
|
||||
title: Output
|
||||
|
||||
<$data title="Epsilon" text="Theta"/>
|
||||
+
|
||||
title: ExpectedResult
|
||||
|
||||
<p>[
|
||||
{
|
||||
"title": "Epsilon",
|
||||
"text": "Theta"
|
||||
}
|
||||
]</p>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
title: TestCases/TestCaseWidget/FailingTest
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec-failing]]
|
||||
description: An example of a failing test
|
||||
|
||||
title: Output
|
||||
|
||||
The sum is <$text text={{{ [[2]add[2]] }}}/>.
|
||||
+
|
||||
title: ExpectedResult
|
||||
text: <p>The sum is not 8.</p>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
title: TestCases/TranscludeWidget/SimpleTransclusion
|
||||
type: text/vnd.tiddlywiki-multiple
|
||||
tags: [[$:/tags/wiki-test-spec]]
|
||||
description: Simple transclusion
|
||||
|
||||
title: Output
|
||||
|
||||
Good morning, my name is {{Name}} and I live in {{Address}}
|
||||
+
|
||||
title: Name
|
||||
|
||||
Robert Rabbit
|
||||
+
|
||||
title: Address
|
||||
|
||||
14 Carrot Street, Vegetabletown
|
||||
+
|
||||
title: ExpectedResult
|
||||
text: <p>Good morning, my name is Robert Rabbit and I live in 14 Carrot Street, Vegetabletown</p>
|
||||
|
|
@ -11,7 +11,7 @@ The data widget is used with the <<.wlink TestCaseWidget>> widget and the [[Inne
|
|||
|
||||
! Content and Attributes
|
||||
|
||||
The content of the data widget is rendered as if the data widget were not present. It supports the following attributes:
|
||||
The content of the data widget is ignored. It supports the following attributes:
|
||||
|
||||
|!Attribute |!Description |
|
||||
|<<.attr $tiddler>> |Optional title of a tiddler to be used as a payload tiddler (optional) |
|
||||
|
|
@ -23,29 +23,25 @@ The data widget is not rendered when used within the <<.wlink TestCaseWidget>> w
|
|||
|
||||
Without any of the attributes <<.attr $tiddler>>, <<.attr $filter>> or <<.attr $compound-tiddler>>, any attributes whose name does not start with $ are used as the field values for creating a single new tiddler. For example, here a tiddler with the title "Epsilon" and the text "Theta" is created:
|
||||
|
||||
```
|
||||
<$data title="Epsilon" text="Theta"/>
|
||||
```
|
||||
<<testcase "TestCases/DataWidget/SimpleTiddler">>
|
||||
|
||||
If any of the attributes <<.attr $tiddler>>, <<.attr $filter>> or <<.attr $compound-tiddler>> are specified then they are used to generate base tiddlers that are then modified with the addition of fields derived from any attributes whose name does not start with $.
|
||||
|
||||
This example, here we specify a copy of the "HelloThere" tiddler with the addition of the field "custom" set to "Alpha":
|
||||
|
||||
```
|
||||
<$data $tiddler="HelloThere" custom="Alpha"/>
|
||||
```
|
||||
<<testcase "TestCases/DataWidget/ImportedTiddler">>
|
||||
|
||||
This example injects all image tiddlers with the addition of the field "custom" set to "Beta":
|
||||
|
||||
```
|
||||
<$data $filter="[is[image]]" custom="Beta"/>
|
||||
```
|
||||
<<testcase "TestCases/DataWidget/ImportedFilter">>
|
||||
|
||||
! Compound Tiddlers
|
||||
|
||||
Compound tiddlers provide a way to easily create multiple tiddlers from within a single tiddler. They are contained in tiddlers of type `text/vnd.tiddlywiki-multiple`. The text field consists of a series of tiddlers in the same format as `.tid` files, each separated by a line containing a single `+` character.
|
||||
|
||||
For example:
|
||||
<<testcase "TestCases/DataWidget/ImportCompound">>
|
||||
|
||||
Here is a more complex example of the content of a compound tiddler:
|
||||
|
||||
```
|
||||
title: First
|
||||
|
|
@ -62,4 +58,4 @@ title: third
|
|||
tags: five six
|
||||
|
||||
This is the third tiddler
|
||||
```
|
||||
```
|
||||
|
|
|
|||
|
|
@ -7,40 +7,89 @@ type: text/vnd.tiddlywiki
|
|||
|
||||
! Introduction
|
||||
|
||||
The testcase widget creates an independent subwiki loaded with the specified payload tiddlers and then renders a specified template from within the subwiki.The default template displays a split view with the source tiddlers on the left and the rendered tiddler titled `Output` on the right. It also displays the tiddler titled `Description` as the heading. This makes it possible to run independent tests that also serve as documentation examples.
|
||||
The <<.wid testcase>> widget is designed to present interactive example test cases that are useful for learning and testing. It functions by creating an independent subwiki loaded with the specified payload tiddlers and then rendering a specified template from within the subwiki. The <<.wid testcase>> widget can optionally also be used to run and verify test results within the subwiki.
|
||||
|
||||
This makes it possible to run independent tests that also serve as documentation examples.
|
||||
|
||||
!! Features
|
||||
|
||||
Here is an example of a testcase showing the default split view with the source tiddlers on the left and the tiddler titled `Output` rendered on the right. It also displays the tiddler titled `Description` as the heading.
|
||||
|
||||
<<testcase "TestCases/TranscludeWidget/SimpleTransclusion">>
|
||||
|
||||
The payload tiddlers listed in the tabs on the left are editable, with the results being immediately reflected in the preview pane on the right. However, if the <<.wid testcase>> widget is refreshed then the modifications are lost.
|
||||
|
||||
The green tick at the top left of a testcase indicates that a test has been set up and that it passes.
|
||||
|
||||
If the test fails, a red cross is shown, and there is a display of the differences between the actual results and the expected results:
|
||||
|
||||
<<testcase "TestCases/TestCaseWidget/FailingTest">>
|
||||
|
||||
!! Usage
|
||||
|
||||
The <<.wid testcase>> widget can be used directly as documented below, but it is generally easier and more flexible to create [[TestCaseTiddlers]]. These are special, self contained tiddlers that can contain multiple payload tiddlers making up a testcase.
|
||||
|
||||
Note that the testcase wiki will inherit variables that are visible to the <<.wid testcase>> widget itself.
|
||||
|
||||
! Limitations
|
||||
|
||||
The <<.wid testcase>> widget creates a lightweight TiddlyWiki environment that is a parasite of the main wiki. Because it is not a full, independent TiddlyWiki environment, there are some important limitations:
|
||||
|
||||
* Output is rendered into a DIV, and so cannot be styled independently of the host wiki
|
||||
* Any changes to the wiki made interactively by the user are volatile, and are lost when the <<.wid testcase>> widget is refreshed
|
||||
* Startup actions are not supported
|
||||
* Only plugins available in the host wiki can be included in the testcase
|
||||
|
||||
If these limitations are a problem, the [[Innerwiki Plugin]] offers the ability to embed a fully independent subwiki via an `<iframe>` element, but without the testing related features of the <<.wid testcase>> widget.
|
||||
|
||||
! Content and Attributes
|
||||
|
||||
The content of the `<$testcase>` widget is not displayed but instead is scanned for <<.wlink DataWidget>> widgets that define the payload tiddlers to be included in the test case. The `$:/core` plugin is automatically included in the payload.
|
||||
The content of the `<$testcase>` widget is not displayed but instead is scanned for <<.wlink DataWidget>> widgets that define the payload tiddlers to be included in the testcase.
|
||||
|
||||
|!Attribute |!Description |
|
||||
|<<.attr template>> |Optional title of the template used to display the testcase (defaults to $:/core/ui/testcases/DefaultTemplate). Note that custom templates will need to be explicitly added to the payload |
|
||||
|<<.attr testOutput>> |Optional title of the tiddler whose output should be subject to testing (note that both <<.attr testOutput>> and <<.attr testExpectedResult>> must be provided in order for testing to occur) |
|
||||
|<<.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 |
|
||||
|
||||
! Payload Tiddlers
|
||||
|
||||
The payload tiddlers are the tiddler values that are loaded into the subwiki that is created to run the tests. They are created via <<.wlink DataWidget>> widgets within the body of the `<$testcase>` widget.
|
||||
The payload tiddlers are the tiddler values that are loaded into the subwiki that is created to run the tests. They are created via <<.wlink DataWidget>> widgets within the body of the `<$testcase>` widget. The `$:/core` plugin is automatically included in the payload.
|
||||
|
||||
! State Handling
|
||||
! Testcase Templates
|
||||
|
||||
The `<$testcase>` widget sets the variable `transclusion` to a hash that reflects the names and values of all the payload tiddlers. This makes it easier for test case templates to create unique state tiddler titles using the [[qualify Macro]] or QualifyWidget.
|
||||
The <<.attr template>> attribute defaults to $:/core/ui/testcases/DefaultTemplate
|
||||
|
||||
! Test Case Conventions
|
||||
The default template uses several variables that can be set by the user:
|
||||
|
||||
The following conventions are used for test case tiddlers:
|
||||
|!Variable |!Description |
|
||||
|<<.var linkTarget>> |Causes the testcase description to be rendered as a link to the current tiddler |
|
||||
|<<.var displayFormat>> |Defaults to "wikitext", can also be "plaintext" to force plain text display |
|
||||
|
||||
* `Description` contains a brief description of the test (rendered in inline mode)
|
||||
* `Output` contains the tiddler text to be rendered. It can also reference other tiddlers
|
||||
* `ExpectedResult` contains the HTML that should match the rendering of the tiddler `Output`
|
||||
A custom template can be specified for special purposes. For example, the provided template $:/core/ui/testcases/RawJSONTemplate just displays the payload tiddlers in JSON, which can be used for debugging purposes.
|
||||
|
||||
! Example
|
||||
! Testcase Template Variables
|
||||
|
||||
The <<.wid testcase>> widget makes the following variables available within the rendered template:
|
||||
|
||||
|!Variable |!Description |
|
||||
|<<.var transclusion>> |A hash that reflects the names and values of all the payload tiddlers. This makes it easier for testcase templates to create unique state tiddler titles using the [[qualify Macro]] or QualifyWidget |
|
||||
|<<.var payloadTiddlers>> |JSON array of payload tiddler fields |
|
||||
|<<.var outputHTML>> |The actual output HTML if running tests |
|
||||
|<<.var expectedHTML>> |The expected output HTML if running tests |
|
||||
|<<.var testResult>> |The tests result if running tests (may be "pass" or "fail") |
|
||||
|
||||
! Examples
|
||||
|
||||
Here is an example of setting up a testcase that includes expected test results:
|
||||
|
||||
<$testcase>
|
||||
<$data $tiddler="$:/core/ui/testcases/DefaultTemplate"/>
|
||||
<$data $tiddler="$:/core/ui/testcases/DefaultTemplate/Source"/>
|
||||
<$data title="Description" text="Simple example of a test case"/>
|
||||
<$data title="Output" text="""<$testcase>
|
||||
<$data title="Description" text="Example of a testcase with expected results"/>
|
||||
<$data title="Output" text="""<$testcase testOutput="Output" testExpectedResult="ExpectedResult">
|
||||
<$data title="Description" text="How to calculate 2 plus 2"/>
|
||||
<$data title="Output" text="<$text text={{{ [[2]add[2]] }}}/>"/>
|
||||
<$data title="ExpectedResult" text="<p>8</p>"/>
|
||||
</$testcase>
|
||||
"""/>
|
||||
</$testcase>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
"tiddlywiki/evernote",
|
||||
"tiddlywiki/internals",
|
||||
"tiddlywiki/menubar",
|
||||
"tiddlywiki/innerwiki",
|
||||
"tiddlywiki/confetti",
|
||||
"tiddlywiki/dynannotate",
|
||||
"tiddlywiki/tour",
|
||||
|
|
|
|||
|
|
@ -983,7 +983,7 @@ button.tc-btn-invisible.tc-remove-tag-button {
|
|||
margin-top: {{$:/themes/tiddlywiki/vanilla/metrics/storytop}};
|
||||
transition: min-height {{$:/config/AnimationDuration}}ms ease-in-out, padding-top {{$:/config/AnimationDuration}}ms ease-in-out, padding-bottom {{$:/config/AnimationDuration}}ms ease-in-out;
|
||||
}
|
||||
|
||||
|
||||
<<if-no-sidebar """
|
||||
|
||||
.tc-sidebar-header {
|
||||
|
|
@ -2264,11 +2264,11 @@ html body.tc-body.tc-single-tiddler-window {
|
|||
*/
|
||||
|
||||
.tc-manager-wrapper {
|
||||
|
||||
|
||||
}
|
||||
|
||||
.tc-manager-controls {
|
||||
|
||||
|
||||
}
|
||||
|
||||
.tc-manager-control {
|
||||
|
|
@ -3232,23 +3232,83 @@ span.tc-translink > a:first-child {
|
|||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.tc-testcase-wrapper {
|
||||
background-color: <<colour testcase-accent-level-1>>;
|
||||
}
|
||||
|
||||
.tc-testcase-wrapper .tc-testcase-wrapper {
|
||||
background-color: <<colour testcase-accent-level-2>>;
|
||||
}
|
||||
|
||||
.tc-testcase-wrapper .tc-testcase-wrapper .tc-testcase-wrapper {
|
||||
background-color: <<colour testcase-accent-level-3>>;
|
||||
}
|
||||
|
||||
.tc-testcase-header {
|
||||
font-weight: normal;
|
||||
margin: 0.5em 0;
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.tc-testcase-divider {
|
||||
x-background-color: <<colour muted-foreground>>;
|
||||
}
|
||||
|
||||
.tc-testcase-result-icon {
|
||||
fill: #fff;
|
||||
padding: 0.25em;
|
||||
display: inline-block;
|
||||
line-height: 0;
|
||||
border-radius: 1em;
|
||||
vertical-align: bottom;
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.tc-testcase-result-icon-pass {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.tc-testcase-result-icon-fail {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.tc-testcase-result-icon svg {
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
}
|
||||
|
||||
.tc-testcase-header > h2,
|
||||
.tc-testcase-source > pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tc-testcase-header > h2 a.tc-tiddlylink-missing {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.tc-testcase-result-fail {
|
||||
border: 1px solid <<colour foreground>>;
|
||||
background-color: <<colour background>>;
|
||||
border-radius: 4px;
|
||||
margin: 0 0.5em;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.tc-testcase-result-fail-header {
|
||||
background: <<colour foreground>>;
|
||||
color: <<colour background>>;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.tc-testcase-result-fail-body {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.tc-testcase-source > pre {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tc-testcase-panes {
|
||||
background: <<colour background>>;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -3262,12 +3322,25 @@ span.tc-translink > a:first-child {
|
|||
min-width: 250px;
|
||||
}
|
||||
|
||||
.tc-testcase-source .tc-tab-content {
|
||||
background: <<colour background>>;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tc-testcase-source .tc-field-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.tc-testcase-source table.tc-field-table {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tc-tiddler-frame .tc-edit-texteditor {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tc-testcase-divider {
|
||||
flex: 0 0 2%;
|
||||
flex: 0 0 1.5%;
|
||||
}
|
||||
|
||||
.tc-testcase-source .tc-tab-buttons {
|
||||
|
|
@ -3275,14 +3348,15 @@ span.tc-translink > a:first-child {
|
|||
}
|
||||
|
||||
.tc-testcase-output {
|
||||
border-radius: 3px;
|
||||
border: 1px solid <<colour muted-foreground>>;
|
||||
box-shadow: inset 2px 2px 10px 0px <<colour muted-foreground>>;
|
||||
background: <<colour background>>;
|
||||
border-radius: 4px;
|
||||
border: 1px solid <<colour foreground>>;
|
||||
flex: 1 0 49%;
|
||||
min-width: 250px;
|
||||
padding: 0.25em;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Flexbox utility classes
|
||||
*/
|
||||
|
|
|
|||
Loading…
Reference in New Issue