Merge pull request #1605 from NatLibFi/issue1598-cypress-tests-partia…

…l-page-load Add Cypress tests for partial page load
NatLibFi · Mar 13, 2024 · f22c504 · f22c504
2 parents dbbd71e + a7150b7
commit f22c504
Show file tree

Hide file tree

Showing 12 changed files with 212 additions and 109 deletions.
diff --git a/resource/js/concept-mappings.js b/resource/js/concept-mappings.js
@@ -1,5 +1,4 @@
 /* global Vue */
-/* global SKOSMOS */
 
 const conceptMappingsApp = Vue.createApp({
   data () {
@@ -8,11 +7,11 @@ const conceptMappingsApp = Vue.createApp({
     }
   },
   provide: {
-    content_lang: SKOSMOS.content_lang
+    content_lang: window.SKOSMOS.content_lang
   },
   methods: {
     loadMappings () {
-      fetch('rest/v1/' + SKOSMOS.vocab + '/mappings?uri=' + SKOSMOS.uri + '&external=true&clang=' + SKOSMOS.lang + '&lang=' + SKOSMOS.content_lang)
+      fetch('rest/v1/' + window.SKOSMOS.vocab + '/mappings?uri=' + window.SKOSMOS.uri + '&external=true&clang=' + window.SKOSMOS.lang + '&lang=' + window.SKOSMOS.content_lang)
         .then(data => {
           return data.json()
         })
@@ -31,8 +30,8 @@ const conceptMappingsApp = Vue.createApp({
   },
   mounted () {
     // Only load mappings when on the concept page
-    // SKOSMOS variable should maybe have a separate property for current page
-    if (SKOSMOS.uri) {
+    // window.SKOSMOS variable should maybe have a separate property for current page
+    if (window.SKOSMOS.uri) {
       this.loadMappings()
     }
   },

diff --git a/resource/js/get-concept-url.js b/resource/js/get-concept-url.js
@@ -1,13 +1,11 @@
-/* global SKOSMOS */
-
 /* eslint-disable no-unused-vars */
 const getConceptURL = (uri) => {
-  const clangParam = (SKOSMOS.content_lang !== SKOSMOS.lang) ? 'clang=' + SKOSMOS.content_lang : ''
+  const clangParam = (window.SKOSMOS.content_lang !== window.SKOSMOS.lang) ? 'clang=' + window.SKOSMOS.content_lang : ''
   let clangSeparator = '?'
   let page = ''
 
-  if (uri.indexOf(SKOSMOS.uriSpace) !== -1) {
-    page = uri.substr(SKOSMOS.uriSpace.length)
+  if (uri.indexOf(window.SKOSMOS.uriSpace) !== -1) {
+    page = uri.substr(window.SKOSMOS.uriSpace.length)
 
     if (/[^a-zA-Z0-9-_.~]/.test(page) || page.indexOf('/') > -1) {
       // contains special characters or contains an additional '/' - fall back to full URI
@@ -20,6 +18,6 @@ const getConceptURL = (uri) => {
     clangSeparator = '&'
   }
 
-  return SKOSMOS.vocab + '/' + SKOSMOS.lang + '/page/' + page + (clangParam !== '' ? clangSeparator + clangParam : '')
+  return window.SKOSMOS.vocab + '/' + window.SKOSMOS.lang + '/page/' + page + (clangParam !== '' ? clangSeparator + clangParam : '')
 }
 /* eslint-disable no-unused-vars */
diff --git a/resource/js/partial-page-load.js b/resource/js/partial-page-load.js
@@ -1,5 +1,3 @@
-/* global SKOSMOS */
-
 const updateMainContent = (conceptHTML) => {
   // concept card
   const conceptMainContent = conceptHTML.querySelectorAll('#main-content > :not(#concept-mappings)') // all elements from concept card except concept mappings
@@ -39,14 +37,14 @@ const updateJsonLD = (conceptHTML) => {
 }
 
 const updateSKOSMOS = (conceptHTML) => {
-  // new SKOSMOS object from concept page
+  // new window.SKOSMOS object from concept page
   const skosmosScript = conceptHTML.querySelector('#skosmos-global-vars').innerHTML
   const skosmosObject = skosmosScript.slice(skosmosScript.indexOf('{'))
   const newSKOSMOS = JSON.parse(skosmosObject)
 
-  // replacing all values in the old SKOSMOS object with new ones
+  // replacing all values in the old window.SKOSMOS object with new ones
   for (const i in newSKOSMOS) {
-    SKOSMOS[i] = newSKOSMOS[i]
+    window.SKOSMOS[i] = newSKOSMOS[i]
   }
 }
 

diff --git a/resource/js/tab-alpha.js b/resource/js/tab-alpha.js
@@ -1,5 +1,4 @@
 /* global Vue */
-/* global SKOSMOS */
 /* global partialPageLoad, getConceptURL */
 
 const tabAlphaApp = Vue.createApp({
@@ -27,7 +26,7 @@ const tabAlphaApp = Vue.createApp({
   methods: {
     handleClickAlphabeticalEvent () {
       // only load index the first time the page is opened or if selected concept has changed
-      if (this.indexLetters.length === 0 || this.selectedConcept !== SKOSMOS.uri) {
+      if (this.indexLetters.length === 0 || this.selectedConcept !== window.SKOSMOS.uri) {
         this.selectedConcept = ''
         this.indexLetters = []
         this.indexConcepts = []
@@ -36,7 +35,7 @@ const tabAlphaApp = Vue.createApp({
     },
     loadLetters () {
       this.loadingLetters = true
-      fetch('rest/v1/' + SKOSMOS.vocab + '/index/?lang=' + SKOSMOS.lang)
+      fetch('rest/v1/' + window.SKOSMOS.vocab + '/index/?lang=' + window.SKOSMOS.lang)
         .then(data => {
           return data.json()
         })
@@ -48,7 +47,7 @@ const tabAlphaApp = Vue.createApp({
     },
     loadConcepts (letter) {
       this.loadingConcepts = true
-      fetch('rest/v1/' + SKOSMOS.vocab + '/index/' + letter + '?lang=' + SKOSMOS.lang + '&limit=50')
+      fetch('rest/v1/' + window.SKOSMOS.vocab + '/index/' + letter + '?lang=' + window.SKOSMOS.lang + '&limit=50')
         .then(data => {
           return data.json()
         })

diff --git a/resource/js/tab-hierarchy.js b/resource/js/tab-hierarchy.js
@@ -1,5 +1,4 @@
 /* global Vue */
-/* global SKOSMOS */
 /* global partialPageLoad, getConceptURL */
 
 const tabHierApp = Vue.createApp({
@@ -31,15 +30,15 @@ const tabHierApp = Vue.createApp({
     },
     loadHierarchy () {
       // if we are on a concept page, load hierarchy for the concept, otherwise load top concepts
-      if (SKOSMOS.uri) {
+      if (window.SKOSMOS.uri) {
         this.loadConceptHierarchy()
       } else {
         this.loadTopConcepts()
       }
     },
     loadTopConcepts () {
       this.loading = true
-      fetch('rest/v1/' + SKOSMOS.vocab + '/topConcepts/?lang=' + SKOSMOS.lang)
+      fetch('rest/v1/' + window.SKOSMOS.vocab + '/topConcepts/?lang=' + window.SKOSMOS.lang)
         .then(data => {
           return data.json()
         })
@@ -58,7 +57,7 @@ const tabHierApp = Vue.createApp({
     },
     loadConceptHierarchy () {
       this.loading = true
-      fetch('rest/v1/' + SKOSMOS.vocab + '/hierarchy/?uri=' + SKOSMOS.uri + '&lang=' + SKOSMOS.lang)
+      fetch('rest/v1/' + window.SKOSMOS.vocab + '/hierarchy/?uri=' + window.SKOSMOS.uri + '&lang=' + window.SKOSMOS.lang)
         .then(data => {
           return data.json()
         })
@@ -122,14 +121,14 @@ const tabHierApp = Vue.createApp({
           }
 
           this.loading = false
-          this.selectedConcept = SKOSMOS.uri
+          this.selectedConcept = window.SKOSMOS.uri
           console.log(this.hierarchy)
         })
     },
     loadChildren (concept) {
       // load children only if concept has children but they have not been loaded yet
       if (concept.children.length === 0 && concept.hasChildren) {
-        fetch('rest/v1/' + SKOSMOS.vocab + '/children?uri=' + concept.uri + '&lang=' + SKOSMOS.lang)
+        fetch('rest/v1/' + window.SKOSMOS.vocab + '/children?uri=' + concept.uri + '&lang=' + window.SKOSMOS.lang)
           .then(data => {
             return data.json()
           })

diff --git a/resource/js/term-counts.js b/resource/js/term-counts.js
@@ -1,5 +1,4 @@
 /* global Vue */
-/* global SKOSMOS */
 
 const termCountsApp = Vue.createApp({
   data () {
@@ -8,7 +7,7 @@ const termCountsApp = Vue.createApp({
     }
   },
   mounted () {
-    fetch('rest/v1/' + SKOSMOS.vocab + '/labelStatistics?lang=' + SKOSMOS.lang)
+    fetch('rest/v1/' + window.SKOSMOS.vocab + '/labelStatistics?lang=' + window.SKOSMOS.lang)
       .then(data => {
         return data.json()
       })

diff --git a/resource/js/vocab-counts.js b/resource/js/vocab-counts.js
@@ -1,5 +1,4 @@
 /* global Vue */
-/* global SKOSMOS */
 
 const resourceCountsApp = Vue.createApp({
   data () {
@@ -10,7 +9,7 @@ const resourceCountsApp = Vue.createApp({
     }
   },
   mounted () {
-    fetch('rest/v1/' + SKOSMOS.vocab + '/vocabularyStatistics?lang=' + SKOSMOS.lang)
+    fetch('rest/v1/' + window.SKOSMOS.vocab + '/vocabularyStatistics?lang=' + window.SKOSMOS.lang)
       .then(data => {
         return data.json()
       })

diff --git a/resource/js/vocab-search.js b/resource/js/vocab-search.js
@@ -1,5 +1,4 @@
 /* global Vue */
-/* global SKOSMOS */
 
 const vocabSearch = Vue.createApp({
   data () {
@@ -12,9 +11,9 @@ const vocabSearch = Vue.createApp({
     }
   },
   mounted () {
-    this.languages = SKOSMOS.languageOrder
-    this.selectedLanguage = SKOSMOS.content_lang
-    this.languageStrings = SKOSMOS.language_strings[SKOSMOS.lang]
+    this.languages = window.SKOSMOS.languageOrder
+    this.selectedLanguage = window.SKOSMOS.content_lang
+    this.languageStrings = window.SKOSMOS.language_strings[window.SKOSMOS.lang]
   },
   methods: {
     autoComplete () {
@@ -23,15 +22,15 @@ const vocabSearch = Vue.createApp({
     gotoSearchPage () {
       if (!this.searchTerm) return
 
-      const currentVocab = SKOSMOS.vocab + '/' + SKOSMOS.lang + '/'
-      const vocabHref = window.location.href.substring(0, window.location.href.lastIndexOf(SKOSMOS.vocab)) + currentVocab
-      let langParam = '&clang=' + SKOSMOS.content_lang
+      const currentVocab = window.SKOSMOS.vocab + '/' + window.SKOSMOS.lang + '/'
+      const vocabHref = window.location.href.substring(0, window.location.href.lastIndexOf(window.SKOSMOS.vocab)) + currentVocab
+      let langParam = '&clang=' + window.SKOSMOS.content_lang
       if (this.selectedLanguage === 'all') langParam += '&anylang=on'
       const searchUrl = vocabHref + 'search?q=' + this.searchTerm + langParam
       window.location.href = searchUrl
     },
     changeLang () {
-      SKOSMOS.content_lang = this.selectedLanguage
+      window.SKOSMOS.content_lang = this.selectedLanguage
       // TODO: Impelemnt partial page load to change content according to the new content language
     }
   },

diff --git a/src/view/scripts.inc b/src/view/scripts.inc
@@ -1,7 +1,7 @@
 <!-- Skosmos variables passed from the backend to the frontend code-->
 <!-- NB: Do not add comments inside the JS object as it would break JSON parsing -->
 <script id="skosmos-global-vars">
-const SKOSMOS = {
+window.SKOSMOS = {
   "content_lang": "{{ request.contentLang }}",
   "explicitLangCodes": {{ explicit_langcodes ? "true" : "false" }},
   "lang": "{{ request.lang }}",