unit testing added

.eslintrc.cjs

@@ -4,12 +4,18 @@ require('@rushstack/eslint-patch/modern-module-resolution')
 module.exports = {
   root: true,
   'extends': [
-    'plugin:vue/vue3-essential',
+    'plugin:vue/vue3-recommended',
     'eslint:recommended',
     '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier/skip-formatting'
   ],
   parserOptions: {
     ecmaVersion: 'latest'
+  },
+  rules: {
+    "vue/no-v-html": "off"
+  },
+  env: {
+    node: true
   }
 }

package.json

@@ -10,7 +10,8 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --build --force",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "format": "prettier --write src/"
+    "format": "prettier --write src/",
+    "test": "vitest"
   },
   "dependencies": {
     "animate.css": "^4.1.1",
@@ -20,20 +21,25 @@
     "vue-router": "^4.2.5"
   },
   "devDependencies": {
+    "@pinia/testing": "^0.1.3",
     "@rushstack/eslint-patch": "^1.3.3",
     "@tsconfig/node18": "^18.2.2",
-    "@types/node": "^18.19.3",
+    "@types/jsdom": "^21.1.6",
+    "@types/node": "^20.11.28",
     "@vitejs/plugin-vue": "^4.5.2",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/test-utils": "^2.4.5",
     "@vue/tsconfig": "^0.5.0",
     "eslint": "^8.49.0",
     "eslint-plugin-vue": "^9.17.0",
+    "jsdom": "^24.0.0",
     "npm-run-all2": "^6.1.1",
     "prettier": "^3.0.3",
     "sass": "^1.70.0",
     "typescript": "~5.3.0",
     "vite": "^5.0.10",
+    "vitest": "^1.4.0",
     "vue-tsc": "^1.8.25"
   }
 }

src/components/BookItem.vue

@@ -11,7 +11,6 @@ const inTheCart = computed(() => !!basketStore.books.find(theBook => theBook.id
 const isBookRemoving = ref<boolean>(false)
 
 const props = defineProps<{
-    volumeId?: string
     book: Book
     type: string
 }>()
@@ -71,13 +70,15 @@ function handleRemoveBook(book: Book) {
             <button
                 v-if="props.type === 'basket'"
                 class="book__btn-action btn-primary"
+                data-test="book-action-btn"
                 @click="handleRemoveBook(book)"
             >
                 Удалить из корзины
             </button>
             <button
                 v-else
                 class="book__btn-action btn-primary"
+                data-test="book-action-btn"
                 :disabled="inTheCart"
                 @click="basketStore.addBookInBasket(book)"
             >

src/components/__tests__/BookItem.spec.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount, shallowMount } from '@vue/test-utils'
+import { createTestingPinia } from '@pinia/testing'
+
+import BookItem from '@/components/BookItem.vue'
+import bookCoverPhoto from '@/assets/img/book-cover.png'
+import { fixReqString } from '@/modules/utils'
+import { useBasketStore } from '@/store/store'
+
+describe('BookItem', () => {
+    const wrapper = shallowMount(BookItem, {
+        props: {
+            book: {
+                saleInfo: {
+                    retailPrice: {
+                        amount: 400
+                    }
+                },
+                volumeInfo: {
+                    authors: ['Author'],
+                    description: 'Description',
+                    title: 'Book Title',
+                    imageLinks: { small: '' }
+                },
+                id: ''
+            },
+            type: ''
+        },
+        global: {
+            plugins: [
+                createTestingPinia({
+                    createSpy: vi.fn(),
+                    stubActions: true
+                })
+            ]
+        }
+    })
+
+    it('renders properly', () => {
+        const bookAuthors = wrapper.get('[data-test="book-authors"]')
+        const bookTitle = wrapper.get('[data-test="book-title"]')
+        const bookDescription = wrapper.get('[data-test="book-description"]')
+        const bookPrice = wrapper.get('[data-test="book-price"]')
+        const bookImg = wrapper.get('[data-test="book-img"]')
+
+        expect(bookAuthors.text()).toContain(wrapper.props('book').volumeInfo.authors)
+        expect(bookTitle.text()).toBe(wrapper.props('book').volumeInfo.title)
+        expect(bookDescription.text()).toBe(wrapper.props('book').volumeInfo.description)
+        expect(bookPrice.text()).toContain(`${wrapper.props('book').saleInfo.retailPrice.amount} ₽`)
+        expect(bookImg.attributes('src')).toBe(
+            fixReqString(wrapper.props('book').volumeInfo.imageLinks.small || '') || bookCoverPhoto
+        )
+    })
+
+    it('adding a book to store', () => {
+        const basketStore = useBasketStore()
+        const bookActionBtn = wrapper.get('[data-test="book-action-btn"]')
+        bookActionBtn.trigger('click')
+        expect(!!basketStore.books.find(book => book.id === wrapper.props('book').id)).toBeTruthy()
+    })
+})

tsconfig.json

@@ -6,6 +6,9 @@
     },
     {
       "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.vitest.json"
     }
   ]
 }

tsconfig.vitest.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.app.json",
+  "exclude": [],
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.vitest.tsbuildinfo",
+
+    "lib": [],
+    "types": ["node", "jsdom"]
+  }
+}

vitest.config.ts

@@ -0,0 +1,14 @@
+import { fileURLToPath } from 'node:url'
+import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
+import viteConfig from './vite.config'
+
+export default mergeConfig(
+  viteConfig,
+  defineConfig({
+    test: {
+      environment: 'jsdom',
+      exclude: [...configDefaults.exclude, 'e2e/*'],
+      root: fileURLToPath(new URL('./', import.meta.url))
+    }
+  })
+)