mirror of
https://github.com/Jermolene/TiddlyWiki5
synced 2024-06-24 06:13:17 +00:00
Prepare tabs macro tests for future readability improvements (#6504)
* prepare tabs macro test for future improvements * update tests for tabs-macro to check all possible parameters
This commit is contained in:
Mario Pietsch
GitHub
parent
aaf1aa3821
commit
84ad758829
|
|
@ -0,0 +1,33 @@
|
|||
title: expected-html-tabs-horizontal-all
|
||||
type: text/html
|
||||
description: Horizontal tabs with all parameters active. This is the expected HTML output from a test in test-wikitext-tabs-macro.js
|
||||
|
||||
<p>
|
||||
|
||||
<div class="tc-tab-set ">
|
||||
<div class="tc-tab-buttons ">
|
||||
<button class="">
|
||||
|
||||
|
||||
t 1
|
||||
</button><button class=" tc-tab-selected">
|
||||
|
||||
|
||||
t 2
|
||||
</button><button class="">
|
||||
|
||||
|
||||
desc
|
||||
</button><button class="">
|
||||
|
||||
|
||||
TabFour
|
||||
</button>
|
||||
</div>
|
||||
<div class="tc-tab-divider "></div>
|
||||
<div class="tc-tab-content ">
|
||||
<div class=" tc-reveal" hidden="true"></div><div class=" tc-reveal"><h2 class=""><a class="tc-tiddlylink tc-tiddlylink-resolves" href="#TabTwo">TabTwo</a></h2><p><p>Text tab 2</p></p></div><div class=" tc-reveal" hidden="true"></div><div class=" tc-reveal" hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</p>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
title: expected-html-tabs-horizontal
|
||||
type: text/html
|
||||
description: Horizontal tabs test - This is the expected HTML output from a test in test-wikitext-tabs-macro.js
|
||||
|
||||
<p>
|
||||
|
||||
<div class="tc-tab-set ">
|
||||
<div class="tc-tab-buttons ">
|
||||
<button class="">
|
||||
|
||||
|
||||
|
||||
t 1
|
||||
|
||||
</button><button class=" tc-tab-selected">
|
||||
|
||||
|
||||
|
||||
t 2
|
||||
|
||||
</button><button class="">
|
||||
|
||||
|
||||
|
||||
t 3
|
||||
|
||||
</button><button class="">
|
||||
|
||||
|
||||
|
||||
|
||||
TabFour
|
||||
|
||||
|
||||
</button>
|
||||
</div>
|
||||
<div class="tc-tab-divider "></div>
|
||||
<div class="tc-tab-content ">
|
||||
<div class=" tc-reveal" hidden="true"></div><div class=" tc-reveal"><p>Text tab 2</p></div><div class=" tc-reveal" hidden="true"></div><div class=" tc-reveal" hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</p>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
title: expected-html-tabs-vertical
|
||||
type: text/html
|
||||
description: Vertical tabs test -- This is the expected HTML output from the test in test-wikitext-tabs-macro.js
|
||||
|
||||
<p>
|
||||
|
||||
<div class="tc-tab-set tc-vertical">
|
||||
<div class="tc-tab-buttons tc-vertical">
|
||||
<button class="">
|
||||
|
||||
|
||||
|
||||
t 1
|
||||
|
||||
</button><button class=" tc-tab-selected">
|
||||
|
||||
|
||||
|
||||
t 2
|
||||
|
||||
</button><button class="">
|
||||
|
||||
|
||||
|
||||
t 3
|
||||
|
||||
</button><button class="">
|
||||
|
||||
|
||||
|
||||
|
||||
TabFour
|
||||
|
||||
|
||||
</button>
|
||||
</div>
|
||||
<div class="tc-tab-divider tc-vertical"></div>
|
||||
<div class="tc-tab-content tc-vertical">
|
||||
<div class=" tc-reveal" hidden="true"></div><div class=" tc-reveal"><p>Text tab 2</p></div><div class=" tc-reveal" hidden="true"></div><div class=" tc-reveal" hidden="true"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</p>
|
||||
86
editions/test/tiddlers/tests/test-wikitext-tabs-macro.js
Normal file
86
editions/test/tiddlers/tests/test-wikitext-tabs-macro.js
Normal file
|
|
@ -0,0 +1,86 @@
|
|||
/*\
|
||||
title: test-wikitext-tabs-macro.js
|
||||
type: application/javascript
|
||||
tags: [[$:/tags/test-spec]]
|
||||
|
||||
Tests the core tabs macro by comparing the HTML output with a stored template.
|
||||
Intended to permit future readability improvements.
|
||||
|
||||
Adding new functionality will probably change the "expected" html structure.
|
||||
|
||||
\*/
|
||||
(function(){
|
||||
|
||||
/*jslint node: true, browser: true */
|
||||
/*global $tw: false */
|
||||
"use strict";
|
||||
|
||||
describe("Tabs-macro HTML tests", function() {
|
||||
|
||||
var expected = $tw.wiki.getTiddler("expected-html-tabs-horizontal"),
|
||||
expectedAll = $tw.wiki.getTiddler("expected-html-tabs-horizontal-all"),
|
||||
expectedVert = $tw.wiki.getTiddler("expected-html-tabs-vertical"),
|
||||
coreTabsTiddler = $tw.wiki.getTiddler("$:/core/macros/tabs");
|
||||
|
||||
// Create a wiki
|
||||
var wiki = new $tw.Wiki();
|
||||
|
||||
// Add a couple of tiddlers
|
||||
wiki.addTiddler({title: "TabOne", text: "Text tab 1", caption:"t 1"});
|
||||
wiki.addTiddler({title: "TabTwo", text: "Text tab 2", caption:"t 2"});
|
||||
// TabThree shows description used in button-template instead of caption
|
||||
wiki.addTiddler({title: "TabThree", text: "Text tab 3", caption:"t 3", description:"desc"});
|
||||
// Tab Four has no caption field, so title will be used
|
||||
wiki.addTiddler({title: "TabFour", text: "Text tab 4"});
|
||||
|
||||
// Template tiddlers
|
||||
wiki.addTiddler({ title: "body-template",
|
||||
text: '!! <<currentTab>>\n\n<$transclude tiddler=<<currentTab>> mode="block"/>'});
|
||||
wiki.addTiddler({ title: "button-template",
|
||||
text: '<$transclude tiddler=<<currentTab>> field="description"><$transclude tiddler=<<currentTab>> field="caption"><$macrocall $name="currentTab" $type="text/plain" $output="text/plain"/></$transclude></$transclude>'});
|
||||
// tabs macro cloned, to be used with \\import
|
||||
wiki.addTiddler({title: "tabs-macro-definition", text: coreTabsTiddler.fields.text});
|
||||
|
||||
// horizontal tabs test uses `tabsList`, `default` and `state` -- unnamed params
|
||||
wiki.addTiddler({title: "test-tabs-macro-horizontal", text: '\\import [[tabs-macro-definition]]\n<<tabs "TabOne TabTwo TabThree TabFour" "TabTwo" "$:/state/test-tab-01">>'});
|
||||
|
||||
// horizontal tabs test adds `template`, `buttonTemplate` and `explicitState` as named params
|
||||
wiki.addTiddler({title: "test-tabs-macro-horizontal-all", text: '\\import [[tabs-macro-definition]]\n<<tabs "TabOne TabTwo TabThree TabFour" "TabTwo" "$:/state/test-tab-01" template:"body-template" buttonTemplate:"button-template" explicitState:"$:/state/explicit">>'});
|
||||
|
||||
// vertical tabs test. Same params as test 1
|
||||
wiki.addTiddler({title: "test-tabs-macro-vertical", text: '\\import [[tabs-macro-definition]]\n<<tabs "TabOne TabTwo TabThree TabFour" "TabTwo" "$:/state/test-tab-02" "tc-vertical">>'});
|
||||
|
||||
/* -----------------
|
||||
/ Run the tests
|
||||
--------------------*/
|
||||
// horizontal
|
||||
it("should render horizontal tabs v5.2.1", function() {
|
||||
expect(wiki.renderTiddler("text/html","test-tabs-macro-horizontal")).toBe(expected.fields.text);
|
||||
});
|
||||
|
||||
it("should render horizontal tabs macro with all parameters modified V5.2.1", function() {
|
||||
expect(wiki.renderTiddler("text/html","test-tabs-macro-horizontal-all")).toBe(expectedAll.fields.text);
|
||||
});
|
||||
|
||||
// vertical
|
||||
it("should render tabs vertical tabs v5.2.1", function() {
|
||||
expect(wiki.renderTiddler("text/html","test-tabs-macro-vertical")).toBe(expectedVert.fields.text);
|
||||
});
|
||||
|
||||
// Future tests
|
||||
// horizontal
|
||||
xit("should render 'horizontal' tabs from v5.2.2 and up with whitespace trim", function() {
|
||||
expect(wiki.renderTiddler("text/html","test-tabs-macro-horizontal")).toBe(expected.fields.text.replace(/\n/g,""));
|
||||
});
|
||||
|
||||
xit("should render 'horizontal' tabs from v5.2.2 and up with whitespace trim", function() {
|
||||
expect(wiki.renderTiddler("text/html","test-tabs-macro-horizontal-all")).toBe(expectedAll.fields.text.replace(/\n/g,""));
|
||||
});
|
||||
|
||||
// vertical
|
||||
xit("should render 'vertical' tabs from v5.2.2 and up with whitespace trim", function() {
|
||||
expect(wiki.renderTiddler("text/html","test-tabs-macro-vertical")).toBe(expectedVert.fields.text.replace(/\n/g,""));
|
||||
});
|
||||
});
|
||||
|
||||
})();
|
||||
Loading…
Reference in New Issue
Block a user