MNT Behat test to test special characters in shortcode

[sabina-talipova]

Parent issue

• Ampersand (&) in alt-attribute is escaped over and over again silverstripe-framework#10451

[sabina-talipova]

Require PR

[GuySartorelli]

I've rerun the behat tests but they're failing. Have confirmed that behat is running against the recent changes, so there's either something wrong with the test or the new logic.

[sabina-talipova]

Fixed

[GuySartorelli]

It looks like this still isn't working as expected.

I would expect to see My alt updated & saved in the HTML, but this test shows My alt updated & saved which is incorrect.

We should also add to the behat test what happens on the front-end, to validate that the frontend markup has alt="My alt updated & saved" and not alt="My alt updated & saved" or alt="My alt updated & saved".

[sabina-talipova]

Follow [TinyMC documentation] (https://www.tiny.cloud/docs/tinymce/6/content-filtering/#entities) and this:

The base entities <, >, &, ', and " will always be entity encoded into their named equivalents.

So my assumption, when we just start to work on content and add new special characters TinyMC will always encoded them into their named equivalents. So this we see this here.
First string that I get before "Save" (named equivalents):

document.querySelector('textarea[name="Content"]').value
'<div class="captionImage leftAlone" style="width: 444px;">[image src="http://localhost:90/sink413x/assets/Uploads/GitHub-avatar-v2.jpeg" id="3" width="444" height="444" class="leftAlone ss-htmleditorfield-file image" alt="Batman &amp; Robin"]\n<p class="caption leftAlone">Batman &amp; Robin</p>\n</div>'

Second string that I get after "Save" (entities):

document.querySelector('textarea[name="Content"]').value
'<div class="captionImage leftAlone" style="width: 444px;">[image src="/sink413x/assets/Uploads/GitHub-avatar-v2.jpeg" id="3" width="444" height="444" class="leftAlone ss-htmleditorfield-file image" alt="Batman & Robin"]\n<p class="caption leftAlone">Batman & Robin</p>\n</div>'

Third string that I get after I made some changes, but not "Save" yet (named equivalents):

document.querySelector('textarea[name="Content"]').value
'<div class="captionImage leftAlone" style="width: 444px;">[image src="/sink413x/assets/Uploads/GitHub-avatar-v2.jpeg" id="3" width="444" height="444" class="leftAlone ss-htmleditorfield-file image" alt="Batman &amp; Robin"]\n<p class="caption leftAlone">Batman &amp; Robin &amp; Co</p>\n</div>'

This string we pass to the server from the client :

<div class="captionImage leftAlone" style="width: 444px;">[image src="/sink413x/assets/Uploads/GitHub-avatar-v2.jpeg" id="3" width="444" height="444" class="leftAlone ss-htmleditorfield-file image" alt="Batman &amp; Robin"]
<p class="caption leftAlone">Batman &amp; Robin &amp; Co</p>
</div>

This string we store in DB:

<div class="captionImage leftAlone" style="width: 444px;">[image src="/sink413x/assets/Uploads/GitHub-avatar-v2.jpeg" id="3" width="444" height="444" class="leftAlone ss-htmleditorfield-file image" alt="Batman &amp; Robin"]
<p class="caption leftAlone">Batman &amp; Robin &amp; Co</p>

It looks like TinyMC convert html entities into named equivalents in whole content every time when we edit it. When we return & as is from DB (I updated & with & in string in DB), then TinyMC shows it as is, but encode it to & as soon as we make any small changes (add 'Space').

So for behat test we should expect that after "Save" we will get My alt updated & saved instead of My alt updated & saved. I add some test to show all this explanation above.

[GuySartorelli]

It may not seem like it, but this actually means we're still double encoding. These should be queryable as img[alt='My alt updated & saved'] and img[title='My title text updated & saved']

I've gone back and re-run my manual tests. It turns out that the inspector in both firefox and chrome shows the decoded version of the string. So I saw this:

alt="some & thing"

But the actual value (seen by right clicking and selecting "Edit as HTML") was this:

alt="some & thing"

So we're still double encoding. Sorry I didn't catch it before merging the changes.

[sabina-talipova]

All changes that were made are correct, but they fixed problem in CMS itself. Current problem happens now when we display Content on a page.

[sabina-talipova]

I'll fix it and update Behat tests.

[sabina-talipova]

Could you, please review this PR

[sabina-talipova]

Tests require this PR

[GuySartorelli]

Looks good - it's green now the changes are merged.