Extended Guided Tour
Change-Id: I23f3701e0532cfdc1c2b415e959802ef076fad1a
diff --git a/dev/js/spec/matchSpec.js b/dev/js/spec/matchSpec.js
index f71ba56..a51fd78 100644
--- a/dev/js/spec/matchSpec.js
+++ b/dev/js/spec/matchSpec.js
@@ -260,17 +260,18 @@
var afterAllFunc = function () {
KorAP.API.getMatchInfo = undefined;
- // KorAP.annotationHelper = undefined;
+ KorAP.TreeMenu = undefined;
var body = document.body;
- for (var i in body.children) {
+ var i = body.children.length - 1;
+ while (i >= 0) {
if (body.children[i].nodeType && body.children[i].nodeType === 1) {
if (!body.children[i].classList.contains("jasmine_html-reporter")) {
body.removeChild(body.children[i]);
};
};
+ i--;
};
};
-
describe('KorAP.InfoLayer', function () {
beforeAll(beforeAllFunc);
@@ -404,10 +405,10 @@
expect(e.classList.contains('active')).toBe(false);
expect(e["_match"]).not.toBe(undefined);
-
+
// Open the match
m.open();
-
+
expect(e.classList.contains('active')).toBe(true);
expect(e["_match"]).not.toBe(undefined);
@@ -430,21 +431,20 @@
var relation = e.querySelector("p.ref > div.action.button-group > span:nth-of-type(3)");
expect(relation.getAttribute("class")).toEqual("tree");
expect(document.getElementsByClassName("button-group-list").length).toEqual(0);
-
expect(document.activeElement.tagName).toEqual("BODY");
-
+
// Show menu
relation.click();
expect(document.getElementsByClassName("button-group-list").length).toEqual(1);
-
expect(document.activeElement.tagName).toEqual("UL");
-
+
// Choose first tree
document.getElementsByClassName("button-group-list")[0].getElementsByTagName("li")[1].click();
expect(e.querySelector("div.matchinfo div.matchtree h6 span").innerText).toEqual("corenlp");
// This should blur the focus
expect(document.activeElement.tagName).toEqual("BODY");
+
});
});
diff --git a/dev/js/spec/tourSpec.js b/dev/js/spec/tourSpec.js
index 4bb71ef..e495be4 100644
--- a/dev/js/spec/tourSpec.js
+++ b/dev/js/spec/tourSpec.js
@@ -1,13 +1,11 @@
/**
- * Test suite for guided tour.
+ * Test suite for guided tour
*
* @author Helge Stallkamp
*/
-define(['tour/tours', 'vc', 'session'], function(tourClass, vcClass, sessionClass){
+define(['tour/tours', 'vc', 'session', 'match'], function(tourClass, vcClass, sessionClass, matchClass){
const loc = KorAP.Locale;
-
- //TODO Read this file from the file system, see https://korap.ids-mannheim.de/gerrit/#/c/KorAP/Kalamar/+/2241/
var introKorAP =
"<form autocomplete='off' action='/' id='searchform'>" +
"<div id='searchbar' class=''>" +
@@ -78,11 +76,320 @@
};
+ var resultkorap =
+ "<div id='search'>" +
+ "<ol class='align-left' tabindex='-8'>" +
+ "<li data-corpus-id='WPD' " +
+ "data-doc-id='WWW'" +
+ "data-text-id='03313'" +
+ "data-match-id='p102-103'" +
+ "data-available-info='base/s=spans corenlp/c=spans corenlp/ne=tokens corenlp/p=tokens corenlp/s=spans glemm/l=tokens mate/l=tokens mate/m=tokens mate/p=tokens opennlp/p=tokens opennlp/s=spans tt/l=tokens tt/p=tokens tt/s=spans xip/c=spans malt/d=rels'"+
+ "id='WPD-WWW.03313-p102-103'" +
+ "tabindex='6'>" +
+ "<div class='meta'>WPD/WWW/03313</div>" +
+ "<div class='match-main'>" +
+ "<div class='match-wrap'>" +
+ "<div class='snippet startMore endMore'>" +
+ "<div class='flag'></div>" +
+ "<span class='context-left'>In diesem Beispiel ist zu sehen, dass die beiden Variablen a und b lediglich ihre Werte an" +
+ " die Funktion </span><mark><mark class='class-2 level-1'>Dies </mark><mark class='class-1 level-0'><mark class='class-2 level-1'><mark class='class-3 level-2'>ist</mark>" +
+ " ein</mark> Test</mark></mark><span class='context-right'> übergeben, aber im Gegensatz zu einem Referenzparamter dabei unverändert bleiben.</span></div>" +
+ "</div>"+
+ "<!-- only inject via javascript! -->" +
+ "</div>" +
+ "<p class='ref'><strong>Wertparameter</strong> by Hubi,Zwobot,4; published on 2005-03-28 as WWW.03313 (WPD)</p>" +
+ "<!-- only inject via javascript! -->" +
+ "</li>" +
+ "</div>";
+
+
+
+ var snippet = "<span title=\"cnx/l:meist\">" +
+ " <span title=\"cnx/p:ADV\">" +
+ " <span title=\"cnx/syn:@PREMOD\">" +
+ " <span title=\"mate/l:meist\">" +
+ " <span title=\"mate/l:meist\">" +
+ " <span title=\"mate/p:ADV\">" +
+ " <span title=\"opennlp/p:ADV\">meist</span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ "</span>" +
+ "<mark>" +
+ "<span title=\"cnx/l:deutlich\">" +
+ " <span title=\"cnx/p:A\">" +
+ " <span title=\"cnx/syn:@PREMOD\">" +
+ " <span title=\"mate/l:deutlich\">" +
+ " <span title=\"mate/m:degree:pos\">" +
+ " <span title=\"mate/p:ADJD\">" +
+ " <span title=\"opennlp/p:ADJD\">deutlich</span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ "</span>" +
+ "</mark>" +
+ "<span title=\"cnx/l:fähig\">" +
+ " <span title=\"cnx/l:leistung\">" +
+ " <span title=\"cnx/p:A\">" +
+ " <span title=\"cnx/p:ADJA\">" +
+ " <span title=\"cnx/syn:@NH\">" +
+ " <span title=\"mate/l:leistungsfähig\">" +
+ " <span title=\"mate/m:degree:comp\">" +
+ " <span title=\"mate/p:ADJD\">" +
+ " <span title=\"opennlp/p:ADJD\">leistungsfähiger</span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ "</span>";
+
+ var treeSnippet =
+ "<span class=\"context-left\"></span>" +
+ "<span class=\"match\">" +
+ " <span title=\"xip/c:MC\">" +
+ " <span title=\"xip/c:TOP\">" +
+ " <span title=\"xip/c:PP\">" +
+ " <span title=\"xip/c:PREP\">Mit</span>" +
+ " <span title=\"xip/c:NP\">" +
+ " <span title=\"xip/c:DET\">dieser</span>" +
+ " <span title=\"xip/c:NPA\">" +
+ " <span title=\"xip/c:NOUN\">Methode</span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ " <span title=\"xip/c:VERB\">ist</span>" +
+ " <mark>" +
+ " <span title=\"xip/c:NP\">" +
+ " <span title=\"xip/c:PRON\">es</span>" +
+ " </span>" +
+ " <span title=\"xip/c:AP\">" +
+ " <span title=\"xip/c:ADV\">nun</span>" +
+ " <span title=\"xip/c:ADJ\">möglich</span>" +
+ " </span>" +
+ " </mark>" +
+ " <span title=\"xip/c:ADV\">z. B.</span>" +
+ " <span title=\"xip/c:NPA\">" +
+ " <span title=\"xip/c:NP\">" +
+ " <span title=\"xip/c:NOUN\">Voice</span>" +
+ " </span>" +
+ " </span>" + "(" +
+ " <span title=\"xip/c:INS\">" +
+ " <span title=\"xip/c:NPA\">" +
+ " <span title=\"xip/c:NP\">" +
+ " <span title=\"xip/c:NOUN\">Sprache</span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" + ")" +
+ " <span title=\"xip/c:VERB\">bevorzugt</span>" +
+ " <span title=\"xip/c:PP\">" +
+ " <span title=\"xip/c:PREP\">in</span>" +
+ " <span title=\"xip/c:NP\">" +
+ " <span title=\"xip/c:PRON\">der</span>" +
+ " </span>" +
+ " <span title=\"xip/c:NPA\">" +
+ " <span title=\"xip/c:NP\">" +
+ " <span title=\"xip/c:NOUN\">Bridge</span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ " <span title=\"xip/c:INFC\">" +
+ " <span title=\"xip/c:INS\">" +
+ " <span title=\"xip/c:VERB\">weiterzugeben</span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ " </span>" +
+ "</span>" +
+ "<span class=\"context-right\"></span>";
+
+ KorAP.API.getTextInfo = function (doc, param, cb) {
+ cb(textInfo);
+ };
+
+ // Override getMatchInfo API call
+ KorAP.API.getMatchInfo = function (x, param, cb) {
+ if (param['spans'] === undefined || param['spans'] === false)
+ cb({ "snippet": snippet });
+ else
+ cb({ "snippet": treeSnippet });
+ };
+
+ var textInfo = {
+ "@context":"http:\/\/korap.ids-mannheim.de\/ns\/KoralQuery\/v0.3\/context.jsonld",
+ "document":{
+ "@type":"koral:document",
+ "fields":[
+ {
+ "@type":"koral:field",
+ "key":"editor",
+ "type":"type:store",
+ "value":"wikipedia.org"
+ },
+ {
+ "@type":"koral:field",
+ "key":"textSigle",
+ "type":"type:string",
+ "value":"WPD15\/264\/58336"
+ },
+ {
+ "@type":"koral:field",
+ "key":"author",
+ "type":"type:text",
+ "value":"Sprachpfleger, u.a."
+ },
+ {
+ "@type":"koral:field",
+ "key":"docSigle",
+ "type":"type:string",
+ "value":"WPD15\/264"
+ },
+ {
+ "@type":"koral:field",
+ "key":"textTypeArt",
+ "type":"type:string",
+ "value":"Enzyklopädie-Artikel"
+ },
+ {
+ "@type":"koral:field",
+ "key":"language",
+ "type":"type:string",
+ "value":"de"
+ },
+ {
+ "@type":"koral:field",
+ "key":"docTitle",
+ "type":"type:text",
+ "value":"Wikipedia, Artikel mit Anfangszahl 2, Teil 64"
+ },
+ {
+ "@type":"koral:field",
+ "key":"textType",
+ "type":"type:string",
+ "value":"Enzyklopädie"
+ },
+ {
+ "@type":"koral:field",
+ "key":"availability",
+ "type":"type:string",
+ "value":"CC-BY-SA"
+ },
+ {
+ "@type":"koral:field",
+ "key":"foundries",
+ "type":"type:keywords",
+ "value":[
+ "corenlp",
+ "corenlp\/constituency",
+ "corenlp\/morpho",
+ "corenlp\/sentences",
+ "dereko",
+ "dereko\/structure",
+ "dereko\/structure\/base-sentences-paragraphs-pagebreaks",
+ "opennlp",
+ "opennlp\/morpho",
+ "opennlp\/sentences"
+ ]
+ },
+ {
+ "@type":"koral:field",
+ "key":"creationDate",
+ "type":"type:date",
+ "value":"2015-04-17"
+ },
+ {
+ "@type":"koral:field",
+ "key":"title",
+ "type":"type:text",
+ "value":"22:43 – Das Schicksal hat einen Plan"
+ },
+ {
+ "@type":"koral:field",
+ "key":"pubDate",
+ "type":"type:date",
+ "value":"2015-05-01"
+ },
+ {
+ "@type":"koral:field",
+ "key":"reference",
+ "type":"type:store",
+ "value":"22:43 – Das Schicksal hat einen Plan, In: Wikipedia - URL:http:\/\/de.wikipedia.org\/wiki\/22:43_–_Das_Schicksal_hat_einen_Plan: Wikipedia, 2015"
+ },
+ {
+ "@type":"koral:field",
+ "key":"textClass",
+ "type":"type:keywords",
+ "value":["kultur","film"]
+ },
+ {
+ "@type":"koral:field",
+ "key":"tokenSource",
+ "type":"type:store",
+ "value":"base#tokens"
+ },
+ {
+ "@type":"koral:field",
+ "key":"publisher",
+ "type":"type:store",
+ "value":"Wikipedia"
+ },
+ {
+ "@type":"koral:field",
+ "key":"layerInfos",
+ "type":"type:store",
+ "value":"corenlp\/c=spans corenlp\/p=tokens corenlp\/s=spans dereko\/s=spans opennlp\/p=tokens opennlp\/s=spans"
+ },
+ {
+ "@type":"koral:field",
+ "key":"pubPlace",
+ "type":"type:string",
+ "value":"URL:http:\/\/de.wikipedia.org"
+ },
+ {
+ "@type":"koral:field",
+ "key":"corpusTitle",
+ "type":"type:text",
+ "value":"Wikipedia"
+ },
+ {
+ "@type":"koral:field",
+ "key":"corpusEditor",
+ "type":"type:store",
+ "value":"wikipedia.org"
+ },
+ {
+ "@type":"koral:field",
+ "key":"corpusSigle",
+ "type":"type:string",
+ "value":"WPD15"
+ }
+ ]
+ }
+ };
let template = document.createElement('template');
let html = introKorAP.trim(); // Do not return a text node of whitespace as the result
template.innerHTML = html;
let intrkorap = template.content;
+ let resulttemplate = document.createElement('template');
+ let htmlZwei = resultkorap.trim();
+ resulttemplate.innerHTML = resultkorap;
+ var resultkor = resulttemplate.content;
+
+ resultkor.querySelector('#search > ol > li:not(.active)').addEventListener('click', function (e) {
+ if (this._match !== undefined)
+ this._match.open();
+ else {
+ matchClass.create(this).open();
+ }
+ });
+
let vc= vcClass.create().fromJson({
'@type' : 'koral:doc',
'key' : 'title',
@@ -92,10 +399,25 @@
});
KorAP.vc = vc;
- //TODO Add hint and vc-choose, they are not part of the generated file
-
+
describe('KorAP.GuidedTour', function(){
+
+ afterAll(function () {
+ KorAP.API.getMatchInfo = undefined;
+ var body = document.body;
+ var i = body.children.length - 1;
+ while (i >= 0) {
+ if (body.children[i].nodeType && body.children[i].nodeType === 1) {
+ if (!body.children[i].classList.contains("jasmine_html-reporter")) {
+ body.removeChild(body.children[i]);
+ };
+ };
+ i--;
+ };
+ })
+
it('IDs and classes, that are needed for the guided tour should be in existence', function(){
+ //gTstartSearch
expect(intrkorap.querySelector('#searchbar')).not.toBeNull();
expect(intrkorap.querySelector('#q-field')).not.toBeNull();
expect(intrkorap.querySelector('#hint')).not.toBeNull();
@@ -111,12 +433,20 @@
expect(statbut).not.toBeNull();
statbut.click();
expect(show.querySelector('.stattable')).not.toBeNull();
+ //IDs and classes, that are needed for the second guided tour(gTshowResults()) should be in existence, too
+ expect(resultkor.querySelector('#search')).not.toBeNull();
+ expect(resultkor.querySelector('#search > ol > li')).not.toBeNull();
+ resultkor.querySelector("#search > ol > li").click();
+ expect(resultkor.querySelector('.action > .metatable')).not.toBeNull();
+ resultkor.querySelector(".metatable").click();
+ expect(resultkor.querySelector('.view.metatable')).not.toBeNull();
+ expect(resultkor.querySelector('.action > .info')).not.toBeNull();
+ resultkor.querySelector(".info").click();
+ expect(resultkor.querySelector('.view.tokentable')).not.toBeNull();
+ expect(resultkor.querySelector('.tree')).not.toBeNull();
});
-
-
-
+
it('Guided Tour should be started and display steps and labels in the right order', function(){
-
let vcpanel = intrkorap.getElementById("vc-view");
vcpanel.appendChild(vc.element());
let searchTour = tourClass.gTstartSearch(intrkorap);
@@ -140,14 +470,24 @@
searchTour.exit();
}
- let resultTour = tourClass.gTshowResults(intrkorap);
+ let resultTour = tourClass.gTshowResults(resultkor);
KorAP.session = sessionClass.create('KalamarJSDem');
- resultTour.start();
- expect(document.querySelector(".introjs-tooltiptext").textContent).toEqual(loc.TOUR_result);
- expect(document.querySelector(".introjs-donebutton").textContent).toEqual(loc.TOUR_ldone);
+ resultTour.start(resultkor);
+ let totalStepsR = resultTour.stepCount;
+ expect(document.querySelector(".introjs-tooltiptext").textContent).toEqual(loc.TOUR_kwic);
+ expect(document.querySelector(".introjs-skipbutton").textContent).toEqual(loc.TOUR_lskip);
+ expect(document.querySelector(".introjs-prevbutton").textContent).toEqual(loc.TOUR_lprev);
+ expect(document.querySelector(".introjs-nextbutton").textContent).toEqual(loc.TOUR_lnext);
resultTour.exit();
-
- });
+
+ for(let i = 2; i <= totalStepsR; i++){
+ resultTour.goToStepNumber(i);
+ expect(document.querySelector(".introjs-tooltiptext").textContent).toEqual(resultTour.testIntros[i-1]);
+ if(i == totalStepsR){
+ expect(document.querySelector(".introjs-donebutton").textContent).toEqual(loc.TOUR_ldone);
+ }
+ resultTour.exit();
+ }
+ });
});
-}
-);
+});