Trigger change event of the markdown textarea to allow Vue catch the programmatic changes.

Before	After

Here is what happens step by step.

• We paste an image
• We know that there is an attachment in the pasted thing
• We show a placeholder text, like {{foo}}
• We start uploading the file
• We programmatically change the value of the textarea after upload finished

At this point Vue doesn't catch the programmatically changed textarea value. So in the dropzone.js's paste handler I triggered change event of the textarea manually.

Fixes #38441 (closed)

changed the description

mentioned in issue #38441 (closed)

@fatihacet can we add tests to guarantee it is fixed and we won't break it again? Thanks!

assigned to @fatihacet

@filipa I spent more than an hour to write test for this but I couldn't. Two problems,

• This is a paste event so it's really hard to mock it
• The paste handler code which is written in dropzone_input.js is something we can't test. It's legacy code and doesn't expose or export anything to allow us mock them. It's simply a IIFE block with all helper functions are inlined in the wrapper IIFE.

I also tried to write a test for the issue comment form component since this MR fixes a bug related with the issue comment form. I tried several things, but all of them end up in a way that I need to mock some methods in the dropzone_input.js.

This code is pretty much straightforward and I would say let's merge it unless you have an idea about testing. Any suggestion?

assigned to @filipa

That code should run when we mount the component, it should be being imported into the component.

We could test it through the component, we could trigger a paste event, enable preview mode and test for the output:

1. Mount component - make sure dropzone_input is loaded & initialized
2. Trigger a paste event in the textarea: https://www.w3.org/TR/clipboard-apis/#paste, https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Interact_with_the_clipboard, document.execCommand("paste")
3. Trigger click on the Preview button
4. Trigger click on the Write button
5. Query the content of the textarea and expect it to be equal to the one right after pasting

assigned to @fatihacet

@filipa what you suggested doesn't work, again because of I need to spy methods inside the dropzone_input.js which should require a lot of refactor. On to you again. Merge it if you are ok with the change or otherwise I can take a look later because I am working on Repo Editor stuff and this may miss the merge window.

assigned to @filipa

We shouldn't need to spy anything of dropzone_input.js

This would be enough I think:

import 'dropzone_input.js';
import component from '...'

describe('', => {
  beforeEach(() => {
    let vm = mountComponent;

    new DropzoneInput(vm.$el);
  })

   it('', () => {
    var pasteText = vm.$el;
    pasteText.focus();
    document.execCommand("Paste");
    const text = pasteText.textContent;
    //click preview (stub preview request)
    // click write
    pasteText.textContent === text
   })
})

@iamphill did you write a test for this with the inline edit on issues? Do you know how this could be tested?

assigned to @iamphill

@filipa @fatihacet I dont think there are any tests for dropzone in there. However, there is https://gitlab.com/gitlab-org/gitlab-ce/blob/master/spec/javascripts/blob/blob_file_dropzone_spec.js which correctly fake a dropzone input without any spying. Maybe we could use a method similar to that? This should totally be testable though, even if we use have to use an rspec test.

assigned to @fatihacet

@iamphill I don't see a paste event in the code block you mentioned.

@filipa copy events requires permissions to them programmatically. To paste, you need to have something in your clipboard before. I gave it a third try but no luck. Can you spare 15 mins to try this with the way you suggested? Let me know if you need help.

assigned to @filipa

After a while trying to test this I am blocked on how to trigger a paste event with the clipboard data:

Note: Synthetic clipboard events will not actually modify the clipboard or the document. In other words, while the script above will fire a paste event, the data will not be pasted into the document.

https://www.w3.org/TR/clipboard-apis/#clipboardevent-clipboarddata

I am still not convinced it is impossible, so I am going to open an issue to fix this, in the meanwhile I'm going to merge this to allow to be picked into rc

approved this merge request

merged

mentioned in commit 9f1c9b3d