test: Add tests for components

Author: cizil-keyvalue

.eslintrc.cjs

@@ -4,7 +4,7 @@ module.exports = {
   parserOptions: {
     parser: '@typescript-eslint/parser',
     ecmaVersion: 'latest',
-    project: ['./tsconfig.json']
+    project: ['./tsconfig.json', "./tsconfig-tests.json"]
   },
   overrides: [
     {

package-lock.json

@@ -11,7 +11,9 @@
     "types": "vue-tsc ",
     "preview": "vite preview",
     "lint": "eslint src/",
-    "storybook": "storybook dev -p 6006"
+    "storybook": "storybook dev -p 6006",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "repository": {
     "type": "git",
@@ -38,21 +40,27 @@
     "@storybook/test": "^8.0.5",
     "@storybook/vue3": "^8.0.5",
     "@storybook/vue3-vite": "^8.0.5",
+    "@testing-library/vue": "^8.0.3",
+    "@types/jsdom": "^21.1.6",
     "@types/node": "^20.2.5",
     "@types/pubsub-js": "^1.8.6",
     "@typescript-eslint/parser": "^7.5.0",
     "@vitejs/plugin-vue": "^5.0.4",
+    "@vitest/coverage-istanbul": "^1.5.2",
+    "@vitest/coverage-v8": "^1.5.2",
     "@vue/eslint-config-airbnb": "^8.0.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/eslint-config-typescript": "^13.0.0",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-vue": "^9.24.0",
+    "happy-dom": "^14.7.1",
     "path": "^0.12.7",
-    "storybook": "^8.0.5",
     "pubsub-js": "^1.9.4",
+    "storybook": "^8.0.5",
     "typescript": "^5.3.3",
     "vite": "^5.1.6",
     "vite-plugin-css-injected-by-js": "^3.4.0",
+    "vitest": "^1.5.2",
     "vue-tsc": "^2.0.5"
   },
   "peerDependencies": {
@@ -65,6 +73,7 @@
     "license"
   ],
   "dependencies": {
+    "jsdom": "^24.0.0",
     "test_notification": "1.1.0"
   }
 }

package.json

@@ -1,5 +1,5 @@
 <template>
-  <div class="siren-sdk-empty-container">
+  <div class="siren-sdk-empty-container" data-testid="empty-container">
     <div :style="containerStyle" class="siren-sdk-empty-icon-container">
       <img
         :src="darkMode ? darkIcon : lightIcon"

src/components/EmptyList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="siren-sdk-error-window-container">
+  <div class="siren-sdk-error-window-container" data-testid="error-window">
     <div :style="containerStyle" class="siren-sdk-error-icon-container">
       <img
         src="../assets/errorIcon.svg"

src/components/ErrorWindow.vue

@@ -5,10 +5,12 @@
       ...styles.headerContainer,
     }"
     class="siren-sdk-header-container"
+    data-testid="header-container"
   >
     <p :style="styles.headerTitle" class="siren-sdk-text-break">{{ title }}</p>
     <div
       v-if="!hideClearAll"
+      data-testid="clear-all"
       @click="handleClearAllNotification"
       @keydown="handleClearAllNotification"
       :style="{

src/components/HeaderComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="siren-sdk-load-more-container">
+  <div class="siren-sdk-load-more-container" data-testid="load-more-container">
     <div
       :class="
         paginationLoading
@@ -9,6 +9,7 @@
       :style="paginationLoading ? styles.infiniteLoader : styles.loadMoreButton"
       @click="onLoadMore"
       @keydown="onLoadMore"
+      data-testid="on-load-more"
     >
       <slot name="loadMoreComponent">{{
         !paginationLoading ? "Load more" : ""

src/components/LoadMore.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="siren-sdk-loader-container">
+  <div class="siren-sdk-loader-container" data-testid="loader-container">
     <div
       v-for="number in 5"
       :key="number"

src/components/LoaderComponent.vue

@@ -2,14 +2,15 @@
   <div :style="cardContainerStyle" :class="`${cardProps?.hideAvatar
     ? 'siren-sdk-hide-avatar-card-container'
     : 'siren-sdk-card-container'} siren-sdk-card-common-container ${deleteAnimation}`"
-    @click="handleNotificationCardClick" @keydown="handleNotificationCardClick">
+    @click="handleNotificationCardClick" @keydown="handleNotificationCardClick"
+    data-testid="notification-card-container">
     <div :style="{
     ...styles.cardIconRound,
     backgroundImage: `url(${props?.notification?.message?.avatar?.imageUrl || defaultAvatar})`,
     backgroundSize: 'cover',
     backgroundPosition: 'center',
     ...(props?.cardProps?.onAvatarClick && { cursor: 'pointer' }),
-  }" @click="handleAvatarClick" @keydown="handleAvatarClick" v-if="!cardProps?.hideAvatar" />
+  }" @click="handleAvatarClick" @keydown="handleAvatarClick" v-if="!cardProps?.hideAvatar" data-testid="avatar-container" />
     <div class="siren-sdk-card-content-wrapper">
       <div :style="styles.cardTitle" class="siren-sdk-card-title">
         {{ props.notification?.message?.header }}
@@ -27,7 +28,7 @@
         </div>
       </div>
     </div>
-    <div class="siren-sdk-delete-button" @click="handleDelete" @keydown="handleDelete" v-if="!cardProps?.hideDelete">
+    <div class="siren-sdk-delete-button" @click="handleDelete" @keydown="handleDelete" data-testid="delete-notification-button" v-if="!cardProps?.hideDelete">
       <CloseIcon :fill="styles?.deleteIcon?.color" :size="String(styles?.deleteIcon?.size)" />
     </div>
   </div>

src/components/NotificationCard.vue

@@ -2,6 +2,7 @@
   <div
     class="siren-sdk-notification-icon-container"
     :onClick="handleNotification"
+    data-testid="notification-icon-container"
   >
     <slot name="notification-icon">
       <BellIcon :stroke=" darkMode