Fix draft saving and add tests

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

@@ -0,0 +1,166 @@
+import { mount, flushPromises } from '@vue/test-utils'
+import { nextTick } from 'vue'
+import sinon from 'sinon'
+import PostStatusForm from 'src/components/post_status_form/post_status_form.vue'
+import { mountOpts, waitForEvent, $t } from '../../../fixtures/setup_test'
+
+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
+
+afterEach(() => {
+  sinon.restore()
+})
+
+describe('Draft saving', () => {
+  autoSaveOrNot(it, 'should save when the button is clicked', async (autoSave) => {
+    const wrapper = mount(PostStatusForm, mountOpts())
+    await wrapper.vm.$store.dispatch('setOption', {
+      name: 'autoSaveDraft',
+      value: 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')
+    console.log('done')
+  })
+
+  it('should auto-save if it is enabled', async function () {
+    this.timeout(5000)
+    const clock = sinon.useFakeTimers(Date.now())
+    const wrapper = mount(PostStatusForm, mountOpts())
+    await wrapper.vm.$store.dispatch('setOption', {
+      name: 'autoSaveDraft',
+      value: 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 clock.tickAsync(waitSaveTime)
+    expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
+    expect(wrapper.vm.$store.getters.draftsArray[0].status).to.equal('mew mew')
+    clock.restore()
+  })
+
+  it('should auto-save when close if auto-save is on', async () => {
+    const wrapper = mount(PostStatusForm, mountOpts({
+      props: {
+        closeable: true
+      }
+    }))
+    await wrapper.vm.$store.dispatch('setOption', {
+      name: 'autoSaveDraft',
+      value: 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, 'can-close')
+    console.log('done')
+  })
+
+  it('should save when close if auto-save is off, and unsavedPostAction is save', async () => {
+    const wrapper = mount(PostStatusForm, mountOpts({
+      props: {
+        closeable: true
+      }
+    }))
+    await wrapper.vm.$store.dispatch('setOption', {
+      name: 'autoSaveDraft',
+      value: false
+    })
+    await wrapper.vm.$store.dispatch('setOption', {
+      name: 'unsavedPostAction',
+      value: '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, 'can-close')
+    console.log('done')
+  })
+
+  it('should discard when close if auto-save is off, and unsavedPostAction is discard', async () => {
+    const wrapper = mount(PostStatusForm, mountOpts({
+      props: {
+        closeable: true
+      }
+    }))
+    await wrapper.vm.$store.dispatch('setOption', {
+      name: 'autoSaveDraft',
+      value: false
+    })
+    await wrapper.vm.$store.dispatch('setOption', {
+      name: 'unsavedPostAction',
+      value: '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, 'can-close')
+    expect(wrapper.vm.$store.getters.draftCount).to.equal(0)
+    console.log('done')
+  })
+
+  it('should confirm when close if auto-save is off, and unsavedPostAction is confirm', async () => {
+    try {
+      const wrapper = mount(PostStatusForm, mountOpts({
+        props: {
+          closeable: true
+        }
+      }))
+      await wrapper.vm.$store.dispatch('setOption', {
+        name: 'autoSaveDraft',
+        value: false
+      })
+      await wrapper.vm.$store.dispatch('setOption', {
+        name: 'unsavedPostAction',
+        value: '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()
+      const saveButton = wrapper.findByText('button', $t('post_status.close_confirm_save_button'))
+      expect(saveButton).to.be.ok
+      await saveButton.trigger('click')
+      console.log('clicked')
+      expect(wrapper.vm.$store.getters.draftCount).to.equal(1)
+      await flushPromises()
+      await waitForEvent(wrapper, 'can-close')
+    console.log('done')
+    } catch (e) {
+      console.log('error:', e)
+      throw e
+    }
+  })
+})