From eec73596e2a0d82cf5e7b397cf17aac210dfdde6 Mon Sep 17 00:00:00 2001
From: Roman Kalyakin <roman@kalyakin.com>
Date: Thu, 27 Jun 2024 13:13:38 +0200
Subject: [PATCH] [chore] Added some test IDs on the search page and some fixes
 (#1239)

* removed cypress related items

* added test ids to some search page elements

* removed visibility observer which was interfering with HMR

* added test-ids and fixes while adding end to end tests
---
 .eslintrc.cjs                                 |   7 +-
 .prettierrc.json                              |   3 +-
 package-lock.json                             | 576 ++++++++++++++----
 package.json                                  |   6 +-
 src/components/Autocomplete.vue               | 238 ++++----
 src/components/SearchPills.vue                |  30 +-
 src/components/layout/Dropdown.vue            |  14 +-
 src/components/legacy/bootstrap/BButton.vue   |  11 +-
 .../legacy/bootstrap/BFormCheckbox.vue        |  14 +-
 .../legacy/bootstrap/BFormInput.vue           |   7 +-
 src/components/modules/FilterDynamicRange.vue |  47 +-
 src/components/modules/FilterFacet.vue        | 114 +---
 src/components/modules/FilterFacetBucket.vue  |   2 +-
 src/components/modules/FilterRange.vue        |  20 +-
 src/components/modules/FilterTimeline.vue     |  61 +-
 .../modules/SearchResultsListItem.vue         |   3 +-
 src/components/modules/Timeline.vue           |  20 +-
 src/components/modules/lists/ArticleItem.vue  |  73 +--
 .../modules/vis/HistogramSlider.vue           |  31 +-
 .../LazyOpenSeadragonArticlePageViewer.vue    |  35 +-
 src/main.ts                                   |   6 +-
 src/pages/Search.vue                          | 220 ++-----
 src/stores/autocomplete.ts                    |   2 +-
 src/stores/user.ts                            |  88 +--
 tsconfig.node.json                            |   8 +-
 25 files changed, 896 insertions(+), 740 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 314dcde7e..f44bee540 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -10,12 +10,7 @@ module.exports = {
     '@vue/eslint-config-prettier/skip-formatting',
     'plugin:storybook/recommended'
   ],
-  overrides: [
-    {
-      files: ['cypress/e2e/**/*.{cy,spec}.{js,ts,jsx,tsx}', 'cypress/support/**/*.{js,ts,jsx,tsx}'],
-      extends: ['plugin:cypress/recommended']
-    }
-  ],
+  overrides: [],
   parserOptions: {
     ecmaVersion: 'latest'
   },
diff --git a/.prettierrc.json b/.prettierrc.json
index ecdf3e07a..55571605e 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -4,5 +4,6 @@
   "tabWidth": 2,
   "singleQuote": true,
   "printWidth": 100,
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "arrowParens": "avoid"
 }
diff --git a/package-lock.json b/package-lock.json
index d8c59e0f8..bcba87a66 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32,13 +32,12 @@
         "socket.io-client": "4.7.5",
         "svg-overlay": "github:openseadragon/svg-overlay",
         "uuid": "9.0.1",
-        "vue": "3.4.27",
+        "vue": "3.4.30",
         "vue-3-slider-component": "1.0.0",
         "vue-flatpickr-component": "11.0.5",
         "vue-i18n": "9.13.1",
         "vue-matomo": "^4.2.0",
         "vue-router": "4.3.2",
-        "vue3-observe-visibility": "^1.0.1",
         "webfontloader": "1.6.28"
       },
       "devDependencies": {
@@ -67,7 +66,6 @@
         "@vue/tsconfig": "^0.5.1",
         "autoprefixer": "10.4.19",
         "eslint": "^8.57.0",
-        "eslint-plugin-cypress": "^2.15.1",
         "eslint-plugin-storybook": "^0.8.0",
         "eslint-plugin-vue": "^9.23.0",
         "jsdom": "^24.0.0",
@@ -81,7 +79,7 @@
         "storybook": "^8.1.8",
         "storybook-vue3-router": "^5.0.0",
         "typescript": "~5.4.0",
-        "vite": "^5.2.8",
+        "vite": "^5.3.1",
         "vite-plugin-vue-devtools": "7.3.0-beta.2",
         "vitest": "^1.4.0",
         "vue-component-type-helpers": "^2.0.21",
@@ -7759,36 +7757,36 @@
       }
     },
     "node_modules/@vue/compiler-core": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.27.tgz",
-      "integrity": "sha512-E+RyqY24KnyDXsCuQrI+mlcdW3ALND6U7Gqa/+bVwbcpcR3BRRIckFoz7Qyd4TTlnugtwuI7YgjbvsLmxb+yvg==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.30.tgz",
+      "integrity": "sha512-ZL8y4Xxdh8O6PSwfdZ1IpQ24PjTAieOz3jXb/MDTfDtANcKBMxg1KLm6OX2jofsaQGYfIVzd3BAG22i56/cF1w==",
       "dependencies": {
-        "@babel/parser": "^7.24.4",
-        "@vue/shared": "3.4.27",
+        "@babel/parser": "^7.24.7",
+        "@vue/shared": "3.4.30",
         "entities": "^4.5.0",
         "estree-walker": "^2.0.2",
         "source-map-js": "^1.2.0"
       }
     },
     "node_modules/@vue/compiler-dom": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.27.tgz",
-      "integrity": "sha512-kUTvochG/oVgE1w5ViSr3KUBh9X7CWirebA3bezTbB5ZKBQZwR2Mwj9uoSKRMFcz4gSMzzLXBPD6KpCLb9nvWw==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.30.tgz",
+      "integrity": "sha512-+16Sd8lYr5j/owCbr9dowcNfrHd+pz+w2/b5Lt26Oz/kB90C9yNbxQ3bYOvt7rI2bxk0nqda39hVcwDFw85c2Q==",
       "dependencies": {
-        "@vue/compiler-core": "3.4.27",
-        "@vue/shared": "3.4.27"
+        "@vue/compiler-core": "3.4.30",
+        "@vue/shared": "3.4.30"
       }
     },
     "node_modules/@vue/compiler-sfc": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.27.tgz",
-      "integrity": "sha512-nDwntUEADssW8e0rrmE0+OrONwmRlegDA1pD6QhVeXxjIytV03yDqTey9SBDiALsvAd5U4ZrEKbMyVXhX6mCGA==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.30.tgz",
+      "integrity": "sha512-8vElKklHn/UY8+FgUFlQrYAPbtiSB2zcgeRKW7HkpSRn/JjMRmZvuOtwDx036D1aqKNSTtXkWRfqx53Qb+HmMg==",
       "dependencies": {
-        "@babel/parser": "^7.24.4",
-        "@vue/compiler-core": "3.4.27",
-        "@vue/compiler-dom": "3.4.27",
-        "@vue/compiler-ssr": "3.4.27",
-        "@vue/shared": "3.4.27",
+        "@babel/parser": "^7.24.7",
+        "@vue/compiler-core": "3.4.30",
+        "@vue/compiler-dom": "3.4.30",
+        "@vue/compiler-ssr": "3.4.30",
+        "@vue/shared": "3.4.30",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.30.10",
         "postcss": "^8.4.38",
@@ -7796,12 +7794,12 @@
       }
     },
     "node_modules/@vue/compiler-ssr": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.27.tgz",
-      "integrity": "sha512-CVRzSJIltzMG5FcidsW0jKNQnNRYC8bT21VegyMMtHmhW3UOI7knmUehzswXLrExDLE6lQCZdrhD4ogI7c+vuw==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.30.tgz",
+      "integrity": "sha512-ZJ56YZGXJDd6jky4mmM0rNaNP6kIbQu9LTKZDhcpddGe/3QIalB1WHHmZ6iZfFNyj5mSypTa4+qDJa5VIuxMSg==",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.27",
-        "@vue/shared": "3.4.27"
+        "@vue/compiler-dom": "3.4.30",
+        "@vue/shared": "3.4.30"
       }
     },
     "node_modules/@vue/devtools-api": {
@@ -7912,48 +7910,49 @@
       }
     },
     "node_modules/@vue/reactivity": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.27.tgz",
-      "integrity": "sha512-kK0g4NknW6JX2yySLpsm2jlunZJl2/RJGZ0H9ddHdfBVHcNzxmQ0sS0b09ipmBoQpY8JM2KmUw+a6sO8Zo+zIA==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.30.tgz",
+      "integrity": "sha512-bVJurnCe3LS0JII8PPoAA63Zd2MBzcKrEzwdQl92eHCcxtIbxD2fhNwJpa+KkM3Y/A4T5FUnmdhgKwOf6BfbcA==",
       "dependencies": {
-        "@vue/shared": "3.4.27"
+        "@vue/shared": "3.4.30"
       }
     },
     "node_modules/@vue/runtime-core": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.27.tgz",
-      "integrity": "sha512-7aYA9GEbOOdviqVvcuweTLe5Za4qBZkUY7SvET6vE8kyypxVgaT1ixHLg4urtOlrApdgcdgHoTZCUuTGap/5WA==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.30.tgz",
+      "integrity": "sha512-qaFEbnNpGz+tlnkaualomogzN8vBLkgzK55uuWjYXbYn039eOBZrWxyXWq/7qh9Bz2FPifZqGjVDl/FXiq9L2g==",
       "dependencies": {
-        "@vue/reactivity": "3.4.27",
-        "@vue/shared": "3.4.27"
+        "@vue/reactivity": "3.4.30",
+        "@vue/shared": "3.4.30"
       }
     },
     "node_modules/@vue/runtime-dom": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.27.tgz",
-      "integrity": "sha512-ScOmP70/3NPM+TW9hvVAz6VWWtZJqkbdf7w6ySsws+EsqtHvkhxaWLecrTorFxsawelM5Ys9FnDEMt6BPBDS0Q==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.30.tgz",
+      "integrity": "sha512-tV6B4YiZRj5QsaJgw2THCy5C1H+2UeywO9tqgWEc21tn85qHEERndHN/CxlyXvSBFrpmlexCIdnqPuR9RM9thw==",
       "dependencies": {
-        "@vue/runtime-core": "3.4.27",
-        "@vue/shared": "3.4.27",
+        "@vue/reactivity": "3.4.30",
+        "@vue/runtime-core": "3.4.30",
+        "@vue/shared": "3.4.30",
         "csstype": "^3.1.3"
       }
     },
     "node_modules/@vue/server-renderer": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.27.tgz",
-      "integrity": "sha512-dlAMEuvmeA3rJsOMJ2J1kXU7o7pOxgsNHVr9K8hB3ImIkSuBrIdy0vF66h8gf8Tuinf1TK3mPAz2+2sqyf3KzA==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.30.tgz",
+      "integrity": "sha512-TBD3eqR1DeDc0cMrXS/vEs/PWzq1uXxnvjoqQuDGFIEHFIwuDTX/KWAQKIBjyMWLFHEeTDGYVsYci85z2UbTDg==",
       "dependencies": {
-        "@vue/compiler-ssr": "3.4.27",
-        "@vue/shared": "3.4.27"
+        "@vue/compiler-ssr": "3.4.30",
+        "@vue/shared": "3.4.30"
       },
       "peerDependencies": {
-        "vue": "3.4.27"
+        "vue": "3.4.30"
       }
     },
     "node_modules/@vue/shared": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.27.tgz",
