1
0
mirror of https://github.com/Jermolene/TiddlyWiki5 synced 2024-11-14 05:44:50 +00:00
TiddlyWiki5/editions/tw5.com/tiddlers/widgets/TestCaseWidget.tid
Jeremy Ruston ece8b0ee01
Add <$testcase> widget (#7817)
* Initial Commit

* Add note to preview build

* Fix whitespace and indenting

Thanks @pmario

* Fix crash with unset $tiddler attribute on <$data> widget

Thanks @CodaCodr

* Don't duplicate "description" field in test cases

* Use different background colours for nested testcase widgets

* Extend the testcase widget to run tests

* Add testcases to control panel

* Add a view template body template to render testcase tiddlers

* Test edition should display testcases

* Whitespace fixes

* Make testcase tiddler tempalte link to itself

* Styling tweaks

* Docs improvements

* Styling tweaks

* Run the new tw5.com testcases in the test edition

* Update data widget to display its content in JSON

* Add testcase convenience procedure

* Clearer testcases for data widget, and docs tweaks

* Don't expect our intentionally failing test to pass

* Extend testcase default template so that the display format can be chosen

It is selected by setting the variable "displayFormat"

* DataWidget docs typo

* Fix data widget not refreshing

* Links in testcase output switch to the tab containing that tiddler

Thanks to @btheado for the suggestion

* Docs update for 648855e8a5

* Wording tweak

* Add support for narrative tiddlers in test cases

* Documentation improvements

* Cleanup comments

* Remove obsolete code comments

* Simplify template

* Docs update

* Rename $:/core/ui/testcases/DefaultTemplate/SourceTabs from $:/core/ui/testcases/DefaultTemplate/Source

* Use the view template body for failing tests

* Don't reference the geospatial plugin

* "Test case" should be two words

* Fix handling of currentTiddler variable

Fixes problem reported by @btheado in https://github.com/Jermolene/TiddlyWiki5/pull/7817#issuecomment-2103704468

* Prepare for merging
2024-05-20 11:30:30 +01:00

102 lines
6.2 KiB
Plaintext

caption: testcase
created: 20240507221902644
modified: 20240507221902644
tags: Widgets
title: TestCaseWidget
type: text/vnd.tiddlywiki
! Introduction
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.
The <<.wid testcase>> widget can be used directly as documented below, but it is generally easier to create [[TestCaseTiddlers]]. These are special CompoundTiddlers that can contain multiple payload tiddlers making up a test case.
!! Features
Here is an example of a test case showing the default split view with the source tiddlers on the left and the tiddler titled `Output` rendered on the right.
<<testcase "TestCases/TranscludeWidget/SimpleTransclusion">>
Notice also that clicking on links within the output pane will switch to the tab containing that tiddler.
The text of the payload tiddlers listed 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 test case 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">>
! 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 test case
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.
|!Attribute |!Description |
|<<.attr template>> |Optional title of the template used to display the test case (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 `$:/core` plugin is automatically included in the payload.
! Testcase Templates
The <<.attr template>> attribute defaults to $:/core/ui/testcases/DefaultTemplate
The default test case template assigns special meanings to a number of payload tiddlers:
|!Tiddler |!Description |
|''Description'' |Descriptive heading for the test, intended to make it easy to identify the test |
|''Narrative'' |Narrative description of the test, intended to explain the purpose and operation of the test |
|''Output'' |The tiddler that produces the test output |
|''~ExpectedResult'' |HTML of expected result of rendering the ''Output'' tiddler |
The test case wiki will inherit variables that are visible to the <<.wid testcase>> widget itself. The default template uses several variables that can be set by the user:
|!Variable |!Description |
|<<.var linkTarget>> |Causes the test case 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 |
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.
! Test Czase 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 test case 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") |
! Example
Here is an example of setting up a test case that includes expected test results:
<$testcase>
<$data title="Description" text="Example of a test case 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>