feat: added delete list & list items

2026-08-21 21:52:26 +02:00
parent 7273fe85d3
commit 0007f96c35
17 changed files with 1639 additions and 10 deletions
@@ -0,0 +1,70 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import DeleteListModal from '../DeleteListModal.vue'
+import type { LocalList } from '@/database/db'
+
+describe('DeleteListModal', () => {
+  const sampleList: LocalList = {
+    id: 'list-123',
+    name: 'Groceries',
+    created_at: '2026-08-21T00:00:00.000Z',
+    modified_at: '2026-08-21T00:00:00.000Z',
+  }
+
+  it('renders modal with list name and confirmation prompt', () => {
+    const wrapper = mount(DeleteListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Delete "Groceries"?')
+    expect(wrapper.text()).toContain('Are you sure you want to delete this list?')
+    expect(wrapper.find('.confirm-delete-btn').text()).toBe('Delete list')
+    expect(wrapper.find('.cancel-btn').text()).toBe('Cancel')
+  })
+
+  it('emits confirm event when Delete button is clicked', async () => {
+    const wrapper = mount(DeleteListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('.confirm-delete-btn').trigger('click')
+    expect(wrapper.emitted('confirm')).toBeTruthy()
+  })
+
+  it('emits close event when Cancel button is clicked', async () => {
+    const wrapper = mount(DeleteListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('.cancel-btn').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('emits close event when close icon button is clicked', async () => {
+    const wrapper = mount(DeleteListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('.close-btn').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('emits close event when clicking overlay background', async () => {
+    const wrapper = mount(DeleteListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('.modal-overlay').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+})
@@ -0,0 +1,112 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import ListCard from '../ListCard.vue'
+import type { LocalList } from '@/database/db'
+
+describe('ListCard', () => {
+  const sampleList: LocalList = {
+    id: 'list-123',
+    name: 'Groceries',
+    created_at: '2026-08-21T00:00:00.000Z',
+    modified_at: '2026-08-21T00:00:00.000Z',
+  }
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.restoreAllMocks()
+  })
+
+  it('renders list name and options button', () => {
+    const wrapper = mount(ListCard, {
+      props: {
+        list: sampleList,
+      },
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    expect(wrapper.text()).toContain('Groceries')
+    expect(wrapper.find('.menu-trigger-btn').exists()).toBe(true)
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+
+  it('toggles dropdown submenu when options button is clicked', async () => {
+    const wrapper = mount(ListCard, {
+      props: {
+        list: sampleList,
+      },
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(true)
+    expect(wrapper.find('.submenu-item').text()).toContain('Share list')
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+
+  it('emits share event when Share list is clicked in submenu', async () => {
+    const wrapper = mount(ListCard, {
+      props: {
+        list: sampleList,
+      },
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    await wrapper.find('.submenu-item').trigger('click')
+
+    expect(wrapper.emitted('share')).toBeTruthy()
+    expect(wrapper.emitted('share')?.[0]).toEqual([sampleList])
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+
+  it('emits delete event when Delete list is clicked in submenu', async () => {
+    const wrapper = mount(ListCard, {
+      props: {
+        list: sampleList,
+      },
+      global: {
+        stubs: {
+          RouterLink: {
+            template: '<a :href="to"><slot /></a>',
+            props: ['to'],
+          },
+        },
+      },
+    })
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    const deleteBtn = wrapper.find('.submenu-item-danger')
+    expect(deleteBtn.exists()).toBe(true)
+    expect(deleteBtn.text()).toContain('Delete list')
+
+    await deleteBtn.trigger('click')
+
+    expect(wrapper.emitted('delete')).toBeTruthy()
+    expect(wrapper.emitted('delete')?.[0]).toEqual([sampleList])
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+})
@@ -0,0 +1,72 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import ListItemRow from '../ListItemRow.vue'
+import { useListsStore } from '@/stores/lists'
+import type { LocalListItem } from '@/database/db'
+
+describe('ListItemRow', () => {
+  const sampleItem: LocalListItem = {
+    id: 'item-1',
+    list_id: 'list-1',
+    title: 'Apples',
+    is_completed: false,
+    created_at: '2026-08-21T00:00:00.000Z',
+    modified_at: '2026-08-21T00:00:00.000Z',
+  }
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.restoreAllMocks()
+  })
+
+  it('renders item title and options menu button', () => {
+    const wrapper = mount(ListItemRow, {
+      props: {
+        item: sampleItem,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Apples')
+    expect(wrapper.find('.menu-trigger-btn').exists()).toBe(true)
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+
+  it('toggles dropdown when menu button is clicked', async () => {
+    const wrapper = mount(ListItemRow, {
+      props: {
+        item: sampleItem,
+      },
+    })
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(true)
+    expect(wrapper.find('.submenu-item-danger').text()).toContain('Delete item')
+
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+
+  it('deletes item when Delete item is clicked in submenu', async () => {
+    const wrapper = mount(ListItemRow, {
+      props: {
+        item: sampleItem,
+      },
+    })
+
+    const listsStore = useListsStore()
+    const deleteSpy = vi.spyOn(listsStore, 'deleteListItem').mockResolvedValue()
+
+    // 1st click: open menu
+    await wrapper.find('.menu-trigger-btn').trigger('click')
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(true)
+
+    // 2nd click: delete item
+    await wrapper.find('.submenu-item-danger').trigger('click')
+
+    expect(deleteSpy).toHaveBeenCalledWith('item-1')
+    expect(wrapper.emitted('delete')).toBeTruthy()
+    expect(wrapper.emitted('delete')?.[0]).toEqual([sampleItem])
+    expect(wrapper.find('.submenu-dropdown').exists()).toBe(false)
+  })
+})
@@ -0,0 +1,87 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import ShareListModal from '../ShareListModal.vue'
+import { useListsStore } from '@/stores/lists'
+import type { LocalList } from '@/database/db'
+
+describe('ShareListModal', () => {
+  const sampleList: LocalList = {
+    id: 'list-123',
+    name: 'Groceries',
+    created_at: '2026-08-21T00:00:00.000Z',
+    modified_at: '2026-08-21T00:00:00.000Z',
+  }
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    vi.restoreAllMocks()
+  })
+
+  it('renders modal with list name and user input', () => {
+    const wrapper = mount(ShareListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    expect(wrapper.text()).toContain('Share "Groceries"')
+    expect(wrapper.find('input[placeholder="Email"]').exists()).toBe(true)
+    expect(wrapper.find('button[type="submit"]').text()).toBe('Add')
+  })
+
+  it('submits form to share list with an email', async () => {
+    const listsStore = useListsStore()
+    const addSpy = vi.spyOn(listsStore, 'addUserToList').mockResolvedValueOnce()
+
+    const wrapper = mount(ShareListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('input').setValue('user@example.com')
+    await wrapper.find('form').trigger('submit.prevent')
+
+    expect(addSpy).toHaveBeenCalledWith('list-123', 'user@example.com')
+    expect(wrapper.find('.banner-success').text()).toContain('Shared with "user@example.com"!')
+  })
+
+  it('displays error banner when sharing fails', async () => {
+    const listsStore = useListsStore()
+    vi.spyOn(listsStore, 'addUserToList').mockRejectedValueOnce(new Error('User not found'))
+
+    const wrapper = mount(ShareListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('input').setValue('bad@example.com')
+    await wrapper.find('form').trigger('submit.prevent')
+
+    expect(wrapper.find('.banner-error').text()).toContain('User not found')
+  })
+
+  it('emits close event when close button is clicked', async () => {
+    const wrapper = mount(ShareListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('.close-btn').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+
+  it('emits close event when Done button is clicked', async () => {
+    const wrapper = mount(ShareListModal, {
+      props: {
+        list: sampleList,
+      },
+    })
+
+    await wrapper.find('.modal-footer .btn').trigger('click')
+    expect(wrapper.emitted('close')).toBeTruthy()
+  })
+})