diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx index 97c51189..41e287e4 100644 --- a/src/components/rich_content/rich_content.jsx +++ b/src/components/rich_content/rich_content.jsx @@ -1,4 +1,3 @@ -import { h } from 'vue' import { unescape, flattenDeep } from 'lodash' import { getTagName, processTextForEmoji, getAttrs } from 'src/services/html_converter/utility.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 linkData = getLinkData(attrs, children, tagsIndex++) + const { index, ...linkData } = getLinkData(attrs, children, tagsIndex++) writtenTags.push(linkData) if (!encounteredTextReverse) { lastTags.push(linkData) } - return + return } const renderMention = (attrs, children) => { @@ -235,7 +234,7 @@ export default { const newChildren = Array.isArray(children) ? [...children].reverse().map(processItemReverse).reverse() : children - return + return { newChildren } } else { diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js index 30c66a33..a4920867 100644 --- a/test/unit/specs/components/rich_content.spec.js +++ b/test/unit/specs/components/rich_content.spec.js @@ -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' -const localVue = createLocalVue() const attentions = [] +const global = { + mocks: { + '$store': null + }, + stubs: { + FAIcon: true + } +} const makeMention = (who) => { attentions.push({ statusnet_profile_url: `https://fake.tld/@${who}` }) @@ -11,17 +18,17 @@ const makeMention = (who) => { const p = (...data) => `

${data.join('')}

` const compwrap = (...data) => `${data.join('')}` const mentionsLine = (times) => [ - '' + '">' ].join('') describe('RichContent', () => { it('renders simple post without exploding', () => { const html = p('Hello world!') const wrapper = shallowMount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: 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', () => { @@ -43,8 +50,8 @@ describe('RichContent', () => { 'Testing \'em all' ].join('') const wrapper = shallowMount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: 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', () => { @@ -62,8 +69,8 @@ describe('RichContent', () => { ' how are you doing today?' ) const wrapper = shallowMount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: 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), ' how are you doing today?' ))) @@ -93,17 +100,17 @@ describe('RichContent', () => { ), // TODO fix this extra line somehow? p( - '' + '">' ) ].join('') const wrapper = shallowMount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: 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', () => { @@ -130,8 +137,8 @@ describe('RichContent', () => { ].join('\n') const wrapper = shallowMount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: false, greentext: true, @@ -154,8 +161,8 @@ describe('RichContent', () => { ].join('\n') const wrapper = shallowMount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: false, greentext: true, @@ -174,8 +181,8 @@ describe('RichContent', () => { ].join('\n') const wrapper = shallowMount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: false, greentext: false, @@ -191,12 +198,12 @@ describe('RichContent', () => { const html = p('Ebin :DDDD :spurdo:') const expected = p( 'Ebin :DDDD ', - '' + '' ) const wrapper = shallowMount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: 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', () => { const html = p('Lol :lol:') const wrapper = shallowMount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: 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', () => { @@ -240,8 +247,8 @@ describe('RichContent', () => { ].join('\n') const wrapper = shallowMount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: true, greentext: true, @@ -272,8 +279,8 @@ describe('RichContent', () => { ].join('
') const wrapper = shallowMount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: 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', () => { @@ -300,16 +307,18 @@ describe('RichContent', () => { '

', '', 'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg', - ' ', - '', - ' ', - '', + ' ', + '#nou', + '', + ' ', + '#screencap', + '', '

' ].join('') const wrapper = shallowMount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: 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', () => { @@ -342,7 +351,8 @@ describe('RichContent', () => { p( '', '', - '', + '', + '', '', 'https://', '', @@ -350,9 +360,10 @@ describe('RichContent', () => { '', '', '', - '', // v-if placeholder, mentionlink's "new" (i.e. rich) display + '', + '', // v-if placeholder, mentionlink's "new" (i.e. rich) display '', - '', // v-if placeholder, mentionsline's extra mentions and stuff + '', // v-if placeholder, mentionsline's extra mentions and stuff '' ), p( @@ -361,8 +372,8 @@ describe('RichContent', () => { ].join('') const wrapper = mount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: 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', () => { attentions.push({ statusnet_profile_url: 'lol' }) const html = [ - p( - '', - '', - '', - 'https://', - '', - 'lol.tld/', - '', - '', - '', - ' ', - '', - '', - 'https://', - '', - 'lol.tld/', - '', - '', - '', - '' - ), - p( - 'Testing' - ) + '', + '', + '', + 'https://', + '', + 'lol.tld/', + '', + '', + '', + ' ', + '', + '', + 'https://', + '', + 'lol.tld/', + '', + '', + '', + ' ', + '', + 'Testing' ].join('') const expected = [ - p( - '', - '', - '', - '', - '', - 'https://', - '', - 'lol.tld/', - '', - '', - '', - '', // v-if placeholder, mentionlink's "new" (i.e. rich) display - '', - '', - '', - '', - 'https://', - '', - 'lol.tld/', - '', - '', - '', - '', // v-if placeholder, mentionlink's "new" (i.e. rich) display - '', - '', // v-if placeholder, mentionsline's extra mentions and stuff - '', - '' - ), + '', + '', + '', + '', + '', + '', + 'https://', + '', + 'lol.tld/', + '', + '', + '', + '', + '', // v-if placeholder, mentionlink's "new" (i.e. rich) display + '', + '', + '', + '', + '', + 'https://', + '', + 'lol.tld/', + '', + '', + '', + '', + '', // v-if placeholder, mentionlink's "new" (i.e. rich) display + '', + '', // v-if placeholder, mentionsline's extra mentions and stuff + '', ' ', - p( - 'Testing' - ) + '', + 'Testing' ].join('') const wrapper = mount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: 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', () => { @@ -483,8 +491,8 @@ describe('RichContent', () => { ].join('') const wrapper = shallowMount(RichContent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks: 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', () => { @@ -530,8 +538,8 @@ describe('RichContent', () => { const t0 = performance.now() const wrapper = mount(TestComponent, { - localVue, - propsData: { + global, + props: { attentions, handleLinks, vhtml