AkkomaGang/akkoma-fe
5
13
Fork 64
Code Issues 81 Pull requests 19 Projects Releases 1 Wiki Activity

fix richcontent and its tests

Browse source
This commit is contained in:
Henry Jameson 2022-03-22 16:40:45 +02:00
parent c3546ea856
commit c2cf13fc00
2 changed files with 124 additions and 117 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/rich_content/rich_content.jsx
View file

@ -1,4 +1,3 @@
import { h } from 'vue'
import { unescape, flattenDeep } from 'lodash' import { unescape, flattenDeep } from 'lodash'
import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js' import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.service.js'
import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js' import { convertHtmlToTree } from 'src/services/html_converter/html_tree_converter.service.js'
@ -82,12 +81,12 @@ export default {
} }
const renderHashtag = (attrs, children, encounteredTextReverse) => { const renderHashtag = (attrs, children, encounteredTextReverse) => {
const linkData = getLinkData(attrs, children, tagsIndex++) const { index, ...linkData } = getLinkData(attrs, children, tagsIndex++)
writtenTags.push(linkData) writtenTags.push(linkData)
if (!encounteredTextReverse) { if (!encounteredTextReverse) {
lastTags.push(linkData) lastTags.push(linkData)
} }
return <HashtagLink {...{ props: linkData }}/> return <HashtagLink { ...linkData }/>
} }
const renderMention = (attrs, children) => { const renderMention = (attrs, children) => {
@ -235,7 +234,7 @@ export default {
const newChildren = Array.isArray(children) const newChildren = Array.isArray(children)
? [...children].reverse().map(processItemReverse).reverse() ? [...children].reverse().map(processItemReverse).reverse()
: children : children
return <Tag {...{ attrs: getAttrs(opener) }}> return <Tag {...getAttrs(opener)}>
{ newChildren } { newChildren }
</Tag> </Tag>
} else { } else {

234
test/unit/specs/components/rich_content.spec.js
View file

@ -1,8 +1,15 @@
import { mount, shallowMount, createLocalVue } from '@vue/test-utils' import { mount, shallowMount } from '@vue/test-utils'
import RichContent from 'src/components/rich_content/rich_content.jsx' import RichContent from 'src/components/rich_content/rich_content.jsx'
const localVue = createLocalVue()
const attentions = [] const attentions = []
const global = {
mocks: {
'$store': null
},
stubs: {
FAIcon: true
}
}
const makeMention = (who) => { const makeMention = (who) => {
attentions.push({ statusnet_profile_url: `https://fake.tld/@${who}` }) attentions.push({ statusnet_profile_url: `https://fake.tld/@${who}` })
@ -11,17 +18,17 @@ const makeMention = (who) => {
const p = (...data) => `<p>${data.join('')}</p>` const p = (...data) => `<p>${data.join('')}</p>`
const compwrap = (...data) => `<span class="RichContent">${data.join('')}</span>` const compwrap = (...data) => `<span class="RichContent">${data.join('')}</span>`
const mentionsLine = (times) => [ const mentionsLine = (times) => [
'<mentionsline-stub mentions="', '<mentions-line-stub mentions="',
new Array(times).fill('[object Object]').join(','), new Array(times).fill('[object Object]').join(','),
'"></mentionsline-stub>' '"></mentions-line-stub>'
].join('') ].join('')
describe('RichContent', () => { describe('RichContent', () => {
it('renders simple post without exploding', () => { it('renders simple post without exploding', () => {
const html = p('Hello world!') const html = p('Hello world!')
const wrapper = shallowMount(RichContent, { const wrapper = shallowMount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: true, handleLinks: true,
greentext: true, greentext: true,
@ -30,7 +37,7 @@ describe('RichContent', () => {
} }
}) })
expect(wrapper.html()).to.eql(compwrap(html)) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(html))
}) })
it('unescapes everything as needed', () => { it('unescapes everything as needed', () => {
@ -43,8 +50,8 @@ describe('RichContent', () => {
'Testing \'em all' 'Testing \'em all'
].join('') ].join('')
const wrapper = shallowMount(RichContent, { const wrapper = shallowMount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: true, handleLinks: true,
greentext: true, greentext: true,
@ -53,7 +60,7 @@ describe('RichContent', () => {
} }
}) })
expect(wrapper.html()).to.eql(compwrap(expected)) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
}) })
it('replaces mention with mentionsline', () => { it('replaces mention with mentionsline', () => {
@ -62,8 +69,8 @@ describe('RichContent', () => {
' how are you doing today?' ' how are you doing today?'
) )
const wrapper = shallowMount(RichContent, { const wrapper = shallowMount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: true, handleLinks: true,
greentext: true, greentext: true,
@ -72,7 +79,7 @@ describe('RichContent', () => {
} }
}) })
expect(wrapper.html()).to.eql(compwrap(p( expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(p(
mentionsLine(1), mentionsLine(1),
' how are you doing today?' ' how are you doing today?'
))) )))
@ -93,17 +100,17 @@ describe('RichContent', () => {
), ),
// TODO fix this extra line somehow? // TODO fix this extra line somehow?
p( p(
'<mentionsline-stub mentions="', '<mentions-line-stub mentions="',
'[object Object],', '[object Object],',
'[object Object],', '[object Object],',
'[object Object]', '[object Object]',
'"></mentionsline-stub>' '"></mentions-line-stub>'
) )
].join('') ].join('')
const wrapper = shallowMount(RichContent, { const wrapper = shallowMount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: true, handleLinks: true,
greentext: true, greentext: true,
@ -112,7 +119,7 @@ describe('RichContent', () => {
} }
}) })
expect(wrapper.html()).to.eql(compwrap(expected)) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
}) })
it('Does not touch links if link handling is disabled', () => { it('Does not touch links if link handling is disabled', () => {
@ -130,8 +137,8 @@ describe('RichContent', () => {
].join('\n') ].join('\n')
const wrapper = shallowMount(RichContent, { const wrapper = shallowMount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: false, handleLinks: false,
greentext: true, greentext: true,
@ -154,8 +161,8 @@ describe('RichContent', () => {
].join('\n') ].join('\n')
const wrapper = shallowMount(RichContent, { const wrapper = shallowMount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: false, handleLinks: false,
greentext: true, greentext: true,
@ -174,8 +181,8 @@ describe('RichContent', () => {
].join('\n') ].join('\n')
const wrapper = shallowMount(RichContent, { const wrapper = shallowMount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: false, handleLinks: false,
greentext: false, greentext: false,
@ -191,12 +198,12 @@ describe('RichContent', () => {
const html = p('Ebin :DDDD :spurdo:') const html = p('Ebin :DDDD :spurdo:')
const expected = p( const expected = p(
'Ebin :DDDD ', 'Ebin :DDDD ',
'<anonymous-stub alt=":spurdo:" src="about:blank" title=":spurdo:" class="emoji img"></anonymous-stub>' '<anonymous-stub src="about:blank" alt=":spurdo:" class="emoji img" title=":spurdo:"></anonymous-stub>'
) )
const wrapper = shallowMount(RichContent, { const wrapper = shallowMount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: false, handleLinks: false,
greentext: false, greentext: false,
@ -205,15 +212,15 @@ describe('RichContent', () => {
} }
}) })
expect(wrapper.html()).to.eql(compwrap(expected)) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
}) })
it('Doesn\'t add nonexistent emoji to post', () => { it('Doesn\'t add nonexistent emoji to post', () => {
const html = p('Lol :lol:') const html = p('Lol :lol:')
const wrapper = shallowMount(RichContent, { const wrapper = shallowMount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: false, handleLinks: false,
greentext: false, greentext: false,
@ -222,7 +229,7 @@ describe('RichContent', () => {
} }
}) })
expect(wrapper.html()).to.eql(compwrap(html)) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(html))
}) })
it('Greentext + last mentions', () => { it('Greentext + last mentions', () => {
@ -240,8 +247,8 @@ describe('RichContent', () => {
].join('\n') ].join('\n')
const wrapper = shallowMount(RichContent, { const wrapper = shallowMount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: true, handleLinks: true,
greentext: true, greentext: true,
@ -272,8 +279,8 @@ describe('RichContent', () => {
].join('<br>') ].join('<br>')
const wrapper = shallowMount(RichContent, { const wrapper = shallowMount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: true, handleLinks: true,
greentext: true, greentext: true,
@ -282,7 +289,7 @@ describe('RichContent', () => {
} }
}) })
expect(wrapper.html()).to.eql(compwrap(expected)) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
}) })
it('buggy example/hashtags', () => { it('buggy example/hashtags', () => {
@ -300,16 +307,18 @@ describe('RichContent', () => {
'<p>', '<p>',
'<a href="http://macrochan.org/images/N/H/NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg" target="_blank">', '<a href="http://macrochan.org/images/N/H/NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg" target="_blank">',
'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg</a>', 'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg</a>',
' <hashtaglink-stub url="https://shitposter.club/tag/nou" content="#nou" tag="nou">', ' <hashtag-link-stub url="https://shitposter.club/tag/nou" content="#nou" tag="nou">',
'</hashtaglink-stub>', '#nou',
' <hashtaglink-stub url="https://shitposter.club/tag/screencap" content="#screencap" tag="screencap">', '</hashtag-link-stub>',
'</hashtaglink-stub>', ' <hashtag-link-stub url="https://shitposter.club/tag/screencap" content="#screencap" tag="screencap">',
'#screencap',
'</hashtag-link-stub>',
' </p>' ' </p>'
].join('') ].join('')
const wrapper = shallowMount(RichContent, { const wrapper = shallowMount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: true, handleLinks: true,
greentext: true, greentext: true,
@ -318,7 +327,7 @@ describe('RichContent', () => {
} }
}) })
expect(wrapper.html()).to.eql(compwrap(expected)) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
}) })
it('rich contents of a mention are handled properly', () => { it('rich contents of a mention are handled properly', () => {
@ -342,7 +351,8 @@ describe('RichContent', () => {
p( p(
'<span class="MentionsLine">', '<span class="MentionsLine">',
'<span class="MentionLink mention-link">', '<span class="MentionLink mention-link">',
'<a href="lol" target="_blank" class="original">', '<!-- eslint-disable vue/no-v-html -->',
'<a href="lol" class="original" target="_blank">',
'<span>', '<span>',
'https://</span>', 'https://</span>',
'<span>', '<span>',
@ -350,9 +360,10 @@ describe('RichContent', () => {
'<span>', '<span>',
'</span>', '</span>',
'</a>', '</a>',
'<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display '<!-- eslint-enable vue/no-v-html -->',
'<!--v-if-->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
'</span>', '</span>',
'<!---->', // v-if placeholder, mentionsline's extra mentions and stuff '<!--v-if-->', // v-if placeholder, mentionsline's extra mentions and stuff
'</span>' '</span>'
), ),
p( p(
@ -361,8 +372,8 @@ describe('RichContent', () => {
].join('') ].join('')
const wrapper = mount(RichContent, { const wrapper = mount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: true, handleLinks: true,
greentext: true, greentext: true,
@ -371,76 +382,73 @@ describe('RichContent', () => {
} }
}) })
expect(wrapper.html()).to.eql(compwrap(expected)) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
}) })
it('rich contents of nested mentions are handled properly', () => { it('rich contents of nested mentions are handled properly', () => {
attentions.push({ statusnet_profile_url: 'lol' }) attentions.push({ statusnet_profile_url: 'lol' })
const html = [ const html = [
p( '<span class="poast-style">',
'<span class="poast-style">', '<a href="lol" class="mention">',
'<a href="lol" class="mention">', '<span>',
'<span>', 'https://</span>',
'https://</span>', '<span>',
'<span>', 'lol.tld/</span>',
'lol.tld/</span>', '<span>',
'<span>', '</span>',
'</span>', '</a>',
'</a>', ' ',
' ', '<a href="lol" class="mention">',
'<a href="lol" class="mention">', '<span>',
'<span>', 'https://</span>',
'https://</span>', '<span>',
'<span>', 'lol.tld/</span>',
'lol.tld/</span>', '<span>',
'<span>', '</span>',
'</span>', '</a>',
'</a>', ' ',
'</span>' '</span>',
), 'Testing'
p(
'Testing'
)
].join('') ].join('')
const expected = [ const expected = [
p( '<span class="poast-style">',
'<span class="poast-style">', '<span class="MentionsLine">',
'<span class="MentionsLine">', '<span class="MentionLink mention-link">',
'<span class="MentionLink mention-link">', '<!-- eslint-disable vue/no-v-html -->',
'<a href="lol" target="_blank" class="original">', '<a href="lol" class="original" target="_blank">',
'<span>', '<span>',
'https://</span>', 'https://</span>',
'<span>', '<span>',
'lol.tld/</span>', 'lol.tld/</span>',
'<span>', '<span>',
'</span>', '</span>',
'</a>', '</a>',
'<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display '<!-- eslint-enable vue/no-v-html -->',
'</span>', '<!--v-if-->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
'<span class="MentionLink mention-link">', '</span>',
'<a href="lol" target="_blank" class="original">', '<span class="MentionLink mention-link">',
'<span>', '<!-- eslint-disable vue/no-v-html -->',
'https://</span>', '<a href="lol" class="original" target="_blank">',
'<span>', '<span>',
'lol.tld/</span>', 'https://</span>',
'<span>', '<span>',
'</span>', 'lol.tld/</span>',
'</a>', '<span>',
'<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display '</span>',
'</span>', '</a>',
'<!---->', // v-if placeholder, mentionsline's extra mentions and stuff '<!-- eslint-enable vue/no-v-html -->',
'</span>', '<!--v-if-->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
'</span>' '</span>',
), '<!--v-if-->', // v-if placeholder, mentionsline's extra mentions and stuff
'</span>',
' ', ' ',
p( '</span>',
'Testing' 'Testing'
)
].join('') ].join('')
const wrapper = mount(RichContent, { const wrapper = mount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: true, handleLinks: true,
greentext: true, greentext: true,
@ -449,7 +457,7 @@ describe('RichContent', () => {
} }
}) })
expect(wrapper.html()).to.eql(compwrap(expected)) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
}) })
it('rich contents of a link are handled properly', () => { it('rich contents of a link are handled properly', () => {
@ -483,8 +491,8 @@ describe('RichContent', () => {
].join('') ].join('')
const wrapper = shallowMount(RichContent, { const wrapper = shallowMount(RichContent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks: true, handleLinks: true,
greentext: true, greentext: true,
@ -493,7 +501,7 @@ describe('RichContent', () => {
} }
}) })
expect(wrapper.html()).to.eql(compwrap(expected)) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
}) })
it.skip('[INFORMATIVE] Performance testing, 10 000 simple posts', () => { it.skip('[INFORMATIVE] Performance testing, 10 000 simple posts', () => {
@ -530,8 +538,8 @@ describe('RichContent', () => {
const t0 = performance.now() const t0 = performance.now()
const wrapper = mount(TestComponent, { const wrapper = mount(TestComponent, {
localVue, global,
propsData: { props: {
attentions, attentions,
handleLinks, handleLinks,
vhtml vhtml