tests moved to a proper place

src/components/draft/draft.js

@@ -76,7 +76,9 @@ const Draft = {
   },
   watch: {
     editing(newVal) {
+      console.log('SAVE?', newVal)
       if (newVal) return
+      console.log('SAVE', newVal)
       if (this.safeToSave) {
         useDraftsStore().addOrSaveDraft(this.draft)
       } else {

src/stores/drafts.js

@@ -62,6 +62,7 @@ export const useDraftsStore = defineStore('drafts', {
     },
     async addOrSaveDraft(draft) {
       const id = draft.id ?? new Date().getTime().toString()
+      console.log('SAVE', id)
       const draftWithId = { ...draft, id }
       this.drafts.set(draft.id, draftWithId)
       await saveDraftToStorage(draftWithId)

test/unit/specs/components/draft.spec.js

@@ -1,193 +0,0 @@
-import { createTestingPinia } from '@pinia/testing'
-import { flushPromises, mount } from '@vue/test-utils'
-import { setActivePinia } from 'pinia'
-import { $t, mountOpts, waitForEvent } from 'test/fixtures/setup_test.js'
-import { nextTick } from 'vue'
-
-import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
-
-import { useMergedConfigStore } from 'src/stores/merged_config.js'
-import { useUsersStore } from 'src/stores/users.js'
-
-const autoSaveOrNot = (caseFn, caseTitle, runFn) => {
-  caseFn(`${caseTitle} with auto-save`, function () {
-    return runFn.bind(this)(true)
-  })
-
-  caseFn(`${caseTitle} with no auto-save`, function () {
-    return runFn.bind(this)(false)
-  })
-}
-
-const saveManually = async (wrapper) => {
-  const morePostActions = wrapper.findByText(
-    'button',
-    $t('post_status.more_post_actions'),
-  )
-  await morePostActions.trigger('click')
-
-  const btn = wrapper.findByText(
-    'button',
-    $t('post_status.save_to_drafts_button'),
-  )
-  await btn.trigger('click')
-}
-
-const waitSaveTime = 4000
-
-const currentUser = {
-  id: 'current-user',
-  default_scope: 'public',
-  locked: false,
-}
-
-describe('Draft saving', () => {
-  beforeEach(() => {
-    setActivePinia(createTestingPinia())
-    useUsersStore().currentUser = currentUser
-  })
-
-  afterEach(() => {
-    vi.useRealTimers()
-  })
-
-  autoSaveOrNot(
-    it,
-    'should save when the button is clicked',
-    async (autoSave) => {
-      const wrapper = mount(PostStatusForm, mountOpts())
-      const store = useMergedConfigStore()
-      store.mergedConfig = {
-        autoSaveDraft: autoSave,
-      }
-      expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
-
-      const textarea = wrapper.get('textarea')
-      await textarea.setValue('mew mew')
-
-      await saveManually(wrapper)
-      expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
-      expect(wrapper.vm.$store.getters.draftsArray[0].status).to.equal(
-        'mew mew',
-      )
-    },
-  )
-
-  it('should auto-save if it is enabled', async function () {
-    vi.useFakeTimers()
-    const wrapper = mount(PostStatusForm, mountOpts())
-    const store = useMergedConfigStore()
-    store.mergedConfig = {
-      autoSaveDraft: true,
-    }
-    expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
-    const textarea = wrapper.get('textarea')
-    await textarea.setValue('mew mew')
-
-    expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
-    await vi.advanceTimersByTimeAsync(waitSaveTime)
-    expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
-    expect(wrapper.vm.$store.getters.draftsArray[0].status).to.equal('mew mew')
-  })
-
-  it('should auto-save when close if auto-save is on', async () => {
-    const wrapper = mount(
-      PostStatusForm,
-      mountOpts({
-        props: {
-          closeable: true,
-        },
-      }),
-    )
-    const store = useMergedConfigStore()
-    store.mergedConfig = {
-      autoSaveDraft: true,
-    }
-    expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
-    const textarea = wrapper.get('textarea')
-    await textarea.setValue('mew mew')
-    wrapper.vm.requestClose()
-    expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
-    await waitForEvent(wrapper, 'close-accepted')
-  })
-
-  it('should save when close if auto-save is off, and unsavedPostAction is save', async () => {
-    const wrapper = mount(
-      PostStatusForm,
-      mountOpts({
-        props: {
-          closeable: true,
-        },
-      }),
-    )
-    const store = useMergedConfigStore()
-    store.mergedConfig = {
-      autoSaveDraft: false,
-      unsavedPostAction: 'save',
-    }
-    expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
-    const textarea = wrapper.get('textarea')
-    await textarea.setValue('mew mew')
-    wrapper.vm.requestClose()
-    expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
-    await waitForEvent(wrapper, 'close-accepted')
-  })
-
-  it('should discard when close if auto-save is off, and unsavedPostAction is discard', async () => {
-    const wrapper = mount(
-      PostStatusForm,
-      mountOpts({
-        props: {
-          closeable: true,
-        },
-      }),
-    )
-    const store = useMergedConfigStore()
-    store.mergedConfig = {
-      autoSaveDraft: false,
-      unsavedPostAction: 'discard',
-    }
-    expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
-    const textarea = wrapper.get('textarea')
-    await textarea.setValue('mew mew')
-    wrapper.vm.requestClose()
-    await waitForEvent(wrapper, 'close-accepted')
-    expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
-  })
-
-  it('should confirm when close if auto-save is off, and unsavedPostAction is confirm', async () => {
-    const wrapper = mount(
-      PostStatusForm,
-      mountOpts({
-        props: {
-          closeable: true,
-        },
-      }),
-    )
-    const store = useMergedConfigStore(createTestingPinia())
-    store.mergedConfig = {
-      autoSaveDraft: false,
-      unsavedPostAction: 'confirm',
-    }
-    expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
-    const textarea = wrapper.get('textarea')
-    await textarea.setValue('mew mew')
-    wrapper.vm.requestClose()
-    await nextTick()
-    await flushPromises()
-    const saveButton = await vi.waitFor(() => {
-      const button = wrapper.findByText(
-        'button',
-        $t('post_status.close_confirm_save_button'),
-      )
-      if (!button) throw new Error('Save button not present')
-      return button
-    })
-    expect(saveButton).to.be.ok
-    await saveButton.trigger('click')
-    console.info('clicked')
-    expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
-    await flushPromises()
-    await waitForEvent(wrapper, 'close-accepted')
-  })
-})

test/unit/specs/components/post_status_form.spec.js

@@ -1,16 +1,44 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { flushPromises, mount } from '@vue/test-utils'
 import { setActivePinia } from 'pinia'
-import { mountOpts } from 'test/fixtures/setup_test.js'
+import { $t, mountOpts, waitForEvent } from 'test/fixtures/setup_test.js'
 import { vi } from 'vitest'
+import { nextTick } from 'vue'
 
 import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
 
+import { useDraftsStore } from 'src/stores/drafts.js'
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 import { useMergedConfigStore } from 'src/stores/merged_config.js'
 import { useStatusesStore } from 'src/stores/statuses.js'
 import { useUsersStore } from 'src/stores/users.js'
 
+const autoSaveOrNot = (caseFn, caseTitle, runFn) => {
+  caseFn(`${caseTitle} with auto-save`, function () {
+    return runFn.bind(this)(true)
+  })
+
+  caseFn(`${caseTitle} with no auto-save`, function () {
+    return runFn.bind(this)(false)
+  })
+}
+
+const saveManually = async (wrapper) => {
+  const morePostActions = wrapper.findByText(
+    'button',
+    $t('post_status.more_post_actions'),
+  )
+  await morePostActions.trigger('click')
+
+  const btn = wrapper.findByText(
+    'button',
+    $t('post_status.save_to_drafts_button'),
+  )
+  await btn.trigger('click')
+}
+
+const waitSaveTime = 4000
+
 const currentUser = {
   id: 'current-user',
   default_scope: 'public',
@@ -36,6 +64,7 @@ const repliedStatus2 = {
 }
 
 describe('PostStatusForm', () => {
+  describe('Basic functionality', () => {
     beforeEach(() => {
       vi.useFakeTimers()
       setActivePinia(createTestingPinia())
@@ -45,6 +74,10 @@ describe('PostStatusForm', () => {
       ])
     })
 
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
     it('Clean empty initial state', () => {
       const wrapper = mount(PostStatusForm, mountOpts())
 
@@ -200,7 +233,10 @@ describe('PostStatusForm', () => {
 
       wrapper.vm.quoteThreadToggled = true
 
-    expect(wrapper.vm.newStatus.quote).to.eql({ thread: true, id: 'status-2' })
+      expect(wrapper.vm.newStatus.quote).to.eql({
+        thread: true,
+        id: 'status-2',
+      })
     })
 
     it('Resets quote when reply/quote toggled to reply', () => {
@@ -290,6 +326,21 @@ describe('PostStatusForm', () => {
 
       expect(wrapper.vm.idempotencyKey).to.not.eql(oldIdempotency)
     })
+  })
+
+  describe('Attachments', () => {
+    beforeEach(() => {
+      vi.useFakeTimers()
+      setActivePinia(createTestingPinia())
+      useUsersStore().currentUser = currentUser
+      useStatusesStore().allStatuses = new Map([
+        [repliedStatus.id, repliedStatus],
+      ])
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+    })
 
     // TODO Probably better to separate attachment upload/manipulation into its own component?
     // we need to upload-on-submit for compression setting anyway
@@ -334,5 +385,155 @@ describe('PostStatusForm', () => {
       wrapper.vm.editAttachment(i1, 'description')
       expect(wrapper.vm.newStatus.mediaDescriptions['1']).to.eql('description')
     })
-  // TODO: Drafts (needs vuex to pinia migration)
+  })
+
+  describe('Draft saving', () => {
+    beforeEach(() => {
+      setActivePinia(createTestingPinia({ stubActions: false }))
+      useUsersStore().currentUser = currentUser
+      vi.useFakeTimers()
+    })
+
+    afterEach(() => {
+      vi.useRealTimers()
+    })
+
+    autoSaveOrNot(
+      it,
+      'should save when the button is clicked',
+      async (autoSave) => {
+        const wrapper = mount(PostStatusForm, mountOpts())
+        const store = useMergedConfigStore()
+        store.mergedConfig = {
+          autoSaveDraft: autoSave,
+        }
+        expect(useDraftsStore().draftsCount).to.equal(0)
+
+        const textarea = wrapper.get('textarea')
+        await textarea.setValue('mew mew')
+
+        await saveManually(wrapper)
+        expect(useDraftsStore().draftsCount).to.equal(1)
+        expect(useDraftsStore().draftsArray[0].status).to.equal('mew mew')
+      },
+    )
+
+    it('should auto-save if it is enabled', async function () {
+      vi.useFakeTimers()
+      const wrapper = mount(PostStatusForm, mountOpts())
+      const store = useMergedConfigStore()
+      store.mergedConfig = {
+        autoSaveDraft: true,
+      }
+      expect(useDraftsStore().draftsCount).to.equal(0)
+      const textarea = wrapper.get('textarea')
+      await textarea.setValue('mew mew')
+
+      expect(useDraftsStore().draftsCount).to.equal(0)
+      await vi.advanceTimersByTimeAsync(waitSaveTime)
+      expect(useDraftsStore().draftsCount).to.equal(1)
+      expect(useDraftsStore().draftsArray[0].status).to.equal('mew mew')
+    })
+
+    it('should auto-save when close if auto-save is on', async () => {
+      const wrapper = mount(
+        PostStatusForm,
+        mountOpts({
+          props: {
+            closeable: true,
+          },
+        }),
+      )
+      const store = useMergedConfigStore()
+      store.mergedConfig = {
+        autoSaveDraft: true,
+      }
+      expect(useDraftsStore().draftsCount).to.equal(0)
+      const textarea = wrapper.get('textarea')
+      await textarea.setValue('mew mew')
+      wrapper.vm.requestClose()
+      expect(useDraftsStore().draftsCount).to.equal(1)
+      await waitForEvent(wrapper, 'close-accepted')
+    })
+
+    it('should save when close if auto-save is off, and unsavedPostAction is save', async () => {
+      const wrapper = mount(
+        PostStatusForm,
+        mountOpts({
+          props: {
+            closeable: true,
+          },
+        }),
+      )
+      const store = useMergedConfigStore()
+      store.mergedConfig = {
+        autoSaveDraft: false,
+        unsavedPostAction: 'save',
+      }
+      expect(useDraftsStore().draftsCount).to.equal(0)
+      const textarea = wrapper.get('textarea')
+      await textarea.setValue('mew mew')
+      wrapper.vm.requestClose()
+      expect(useDraftsStore().draftsCount).to.equal(1)
+      await waitForEvent(wrapper, 'close-accepted')
+    })
+
+    it('should discard when close if auto-save is off, and unsavedPostAction is discard', async () => {
+      const wrapper = mount(
+        PostStatusForm,
+        mountOpts({
+          props: {
+            closeable: true,
+          },
+        }),
+      )
+      const store = useMergedConfigStore()
+      store.mergedConfig = {
+        autoSaveDraft: false,
+        unsavedPostAction: 'discard',
+      }
+      expect(useDraftsStore().draftsCount).to.equal(0)
+      const textarea = wrapper.get('textarea')
+      await textarea.setValue('mew mew')
+      wrapper.vm.requestClose()
+      await waitForEvent(wrapper, 'close-accepted')
+      expect(useDraftsStore().draftsCount).to.equal(0)
+    })
+
+    it('should confirm when close if auto-save is off, and unsavedPostAction is confirm', async () => {
+      const store = useMergedConfigStore()
+      const wrapper = mount(
+        PostStatusForm,
+        mountOpts({
+          props: {
+            closeable: true,
+          },
+        }),
+      )
+      store.mergedConfig = {
+        autoSaveDraft: false,
+        unsavedPostAction: 'confirm',
+      }
+      expect(useDraftsStore().draftsCount).to.equal(0)
+      const textarea = wrapper.get('textarea')
+      await textarea.setValue('mew mew')
+      wrapper.vm.requestClose()
+      await nextTick()
+      await flushPromises()
+      const saveButton = await vi.waitFor(() => {
+        const button = wrapper.findByText(
+          'button',
+          $t('post_status.close_confirm_save_button'),
+        )
+        if (!button) throw new Error('Save button not present')
+        return button
+      })
+      expect(saveButton).to.be.ok
+      await saveButton.trigger('click')
+      console.info('clicked')
+      expect(useDraftsStore().draftsCount).to.equal(1)
+      await flushPromises()
+      await waitForEvent(wrapper, 'close-accepted')
+    })
+  })
 })