-      "integrity": "sha512-DL3NmY2OFlqmYYrzp39yi3LDkKxa5vZVwxWdQ3rG0ekuWscHraeIbnI8t+aZK7qhYqEqWKTUdijadunb9pnrgA=="
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.30.tgz",
+      "integrity": "sha512-CLg+f8RQCHQnKvuHY9adMsMaQOcqclh6Z5V9TaoMgy0ut0tz848joZ7/CYFFyF/yZ5i2yaw7Fn498C+CNZVHIg=="
     },
     "node_modules/@vue/test-utils": {
       "version": "2.4.6",
@@ -11008,45 +11007,6 @@
         "eslint": ">=7.0.0"
       }
     },
-    "node_modules/eslint-plugin-cypress": {
-      "version": "2.15.2",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-cypress/-/eslint-plugin-cypress-2.15.2.tgz",
-      "integrity": "sha512-CtcFEQTDKyftpI22FVGpx8bkpKyYXBlNge6zSo0pl5/qJvBAnzaD76Vu2AsP16d6mTj478Ldn2mhgrWV+Xr0vQ==",
-      "dev": true,
-      "dependencies": {
-        "globals": "^13.20.0"
-      },
-      "peerDependencies": {
-        "eslint": ">= 3.2.1"
-      }
-    },
-    "node_modules/eslint-plugin-cypress/node_modules/globals": {
-      "version": "13.24.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz",
-      "integrity": "sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==",
-      "dev": true,
-      "dependencies": {
-        "type-fest": "^0.20.2"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/eslint-plugin-cypress/node_modules/type-fest": {
-      "version": "0.20.2",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
-      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/eslint-plugin-prettier": {
       "version": "5.1.3",
       "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz",
@@ -20923,12 +20883,12 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.2.12",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.12.tgz",
-      "integrity": "sha512-/gC8GxzxMK5ntBwb48pR32GGhENnjtY30G4A0jemunsBkiEZFw60s8InGpN8gkhHEkjnRK1aSAxeQgwvFhUHAA==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.3.1.tgz",
+      "integrity": "sha512-XBmSKRLXLxiaPYamLv3/hnP/KXDai1NDexN0FpkTaZXTfycHvkRHoenpgl/fvuK/kPbB6xAgoyiryAhQNxYmAQ==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.20.1",
+        "esbuild": "^0.21.3",
         "postcss": "^8.4.38",
         "rollup": "^4.13.0"
       },
@@ -21262,6 +21222,412 @@
         "vite": "^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0"
       }
     },
