Maintenance: Improve image compress test stability

app/frontend/shared/components/Form/fields/FieldEditor/FieldEditorInput.vue

@@ -5,7 +5,15 @@ import type { FormFieldContext } from '#shared/components/Form/types/field.ts'
 import type { Editor } from '@tiptap/vue-3'
 import { useEditor, EditorContent } from '@tiptap/vue-3'
 import { useEventListener } from '@vueuse/core'
-import { computed, onMounted, onUnmounted, ref, toRef, watch } from 'vue'
+import {
+  computed,
+  onMounted,
+  onUnmounted,
+  ref,
+  toRef,
+  watch,
+  nextTick,
+} from 'vue'
 import testFlags from '#shared/utils/testFlags.ts'
 import { htmlCleanup } from '#shared/utils/htmlCleanup.ts'
 import useValue from '../../composables/useValue.ts'
@@ -99,6 +107,7 @@ const loadFiles = (
     convertInlineImages(inlineImages, editor.view.dom).then((urls) => {
       if (editor?.isDestroyed) return
       editor?.commands.setImages(urls)
+      nextTick(() => testFlags.set('editor.inlineImagesLoaded'))
     })
   }
 

app/frontend/shared/components/Form/fields/FieldEditor/ImageResizable.vue

@@ -7,6 +7,7 @@ import { computed, reactive, ref } from 'vue'
 import DraggableResizable from 'vue3-draggable-resizable'
 import log from '#shared/utils/log.ts'
 import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
+import testFlags from '#shared/utils/testFlags.ts'
 
 const props = defineProps(nodeViewProps)
 
@@ -48,7 +49,13 @@ const dimensions = reactive({
 })
 
 const onLoadImage = (e: Event) => {
-  if (imageLoaded.value || needBase64Convert(src.value)) return
+  if (
+    imageLoaded.value ||
+    needBase64Convert(src.value) ||
+    props.editor.isDestroyed ||
+    !props.editor.isEditable
+  )
+    return
 
   const img = e.target as HTMLImageElement
   const { naturalWidth, naturalHeight } = img
@@ -57,6 +64,8 @@ const onLoadImage = (e: Event) => {
   dimensions.maxHeight = naturalHeight
   dimensions.maxWidth = naturalWidth
   imageLoaded.value = true
+
+  testFlags.set('editor.imageResized')
 }
 
 const stopResizing = ({ w, h }: { w: number; h: number }) => {

app/frontend/shared/components/Form/fields/FieldEditor/useEditorActions.ts

@@ -3,9 +3,10 @@
 import { i18n } from '#shared/i18n.ts'
 import type { ChainedCommands } from '@tiptap/core'
 import type { Editor } from '@tiptap/vue-3'
-import { computed, onUnmounted } from 'vue'
+import { computed, nextTick, onUnmounted } from 'vue'
 import type { ShallowRef } from 'vue'
 
+import testFlags from '#shared/utils/testFlags.ts'
 import { PLUGIN_NAME as KnowledgeBaseMentionName } from './suggestions/KnowledgeBaseSuggestion.ts'
 import { PLUGIN_NAME as TextModuleMentionName } from './suggestions/TextModuleSuggestion.ts'
 import { PLUGIN_NAME as UserMentionName } from './suggestions/UserMention.ts'
@@ -111,6 +112,7 @@ export default function useEditorActions(
             )
             c.setImages(files).run()
             input.value = ''
+            nextTick(() => testFlags.set('editor.inlineImagesAdded'))
           }
           if (!VITE_TEST_MODE) input.click()
         }),

spec/system/apps/mobile/tickets/articles/create_spec.rb

@@ -403,48 +403,19 @@ RSpec.describe 'Mobile > Ticket > Article > Create', app: :mobile, authenticated
   end
 
   context 'when inlining an image', authenticated_as: :agent do
-    def paste_image(filepath)
-      page.execute_script <<~JS
-        const fileInput = document.createElement('input');
-        fileInput.type = 'file';
-        fileInput.id = 'drop-file-input';
-        document.body.appendChild(fileInput);
-      JS
-      attach_file('drop-file-input', filepath)
-      page.execute_script <<~JS
-        const fileInput = document.getElementById('drop-file-input');
-        class FakeDataTransfer extends DataTransfer {
-          get files() {
-            return fileInput.files;
-          }
-        }
-        const clipboardData = new FakeDataTransfer();
-        const event = new ClipboardEvent('paste', {
-          clipboardData,
-        })
-        Object.defineProperty(event, 'clipboardData', {
-          get() {
-            return clipboardData
-          }
-        })
-        globalThis.editors.body.view.pasteText('text', event)
-      JS
-    end
-
     it 'correctly compresses image' do
       open_article_dialog
 
-      paste_image(Rails.root.join('spec/fixtures/files/image/large.png'))
+      find_editor('Text').type(Faker::Hacker.say_something_smart)
       click_button('Add image') # inserts an invisible input
       find('[data-test-id="editor-image-input"]', visible: :all).attach_file(Rails.root.join('spec/fixtures/files/image/large2.png'))
-      save_article
+      wait_for_test_flag('editor.imageResized')
 
-      images = Store.last(2)
+      save_article
 
       # The fize will always be less than it actually is even without resizing
       # Chrome has the best compression, so we check that actual value is lower than Firefox's compresssion
-      expect(images.first.size.to_i).to be <= 24_817
-      expect(images.last.size.to_i).to be <= 25_686
+      expect(Store.last.size.to_i).to be <= 25_686
     end
   end
 end