mirror of
				https://github.com/Jermolene/TiddlyWiki5
				synced 2025-11-04 01:23:01 +00:00 
			
		
		
		
	Re-activate tabs-macro test, rename expected-* files for easier maintenance (#8403)
* re-activate tabs-macro test, rename expected-* files for easier maintenence * make sure the Recent tab in the browser is populated for easy testing
This commit is contained in:
		@@ -1,5 +0,0 @@
 | 
			
		||||
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="" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" role="switch">t 2</button><button class="" role="switch">desc</button><button class="" role="switch">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>
 | 
			
		||||
@@ -1,5 +0,0 @@
 | 
			
		||||
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="" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" role="switch">t 2</button><button class="" role="switch">t 3</button><button class="" role="switch">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>
 | 
			
		||||
@@ -1,5 +0,0 @@
 | 
			
		||||
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="" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" role="switch">t 2</button><button class="" role="switch">t 3</button><button class="" role="switch">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>
 | 
			
		||||
@@ -0,0 +1,5 @@
 | 
			
		||||
title: expected-test-tabs-horizontal-a
 | 
			
		||||
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="" data-tab-title="TabOne" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="switch">t 2</button><button class="" data-tab-title="TabThree" role="switch">t 3</button><button class="" data-tab-title="TabFour" role="switch">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,5 @@
 | 
			
		||||
title: expected-test-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="" data-tab-title="TabOne" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="switch">t 2</button><button class="" data-tab-title="TabThree" role="switch">desc</button><button class="" data-tab-title="TabFour" role="switch">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="">TabTwo</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,5 @@
 | 
			
		||||
title: expected-test-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="" data-tab-title="TabOne" role="switch">t 1</button><button aria-checked="true" class=" tc-tab-selected" data-tab-title="TabTwo" role="switch">t 2</button><button class="" data-tab-title="TabThree" role="switch">t 3</button><button class="" data-tab-title="TabFour" role="switch">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>
 | 
			
		||||
@@ -1,7 +1,7 @@
 | 
			
		||||
/*\
 | 
			
		||||
title: test-wikitext-tabs-macro.js
 | 
			
		||||
type: application/javascript
 | 
			
		||||
tags: [[$:/tags/test-spec-disabled]]
 | 
			
		||||
tags: [[$:/tags/test-spec]]
 | 
			
		||||
 | 
			
		||||
Tests the core tabs macro by comparing the HTML output with a stored template.
 | 
			
		||||
Intended to permit future readability improvements.
 | 
			
		||||
@@ -17,70 +17,67 @@ Adding new functionality will probably change the "expected" html structure.
 | 
			
		||||
 | 
			
		||||
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"),
 | 
			
		||||
// This code can be copy pasted into the browser console for easy testing
 | 
			
		||||
 | 
			
		||||
	// the expected tiddlers can be found at ./data/tabs-macro/
 | 
			
		||||
	var expected     = $tw.wiki.getTiddler("expected-test-tabs-horizontal-a"),
 | 
			
		||||
		expectedAll  = $tw.wiki.getTiddler("expected-test-tabs-horizontal-all"),
 | 
			
		||||
		expectedVert = $tw.wiki.getTiddler("expected-test-tabs-vertical"),
 | 
			
		||||
		coreTabsTiddler = $tw.wiki.getTiddler("$:/core/macros/tabs");
 | 
			
		||||
 | 
			
		||||
	// Create a wiki
 | 
			
		||||
	var wiki = new $tw.Wiki();
 | 
			
		||||
	// Create a wiki with test tiddlers
 | 
			
		||||
 | 
			
		||||
	// 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"});
 | 
			
		||||
	$tw.wiki.addTiddler(new $tw.Tiddler({title: "TabOne",   text: "Text tab 1", caption:"t 1"},$tw.wiki.getModificationFields()));
 | 
			
		||||
	$tw.wiki.addTiddler(new $tw.Tiddler({title: "TabTwo",   text: "Text tab 2", caption:"t 2"},$tw.wiki.getModificationFields()));
 | 
			
		||||
	// TabThree shows description used in button-template instead of caption
 | 
			
		||||
	wiki.addTiddler({title: "TabThree", text: "Text tab 3", caption:"t 3", description:"desc"});
 | 
			
		||||
	$tw.wiki.addTiddler(new $tw.Tiddler({title: "TabThree", text: "Text tab 3", caption:"t 3", description:"desc"},$tw.wiki.getModificationFields()));
 | 
			
		||||
	// Tab Four has no caption field, so title will be used
 | 
			
		||||
	wiki.addTiddler({title: "TabFour",  text: "Text tab 4"}); 
 | 
			
		||||
	$tw.wiki.addTiddler(new $tw.Tiddler({title: "TabFour",  text: "Text tab 4"},$tw.wiki.getModificationFields()));
 | 
			
		||||
 | 
			
		||||
	// 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>'});
 | 
			
		||||
	$tw.wiki.addTiddler(new $tw.Tiddler({title: "body-template", "code-body":"yes",
 | 
			
		||||
						text: '!! <<currentTab>>\n\n<$transclude tiddler=<<currentTab>> mode="block"/>'},$tw.wiki.getModificationFields()));
 | 
			
		||||
	$tw.wiki.addTiddler(new $tw.Tiddler({title: "button-template", "code-body":"yes",
 | 
			
		||||
						text: '<$transclude tiddler=<<currentTab>> field="description"><$transclude tiddler=<<currentTab>> field="caption"><$macrocall $name="currentTab" $type="text/plain" $output="text/plain"/></$transclude></$transclude>'},$tw.wiki.getModificationFields()));
 | 
			
		||||
	// tabs macro cloned, to be used with \\import
 | 
			
		||||
	wiki.addTiddler({title: "tabs-macro-definition",  text: coreTabsTiddler.fields.text});
 | 
			
		||||
	$tw.wiki.addTiddler(new $tw.Tiddler({title: "tabs-macro-definition", "code-body":"yes", text: coreTabsTiddler.fields.text},$tw.wiki.getModificationFields()));
 | 
			
		||||
 | 
			
		||||
	// 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">>'});
 | 
			
		||||
	$tw.wiki.addTiddler(new $tw.Tiddler(
 | 
			
		||||
		{title: "test-tabs-horizontal",  text: '\\import [[tabs-macro-definition]]\n<<tabs "TabOne TabTwo TabThree TabFour" "TabTwo" "$:/state/test-tab-01">>'},
 | 
			
		||||
		$tw.wiki.getModificationFields())
 | 
			
		||||
	);
 | 
			
		||||
 | 
			
		||||
	// 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">>'});
 | 
			
		||||
	$tw.wiki.addTiddler(new $tw.Tiddler(
 | 
			
		||||
		{title: "test-tabs-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">>'},
 | 
			
		||||
		$tw.wiki.getModificationFields())
 | 
			
		||||
	);
 | 
			
		||||
 | 
			
		||||
	// 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">>'});
 | 
			
		||||
	$tw.wiki.addTiddler(new $tw.Tiddler(
 | 
			
		||||
		{title: "test-tabs-vertical",  text: '\\import [[tabs-macro-definition]]\n<<tabs "TabOne TabTwo TabThree TabFour" "TabTwo" "$:/state/test-tab-02" "tc-vertical">>'},
 | 
			
		||||
		$tw.wiki.getModificationFields())
 | 
			
		||||
	);
 | 
			
		||||
 | 
			
		||||
// End This code can be copy pasted into the browser console
 | 
			
		||||
 | 
			
		||||
	/* -----------------
 | 
			
		||||
	/ Run the tests
 | 
			
		||||
	--------------------*/
 | 
			
		||||
	// horizontal
 | 
			
		||||
/*
 | 
			
		||||
	xit("should render horizontal tabs v5.2.1", function() {
 | 
			
		||||
		expect(wiki.renderTiddler("text/html","test-tabs-macro-horizontal")).toBe(expected.fields.text);
 | 
			
		||||
	});
 | 
			
		||||
 | 
			
		||||
	xit("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
 | 
			
		||||
	xit("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
 | 
			
		||||
	it("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,""));
 | 
			
		||||
		expect($tw.wiki.renderTiddler("text/html","test-tabs-horizontal")).toBe(expected.fields.text.replace(/\n/g,""));
 | 
			
		||||
	});
 | 
			
		||||
 | 
			
		||||
	it("should render all '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,""));
 | 
			
		||||
		expect($tw.wiki.renderTiddler("text/html","test-tabs-horizontal-all")).toBe(expectedAll.fields.text.replace(/\n/g,""));
 | 
			
		||||
	});
 | 
			
		||||
 | 
			
		||||
	// vertical
 | 
			
		||||
	it("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,""));
 | 
			
		||||
		expect($tw.wiki.renderTiddler("text/html","test-tabs-vertical")).toBe(expectedVert.fields.text.replace(/\n/g,""));
 | 
			
		||||
	});
 | 
			
		||||
});
 | 
			
		||||
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user