+    "node_modules/vite/node_modules/@esbuild/aix-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.21.5.tgz",
+      "integrity": "sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.21.5.tgz",
+      "integrity": "sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/android-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.21.5.tgz",
+      "integrity": "sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.21.5.tgz",
+      "integrity": "sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/darwin-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.21.5.tgz",
+      "integrity": "sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.21.5.tgz",
+      "integrity": "sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/freebsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.21.5.tgz",
+      "integrity": "sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.21.5.tgz",
+      "integrity": "sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==",
+      "cpu": [
+        "arm"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.21.5.tgz",
+      "integrity": "sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.21.5.tgz",
+      "integrity": "sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-loong64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.21.5.tgz",
+      "integrity": "sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==",
+      "cpu": [
+        "loong64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-mips64el": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.21.5.tgz",
+      "integrity": "sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==",
+      "cpu": [
+        "mips64el"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-ppc64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.21.5.tgz",
+      "integrity": "sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-riscv64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.21.5.tgz",
+      "integrity": "sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-s390x": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.21.5.tgz",
+      "integrity": "sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==",
+      "cpu": [
+        "s390x"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/linux-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.21.5.tgz",
+      "integrity": "sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/netbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "netbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/openbsd-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.21.5.tgz",
+      "integrity": "sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "openbsd"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/sunos-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.21.5.tgz",
+      "integrity": "sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "sunos"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-arm64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.21.5.tgz",
+      "integrity": "sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==",
+      "cpu": [
+        "arm64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-ia32": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.21.5.tgz",
+      "integrity": "sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==",
+      "cpu": [
+        "ia32"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/@esbuild/win32-x64": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.21.5.tgz",
+      "integrity": "sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==",
+      "cpu": [
+        "x64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/vite/node_modules/esbuild": {
+      "version": "0.21.5",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
+      "integrity": "sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==",
+      "dev": true,
+      "hasInstallScript": true,
+      "bin": {
+        "esbuild": "bin/esbuild"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "optionalDependencies": {
+        "@esbuild/aix-ppc64": "0.21.5",
+        "@esbuild/android-arm": "0.21.5",
+        "@esbuild/android-arm64": "0.21.5",
+        "@esbuild/android-x64": "0.21.5",
+        "@esbuild/darwin-arm64": "0.21.5",
+        "@esbuild/darwin-x64": "0.21.5",
+        "@esbuild/freebsd-arm64": "0.21.5",
+        "@esbuild/freebsd-x64": "0.21.5",
+        "@esbuild/linux-arm": "0.21.5",
+        "@esbuild/linux-arm64": "0.21.5",
+        "@esbuild/linux-ia32": "0.21.5",
+        "@esbuild/linux-loong64": "0.21.5",
+        "@esbuild/linux-mips64el": "0.21.5",
+        "@esbuild/linux-ppc64": "0.21.5",
+        "@esbuild/linux-riscv64": "0.21.5",
+        "@esbuild/linux-s390x": "0.21.5",
+        "@esbuild/linux-x64": "0.21.5",
+        "@esbuild/netbsd-x64": "0.21.5",
+        "@esbuild/openbsd-x64": "0.21.5",
+        "@esbuild/sunos-x64": "0.21.5",
+        "@esbuild/win32-arm64": "0.21.5",
+        "@esbuild/win32-ia32": "0.21.5",
+        "@esbuild/win32-x64": "0.21.5"
+      }
+    },
     "node_modules/vitest": {
       "version": "1.6.0",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-1.6.0.tgz",
@@ -21485,15 +21851,15 @@
       }
     },
     "node_modules/vue": {
-      "version": "3.4.27",
-      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.27.tgz",
-      "integrity": "sha512-8s/56uK6r01r1icG/aEOHqyMVxd1bkYcSe9j8HcKtr/xTOFWvnzIVTehNW+5Yt89f+DLBe4A569pnZLS5HzAMA==",
+      "version": "3.4.30",
+      "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.30.tgz",
+      "integrity": "sha512-NcxtKCwkdf1zPsr7Y8+QlDBCGqxvjLXF2EX+yi76rV5rrz90Y6gK1cq0olIhdWGgrlhs9ElHuhi9t3+W5sG5Xw==",
       "dependencies": {
-        "@vue/compiler-dom": "3.4.27",
-        "@vue/compiler-sfc": "3.4.27",
-        "@vue/runtime-dom": "3.4.27",
-        "@vue/server-renderer": "3.4.27",
-        "@vue/shared": "3.4.27"
+        "@vue/compiler-dom": "3.4.30",
+        "@vue/compiler-sfc": "3.4.30",
+        "@vue/runtime-dom": "3.4.30",
+        "@vue/server-renderer": "3.4.30",
+        "@vue/shared": "3.4.30"
       },
       "peerDependencies": {
         "typescript": "*"
@@ -21716,14 +22082,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/vue3-observe-visibility": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/vue3-observe-visibility/-/vue3-observe-visibility-1.0.1.tgz",
-      "integrity": "sha512-/PL1xopQvQwWVD41hr2gwAGBEPcTCLYz6j5cdbvvLWOvalv2YE29+VJudsotF9ivredlfsRzFOWb63etvcGQQw==",
-      "peerDependencies": {
-        "vue": "^3.x.x"
-      }
-    },
     "node_modules/w3c-xmlserializer": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-5.0.0.tgz",
diff --git a/package.json b/package.json
index 6f9e2d120..a6b6b016d 100644
--- a/package.json
+++ b/package.json
@@ -50,13 +50,12 @@
     "socket.io-client": "4.7.5",
     "svg-overlay": "github:openseadragon/svg-overlay",
     "uuid": "9.0.1",
-    "vue": "3.4.27",
+    "vue": "3.4.30",
     "vue-flatpickr-component": "11.0.5",
     "vue-i18n": "9.13.1",
     "vue-matomo": "^4.2.0",
     "vue-router": "4.3.2",
     "vue-3-slider-component": "1.0.0",
-    "vue3-observe-visibility": "^1.0.1",
     "webfontloader": "1.6.28"
   },
   "devDependencies": {
@@ -85,7 +84,6 @@
     "@vue/tsconfig": "^0.5.1",
     "autoprefixer": "10.4.19",
     "eslint": "^8.57.0",
-    "eslint-plugin-cypress": "^2.15.1",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.23.0",
     "jsdom": "^24.0.0",
@@ -99,7 +97,7 @@
     "storybook": "^8.1.8",
     "storybook-vue3-router": "^5.0.0",
     "typescript": "~5.4.0",
-    "vite": "^5.2.8",
+    "vite": "^5.3.1",
     "vite-plugin-vue-devtools": "7.3.0-beta.2",
     "vitest": "^1.4.0",
     "vue-component-type-helpers": "^2.0.21",
diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index 0b7522b9c..ff6ec0b3a 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -1,52 +1,34 @@
 <template>
   <section class="search-bar" ref="autocomplete">
     <div class="input-group">
-      <b-form-input
-        :class="`search-input ${showSuggestions ? 'has-suggestions' : ''}`"
-        :placeholder="$tc('placeholder.search', filterCount)"
-        v-model.trim="q"
-        @update:modelValue="search"
-        @focus="selectInput"
-        @blur="blurHandler"
-        @keyup="keyup"
-      />
+      <b-form-input :class="`search-input ${showSuggestions ? 'has-suggestions' : ''}`"
+        :placeholder="$tc('placeholder.search', filterCount)" v-model.trim="q" @update:modelValue="search"
+        @focus="selectInput" @blur="blurHandler" @keyup="keyup" data-testid="autocomplete-input" />
       <div class="input-group-append">
-        <button type="button" class="btn btn-outline-primary"
-          ref="searchButton"
-          :title="$tc('placeholder.search', filterCount)"
-          @click="submit({ type: 'string', q })"
-        >
+        <button type="button" class="btn btn-outline-primary" ref="searchButton"
+          :title="$tc('placeholder.search', filterCount)" @click="submit({ type: 'string', q })"
+          data-testid="add-keyword-button">
           <div v-if="filterCount > 1" class="d-flex search-submit dripicons-search"></div>
           <div v-else class="d-flex search-submit dripicons-search"></div>
         </button>
-        <button type="button" class="btn btn-outline-primary" :title="$t('actions.addFilter')" @click="showExplorer">
+        <button type="button" class="btn btn-outline-primary" :title="$t('actions.addFilter')" @click="showExplorer"
+          data-testid="add-filter-button">
           <div class="d-flex dripicons-experiment"></div>
         </button>
       </div>
     </div>
 
-    <div
-      class="suggestions border-left border-right border-bottom border-primary drop-shadow"
-      v-show="showSuggestions"
-    >
-      <div class="border-bottom ">
-        <div
-          class="suggestion p-1"
-          v-for="(suggestion, index) in staticSuggestions"
-          v-bind:key="index"
-          @click="submitStaticSuggestion(suggestion)"
-          :data-idx="suggestion.idx"
-          @mouseover="select(suggestion)"
-          :class="{ selected: selectedIndex === suggestion.idx }"
-        >
+    <div class="suggestions border-left border-right border-bottom border-primary drop-shadow" v-show="showSuggestions">
+      <div class="border-bottom">
+        <div class="suggestion p-1" v-for="(suggestion, index) in staticSuggestions" v-bind:key="index"
+          @click="submitStaticSuggestion(suggestion)" :data-idx="suggestion.idx" @mouseover="select(suggestion)"
+          :class="{ selected: selectedIndex === suggestion.idx }">
           <div :class="`suggestion-${suggestion.type}`">
             <span class="small" v-if="suggestion.h" v-html="suggestion.h" />
-            <span class="small" v-else
-              >...<b>{{ q }}</b></span
-            >
-            <b-badge variant="light" class="border border-medium">{{
-              $t(`label.${suggestion.type}.title`)
-            }}</b-badge>
+            <span class="small" v-else>...<b>{{ q }}</b></span>
+            <b-badge variant="light" class="border border-medium">
+              {{ $t(`label.${suggestion.type}.title`) }}
+            </b-badge>
           </div>
         </div>
       </div>
@@ -57,35 +39,21 @@
           </div>
           <div class="col">
             <!-- <span v-if="type !== 'mention'" class="small-caps px-2">{{$t(`label.${type}.title`)}}</span> -->
-            <div
-              v-for="(s, j) in suggestionIndex[type]"
-              :key="j"
-              @click="submit(s)"
-              @mouseover="select(s)"
-              :data-idx="s.idx"
-              class="suggestion pr-1 pl-2 py-1"
-              :class="{
+            <div v-for="(s, j) in suggestionIndex[type]" :key="j" @click="submit(s)" @mouseover="select(s)"
+              :data-idx="s.idx" class="suggestion pr-1 pl-2 py-1" :class="{
                 selected: selectedIndex === s.idx,
-              }"
-            >
+              }">
               <div v-if="s.fake && type !== 'mention'" :title="$t(`label.${type}.moreLikeThis`)">
-                <span class="small"
-                  >... <b>{{ q }}</b></span
-                >
+                <span class="small">... <b>{{ q }}</b></span>
                 <b-badge variant="light" class="border border-medium">
-                  {{ $t(`label.${type}.moreLikeThis`) }}</b-badge
-                >
+                  {{ $t(`label.${type}.moreLikeThis`) }}</b-badge>
               </div>
               <div v-else :class="`${type} small`">
                 <span v-if="['location', 'person'].indexOf(type) !== -1" v-html="s.h" />
-                <span
-                  v-if="['collection', 'newspaper'].indexOf(type) !== -1"
-                  v-html="s.item.name"
-                />
+                <span v-if="['collection', 'newspaper'].indexOf(type) !== -1" v-html="s.item.name" />
                 <span v-if="['topic', 'mention'].indexOf(type) !== -1" v-html="s.h" />
-                <span v-if="s.type === 'daterange'"
-                  >{{ $d(s.daterange.start, 'short') }} - {{ $d(s.daterange.end, 'short') }}</span
-                >
+                <span v-if="s.type === 'daterange'">{{ $d(s.daterange.start, 'short') }} - {{ $d(s.daterange.end,
+                  'short') }}</span>
               </div>
             </div>
           </div>
@@ -93,15 +61,9 @@
       </div>
     </div>
 
-    <explorer
-      v-model="explorerFilters"
-      :is-visible="explorerVisible"
-      @onHide="handleExplorerHide"
-      :searching-enabled="true"
-      :initial-search-query="q"
-      :initial-type="explorerInitialType"
-      :included-types="explorerIncludedTypes"
-    />
+    <explorer v-model="explorerFilters" :is-visible="explorerVisible" @onHide="handleExplorerHide"
+      :searching-enabled="true" :initial-search-query="q" :initial-type="explorerInitialType"
+      :included-types="explorerIncludedTypes" />
   </section>
 </template>
 
@@ -138,6 +100,7 @@ export default {
     showSuggestions: false,
     explorerVisible: false,
   }),
+  emits: ['submit', 'submitEmpty', 'input-focus'],
   props: {
     variant: {
       type: String,
@@ -156,11 +119,7 @@ export default {
   beforeMount() {
     const autocomplete = ref(this.$refs.autocomplete)
     const button = ref(this.$refs.searchButton)
-    useClickOutside(
-      autocomplete,
-      () => this.hideSuggestions(),
-      button,
-    )
+    useClickOutside(autocomplete, () => this.hideSuggestions(), button)
   },
   computed: {
     ...mapStores(useAutocompleteStore, useUserStore),
@@ -188,8 +147,8 @@ export default {
     suggestionIndex() {
       const key = 'type'
       const index = this.suggestions.reduce((reduced, item) => {
-        (reduced[item[key]] = reduced[item[key]] || []).push(item);
-        return reduced;
+        ; (reduced[item[key]] = reduced[item[key]] || []).push(item)
+        return reduced
       }, {})
 
       let idx = this.staticSuggestions.length - 1
@@ -286,17 +245,14 @@ export default {
       }
 
       if (this.q.length > 1) {
-        this.autocompleteStore
-          .search(this.q.trim())
-          .then(res => {
-            this.suggestions = [...res, ...this.collectionSuggestions]
-          })
+        this.autocompleteStore.search(this.q.trim()).then(res => {
+          this.suggestions = [...res, ...this.collectionSuggestions]
+        })
         if (this.user) {
-          this.autocompleteStore.suggestCollections(this.q.trim())
-            .then(res => {
-              this.collectionSuggestions = res
-              this.suggestions = [...res, ...this.suggestions]
-            })
+          this.autocompleteStore.suggestCollections(this.q.trim()).then(res => {
+            this.collectionSuggestions = res
+            this.suggestions = [...res, ...this.suggestions]
+          })
         }
       } else {
         // if length of the query is 0 then we clear the suggestions
@@ -397,8 +353,10 @@ export default {
 
 <style scoped lang="scss">
 @import 'src/assets/legacy/bootstrap-impresso-theme-variables.scss';
+
 .search-bar {
   position: relative;
+
   input.form-control.search-input {
     border-color: $clr-primary;
     background: transparent;
@@ -410,17 +368,20 @@ export default {
       background: white;
       border: 1px solid $clr-secondary;
     }
+
     &:focus.has-suggestions {
       // border: 1px solid $clr-secondary;
       border-bottom: 0;
     }
   }
+
   .suggestions {
     position: absolute;
     top: 38px;
     width: 100%;
     background: white;
     z-index: 10;
+
     .icon {
       color: $clr-primary;
       // border: 1px solid $clr-secondary;
@@ -436,21 +397,26 @@ export default {
       margin-top: -12px;
       position: absolute;
     }
+
     .suggestion {
       border: 1px solid transparent;
       cursor: pointer;
-      > div {
+
+      >div {
         display: flex;
         flex-direction: row;
         align-items: center;
+
         span {
           flex: 1;
           flex-grow: 8;
         }
+
         .badge {
           flex: 1;
         }
       }
+
       &.selected {
         background: rgba($clr-accent-secondary, 0.5);
         border-color: rgba($clr-accent-secondary, 0.75);
@@ -459,31 +425,34 @@ export default {
   }
 }
 
-.search-bar .input-group > .form-control {
+.search-bar .input-group>.form-control {
   border-top-width: 0;
   border-left-width: 0;
   border-right-width: 0;
   z-index: 1;
 }
 
-.search-box .search-bar .input-group > .form-control {
+.search-box .search-bar .input-group>.form-control {
   background: white;
+
   &:focus {
     border-width: 0;
   }
 }
 
 .bg-dark {
-  .search-bar .input-group > .form-control {
+  .search-bar .input-group>.form-control {
     border-top-width: 0;
     border-left-width: 0;
     border-right-width: 0;
     background: transparent;
+
     &:focus {
       background: transparent;
     }
   }
 }
+
 // .search-bar .input-group > .form-control {
 //   color: white;
 // }
@@ -508,57 +477,54 @@ export default {
 //   background: rgb(253,233,119);
 //   background: linear-gradient(90deg, rgba(253,233,119,1) 0%, rgba(253,233,119,0) 100%);
 //   width: 100px;
-// }
-</style>
+// }</style>
 
-<i18n lang="json">
-  {
-    "en": {
-      "placeholder" : {
-        "search": "search for ... | add keyword to search"
+<i18n lang="json">{
+  "en": {
+    "placeholder": {
+      "search": "search for ... | add keyword to search"
+    },
+    "label": {
+      "string": {
+        "title": "Search in article contents"
       },
-      "label": {
-        "string": {
-          "title": "Search in article contents"
-        },
-        "mention": {
-          "title": "in contents ..."
-        },
-        "title": {
-          "title": "Search in article titles"
-        },
-        "topic": {
-          "title": "suggested topics",
-          "moreLikeThis": "More Topics ..."
-        },
-        "person": {
-          "title": "suggested people",
-          "moreLikeThis": "More Persons ..."
-        },
-        "location": {
-          "title": "suggested locations",
-          "moreLikeThis": "More Locations ..."
-        },
-        "collection": {
-          "title": "suggested collections",
-          "moreLikeThis": "More Collections ..."
-        },
-        "newspaper": {
-          "title": "suggested newspaper",
-          "moreLikeThis": "More Newspapers ..."
-        },
-        "daterange": {
-          "title": "filter by date of publication",
-          "item": "From {start} to {end}"
-        }
+      "mention": {
+        "title": "in contents ..."
+      },
+      "title": {
+        "title": "Search in article titles"
+      },
+      "topic": {
+        "title": "suggested topics",
+        "moreLikeThis": "More Topics ..."
+      },
+      "person": {
+        "title": "suggested people",
+        "moreLikeThis": "More Persons ..."
+      },
+      "location": {
+        "title": "suggested locations",
+        "moreLikeThis": "More Locations ..."
+      },
+      "collection": {
+        "title": "suggested collections",
+        "moreLikeThis": "More Collections ..."
+      },
+      "newspaper": {
+        "title": "suggested newspaper",
+        "moreLikeThis": "More Newspapers ..."
+      },
+      "daterange": {
+        "title": "filter by date of publication",
+        "item": "From {start} to {end}"
       }
-    },
-    "nl": {
-      "person": "Persoon",
-      "location": "Locatie",
-      "daterange": "Periode",
-      "topic": "Onderwerp",
-      "collection": "Collectie"
     }
+  },
+  "nl": {
+    "person": "Persoon",
+    "location": "Locatie",
+    "daterange": "Periode",
+    "topic": "Onderwerp",
+    "collection": "Collectie"
   }
-</i18n>
+}</i18n>
diff --git a/src/components/SearchPills.vue b/src/components/SearchPills.vue
index 5e039bd7a..5671dacaa 100644
--- a/src/components/SearchPills.vue
+++ b/src/components/SearchPills.vue
@@ -1,12 +1,13 @@
 <template>
-  <div class="search-pills d-flex" :class="{ empty: isEmpty }">
+  <div class="search-pills d-flex" :class="{ empty: isEmpty }" data-testid="search-pills">
     <div v-if="isFrontFilterEnabled" class="search-pill front-filter mr-1 mb-1 d-flex align-items-center border-radius">
       <div class="label">{{ $t('label.isFront') }}</div>
-      <b-button class="dripicons-cross" @click="handleFrontpageFilterRemoved" size="sm"
-        variant="transparent"></b-button>
+      <b-button class="dripicons-cross" @click="handleFrontpageFilterRemoved" size="sm" variant="transparent"
+        data-testid="remove-frontpage-filter-button"></b-button>
     </div>
     <div v-for="{ filter, filterIndex } in pills" :key="filterIndex">
-      <b-dropdown size="sm" variant="outline-primary" class="mr-1 mb-1 search-pill">
+      <b-dropdown size="sm" variant="outline-primary" class="mr-1 mb-1 search-pill"
+        :data-testid="`search-pill-${filter.type}`">
         <!--  button content -->
         <template v-slot:button-content>
           <!-- badge: initial type instead of icons -->
@@ -45,14 +46,14 @@
           <span class="label sp-generic-item" v-if="
             ['language', 'country', 'type', 'accessRight', 'partner'].indexOf(filter.type) !== -1
           " v-html="labelByItems({
-              items: filter.items,
-              max: 2,
-              prop: 'uid',
-              translate: true,
-              type: filter.type,
-              op: filter.op,
-            })
-              " :class="filter.context">
+            items: filter.items,
+            max: 2,
+            prop: 'uid',
+            translate: true,
+            type: filter.type,
+            op: filter.op,
+          })
+            " :class="filter.context">
           </span>
           <!--  type:generic -->
           <span class="label sp-generic-item" v-if="['year'].includes(filter.type)" :class="filter.context">{{
@@ -94,12 +95,13 @@
         </div>
       </b-dropdown>
     </div>
-    <b-button v-if="enableAddFilter" class="mb-1" variant="outline-primary" size="sm" v-on:click="showFilterExplorer">
+    <b-button v-if="enableAddFilter" class="mb-1" variant="outline-primary" size="sm" v-on:click="showFilterExplorer"
+      data-testid="add-filter-button">
       {{ $t('actions.addContextualFilter') }}
     </b-button>
 
     <b-button class="mb-1 px-2 ml-auto border-radius" variant="outline-danger" v-if="isResettable"
-      :title="$t('actions.resetFilters')" @click="handleReset">
+      :title="$t('actions.resetFilters')" @click="handleReset" data-testid="reset-filters-button">
       <div class="d-flex dripicons-cross"></div>
     </b-button>
 
diff --git a/src/components/layout/Dropdown.vue b/src/components/layout/Dropdown.vue
index cbef0a48e..26716cf39 100644
--- a/src/components/layout/Dropdown.vue
+++ b/src/components/layout/Dropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown b-dropdown btn-group" :class="{ show: isOpen }">
+  <div class="dropdown b-dropdown btn-group" :class="{ show: isOpen }" :data-testid="dataTestid">
     <button aria-haspopup="menu" :aria-expanded="isOpen" type="button" class="btn dropdown-toggle" :class="{
       [`btn-${size}`]: size != undefined,
       [`btn-${variant}`]: variant != undefined,
@@ -29,7 +29,7 @@ interface Option {
 }
 
 const props = defineProps({
-  value: {
+  modelValue: {
     type: String
   },
   options: {
@@ -48,19 +48,23 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  dataTestid: {
+    type: String,
+    default: undefined,
+  }
 })
 
-const emit = defineEmits(['update:value', 'input'])
+const emit = defineEmits(['update:modelValue', 'input'])
 
 const isOpen = ref(false)
 
 const selectedOption = computed(() => {
-  const option = props.options.find(option => option.value === props.value)
+  const option = props.options.find(option => option.value === props.modelValue)
   return option ?? props.options?.[0]
 })
 
 const selectOption = (option: Option) => {
-  emit('update:value', option.value)
+  emit('update:modelValue', option.value)
   emit('input', option.value);
   isOpen.value = false
 }
diff --git a/src/components/legacy/bootstrap/BButton.vue b/src/components/legacy/bootstrap/BButton.vue
index 3a81fee75..c8187767c 100644
--- a/src/components/legacy/bootstrap/BButton.vue
+++ b/src/components/legacy/bootstrap/BButton.vue
@@ -1,9 +1,6 @@
 <template>
-  <button
-    type="button"
-    :class="buttonClass"
-    :disabled="props.disabled ? true : undefined"
-    v-bind="$attrs">
+  <button type="button" :class="buttonClass" :disabled="props.disabled ? true : undefined" v-bind="$attrs"
+    :data-testid="dataTestid">
     <slot></slot>
   </button>
 </template>
@@ -26,6 +23,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  dataTestid: {
+    type: String,
+    default: undefined,
+  },
 })
 const attrs = useAttrs()
 Object.keys(attrs)
diff --git a/src/components/legacy/bootstrap/BFormCheckbox.vue b/src/components/legacy/bootstrap/BFormCheckbox.vue
index c534c93c6..d8475b176 100644
--- a/src/components/legacy/bootstrap/BFormCheckbox.vue
+++ b/src/components/legacy/bootstrap/BFormCheckbox.vue
@@ -1,13 +1,7 @@
 <template>
   <div :class="cbClass">
-    <input
-      type="checkbox"
-      class="custom-control-input"
-      :value="props.modelValue"
-      :checked="props.modelValue"
-      :id="uid"
-      :disabled="props.disabled"
-      @change="handleChanged">
+    <input type="checkbox" class="custom-control-input" :value="props.modelValue" :checked="props.modelValue" :id="uid"
+      :disabled="props.disabled" @change="handleChanged" :data-testid="dataTestid">
     <label class="custom-control-label" :for="uid">
       <slot></slot>
     </label>
@@ -31,6 +25,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  dataTestid: {
+    type: String,
+    default: undefined,
+  },
 })
 const emit = defineEmits(['update:modelValue'])
 
diff --git a/src/components/legacy/bootstrap/BFormInput.vue b/src/components/legacy/bootstrap/BFormInput.vue
index fbf08a1c7..d6db60cda 100644
--- a/src/components/legacy/bootstrap/BFormInput.vue
+++ b/src/components/legacy/bootstrap/BFormInput.vue
@@ -1,5 +1,6 @@
 <template>
-  <input ref="inputRef" :type="props.type" :class="iClass" :value="props.modelValue" @input="handleChanged" v-bind="$attrs" />
+  <input ref="inputRef" :type="props.type" :class="iClass" :value="props.modelValue" @input="handleChanged"
+    v-bind="$attrs" :data-testid="dataTestid" />
 </template>
 
 <script setup lang="ts">
@@ -22,6 +23,10 @@ const props = defineProps({
     type: String,
     default: 'md',
   },
+  dataTestid: {
+    type: String,
+    default: undefined,
+  },
 })
 const emit = defineEmits(['update:modelValue'])
 
diff --git a/src/components/modules/FilterDynamicRange.vue b/src/components/modules/FilterDynamicRange.vue
index d1b27165c..9afcda4b1 100644
--- a/src/components/modules/FilterDynamicRange.vue
+++ b/src/components/modules/FilterDynamicRange.vue
@@ -15,23 +15,12 @@
 
     <!-- min 100px height -->
     <div v-if="loading" class="text-center" style="height: 100px">
-      <span
-        role="status"
-        aria-hidden
-        class="spinner-grow spinner-grow-sm text-primary">
+      <span role="status" aria-hidden class="spinner-grow spinner-grow-sm text-primary">
       </span>
     </div>
     <div v-else-if="loaded" class="position-relative">
-      <HistogramSlider
-        class="histo-slider"
-        v-model="sliderValue"
-        :buckets="buckets"
-        :only-range-labels="true"
-        :scale-type="'symlog'"
-        :sliderValue="value"
-        @mousemove="handleMouseMove"
-        @click="handleClick"
-      />
+      <HistogramSlider class="histo-slider" v-model="sliderValue" :buckets="buckets" :only-range-labels="true"
+        :scale-type="'symlog'" :sliderValue="value" @mousemove="handleMouseMove" @click="handleClick" />
       <tooltip :tooltip="tooltip">
         <slot :tooltip="tooltip">
           <div v-if="tooltip.item">
@@ -154,22 +143,22 @@ export default {
 
       if (this.isPercentage) {
         label =
-          value.bucket.upper && value.bucket.upper !== value.bucket.lower
+          value.bucket?.upper && value.bucket?.upper !== value.bucket?.lower
             ? this.$t(this.valuePercentageLabel, {
-                upper: this.$n(value.bucket.upper),
-                lower: this.$n(value.bucket.lower),
-              })
+              upper: this.$n(value.bucket.upper),
+              lower: this.$n(value.bucket.lower),
+            })
             : this.$t(this.valuePercentageLabel, {
-                upper: this.$n(value.bucket.upper + 0.999),
-                lower: this.$n(value.bucket.lower),
-              })
+              upper: this.$n(value.bucket.upper + 0.999),
+              lower: this.$n(value.bucket.lower),
+            })
       } else {
         label =
           value.bucket.upper && value.bucket.upper !== value.bucket.lower
             ? this.$t(this.valueAsRangeLabel, {
-                upper: this.$n(value.bucket.upper),
-                lower: this.$n(value.bucket.lower),
-              })
+              upper: this.$n(value.bucket.upper),
+              lower: this.$n(value.bucket.lower),
+            })
             : this.$t(this.valueLabel, { val: this.$n(value.bucket.val) })
       }
 
@@ -288,19 +277,15 @@ export default {
   },
 }
 </script>
-<i18n lang="json">
-{
+<i18n lang="json">{
   "en": {
     "value": "value: <span class='number'>{val}</span>",
     "valuePercentage": "value: <span class='number'>{lower}% - {upper}%</span>",
     "valueAsRange": "range: <span class='number'>{lower} - {upper}</span>",
-
-    "textReuseClusterSizeValueLabel":  "cluster size: <span class='number'>{val}</span> passages per cluster",
+    "textReuseClusterSizeValueLabel": "cluster size: <span class='number'>{val}</span> passages per cluster",
     "textReuseClusterSizeValueAsRangeLabel": "cluster size: <span class='number'>{lower} - {upper}</span>",
     "textReuseClusterLexicalOverlapValuePercentageLabel": "<span class='number'>{lower}% - {upper}%</span> lexical overlap",
-
     "textReuseClusterDayDeltaValueLabel": "<span class='number'>{val}</span> days",
     "textReuseClusterDayDeltaValueAsRangeLabel": "<span class='number'>{lower} - {upper}</span> days"
   }
-}
-</i18n>
+}</i18n>
diff --git a/src/components/modules/FilterFacet.vue b/src/components/modules/FilterFacet.vue
index cccebf49e..4b2ca9f3e 100644
--- a/src/components/modules/FilterFacet.vue
+++ b/src/components/modules/FilterFacet.vue
@@ -1,21 +1,13 @@
 <template>
-  <div class="filter-facet">
+  <div class="filter-facet" :data-testid="`facet-filter-${facet.type}`">
     <base-title-bar>
       {{ $t(`label.${facet.type}.filterTitle`) }}
-      <span
-        v-if="facet.numBuckets > -1"
-        v-html="
-          $tc('numbers.options', facet.numBuckets, {
-            n: $n(facet.numBuckets),
-          })
-        "
-      />
-      <info-button
-        class="ml-1"
-        v-if="infoButtonId || facet.type === 'person' || facet.type === 'location'"
-        :target="facet.type"
-        :name="infoButtonId || 'what-is-nep'"
-      />
+      <span v-if="facet.numBuckets > -1" v-html="$tc('numbers.options', facet.numBuckets, {
+        n: $n(facet.numBuckets),
+      })
+        " />
+      <info-button class="ml-1" v-if="infoButtonId || facet.type === 'person' || facet.type === 'location'"
+        :target="facet.type" :name="infoButtonId || 'what-is-nep'" />
       <info-button v-if="facet.type === 'newspaper'" name="which-newspapers" class="ml-1" />
       <info-button v-if="facet.type === 'topic'" name="how-to-read-the-topics" class="ml-1" />
       <template v-slot:options>
@@ -23,10 +15,7 @@
           {{ $t(`actions.reset`) }}
         </b-button>
         <b-button v-if="isCollapsible" size="sm" variant="outline-icon" @click="toggleVisibility">
-          <span
-            class="icon-link"
-            :class="{ 'dripicons-plus': isCollapsed, 'dripicons-minus': !isCollapsed }"
-          ></span>
+          <span class="icon-link" :class="{ 'dripicons-plus': isCollapsed, 'dripicons-minus': !isCollapsed }"></span>
         </b-button>
       </template>
       <template v-slot:description>
@@ -50,67 +39,30 @@
       <!-- .description -->
     </base-title-bar>
     <LazyObserver v-if="lazy" :delay="lazyDelay" @onIntersect="onIntersectHandler" />
-    <div
-      v-for="{ filter, filterIndex } in includedFilterItems"
-      :key="filterIndex"
-      class=" p-2 bg-white border rounded shadow-sm my-2"
-    >
-      <filter-monitor
-        :items-to-add="selectedBucketsItems"
-        :filter="filter"
-        :operators="facet.operators"
-        @changed="filter => updateFilter(filterIndex, filter)"
-        @remove="filter => removeFilter(filterIndex, filter)"
-      />
+    <div v-for="{ filter, filterIndex } in includedFilterItems" :key="filterIndex"
+      class=" p-2 bg-white border rounded shadow-sm my-2">
+      <filter-monitor :items-to-add="selectedBucketsItems" :filter="filter" :operators="facet.operators"
+        @changed="filter => updateFilter(filterIndex, filter)" @remove="filter => removeFilter(filterIndex, filter)" />
     </div>
-    <div
-      v-for="{ filter, filterIndex } in excludedFilterItems"
-      :key="filterIndex"
-      class=" p-2 bg-white border rounded shadow-sm my-2"
-    >
-      <filter-monitor
-        :filter="filter"
-        :operators="facet.operators"
-        @changed="filter => updateFilter(filterIndex, filter)"
-        @remove="filter => removeFilter(filterIndex, filter)"
-      />
+    <div v-for="{ filter, filterIndex } in excludedFilterItems" :key="filterIndex"
+      class=" p-2 bg-white border rounded shadow-sm my-2">
+      <filter-monitor :filter="filter" :operators="facet.operators"
+        @changed="filter => updateFilter(filterIndex, filter)" @remove="filter => removeFilter(filterIndex, filter)" />
     </div>
-    <div v-if="showBuckets" class="pt-2">
-      <filter-facet-bucket
-        v-for="bucket in unfilteredBuckets"
-        :key="bucket.val"
-        :loading="isLoading"
-        :bucket="bucket"
-        :type="facet.type"
-        :search-index="searchIndex"
-        @toggle-bucket="toggleBucket"
-      />
-      <filter-facet-bucket
-        v-for="bucket in additionalBuckets"
-        :key="bucket.val"
-        :loading="isLoading"
-        :bucket="bucket"
-        :type="facet.type"
-        :search-index="searchIndex"
-        @toggle-bucket="toggleBucket"
-      />
-      <b-button
-        v-if="facet.numBuckets > 0 && countMissingBuckets"
-        size="sm"
-        variant="outline-secondary"
-        class="mt-2 mr-1 rounded shadow-sm"
-        @click="loadMoreBuckets"
-      >
+    <div v-if="showBuckets" class="pt-2" data-testid="facet-buckets">
+      <filter-facet-bucket v-for="bucket in unfilteredBuckets" :key="bucket.val" :loading="isLoading" :bucket="bucket"
+        :type="facet.type" :search-index="searchIndex" @toggle-bucket="toggleBucket" />
+      <filter-facet-bucket v-for="bucket in additionalBuckets" :key="bucket.val" :loading="isLoading" :bucket="bucket"
+        :type="facet.type" :search-index="searchIndex" @toggle-bucket="toggleBucket" />
+      <b-button v-if="facet.numBuckets > 0 && countMissingBuckets" size="sm" variant="outline-secondary"
+        class="mt-2 mr-1 rounded shadow-sm" @click="loadMoreBuckets">
         <span v-if="isMoreLoading" v-html="$t('actions.loading')" />
         <span v-else>
           {{ $t('actions.more') }}
-          <span
-            v-html="
-              $tc('numbers.moreOptions', countMissingBuckets, {
-                n: $n(countMissingBuckets),
-              })
-            "
-          />
+          <span v-html="$tc('numbers.moreOptions', countMissingBuckets, {
+            n: $n(countMissingBuckets),
+          })
+            " />
         </span>
       </b-button>
     </div>
@@ -423,11 +375,9 @@ export default defineComponent({
 
 <style lang="css" scoped></style>
 
-<i18n lang="json">
-  {
-    "en": {
-      "clearSelection": "Clear selection ({selected})",
-      "selectAll": "Select all ({count})"
-    }
+<i18n lang="json">{
+  "en": {
+    "clearSelection": "Clear selection ({selected})",
+    "selectAll": "Select all ({count})"
   }
-</i18n>
+}</i18n>
diff --git a/src/components/modules/FilterFacetBucket.vue b/src/components/modules/FilterFacetBucket.vue
index c9cb244e4..c1efe8669 100644
--- a/src/components/modules/FilterFacetBucket.vue
+++ b/src/components/modules/FilterFacetBucket.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="FilterFacetBucket d-flex text-small">
-    <b-form-checkbox v-model="isChecked"> </b-form-checkbox>
+    <b-form-checkbox v-model="isChecked" data-testid="filter-facet-bucket-checkbox"> </b-form-checkbox>
 
     <item-selector hide-icon :uid="bucket.val" :item="bucket.item" :type="type" :searchIndex="searchIndex">
       <item-label v-if="bucket.item" :item="bucket.item" :type="type" />
diff --git a/src/components/modules/FilterRange.vue b/src/components/modules/FilterRange.vue
index 0fafdc9dc..17573eb19 100644
--- a/src/components/modules/FilterRange.vue
+++ b/src/components/modules/FilterRange.vue
@@ -1,29 +1,17 @@
 <template>
-  <div class="filter-range">
+  <div class="filter-range" data-testid="filter-range">
     <base-title-bar>
       {{ $t(`label.${facet.type}.filterTitle`) }}
       <info-button class="ml-1" :target="facet.type" name="filter-range" />
 
       <template v-slot:options>
-        <b-button
-          size="sm"
-          variant="outline-primary"
-          @click="handleResetFilters"
-          v-if="value.length === 2"
-        >
+        <b-button size="sm" variant="outline-primary" @click="handleResetFilters" v-if="value.length === 2">
           {{ $t('actions.reset') }}
         </b-button>
       </template>
     </base-title-bar>
-    <histogram-slider
-      class="histo-slider"
-      v-model="sliderValue"
-      :buckets="sliderBuckets"
-      :only-range-labels="true"
-      :scale-type="'symlog'"
-      :sliderValue="value"
-      @change="changeValue"
-    />
+    <histogram-slider class="histo-slider" v-model="sliderValue" :buckets="sliderBuckets" :only-range-labels="true"
+      :scale-type="'symlog'" :sliderValue="value" @change="changeValue" />
 
     <div class="p-2" v-if="valuesHaveChanged">
       <b-row no-gutters>
diff --git a/src/components/modules/FilterTimeline.vue b/src/components/modules/FilterTimeline.vue
index 53eec0c5b..aff2d9e41 100644
--- a/src/components/modules/FilterTimeline.vue
+++ b/src/components/modules/FilterTimeline.vue
@@ -1,15 +1,10 @@
 <template>
   <div class="filter-timeline">
-    <base-title-bar
-      >{{ $t(`label.timeline.${groupBy}`) }}
+    <base-title-bar>{{ $t(`label.timeline.${groupBy}`) }}
       <InfoButton v-if="infoButtonId" :name="infoButtonId" />
       <template v-slot:options>
-        <b-button
-          v-show="filters.length"
-          size="sm"
-          variant="outline-primary"
-          @click="resetFilters()"
-        >
+        <b-button v-show="filters.length" size="sm" variant="outline-primary" @click="resetFilters()"
+          data-testid="reset-filters-button">
           {{ $t('actions.reset') }}
         </b-button>
       </template>
@@ -22,11 +17,8 @@
         </span>
         <li v-if="!disableRelativeDisplayStyle" class="form-inline">
           <form class="form-inline">
-            <radio-group
-                :modelValue="displayStyle"
-                @update:modelValue="displayStyle = $event"
-                :options="displayStyleOptions"
-                type="button" />
+            <radio-group :modelValue="displayStyle" @update:modelValue="displayStyle = $event"
+              :options="displayStyleOptions" type="button" />
             <info-button name="relative-vs-absolute-year-graph" class="ml-2" />
           </form>
         </li>
@@ -34,15 +26,8 @@
     </base-title-bar>
 
     <!--  timeline vis -->
-    <timeline
-      class="bg-light pb-2 mb-3"
-      :values="values"
-      :brushable="false"
-      :brush="brush"
-      @brush-end="onTimelineBrushEnd"
-      :percentage="isPercentage"
-      @brushed="onTimelineBrushed"
-    >
+    <timeline class="bg-light pb-2 mb-3" :values="values" :brushable="false" :brush="brush"
+      @brush-end="onTimelineBrushEnd" :percentage="isPercentage" @brushed="onTimelineBrushed">
       <template v-slot="tooltipScope">
         <div v-if="tooltipScope.tooltip.item">
           {{ tooltipScope?.tooltip?.item?.t ? $d(tooltipScope.tooltip.item.t, 'year') : '' }} &middot;
@@ -57,23 +42,16 @@
     </timeline>
 
     <div v-if="!temporaryFilter && !filters.length">
-      <b-button size="sm" variant="outline-primary" @click="addTemporaryDaterangeFilter">
+      <b-button size="sm" variant="outline-primary" @click="addTemporaryDaterangeFilter"
+        data-testid="add-new-date-filter-button">
         {{ $t('label.daterange.pick') }}
       </b-button>
     </div>
 
-    <div
-      class=" p-2 bg-white border rounded"
-      v-for="(filter, i) in filters"
-      :key="i"
-      style="box-shadow: var(--bs-box-shadow-sm)"
-    >
-      <filter-monitor
-        :filter="filter"
-        @daterange-changed="updateBrush($event)"
-        @changed="updateDaterangeFilterAtIndex($event, i)"
-        @remove="removeFilter(i)"
-      />
+    <div class=" p-2 bg-white border rounded" v-for="(filter, i) in filters" :key="i"
+      style="box-shadow: var(--bs-box-shadow-sm)">
+      <filter-monitor :filter="filter" @daterange-changed="updateBrush($event)"
+        @changed="updateDaterangeFilterAtIndex($event, i)" @remove="removeFilter(i)" />
     </div>
     <!-- temporary filter -->
     <div class="border p-2" v-if="temporaryFilter">
@@ -81,12 +59,7 @@
 
       <b-row no-gutters>
         <b-col class="pr-1">
-          <b-button
-            size="sm"
-            block
-            variant="outline-primary"
-            @click="removeTemporaryDaterangeFilter"
-          >
+          <b-button size="sm" block variant="outline-primary" @click="removeTemporaryDaterangeFilter">
             {{ $t('actions.dismiss') }}
           </b-button>
         </b-col>
@@ -301,8 +274,7 @@ export default {
 </script>
 
 <style lang="css" scoped></style>
-<i18n lang="json">
-{
+<i18n lang="json">{
   "en": {
     "label": {
       "timeline": {
@@ -354,5 +326,4 @@ export default {
       }
     }
   }
-}
-</i18n>
+}</i18n>
diff --git a/src/components/modules/SearchResultsListItem.vue b/src/components/modules/SearchResultsListItem.vue
index e09b0de8a..9543fe774 100644
--- a/src/components/modules/SearchResultsListItem.vue
+++ b/src/components/modules/SearchResultsListItem.vue
@@ -1,5 +1,6 @@
 <template>
-  <div class="media py-3 border-bottom  search-result-list-item SearchResultListItem">
+  <div class="media py-3 border-bottom  search-result-list-item SearchResultListItem"
+    data-testid="search-results-list-item">
     <div class="media-aside align-self-start">
       <div v-if="isAvailable()" class="thumbnail">
         <IIIFFragment @click="goToArticle" v-if="article?.pages?.length" :iiif="article.pages[0].iiif" size="!496,480"
diff --git a/src/components/modules/Timeline.vue b/src/components/modules/Timeline.vue
index 305b7d3b4..6bae09b94 100644
--- a/src/components/modules/Timeline.vue
+++ b/src/components/modules/Timeline.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="d3-timeline" ref="timeline" :style="`height: ${heightVal}`">
+  <div class="d3-timeline" ref="timeline" :style="`height: ${heightVal}`" :data-testid="dataTestid">
     <tooltip :tooltip="tooltip">
-      <slot :tooltip="{...tooltip, item }">
+      <slot :tooltip="{ ...tooltip, item }">
         <div v-if="item">
           {{ item }}
         </div>
@@ -59,6 +59,10 @@ export default {
         return [undefined, 'year', 'month', 'day'].includes(value)
       },
     },
+    dataTestid: {
+      type: String,
+      default: 'timeline'
+    }
   },
   data: () => ({
     tooltip: {
@@ -256,36 +260,44 @@ export default {
 
   g.context path.area {
     fill: lighten($clr-primary, 78);
+
     &.contrast {
       fill: coral;
       stroke: red;
     }
   }
+
   g.context rect {
     fill: transparent;
   }
+
   g.context circle.pointer {
     opacity: 0;
+
     &.active {
       opacity: 1;
     }
+
     &.contrast {
       fill: red;
     }
   }
+
   g.context .peak text {
     font-size: 11px;
   }
+
   g.brush {
     rect.selection {
       fill: $clr-accent;
       stroke: $clr-accent;
     }
+
     rect.handle {
       // fill: $clr-accent;
     }
-    rect.handle--e {
-    }
+
+    rect.handle--e {}
   }
 }
 </style>
diff --git a/src/components/modules/lists/ArticleItem.vue b/src/components/modules/lists/ArticleItem.vue
index 06714075a..532d374fd 100644
--- a/src/components/modules/lists/ArticleItem.vue
+++ b/src/components/modules/lists/ArticleItem.vue
@@ -1,7 +1,7 @@
 <template>
   <article :class="{ reference: asReference, ArticleItem: true }">
     <slot name="title">
-      <h2 v-if="item.title" class="mb-0 font-weight-bold">
+      <h2 v-if="item.title" class="mb-0 font-weight-bold" data-testid="article-title">
         <router-link v-if="showLink" :to="routerLinkUrl" v-html="item.title"></router-link>
         <a v-else-if="showHref" v-on:click.prevent="onClick" v-html="item.title"></a>
         <span v-else v-html="item.title"></span>
@@ -13,37 +13,28 @@
       </div>
     </slot>
     <div v-if="showMeta" class="article-meta">
-      <router-link
-        :to="{ name: 'newspaper', params: { newspaper_uid: item?.newspaper?.uid } }"
-        class="article-newspaper"
-      >
+      <router-link :to="{ name: 'newspaper', params: { newspaper_uid: item?.newspaper?.uid } }"
+        class="article-newspaper">
         {{ item.newspaper.name }}
       </router-link>
       <item-selector :uid="item?.newspaper?.uid" :item="item?.newspaper" type="newspaper" /> &nbsp;
-      <span>{{ item.date ? $d(item.date, 'long') : '' }}</span>
-      <span> – {{ pages }}</span>
-      <div>
+      <span data-testid="article-date">{{ item.date ? $d(item.date, 'long') : '' }}</span>
+      <span data-testid="article-pages-count"> – {{ pages }}</span>
+      <div data-testid="article-access-rights">
         {{ $t(`buckets.accessRight.${item.accessRight}`) }} &mdash; {{ $t('providedBy') }}
-        <ItemSelector
-          :uid="item.dataProvider"
-          :label="$t(`buckets.dataProvider.${item.dataProvider}`)"
-          :item="{ uid: item.dataProvider }"
-          type="partner"
-        />
+        <ItemSelector :uid="item.dataProvider" :label="$t(`buckets.dataProvider.${item.dataProvider}`)"
+          :item="{ uid: item.dataProvider }" type="partner" />
       </div>
     </div>
 
-    <div
-      v-if="showExcerpt && !item?.matches?.length && item.type !== 'image'"
-      class="article-excerpt mt-2"
-    >
+    <div v-if="showExcerpt && !item?.matches?.length && item.type !== 'image'" class="article-excerpt mt-2">
       <span class="article-excerpt">{{ item.excerpt }}</span>
       <b-badge v-if="showSize || showType" variant="light" class="mr-1 pt-1">
         <span v-if="showType && item.type">{{ $t(`buckets.type.${item.type}`) }} | </span>
         <span v-if="showSize">
           <span v-if="item.size > 1200">{{
             $t('readingTime', { min: parseInt(item.size / 1200) })
-          }}</span>
+            }}</span>
           <span v-else>{{ $t('reducedReadingTime') }}</span>
         </span>
       </b-badge>
@@ -53,19 +44,14 @@
     <slot name="actions"></slot>
 
     <div v-if="showEntities" class="article-extras article-entities mt-2">
-      <div v-if="item.locations?.length">
+      <div v-if="item.locations?.length" data-testid="article-locations">
         <b-badge variant="light" class="mr-1 small-caps bg-medium">locations</b-badge>
         <span class="small" v-for="(location, idx) in item.locations" v-bind:key="idx">
-          <item-selector
-            :uid="location.uid"
-            :label="location.name"
-            :item="location"
-            type="location"
-          />
+          <item-selector :uid="location.uid" :label="location.name" :item="location" type="location" />
           <span v-if="idx !== item.locations.length - 1">, </span>
         </span>
       </div>
-      <div v-if="item.persons?.length">
+      <div v-if="item.persons?.length" data-testid="article-persons">
         <b-badge variant="light" class="mr-1 small-caps bg-medium">people</b-badge>
         <span class="small" v-for="(person, idx) in item.persons" v-bind:key="idx">
           <item-selector :uid="person.uid" :label="person.name" :item="person" type="person" />
@@ -73,30 +59,19 @@
         </span>
       </div>
     </div>
-    <div v-if="showTopics" class="small article-extras article-topics my-2">
+    <div v-if="showTopics" class="small article-extras article-topics my-2" data-testid="article-topics">
       <b-badge variant="light" class="mr-1 small-caps bg-medium">topics</b-badge>
       <b-row v-if="item.topics.length">
         <b-col lg="6" xl="4" class="my-1" v-for="(rel, idx) in item.topics" v-bind:key="idx">
-          <viz-bar
-            show-border
-            show-percent
-            :percent="rel.relevance * 100"
-            :uid="rel.topic.uid"
-            :item="rel.topic"
-            type="topic"
-          />
+          <viz-bar show-border show-percent :percent="rel.relevance * 100" :uid="rel.topic.uid" :item="rel.topic"
+            type="topic" />
         </b-col>
       </b-row>
     </div>
     <div v-if="showMatches">
       <ul v-if="item.matches.length" class="article-matches d-flex flex-wrap mt-1 p-0">
-        <li
-          class="p-1 mb-2 mr-2 me-2 rounded"
-          v-for="(match, i) in item.matches"
-          v-bind:key="i"
-          v-html="match.fragment"
-          v-show="match.fragment.trim().length > 0"
-        />
+        <li class="p-1 mb-2 mr-2 me-2 rounded" v-for="(match, i) in item.matches" v-bind:key="i" v-html="match.fragment"
+          v-show="match.fragment.trim().length > 0" />
       </ul>
     </div>
     <slot name="footer"></slot>
@@ -176,28 +151,35 @@ export default {
 .ArticleItem .article-newspaper {
   font-weight: bold;
 }
+
 .ArticleItem .date {
   text-transform: lowercase;
   font-variant: small-caps;
 }
+
 .ArticleItem {
   h2 {
     font-size: 1.2em;
   }
 }
+
 .ArticleItem.reference {
+
   h2,
   .article-meta {
     font-size: inherit;
     display: inline-block;
   }
+
   h2::after {
     content: ', ';
   }
+
   .date {
     text-transform: none;
     font-variant: normal;
   }
+
   .article-newspaper {
     font-weight: normal;
   }
@@ -208,16 +190,19 @@ export default {
   }
 }
 
-.ArticleItem .article-topics > div {
+.ArticleItem .article-topics>div {
   columns: 4 270px;
+
   div {
     break-inside: avoid-column;
   }
 }
+
 .ArticleItem ul.article-matches {
   list-style-type: none;
   font-size: smaller;
 }
+
 .ArticleItem ul.article-matches li {
   border-left-width: 0 !important;
   background: var(--impresso-color-yellow-alpha-30);
diff --git a/src/components/modules/vis/HistogramSlider.vue b/src/components/modules/vis/HistogramSlider.vue
index d66572cdd..f6aa50c56 100644
--- a/src/components/modules/vis/HistogramSlider.vue
+++ b/src/components/modules/vis/HistogramSlider.vue
@@ -5,17 +5,12 @@
         <svg ref="chart" class="chart" preserveAspectRatio="none"></svg>
       </b-row>
       <b-row v-if="shouldEnableSlider">
-        <VueSlider
-          width="100%"
-          v-model="sliderValue"
-          v-bind="{
-            modelValue: [sliderValue[0], sliderValue[1]],
-            min: sliderRange[0],
-            max: sliderRange[1]
-          }"
-          :tooltip-formatter="formatTooltip"
-          :tooltip-placement="onlyRangeLabels ? 'bottom' : 'top'"
-        />
+        <VueSlider width="100%" v-model="sliderValue" v-bind="{
+          modelValue: [sliderValue[0], sliderValue[1]],
+          min: sliderRange[0],
+          max: sliderRange[1]
+        }" :tooltip-formatter="formatTooltip" :tooltip-placement="onlyRangeLabels ? 'bottom' : 'top'"
+          data-testid="slider-control" />
       </b-row>
     </b-col>
   </b-container>
@@ -101,7 +96,7 @@ export default {
           .reduce((acc, { val }, index) => {
             if (index % step === 0) acc.push(val)
             return acc
-          }, /** @type {string[]} */ ([]))
+          }, /** @type {string[]} */([]))
           .concat([this.sliderRange[1].toString()])
       }
       const [min, max] = this.sliderRange
@@ -331,11 +326,13 @@ export default {
 
 <style lang="scss">
 @import 'src/assets/legacy/bootstrap-impresso-theme-variables.scss';
+
 .histogram-slider {
   .slider {
     width: 100% !important;
     margin-bottom: 1.4em; // slider ticks
   }
+
   .chart {
     .bars {
       .bar {
@@ -346,14 +343,18 @@ export default {
         fill: #999999;
       }
     }
+
     .hovered-value {
       fill: #999999;
     }
+
     .hovered-background {
       fill: #b65656;
     }
+
     .maxval {
       font-size: 12px;
+
       .point {
         fill: $clr-primary;
       }
@@ -361,11 +362,9 @@ export default {
   }
 }
 </style>
-<i18n lang="json">
-{
+<i18n lang="json">{
   "en": {
     "maxval": "{val} ({n} results)",
     "maxvalrange": "{lower} - {upper} ({n} results)"
   }
-}
-</i18n>
+}</i18n>
diff --git a/src/components/modules/vis/LazyOpenSeadragonArticlePageViewer.vue b/src/components/modules/vis/LazyOpenSeadragonArticlePageViewer.vue
index 4838ab1e7..8d9522a40 100644
--- a/src/components/modules/vis/LazyOpenSeadragonArticlePageViewer.vue
+++ b/src/components/modules/vis/LazyOpenSeadragonArticlePageViewer.vue
@@ -1,8 +1,8 @@
 <template>
-  <open-seadragon-viewer
-    v-bind:handler="handler"
-    v-observe-visibility="handleVisibilityChange">
-  </open-seadragon-viewer>
+  <div ref="viewer">
+    <open-seadragon-viewer v-bind:handler="handler" v-if="isVisible">
+    </open-seadragon-viewer>
+  </div>
 </template>
 
 <script>
@@ -22,6 +22,7 @@ export default {
   data: () => ({
     handler: mitt(),
     isVisible: false, // by default the item is not visible in the browser viewport
+    observer: undefined,
   }),
   props: {
     viewerOptions: {
@@ -43,11 +44,31 @@ export default {
       }
       this.handler.emit('fit-bounds-to-overlays');
     });
+
+    // old browser - load right away
+    if (!('IntersectionObserver' in window)) {
+      this.isVisible = true
+    }
+
+    this.observer = new IntersectionObserver((entries) => {
+      let entry = entries[0];
+
+      if (entries.length > 1) {
+        const intersectingEntry = entries.find((e) => e.isIntersecting);
+
+        if (intersectingEntry) {
+          entry = intersectingEntry;
+        }
+      }
+
+      this.isVisible = entry.isIntersecting
+      console.log('isVisible', this.isVisible)
+    })
+    if (this.observer) {
+      this.observer.observe(this.$refs.viewer)
+    }
   },
   methods: {
-    handleVisibilityChange(isVisible) {
-      this.isVisible = isVisible
-    },
     init() {
       if (!this.isVisible || !this.viewerOptions) return
       this.handler.emit('init', this.viewerOptions);
diff --git a/src/main.ts b/src/main.ts
index c14a5b2f7..f76c1f4c2 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,5 @@
 import { createApp } from 'vue'
 import { initSequence } from './init'
-import VueObserveVisibility from 'vue3-observe-visibility'
 
 import 'dripicons/webfont/webfont.css'
 import './assets/legacy/bootstrap-impresso-theme.css'
@@ -16,7 +15,7 @@ import globalComponents from './plugins/globalComponents'
 
 const app = createApp(App)
 
-app.config.errorHandler = (error) => {
+app.config.errorHandler = error => {
   const notificationsStore = useNotificationsStore()
   notificationsStore.displayError({
     error: error as any,
@@ -28,11 +27,10 @@ app.use(pinia)
 app.use(router)
 app.use(newI18n())
 app.use(globalComponents)
-app.use(VueObserveVisibility)
 
 initSequence().then(() => app.mount('#app-container'))
 
-window.addEventListener('unhandledrejection', (event) => {
+window.addEventListener('unhandledrejection', event => {
   if (event.reason) {
     const notificationsStore = useNotificationsStore()
     notificationsStore.displayError({
diff --git a/src/pages/Search.vue b/src/pages/Search.vue
index f99995778..c546447c5 100644
--- a/src/pages/Search.vue
+++ b/src/pages/Search.vue
@@ -1,21 +1,17 @@
 <template>
   <i-layout id="SearchPage">
-    <search-sidebar
-      width="400px"
-      :filters="enrichedFilters"
-      :facets="facets"
-      contextTag="search"
-      @changed="handleFiltersChanged"
-    >
+    <search-sidebar width="400px" :filters="enrichedFilters" :facets="facets" contextTag="search"
+      @changed="handleFiltersChanged">
       <template v-slot:header="{ focusHandler }">
         <autocomplete @submit="onSuggestion" @input-focus="focusHandler" :filters="filters" />
       </template>
       <div>
-        <b-button class="float-right mx-3 btn-sm" @click="showModal('embeddings')">
+        <b-button class="float-right mx-3 btn-sm" @click="showModal('embeddings')"
+          data-testid="add-similar-words-button">
           {{ $t('label_embeddings') }}
           <info-button class="ml-1" name="how-are-word-embeddings-generated" />
         </b-button>
-        <b-form-group class="mx-3">
+        <b-form-group class="mx-3" data-testid="is-frontpage-toggle">
           <b-form-checkbox v-model="isFront" switch v-bind:modelValue="true">
             {{ $t('label_isFront') }}
           </b-form-checkbox>
@@ -28,22 +24,13 @@
         <b-navbar type="light" variant="light" class="border-bottom px-0 py-0">
           <b-navbar-nav class="px-3 py-3 flex-grow-1 border-right">
             <label class="mr-1">{{ $t('label_group') }}</label>
-            <i-dropdown
-              v-model="groupBy"
-              v-bind:options="groupByOptions"
-              size="sm"
-              variant="outline-primary"
-            ></i-dropdown>
+            <i-dropdown v-model="groupBy" v-bind:options="groupByOptions" size="sm" variant="outline-primary"
+              data-testid="group-by-dropdown"></i-dropdown>
           </b-navbar-nav>
           <b-navbar-nav class="px-3 py-3 border-right">
             <label class="mr-1">{{ $t('label_order') }}</label>
-            <i-dropdown
-              v-model="orderBy"
-              v-bind:options="orderByOptions"
-              size="sm"
-              variant="outline-primary"
-              right
-            ></i-dropdown>
+            <i-dropdown v-model="orderBy" v-bind:options="orderByOptions" size="sm" variant="outline-primary" right
+              data-testid="order-by-dropdown"></i-dropdown>
           </b-navbar-nav>
         </b-navbar>
 
@@ -55,60 +42,35 @@
             <b-button variant="danger" class="ml-2" size="sm" v-on:click="onClearSelection()">
               {{ $t('Clear Selection') }}
             </b-button>
-            <collection-add-to
-              :items="selectedItems"
-              :text="$tc('add_n_to_collection', selectedItems.length)"
-              class="addbulk bg-white float-right"
-            />
+            <collection-add-to :items="selectedItems" :text="$tc('add_n_to_collection', selectedItems.length)"
+              class="addbulk bg-white float-right" />
           </div>
         </b-navbar>
 
         <b-navbar class="d-flex p-0 border-bottom bg-light">
           <b-navbar-nav class="px-2 pl-3 py-2 border-right flex-grow-1">
             <ellipsis v-bind:initialHeight="60">
-              <search-results-summary
-                @onSummary="onSummary"
-                :group-by="groupBy"
-                :search-query="{ filters: enrichedFilters }"
-                :totalRows="paginationTotalRows"
-              />
+              <search-results-summary @onSummary="onSummary" :group-by="groupBy"
+                :search-query="{ filters: enrichedFilters }" :totalRows="paginationTotalRows" />
             </ellipsis>
           </b-navbar-nav>
           <b-navbar-nav class="ml-auto pl-3">
-            <b-button
-              size="sm"
-              variant="outline-primary"
-              class="mr-1"
-              :to="{
-                name: 'compare',
-                query: {
-                  left: searchQueryHash,
-                },
-              }"
-            >
+            <b-button size="sm" variant="outline-primary" class="mr-1" :to="{
+              name: 'compare',
+              query: {
+                left: searchQueryHash,
+              },
+            }">
               {{ $t('actions.compare') }}
             </b-button>
-            <b-dropdown
-              v-if="isLoggedIn"
-              v-bind:text="$t('query_actions')"
-              size="sm"
-              variant="outline-primary"
-              right
-              class="bg-white mr-3"
-            >
-              <b-dropdown-item
-                v-if="selectedItems.length > 0"
-                class="p-2 small-caps"
-                @click="showModal('nameSelectionCollection')"
-              >
+            <b-dropdown v-if="isLoggedIn" v-bind:text="$t('query_actions')" size="sm" variant="outline-primary" right
+              class="bg-white mr-3">
+              <b-dropdown-item v-if="selectedItems.length > 0" class="p-2 small-caps"
+                @click="showModal('nameSelectionCollection')">
                 <span class="dripicons-checklist pr-1"></span>
                 {{ $tc('add_n_to_collection', selectedItems.length) }}
               </b-dropdown-item>
-              <b-dropdown-item
-                v-on:click="exportSelectedCsv"
-                v-if="selectedItems.length > 0"
-                class="p-2 small-caps"
-              >
+              <b-dropdown-item v-on:click="exportSelectedCsv" v-if="selectedItems.length > 0" class="p-2 small-caps">
                 <span class="dripicons-export pr-1"></span>
                 {{ $t('selected_export_csv') }}
               </b-dropdown-item>
@@ -135,43 +97,21 @@
         </b-navbar>
       </template>
 
-      <Modal
-        id="nameSelectionCollection"
-        hide-footer
-        body-class="m-0 p-0"
-        :title="$tc('add_n_to_collection', selectedItems.length)"
-        :show="isModalVisible('nameSelectionCollection')"
-        @shown="nameSelectedCollectionOnShown()"
-        >
+      <Modal id="nameSelectionCollection" hide-footer body-class="m-0 p-0"
+        :title="$tc('add_n_to_collection', selectedItems.length)" :show="isModalVisible('nameSelectionCollection')"
+        @shown="nameSelectedCollectionOnShown()">
         <collection-add-to-list :items="selectedItems" />
       </Modal>
 
-      <Modal
-        id="nameCollection"
-        :title="$t('query_add_to_collection')"
-        :show="isModalVisible('nameCollection')"
-        :okDisabled="nameCollectionOkDisabled"
-        @close="hideModal('nameCollection')"
-        @ok="createQueryCollection()"
-        @shown="nameCollectionOnShown()"
-        >
+      <Modal id="nameCollection" :title="$t('query_add_to_collection')" :show="isModalVisible('nameCollection')"
+        :okDisabled="nameCollectionOkDisabled" @close="hideModal('nameCollection')" @ok="createQueryCollection()"
+        @shown="nameCollectionOnShown()">
         <form v-on:submit.stop.prevent="createQueryCollection()">
           <label for="inputName">Name</label>
-          <b-form-input
-            @update:modelValue="nameCollectionOnInput"
-            type="text"
-            v-bind:placeholder="$t('Collection_Name')"
-            name="inputName"
-            ref="inputName"
-            v-model="inputName"
-          />
+          <b-form-input @update:modelValue="nameCollectionOnInput" type="text"
+            v-bind:placeholder="$t('Collection_Name')" name="inputName" ref="inputName" v-model="inputName" />
           <label for="inputDescription" class="mt-3">Description</label>
-          <textarea
-            type="text"
-            name="inputDescription"
-            class="form-control"
-            v-model="inputDescription"
-          />
+          <textarea type="text" name="inputDescription" class="form-control" v-model="inputDescription" />
         </form>
         <div class="mt-3 small-caps">
           <p>Please note: Collections are currently limited to 10.000 items.</p>
@@ -182,62 +122,34 @@
         </div>
       </Modal>
 
-      <Modal
-        hide-footer
-        id="embeddings"
-        :title="$t('label_embeddings')"
-        :show="isModalVisible('embeddings')"
-        @close="hideModal('embeddings')"
-      >
+      <Modal hide-footer id="embeddings" :title="$t('label_embeddings')" :show="isModalVisible('embeddings')"
+        @close="hideModal('embeddings')">
         <embeddings-search @embdding-selected="addFilterFromEmbedding" />
       </Modal>
 
       <div class="p-1">
         <b-container fluid>
-          <b-row v-if="displayStyle === 'list'">
-            <b-col
-              cols="12"
-              v-for="(searchResult, index) in searchResults"
-              v-bind:key="searchResult.uid"
-            >
-              <search-results-list-item
-                v-bind:checkbox="false"
-                v-on:toggleSelected="toggleSelected(searchResult)"
-                v-bind:checked="isChecked(searchResult)"
-                v-on:click="onClickResult(searchResult)"
-                v-model="searchResults[index]"
-              />
+          <b-row v-if="displayStyle === 'list'" data-testid="search-results-list-items">
+            <b-col cols="12" v-for="(searchResult, index) in searchResults" v-bind:key="searchResult.uid">
+              <search-results-list-item v-bind:checkbox="false" v-on:toggleSelected="toggleSelected(searchResult)"
+                v-bind:checked="isChecked(searchResult)" v-on:click="onClickResult(searchResult)"
+                v-model="searchResults[index]" />
             </b-col>
           </b-row>
           <b-row class="pb-5" v-if="displayStyle === 'tiles'">
-            <b-col
-              cols="6"
-              sm="12"
-              md="6"
-              lg="4"
-              v-for="(searchResult, index) in searchResults"
-              v-bind:key="searchResult.article_uid"
-            >
-              <search-results-tiles-item
-                checkbox="true"
-                v-on:toggleSelected="toggleSelected(searchResult)"
-                v-bind:checked="isChecked(searchResult)"
-                v-on:click="onClickResult(searchResult)"
-                v-model="searchResults[index]"
-              />
+            <b-col cols="6" sm="12" md="6" lg="4" v-for="(searchResult, index) in searchResults"
+              v-bind:key="searchResult.article_uid">
+              <search-results-tiles-item checkbox="true" v-on:toggleSelected="toggleSelected(searchResult)"
+                v-bind:checked="isChecked(searchResult)" v-on:click="onClickResult(searchResult)"
+                v-model="searchResults[index]" />
             </b-col>
           </b-row>
         </b-container>
         <div class="my-5" />
         <div class="fixed-pagination-footer p-1 m-0">
-          <pagination
-            v-if="searchResults.length"
-            :current-page="paginationCurrentPage"
-            @change="$event => (paginationCurrentPage = $event)"
-            :per-page="paginationPerPage"
-            :total-rows="paginationTotalRows"
-            class="float-left small-caps"
-          />
+          <pagination v-if="searchResults.length" :current-page="paginationCurrentPage"
+            @change="$event => (paginationCurrentPage = $event)" :per-page="paginationPerPage"
+            :total-rows="paginationTotalRows" class="float-left small-caps" />
         </div>
       </div>
     </i-layout-section>
@@ -673,18 +585,18 @@ export default {
             .then(joinFiltersWithItems),
           this.isLoggedIn
             ? collectionsItemsService
-                .find({
-                  query: {
-                    item_uids: this.searchResults.map(d => d.uid),
-                    limit: 100,
-                  },
-                })
-                .then(({ data }) =>
-                  data.reduce((acc, d) => {
-                    acc[d.itemId] = d
-                    return acc
-                  }, {}),
-                )
+              .find({
+                query: {
+                  item_uids: this.searchResults.map(d => d.uid),
+                  limit: 100,
+                },
+              })
+              .then(({ data }) =>
+                data.reduce((acc, d) => {
+                  acc[d.itemId] = d
+                  return acc
+                }, {}),
+              )
             : {},
         ])
         facets = facets.concat(extraFacets)
@@ -733,10 +645,12 @@ export default {
 .navbar-nav {
   flex-direction: row;
   align-items: center;
+
   label {
     margin-bottom: 0;
     line-height: 1.5;
   }
+
   .custom-control-label,
   .custom-control-label::before {
     position: inherit;
@@ -763,8 +677,7 @@ export default {
 }
 </style>
 
-<i18n lang="json">
-{
+<i18n lang="json">{
   "en": {
     "label_display": "Display As",
     "label_order": "Order By",
@@ -784,8 +697,8 @@ export default {
     "add_n_to_collection": "Add selected item to collection ... | Add {count} selected items to collection ...",
     "query_actions": "Save / Export",
     "query_add_to_collection": "Create Collection from Search Results",
-    "Collection_Name" : "Collection Name",
-    "Collection_Description" : "Collection Description",
+    "Collection_Name": "Collection Name",
+    "Collection_Description": "Collection Description",
     "query_export": "Export result list as ...",
     "query_export_csv": "Export result list as CSV",
     "selected_export_csv": "Export selected items as CSV",
@@ -808,5 +721,4 @@ export default {
     "order_articles": "Artikel",
     "order_sentences": "Zin"
   }
-}
-</i18n>
+}</i18n>
diff --git a/src/stores/autocomplete.ts b/src/stores/autocomplete.ts
index fcb7a9e40..9944fdd91 100644
--- a/src/stores/autocomplete.ts
+++ b/src/stores/autocomplete.ts
@@ -3,7 +3,7 @@ import SuggestionFactory from '@/models/SuggestionFactory'
 import { collections as collectionsService, suggestions as suggestionsService } from '@/services'
 import { defineStore } from 'pinia'
 
-interface State {
+export interface State {
   queries: string[]
   searchableQueries: string[]
 }
diff --git a/src/stores/user.ts b/src/stores/user.ts
index 83c7557ca..df7b742e5 100644
--- a/src/stores/user.ts
+++ b/src/stores/user.ts
@@ -1,8 +1,8 @@
 import { defineStore } from 'pinia'
-import { app, me as meService } from '@/services';
-import User from '@/models/User';
+import { app, me as meService } from '@/services'
+import User from '@/models/User'
 
-interface State {
+export interface State {
   userData: User | false
   rememberCredentials: boolean
   redirectionParams: any
@@ -16,59 +16,71 @@ export const useUserStore = defineStore('user', {
   }),
   getters: {
     user(state) {
-      return state.userData;
+      return state.userData
     },
   },
   actions: {
     logout() {
-      return (app as any).logout()
-        .catch((err) => {
-          console.error('error in store/User/LOGOUT');
-          console.error(err);
+      return (app as any)
+        .logout()
+        .catch(err => {
+          console.error('error in store/User/LOGOUT')
+          console.error(err)
         })
         .finally(() => {
           const expiredDate = new Date(-1)
-          document.cookie = 'feathers-jwt=; expires=' + expiredDate.toUTCString() + '; path=/';
+          document.cookie = 'feathers-jwt=; expires=' + expiredDate.toUTCString() + '; path=/'
           this.userData = false
         })
     },
-    async login({ email, password }: { email: string, password: string }) {
-      return (app as any).authenticate({
-        strategy: 'local',
-        email,
-        password,
-      }).then((res) => {
-        console.info('Authentication response:', res);
-        return res;
-      }).then(({ user }) => {
-        console.info('LOGIN: user', user.username, 'logged in!');
-        // don't save cookie
-        // const expiredDate = new Date(authentication?.payload?.exp * 1000)
-        // document.cookie = 'feathers-jwt=' + accessToken + '; expires=' + expiredDate.toUTCString() + '; path=/';
-        app.set('user', user);
-        this.userData = new User({
-          ...user,
-          picture: user.profile.picture,
-          pattern: user.profile.pattern,
-        });
-        return user;
-      });
+    async login({ email, password }: { email: string; password: string }) {
+      return (app as any)
+        .authenticate({
+          strategy: 'local',
+          email,
+          password,
+        })
+        .then(res => {
+          console.info('Authentication response:', res)
+          return res
+        })
+        .then(({ user }) => {
+          console.info('LOGIN: user', user.username, 'logged in!')
+          // don't save cookie
+          // const expiredDate = new Date(authentication?.payload?.exp * 1000)
+          // document.cookie = 'feathers-jwt=' + accessToken + '; expires=' + expiredDate.toUTCString() + '; path=/';
+          app.set('user', user)
+          this.userData = new User({
+            ...user,
+            picture: user.profile.picture,
+            pattern: user.profile.pattern,
+          })
+          return user
+        })
     },
     setRememberCredentials(remember: boolean) {
-      this.rememberCredentials = remember;
+      this.rememberCredentials = remember
     },
     getCurrentUser() {
-      return meService.find().then(d => new User(d));
+      return meService.find().then(d => new User(d))
     },
-    changePassword({ uid, previousPassword, newPassword}: { uid: string, previousPassword: string, newPassword: string }) {
-      return meService.patch(uid, { previousPassword, newPassword }, {});
+    changePassword({
+      uid,
+      previousPassword,
+      newPassword,
+    }: {
+      uid: string
+      previousPassword: string
+      newPassword: string
+    }) {
+      return meService.patch(uid, { previousPassword, newPassword }, {})
     },
     updateCurrentUser(user: User) {
-      return meService.update(user.uid, user, {}).then((d) => {
-        const user = new User(d);
+      return meService.update(user.uid, user, {}).then(d => {
+        const user = new User(d)
         this.userData = user
-        return user;
-      });
+        return user
+      })
     },
     setRedirectionRoute(params) {
       this.redirectionParams = params
diff --git a/tsconfig.node.json b/tsconfig.node.json
index f09406303..a2da47ef7 100644
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -1,12 +1,6 @@
 {
   "extends": "@tsconfig/node20/tsconfig.json",
-  "include": [
-    "vite.config.*",
-    "vitest.config.*",
-    "cypress.config.*",
-    "nightwatch.conf.*",
-    "playwright.config.*"
-  ],
+  "include": ["vite.config.*", "vitest.config.*", "nightwatch.conf.*", "playwright.config.*"],
   "compilerOptions": {
     "composite": true,
     "noEmit": true,