Unit tests

package.json

@@ -7,6 +7,8 @@
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
     "test:unit": "vitest",
+    "test:unit:ui": "vitest --ui",
+    "coverage": "vitest run --coverage",
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
@@ -34,6 +36,9 @@
     "@types/node": "^18.18.5",
     "@typescript-eslint/eslint-plugin": "^6.11.0",
     "@vitejs/plugin-vue": "^4.4.0",
+    "@vitest/coverage-istanbul": "^0.34.6",
+    "@vitest/coverage-v8": "^0.34.6",
+    "@vitest/ui": "^0.34.6",
     "@vue/eslint-config-prettier": "^8.0.0",
     "@vue/eslint-config-typescript": "^12.0.0",
     "@vue/test-utils": "^2.4.1",

src/components/FoldersView.vue

@@ -7,7 +7,7 @@ import { generateUniqueId } from '@/utilities/helpers'
 import { useFolderStore } from '@/stores/folder'
 import type { DataAccess } from '@/services/data-access'
 import { DataAccessLocalStorageImpl } from '@/services/data-access-localstorage-impl'
-import { appConstants } from '@/utilities/consts'
+import { DefaultFoldersIds, appConstants } from '@/utilities/consts'
 import CustomDialog from '@/components/global/CustomDialog.vue'
 
 const folderStore = useFolderStore()
