Test existence of #hint and #vc-choose
Change-Id: I14ab1ba3d3e33d5dfa7f83d77f073734cee5cd92
diff --git a/dev/js/spec/tourSpec.js b/dev/js/spec/tourSpec.js
index 5e4dca6..b4d7ebb 100644
--- a/dev/js/spec/tourSpec.js
+++ b/dev/js/spec/tourSpec.js
@@ -8,40 +8,74 @@
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'>" +
- "<input autocapitalize='off' autocomplete='off ' autocorrect='off' autofocus='autofocus' id='q-field' name='q' placeholder='Find ...' spellcheck='false' type='search'>" +
- "<button type='submit' title='Go!'><span>Go!</span></button>" +
- "</div>"+
- "<!-- Search in the following virtual collection -->"+
- "<div id='vc-view'></div>" +
- "in" +
- "<input id='collection' name='collection' type='text'>" +
- "with" +
- "<span class='select'>" +
- "<select id='ql-field' name='ql'><option value='poliqarp'>Poliqarp</option><option value='cosmas2'>Cosmas II</option><option value='annis'>Annis QL</option><option value='cql'>CQL v1.2</option><option value='fcsql'>FCSQL</option></select>" +
- "</span>" +
- "<div class='button right'>" +
- "<input checked class='checkbox' id='q-cutoff-field' name='cutoff' type='checkbox' value='1'>"+
- "<label for='q-cutoff-field' title='Just show the first matches in arbitrary order'><span id='glimpse'></span>Glimpse</label>" +
- "<a class='tutorial' href='/doc' id='view-tutorial' tabindex='-1' title='Tutorial'><span>Tutorial</span></a>" +
- "</div>" +
- "<div class='clear'></div>" +
- "</form>";
+ var introKorAP =
+ "<form autocomplete='off' action='/' id='searchform'>" +
+ "<div id='searchbar' class=''>" +
+ "<input autocapitalize='off' autocomplete='off' autocorrect='off' autofocus='autofocus' id='q-field' name='q' placeholder='Finde ...' spellcheck='false' type='search'>" +
+ "<button type='submit' title='Los!'><span>Los!</span></button>" +
+ "</div>" +
+ "<!-- Search in the following virtual collection -->"+
+ "<div id='vc-view'></div>" +
+ "in" +
+ "<span id='vc-choose' class='select'><span>allen Korpora</span></span>" +
+ "<input id='collection' name='collection' type='text' style='display: none;'>" +
+ "mit" +
+ "<span class='select'>" +
+ "<select id='ql-field' name='ql' style='display: none;'>" +
+ "<option value='poliqarp'>Poliqarp</option>" +
+ "<option value='cosmas2'>Cosmas II</option>" +
+ "<option value='annis'>Annis QL</option>" +
+ "<option value='cql'>CQL v1.2</option>" +
+ "<option value='fcsql'>FCSQL</option>" +
+ "</select>" +
+ "<span style='display: inline;'> Poliqarp</span>" +
+ "<ul style='outline: currentcolor none 0px;' tabindex='0' class='menu roll'>" +
+ "<span class='pref'></span>" +
+ "<div class='lengthField'>" +
+ "<span>Poliqarp--</span>" +
+ "<span>Cosmas II--</span>" +
+ "<span>Annis QL--</span>" +
+ "<span>CQL v1.2--</span>" +
+ "<span>FCSQL--</span>" +
+ "</div><div class='ruler' style='display: none;'><span></span><div></div>" +
+ "</div>" +
+ "</ul>" +
+ "</span>" +
+ "<div class='button right'>" +
+ "<input checked='' class='checkbox' id='q-cutoff-field' name='cutoff' type='checkbox' value='1'>" +
+ "<label for='q-cutoff-field' title='Zeige nur die ersten Treffer in beliebiger Reihenfolge'><span id='glimpse'></span>Glimpse</label>" +
+ "<a class='tutorial' id='view-tutorial' tabindex='-1' title='Einführung'><span>Einführung</span></a>"+
+ "</div>" +
+ "<div class='clear'></div>"+
+ "</form>" +
+ "<div class='hint mirror' style='height: 0px; left: 238px; top: 36px; width: 1272px; padding-left: 2px; margin-left: 0px; border-left-width: 2px; border-left-style: solid; font-size: 14.6667px; font-family: Noto Sans;'>" +
+ "<span></span>" +
+ "<div id='hint' class=''>" +
+ "<div style='display: none;' class='alert hint'></div>" +
+ "<ul style='outline: currentcolor none 0px;' tabindex='0' class='menu roll hint'>" +
+ "<span class='pref'></span>" +
+ "<div class='lengthField'>" +
+ "<span>Base Annotation--</span>" +
+ "<span class='desc'>Structure--</span>" +
+ "<span>DeReKo--</span><span class='desc'>Structure--</span>"+
+ "</div>"
+ "<div class='ruler' style='display: none;'><span></span><div></div></div>"
+ "</ul>" +
+ "</div>" +
+ "</div>";
let template = document.createElement('template');
- html = introKorAP.trim(); // Do not return a text node of whitespace as the result
+ html = introKorAP2.trim(); // Do not return a text node of whitespace as the result
template.innerHTML = html;
- intrkorap = template.content.firstChild;
-
+ intrkorap = template.content;
//TODO Add hint and vc-choose, they are not part of the generated file
describe('KorAP.GuidedTour', function(){
it('IDs and classes, that are needed for the guided tour should be in existence', function(){
expect(intrkorap.querySelector('#searchbar')).not.toBeNull();
expect(intrkorap.querySelector('#q-field')).not.toBeNull();
- //expect(intrkorap.querySelector('#hint')).not.toBeNull();
- //expect(intrkorap.querySelector('#vc-choose')).not.toBeNull();
+ expect(intrkorap.querySelector('#hint')).not.toBeNull();
+ expect(intrkorap.querySelector('#vc-choose')).not.toBeNull();
expect(intrkorap.querySelector('#vc-view')).not.toBeNull();
expect(intrkorap.querySelector('#ql-field').parentNode).not.toBeNull();
expect(intrkorap.querySelector('#glimpse')).not.toBeNull();
@@ -50,6 +84,7 @@
});
+
it('Guided Tour should be started and display steps and labels in the right order', function(){
let testTour = tourClass.guidedTour(intrkorap);
testTour.start();
@@ -66,7 +101,7 @@
expect(document.querySelector(".introjs-tooltiptext").textContent).toEqual(testTour.testIntros[i-1]);
if(i == totalSteps){
expect(document.querySelector('.introjs-donebutton').textContent).toEqual(loc.TOUR_ldone);
- }
+ }
testTour.exit();
}
});