unit tests for PostStatusForm

src/components/post_status_form/post_status_form.js

@@ -81,7 +81,7 @@ const PostStatusForm = {
     statusQuote: Object,
     statusFiles: Array,
     statusMediaDescriptions: Object,
-    statusScope: String,
+    statusVisibility: String,
     statusContentType: String,
 
     // Replies/mentions
@@ -306,7 +306,7 @@ const PostStatusForm = {
         defaultNewStatus.status = this.mentionsString + statusText
       }
 
-      defaultNewStatus.mentions = this.mentionsString
+      defaultNewStatus.mentions = this.mentionsString.trim()
       defaultNewStatus.spoilerText = this.repliedSubjectString ?? ''
       defaultNewStatus.nsfw = this.userDefaultSensitive
       defaultNewStatus.visibility = scope
@@ -351,21 +351,13 @@ const PostStatusForm = {
       return this.newStatus.quote !== null
     },
     quotable() {
-      return this.quotingAvailable && this.repliedStatus?.id
-    },
-    defaultQuotable() {
       if (
         !this.quotingAvailable ||
-        !this.isReply ||
+        !this.isReply
-        !useMergedConfigStore().mergedConfig.quoteReply
       ) {
         return false
       }
 
-      if (!this.repliedStatus) {
-        return false
-      }
-
       if (
         this.repliedStatus.visibility === 'public' ||
           this.repliedStatus.visibility === 'unlisted' ||
@@ -379,8 +371,9 @@ const PostStatusForm = {
       return false
     },
     quoteId() {
-      return this.newStatus.quote?.id
+      return this.newStatus.quote?.id ?? null
     },
+    // This is for "reply/quote" toggle
     quoteThreadToggled: {
       get() {
         return this.newStatus.quote?.thread
@@ -395,6 +388,24 @@ const PostStatusForm = {
         }
       },
     },
+    postingOptions() {
+      const poll = this.hasPoll ? pollFormToMasto(this.newStatus.poll) : null
+
+      return {
+        status: this.newStatusContent,
+        spoilerText: this.newStatus.spoilerText,
+        visibility: this.newStatus.visibility,
+        sensitive: this.newStatus.nsfw,
+        media: this.newStatus.files,
+        inReplyToStatusId: this.inReplyToStatusId,
+        quoteId: this.quoteId,
+        contentType: this.newStatus.contentType,
+        poll,
+        idempotencyKey: this.idempotencyKey,
+
+        store: this.$store,
+      }
+    },
 
     // Emoji stuff
     emojiUserSuggestor() {
@@ -596,8 +607,7 @@ const PostStatusForm = {
     },
     onMentionsLineUpdate(e) {
       if (this.mentionsLineReadOnly) return
-      // TODO
+      this.newStatus.mentions = e
-      //this.newStatus.mentions = e
     },
     changeVis(visibility) {
       this.newStatus.visibility = visibility
@@ -605,7 +615,7 @@ const PostStatusForm = {
     clearStatus() {
       this.saveInhibited = true
       this.newStatus.status = ''
-      this.newStatus.mentions = null
+      this.newStatus.mentions = ''
       this.newStatus.spoilerText = ''
       this.newStatus.files = []
       this.newStatus.poll = null
@@ -613,7 +623,6 @@ const PostStatusForm = {
       this.newStatus.nsfw = this.defaultNewStatus.nsfw
       this.newStatus.mediaDescriptions = {}
       this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
-      this.clearQuoteForm()
       if (this.preserveFocus) {
         this.$nextTick(() => {
           this.$refs.textarea.focus()
@@ -626,7 +635,7 @@ const PostStatusForm = {
       if (this.preview) this.previewStatus()
       this.saveable = false
     },
-    async postStatus(event, newStatus) {
+    async postStatus(event) {
       if (this.posting && !this.optimisticPosting) {
         return
       }
@@ -653,7 +662,6 @@ const PostStatusForm = {
         return
       }
 
-      const poll = this.hasPoll ? pollFormToMasto(newStatus.poll) : {}
       if (this.pollContentError) {
         this.error = this.pollContentError
         return
@@ -669,25 +677,11 @@ const PostStatusForm = {
         return
       }
 
-      const postingOptions = {
-        status: this.newStatusContent,
-        spoilerText: newStatus.spoilerText ?? null,
-        visibility: newStatus.visibility,
-        sensitive: newStatus.nsfw,
-        media: newStatus.files,
-        store: this.$store,
-        inReplyToStatusId: this.inReplyToStatusId,
-        quoteId: this.quoteId,
-        contentType: newStatus.contentType,
-        poll,
-        idempotencyKey: this.idempotencyKey,
-      }
-
       const postHandler = this.postHandler
         ? this.postHandler
         : statusPoster.postStatus
 
-      postHandler(postingOptions)
+      postHandler(this.postingOptions)
         .then((data) => {
           this.abandonDraft()
           this.clearStatus()
@@ -714,17 +708,9 @@ const PostStatusForm = {
 
       statusPoster
         .postStatus({
-          status: this.newStatusContent,
+          ...this.postingOptions,
-          spoilerText: newStatus.spoilerText || null,
-          visibility: newStatus.visibility,
-          sensitive: newStatus.nsfw,
           media: [],
-          store: this.$store,
-          inReplyToStatusId: this.inReplyToStatusId,
-          quoteId: this.quoteId,
-          contentType: newStatus.contentType,
           poll: null,
-          quote: null,
           preview: true,
         })
         .then((data) => {
@@ -789,12 +775,14 @@ const PostStatusForm = {
     shiftUpMediaFile(fileInfo) {
       const { files } = this.newStatus
       const index = this.newStatus.files.indexOf(fileInfo)
+      if (index === 0) return
       files.splice(index, 1)
       files.splice(index - 1, 0, fileInfo)
     },
     shiftDnMediaFile(fileInfo) {
       const { files } = this.newStatus
       const index = this.newStatus.files.indexOf(fileInfo)
+      if (index === files.length - 1) return
       files.splice(index, 1)
       files.splice(index + 1, 0, fileInfo)
     },
@@ -973,7 +961,7 @@ const PostStatusForm = {
     },
 
     // Quote
-    toggleQuoteForm() {
+    toggleQuoteForm() { // This is for the "attach quote" button
       if (!this.hasQuote) {
         this.newStatus.quote = {}
         this.newStatus.quote.thread = false
@@ -983,11 +971,6 @@ const PostStatusForm = {
         this.newStatus.quote = null
       }
     },
-    clearQuoteForm() {
-      if (this.$refs.quoteForm) {
-        this.$refs.quoteForm.clear()
-      }
-    },
 
     // Drafts
     statusChanged() {

src/components/post_status_form/post_status_form.vue

@@ -208,9 +208,9 @@
                 class="input form-post-body"
                 :class="{ 'scrollable-form': !!maxHeight }"
                 v-bind="propsToNative(inputProps)"
-                @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
+                @keydown.exact.enter="submitOnEnter && postStatus($event)"
                 @keydown.meta.enter="postStatus($event, newStatus)"
-                @keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
+                @keydown.ctrl.enter="!submitOnEnter && postStatus($event)"
                 @input="resize"
                 @compositionupdate="resize"
                 @paste="paste"
@@ -328,7 +328,7 @@
           <button
             class="btn button-default post-button"
             :disabled="isOverLengthLimit || posting || uploadingFiles || disableSubmit"
-            @click.stop.prevent="postStatus($event, newStatus)"
+            @click.stop.prevent="postStatus($event)"
           >
             <template v-if="posting">
               {{ $t('post_status.posting') }}

src/components/status_action_buttons/buttons_definitions.js

@@ -207,12 +207,12 @@ export const BUTTONS = [
       return dispatch('fetchStatusSource', { id: status.id }).then((data) =>
         useEditStatusStore().openEditStatusModal({
           statusId: status.id,
-          subject: data.spoiler_text,
+          statusSubject: data.spoiler_text,
           statusText: data.text,
           statusIsSensitive: status.nsfw,
           statusPoll: status.poll,
           statusFiles: [...status.attachments],
-          visibility: status.visibility,
+          statusVisibility: status.visibility,
           statusContentType: data.content_type,
         }),
       )

test/fixtures/setup_test.js

@@ -26,6 +26,7 @@ const getDefaultOpts = ({
   global: {
     plugins: [
       applyAfterStore(makeMockStore(), afterStore),
+      createTestingPinia(),
       VueVirtualScroller,
       createRouter({
         history: createMemoryHistory(),
@@ -41,7 +42,6 @@ const getDefaultOpts = ({
       (Vue) => {
         Vue.directive('body-scroll-lock', {})
       },
-      createTestingPinia(),
     ],
     components: {
       RichContent,

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

@@ -1,6 +1,6 @@
 import { shallowMount } from '@vue/test-utils'
 
-import ChatMessageList from './chat_message_list.vue'
+import ChatMessageList from 'src/components/chat_message_list/chat_message_list.vue'
 
 describe('ChatMessageList', () => {
   describe('computed.chatItems', () => {

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

@@ -2,7 +2,7 @@ import { createTestingPinia } from '@pinia/testing'
 import { shallowMount } from '@vue/test-utils'
 import { setActivePinia } from 'pinia'
 
-import ChatView from './chat_view.vue'
+import ChatView from 'src/components/chat_view/chat_view.vue'
 
 const message1 = {
   id: '1',

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

@@ -1,3 +1,5 @@
+import { vi } from 'vitest'
+
 import { createTestingPinia } from '@pinia/testing'
 import { mount } from '@vue/test-utils'
 import { setActivePinia } from 'pinia'
@@ -6,6 +8,7 @@ import PostStatusForm from 'src/components/post_status_form/post_status_form.vue
 import { mountOpts } from '../../../fixtures/setup_test'
 
 import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useMergedConfigStore } from 'src/stores/merged_config.js'
 
 const currentUser = {
   id: 'current-user',
@@ -24,15 +27,16 @@ const repliedStatus = {
   user: repliedUser,
 }
 
-const replyMountOpts = () =>
+const repliedStatus2 = {
+  id: 'status-2',
+  visibility: 'private',
+  summary: 'subject',
+  user: repliedUser,
+}
+
+const replyMountOpts = (props) =>
   mountOpts({
-    props: {
+    props,
-      replyTo: repliedStatus.id,
-      repliedUser,
-      attentions: [],
-      copyMessageScope: repliedStatus.visibility,
-      disableDraft: true,
-    },
     afterStore(store) {
       store.state.users.currentUser = currentUser
       store.state.statuses.allStatusesObject = {
@@ -43,19 +47,251 @@ const replyMountOpts = () =>
 
 describe('PostStatusForm', () => {
   beforeEach(() => {
-    setActivePinia(createTestingPinia())
+    vi.useFakeTimers()
   })
 
-  it('initializes a reply form when quoteReply is unset', () => {
+  it('Clean empty initial state', () => {
-    useInstanceCapabilitiesStore().quotingAvailable = true
-
     const wrapper = mount(PostStatusForm, replyMountOpts())
 
-    expect(wrapper.vm.newStatus.type).to.equal('reply')
+    expect(wrapper.vm.statusType).to.equal('new')
-    expect(wrapper.vm.newStatus.quote).to.eql({
+    expect(wrapper.vm.newStatus.spoilerText).to.eql('')
-      id: '',
+    expect(wrapper.vm.newStatus.mentions).to.eql('')
-      url: '',
+    expect(wrapper.vm.newStatus.status).to.eql('')
-      thread: false,
-    })
   })
+
+  it('Reset cleans form to pristine state equal to state form was when created', () => {
+    const wrapper = mount(PostStatusForm, replyMountOpts())
+
+    const initial = { ...wrapper.vm.newStatus }
+    wrapper.vm.clearStatus()
+
+    expect(wrapper.vm.newStatus).to.eql(initial)
+  })
+
+  it('Initializes a reply form', () => {
+    const wrapper = mount(PostStatusForm, replyMountOpts({
+      repliedStatus: repliedStatus,
+    }))
+
+    useInstanceCapabilitiesStore().quotingAvailable = true
+
+    expect(wrapper.vm.statusType).to.equal('reply')
+    expect(wrapper.vm.isReply).to.equal(true)
+    expect(wrapper.vm.refId).to.equal('status-1')
+    expect(wrapper.vm.quotable).to.equal(true)
+    expect(wrapper.vm.inReplyToStatusId).to.equal('status-1')
+    expect(wrapper.vm.newStatus.quote).to.eql(null)
+    expect(wrapper.vm.newStatus.poll).to.eql(null)
+    expect(wrapper.vm.newStatus.spoilerText).to.eql('')
+    expect(wrapper.vm.newStatus.mentions).to.eql('@replied')
+    expect(wrapper.vm.newStatus.status).to.eql('@replied ')
+    expect(wrapper.vm.newStatus.visibility).to.eql('public')
+  })
+
+  it('Copies scope and subject line, disables quoting for locked posts', () => {
+    const wrapper = mount(PostStatusForm, replyMountOpts({
+      repliedStatus: repliedStatus2,
+    }))
+
+    useInstanceCapabilitiesStore().quotingAvailable = true
+
+    expect(wrapper.vm.statusType).to.equal('reply')
+    expect(wrapper.vm.isReply).to.equal(true)
+    expect(wrapper.vm.quotable).to.equal(false)
+    expect(wrapper.vm.newStatus.quote).to.eql(null)
+    expect(wrapper.vm.newStatus.poll).to.eql(null)
+    expect(wrapper.vm.newStatus.spoilerText).to.eql('re: subject')
+    expect(wrapper.vm.newStatus.mentions).to.eql('@replied')
+    expect(wrapper.vm.newStatus.status).to.eql('@replied ')
+    expect(wrapper.vm.newStatus.visibility).to.eql('private')
+
+    expect(wrapper.vm.postingOptions.status).to.eql('@replied ')
+    expect(wrapper.vm.postingOptions.spoilerText).to.eql('re: subject')
+    expect(wrapper.vm.postingOptions.visibility).to.eql('private')
+    expect(wrapper.vm.postingOptions.sensitive).to.eql(false)
+    expect(wrapper.vm.postingOptions.media).to.eql([])
+    expect(wrapper.vm.postingOptions.inReplyToStatusId).to.eql('status-2')
+    expect(wrapper.vm.postingOptions.quoteId).to.eql(null)
+    expect(wrapper.vm.postingOptions.contentType).to.eql('text/plain')
+    expect(wrapper.vm.postingOptions.poll).to.eql(null)
+  })
+
+  it('Forces direct mode when replying to a DM, mastodon style subject handling', () => {
+    // We need to initialize pinia first which is happening here...
+    const options = replyMountOpts({
+      repliedStatus: { ...repliedStatus2, visibility: 'direct' },
+    })
+
+    // ...set our settings...
+    useMergedConfigStore().mergedConfig = {
+      ...useMergedConfigStore().mergedConfig,
+      subjectLineBehavior: 'masto'
+    }
+
+    // ...and only then mount our component
+    const wrapper = mount(PostStatusForm, options)
+
+    // Otherwise we get multiple instances of pinia that don't talk to each other
+
+    expect(wrapper.vm.statusType).to.equal('reply')
+    expect(wrapper.vm.isReply).to.equal(true)
+    expect(wrapper.vm.quotable).to.equal(false)
+    expect(wrapper.vm.newStatus.quote).to.eql(null)
+    expect(wrapper.vm.newStatus.poll).to.eql(null)
+    expect(wrapper.vm.newStatus.spoilerText).to.eql('subject')
+    expect(wrapper.vm.newStatus.mentions).to.eql('@replied')
+    expect(wrapper.vm.newStatus.status).to.eql('@replied ')
+    expect(wrapper.vm.newStatus.visibility).to.eql('direct')
+  })
+
+  it('Sets status to statusText without mentions if mentions line is enabled', () => {
+    const wrapper = mount(PostStatusForm, replyMountOpts({
+      repliedStatus: repliedStatus2,
+      statusText: 'testing',
+      mentionsLine: true,
+    }))
+
+    expect(wrapper.vm.statusType).to.equal('reply')
+    expect(wrapper.vm.isReply).to.equal(true)
+    expect(wrapper.vm.newStatus.mentions).to.eql('@replied')
+    expect(wrapper.vm.newStatus.status).to.eql('testing')
+  })
+
+  it('Sets mention when asked for it', () => {
+    const wrapper = mount(PostStatusForm, replyMountOpts({
+      profileMention: repliedUser,
+    }))
+
+    expect(wrapper.vm.statusType).to.equal('mention')
+    expect(wrapper.vm.isReply).to.equal(false)
+    expect(wrapper.vm.newStatus.mentions).to.eql('@replied')
+    expect(wrapper.vm.newStatus.status).to.eql('@replied ')
+  })
+
+  it('Initializes quote when reply/quote toggled to quote', () => {
+    const wrapper = mount(PostStatusForm, replyMountOpts({
+      repliedStatus: repliedStatus2,
+    }))
+
+    expect(wrapper.vm.statusType).to.equal('reply')
+    expect(wrapper.vm.isReply).to.equal(true)
+
+    wrapper.vm.quoteThreadToggled = true
+
+    expect(wrapper.vm.newStatus.quote).to.eql({ thread: true, id: 'status-2' })
+  })
+
+  it('Resets quote when reply/quote toggled to reply', () => {
+    const wrapper = mount(PostStatusForm, replyMountOpts({
+      repliedStatus: repliedStatus2,
+    }))
+
+    expect(wrapper.vm.statusType).to.equal('reply')
+    expect(wrapper.vm.isReply).to.equal(true)
+
+    wrapper.vm.quoteThreadToggled = true
+    wrapper.vm.quoteThreadToggled = false
+
+    expect(wrapper.vm.newStatus.quote).to.eql(null)
+  })
+
+  it('Initializes and reset quote when toggling quote attachment', () => {
+    const wrapper = mount(PostStatusForm, replyMountOpts({
+      repliedStatus: repliedStatus2,
+    }))
+
+    expect(wrapper.vm.statusType).to.equal('reply')
+    expect(wrapper.vm.isReply).to.equal(true)
+
+    wrapper.vm.toggleQuoteForm()
+    expect(wrapper.vm.newStatus.quote).to.eql({ thread: false, id: null, url: '' })
+    wrapper.vm.toggleQuoteForm()
+    expect(wrapper.vm.newStatus.quote).to.eql(null)
+  })
+
+  it('Status editing', () => {
+    const wrapper = mount(PostStatusForm, replyMountOpts({
+      statusId: 'edited',
+      statusText: 'text',
+      statusSubject: 'heading',
+      statusIsSensitive: true,
+      statusPoll: {},
+      statusQuote: {},
+      statusFiles: [],
+      statusMediaDescriptions: {},
+      statusVisibility: 'unlisted',
+      statusContentType: 'text/markdown',
+    }))
+
+    expect(wrapper.vm.statusType).to.equal('edit')
+    expect(wrapper.vm.isReply).to.equal(false) // edits don't support changing reply-to so it's pretty much ignored
+    expect(wrapper.vm.isEdit).to.equal(true)
+    expect(wrapper.vm.newStatus.quote).to.eql({})
+    expect(wrapper.vm.newStatus.poll).to.eql({})
+    expect(wrapper.vm.newStatus.spoilerText).to.eql('heading')
+    expect(wrapper.vm.newStatus.mentions).to.eql('')
+    expect(wrapper.vm.newStatus.status).to.eql('text')
+    expect(wrapper.vm.newStatus.visibility).to.eql('unlisted')
+    expect(wrapper.vm.newStatus.contentType).to.eql('text/markdown')
+    expect(wrapper.vm.newStatus.nsfw).to.equal(true)
+    expect(wrapper.vm.newStatus.files).to.eql([])
+  })
+
+  it('Posting should reset idempotency key', async () => {
+    vi.setSystemTime(new Date(2027, 1, 1, 13))
+    const wrapper = mount(PostStatusForm, replyMountOpts())
+    const oldIdempotency = wrapper.vm.idempotencyKey
+
+    vi.setSystemTime(new Date(2028, 1, 1, 13))
+
+    wrapper.vm.newStatus.status = 'Testing'
+    await wrapper.vm.postStatus()
+
+    expect(wrapper.vm.idempotencyKey).to.not.eql(oldIdempotency)
+  })
+
+  // TODO Probably better to separate attachment upload/manipulation into its own component?
+  // we need to upload-on-submit for compression setting anyway
+  it('Attachments manipulations (moving, adding, removing)', () => {
+    const wrapper = mount(PostStatusForm, replyMountOpts())
+
+    const i1 = { id: '1', url: 'a' }
+    const i2 = { id: '2', url: 'b' }
+    const i3 = { id: '3', url: 'c' }
+    const i4 = { id: '4', url: 'd' }
+    const iX = { id: 'x', url: 'x' }
+
+    wrapper.vm.newStatus.files = [i3, i1, iX, i2]
+
+    wrapper.vm.removeMediaFile(iX)
+    expect(wrapper.vm.newStatus.files).to.eql([i3, i1, i2])
+
+    wrapper.vm.shiftUpMediaFile(i1)
+    expect(wrapper.vm.newStatus.files).to.eql([i1, i3, i2])
+
+    wrapper.vm.shiftUpMediaFile(i1) // should ignore
+    expect(wrapper.vm.newStatus.files).to.eql([i1, i3, i2])
+
+    wrapper.vm.shiftDnMediaFile(i3)
+    expect(wrapper.vm.newStatus.files).to.eql([i1, i2, i3])
+
+    wrapper.vm.shiftDnMediaFile(i3) // should ignore
+    expect(wrapper.vm.newStatus.files).to.eql([i1, i2, i3])
+
+    wrapper.vm.addMediaFile(i4)
+    expect(wrapper.vm.newStatus.files).to.eql([i1, i2, i3, i4])
+  })
+
+  it('Attachment descriptions', () => {
+    const wrapper = mount(PostStatusForm, replyMountOpts())
+
+    const i1 = { id: '1', url: 'a' }
+
+    wrapper.vm.addMediaFile(i1)
+    expect(wrapper.vm.newStatus.files).to.eql([i1])
+
+    wrapper.vm.editAttachment(i1, 'description')
+    expect(wrapper.vm.newStatus.mediaDescriptions['1']).to.eql('description')
+  })
+  // TODO: Drafts (needs vuex to pinia migration)
 })