@@ -40,7 +40,12 @@ const filteredFoldersNoDefault = computed(() => {
 
 const filteredFoldersDefault = computed(() => {
   return props.folders.filter((folder) => {
-    return folder.isDefault
+    if (folder.isDefault) {
+      if (folder.id === DefaultFoldersIds.starredFolderId) {
+        folder.notes = folderStore.getStarredNotes()
+      }
+      return true
+    }
   })
 })
 

src/components/NotesView.vue

@@ -18,7 +18,7 @@ defineProps({
 const emit = defineEmits(['folder-store-updated'])
 
 const { capitalizeFirstChar } = useTextFormatter()
-const { getCurrentDate } = useDateHelper()
+const { formatDate } = useDateHelper()
 
 const isArchived = computed(() => {
   return folderStore.getCurrentFolder().id === DefaultFoldersIds.archiveFolderId
@@ -51,8 +51,9 @@ const computeNoteClasses = (note: Note) => {
 }
 
 const handleNoteClick = (note: Note) => {
-  folderStore.currentNote = note
   folderStore.changeCurrentSelectedNote(note)
+  note.isRead = true
+  folderStore.updateLocalStorage()
 }
 
 const archiveNote = (note: Note) => {
@@ -71,6 +72,12 @@ const unArchiveNote = (note: Note) => {
   }
 }
 
+const starNote = (note: Note) => {
+  note.isStarred = !note.isStarred
+  folderStore.updateLocalStorage()
+  emit('folder-store-updated')
+}
+
 onMounted(() => {
   window.addEventListener('keydown', (event) => {
     if (event.key === 'Escape') {
@@ -91,28 +98,36 @@ onMounted(() => {
             <span class="author-picture">
               <img src="https://picsum.photos/200" alt="avatar" />
             </span>
-            <span class="ms-1">By : ebenjs on {{ getCurrentDate('DD/MM/YYYY') }}</span>
+            <span class="ms-1"
+              >By : ebenjs on {{ formatDate(note.createdAt, 'DD-MM-YYYY HH:mm:ss') }}</span
+            >
           </span>
         </small>
       </div>
-      <!-- edit and delete icons -->
+
+      <div class="note-indicators ms-auto">
+        <span v-if="note.isStarred" class="material-symbols-outlined">editor_choice</span>
+      </div>
+
       <div class="folder-actions">
         <div class="d-flex align-items-center justify-content-center">
-          <!-- <span class="material-symbols-outlined share">ios_share</span> -->
-          <span class="material-symbols-outlined star ms-2">editor_choice</span>
+          <span class="material-symbols-outlined star ms-2" @click.stop="starNote(note)"
+            >editor_choice</span
+          >
+
           <span
             v-if="!isArchived"
             @click.stop="archiveNote(note)"
             class="material-symbols-outlined archive ms-2"
             >archive</span
           >
-
           <span
             v-else
             @click.stop="unArchiveNote(note)"
             class="material-symbols-outlined archive ms-2"
             >unarchive</span
           >
+
           <span class="material-symbols-outlined remove ms-2">delete</span>
         </div>
       </div>

src/components/__tests__/global/CustomDialog.spec.ts

@@ -0,0 +1,17 @@
+import CustomDialog from '@/components/global/CustomDialog.vue'
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+
+describe('CustomDialog', () => {
+  it('renders properly', () => {
+    const wrapper = mount(CustomDialog, {
+      slots: {
+        body: 'Hello world'
+      }
+    })
+    expect(wrapper.find('[data-test="body-slot"]').text()).toBe('Hello world')
+    expect(wrapper.find('[data-test="close"]').exists()).toBe(true)
+    wrapper.find('[data-test="close"]').trigger('click')
+    expect(wrapper.emitted('close-dialog')).toBeTruthy()
+  })
+})

src/components/__tests__/global/TransparentIconButton.spec.ts

@@ -0,0 +1,28 @@
+import TransparentIconButton from '@/components/global/TransparentIconButton.vue'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+
+describe('TransparentIconButton', () => {
+  const wrapper = mount(TransparentIconButton, {
+    props: {
+      icon: 'folder',
+      width: '24px',
+      height: '24px'
+    }
+  })
+  it('renders properly', () => {
+    expect(wrapper.find('[data-test="button"]').exists()).toBe(true)
+  })
+
+  it('shows the icon', () => {
+    expect(wrapper.find('[data-test="icon"]').text()).toBe('folder')
+  })
+
+  it('has the correct width', () => {
+    expect(wrapper.find('[data-test="button"]').attributes('style')).have.string('width: 24px')
+  })
+
+  it('has the correct height', () => {
+    expect(wrapper.find('[data-test="button"]').attributes('style')).have.string('height: 24px')
+  })
+})

src/components/global/CustomDialog.vue

@@ -6,11 +6,9 @@ defineEmits(['close-dialog'])
   <div class="custom-dialog">
     <div class="custom-dialog-header">
       <slot name="header"></slot>
-      <span class="material-symbols-outlined close ms-auto" @click="$emit('close-dialog')"
-        >cancel</span
-      >
+      <span class="material-symbols-outlined close ms-auto" data-test="close" @click="$emit('close-dialog')">cancel</span>
     </div>
-    <div class="custom-dialog-body">
+    <div class="custom-dialog-body" data-test="body-slot">
       <slot name="body"></slot>
     </div>
     <div class="custom-dialog-footer">

src/components/global/TransparentIconButton.vue

@@ -16,8 +16,8 @@ defineProps({
 </script>
 
 <template>
-  <button class="transparent-icon-button" :style="{ width, height }">
-    <span class="material-symbols-outlined">
+  <button class="transparent-icon-button" :style="{ width, height }" data-test="button">
+    <span class="material-symbols-outlined" data-test="icon">
       {{ icon }}
     </span>
   </button>

src/stores/folder.ts

@@ -16,6 +16,10 @@ export const useFolderStore = defineStore('folder', () => {
     return folders.value[currentFolderId.value]
   }
 
+  function getStarredNotes(): Note[] {
+    return folders.value[DefaultFoldersIds.allNotesFolderId].notes.filter((note) => note.isStarred)
+  }
+
   function changeCurrentSelectedNote(note: Note | null) {
     currentNote.value = note
   }
@@ -79,6 +83,7 @@ export const useFolderStore = defineStore('folder', () => {
   }
 
   return {
+    getStarredNotes,
     updateLocalStorage,
     currentNote,
     changeCurrentSelectedNote,

src/types.d.ts

@@ -3,8 +3,9 @@ import type { OutputData } from '@editorjs/editorjs'
 interface Note {
   id: number | string
   data: OutputData
-  createdAt: string
+  createdAt: Moment
   isRead?: boolean
+  isStarred?: boolean
 }
 
 interface EditorOutputFormat {

src/utilities/date-helper.vue

@@ -6,8 +6,13 @@ export default function () {
     return moment().format(format)
   }
 
+  const formatDate = (date: string, format: string): string => {
+    return moment(date).format(format)
+  }
+
   return {
-    getCurrentDate
+    getCurrentDate,
+    formatDate
   }
 }
 </script>

src/views/HomeView.vue

@@ -12,6 +12,7 @@ import { DefaultFoldersIds, appConstants } from '@/utilities/consts'
 import { generateUniqueId } from '@/utilities/helpers'
 import { useFolderStore } from '@/stores/folder'
 import type { FilterOptions, Folder, Note } from '@/types'
+import moment from 'moment'
 
 const folderStore = useFolderStore()
 const foldersCopy = ref<Folder[]>(folderStore.folders)
@@ -32,9 +33,8 @@ const handleSearchTextChanged = (value: string) => {
 }
 
 const handleSelectedFolderChange = (folderId: DefaultFoldersIds) => {
-  folderStore.currentFolderId = folderId
+  folderStore.changeCurrentFolderId(folderId)
   handleFilterOptionsChanged({ read: true, unread: true })
-  folderStore.currentNote = null
 }
 
 const handleFilterOptionsChanged = (filterOptions: FilterOptions) => {
@@ -63,7 +63,7 @@ const handleAddNote = () => {
       blocks: []
     },
     isRead: false,
-    createdAt: '2021-08-01T00:00:00.000Z'
+    createdAt: moment()
   }
 
   if (!(foldersCopy.value.length > 0)) {

vitest.config.ts

@@ -8,7 +8,12 @@ export default mergeConfig(
     test: {
       environment: 'jsdom',
       exclude: [...configDefaults.exclude, 'e2e/*'],
-      root: fileURLToPath(new URL('./', import.meta.url))
+      root: fileURLToPath(new URL('./', import.meta.url)),
+      coverage: {
+        all: true,
+        provider: 'istanbul',
+        reporter: ['text', 'html']
+      }
     }
   })
 )