diff options
Diffstat (limited to 'test/unit/specs/components/rich_content.spec.js')
| -rw-r--r-- | test/unit/specs/components/rich_content.spec.js | 529 |
1 files changed, 100 insertions, 429 deletions
diff --git a/test/unit/specs/components/rich_content.spec.js b/test/unit/specs/components/rich_content.spec.js index fbf8973d..b29edeab 100644 --- a/test/unit/specs/components/rich_content.spec.js +++ b/test/unit/specs/components/rich_content.spec.js @@ -2,13 +2,19 @@ import { mount, shallowMount, createLocalVue } from '@vue/test-utils' import RichContent from 'src/components/rich_content/rich_content.jsx' const localVue = createLocalVue() +const attentions = [] -const makeMention = (who) => `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>` -const stubMention = (who) => `<span class="h-card"><mentionlink-stub url="https://fake.tld/@${who}" content="@<span>${who}</span>"></mentionlink-stub></span>` -const lastMentions = (...data) => `<span class="lastMentions">${data.join('')}</span>` +const makeMention = (who) => { + attentions.push({ statusnet_profile_url: `https://fake.tld/@${who}` }) + return `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>` +} const p = (...data) => `<p>${data.join('')}</p>` const compwrap = (...data) => `<span class="RichContent">${data.join('')}</span>` -const removedMentionSpan = '<span class="h-card"></span>' +const mentionsLine = (times) => [ + '<mentionsline-stub mentions="', + new Array(times).fill('[object Object]').join(','), + '"></mentionsline-stub>' +].join('') describe('RichContent', () => { it('renders simple post without exploding', () => { @@ -16,7 +22,7 @@ describe('RichContent', () => { const wrapper = shallowMount(RichContent, { localVue, propsData: { - hideMentions: true, + attentions, handleLinks: true, greentext: true, emoji: [], @@ -39,7 +45,7 @@ describe('RichContent', () => { const wrapper = shallowMount(RichContent, { localVue, propsData: { - hideMentions: true, + attentions, handleLinks: true, greentext: true, emoji: [], @@ -50,77 +56,15 @@ describe('RichContent', () => { expect(wrapper.html()).to.eql(compwrap(expected)) }) - it('removes mentions from the beginning of post', () => { + it('replaces mention with mentionsline', () => { const html = p( makeMention('John'), - ' how are you doing thoday?' + ' how are you doing today?' ) - const expected = p( - removedMentionSpan, - 'how are you doing thoday?' - ) - const wrapper = shallowMount(RichContent, { - localVue, - propsData: { - hideMentions: true, - handleLinks: true, - greentext: true, - emoji: [], - html - } - }) - - expect(wrapper.html()).to.eql(compwrap(expected)) - }) - - it('replaces first mention with mentionsline if hideMentions=false', () => { - const html = p( - makeMention('John'), - ' how are you doing thoday?' - ) - const expected = p( - '<span class="h-card">', - '<mentionsline-stub mentions="', - '[object Object]', - '"></mentionsline-stub>', - '</span>', - 'how are you doing thoday?' - ) - const wrapper = shallowMount(RichContent, { - localVue, - propsData: { - hideMentions: false, - handleLinks: true, - greentext: true, - emoji: [], - html - } - }) - - expect(wrapper.html()).to.eql(compwrap(expected)) - }) - - it('removes mentions from the end of the hellpost (<p>)', () => { - const html = [ - p('How are you doing today, fine gentlemen?'), - p( - makeMention('John'), - makeMention('Josh'), - makeMention('Jeremy') - ) - ].join('') - const expected = [ - p( - 'How are you doing today, fine gentlemen?' - ), - // TODO fix this extra line somehow? - p() - ].join('') - const wrapper = shallowMount(RichContent, { localVue, propsData: { - hideMentions: true, + attentions, handleLinks: true, greentext: true, emoji: [], @@ -128,10 +72,13 @@ describe('RichContent', () => { } }) - expect(wrapper.html()).to.eql(compwrap(expected)) + expect(wrapper.html()).to.eql(compwrap(p( + mentionsLine(1), + ' how are you doing today?' + ))) }) - it('replaces mentions at the end of the hellpost if hideMentions=false (<p>)', () => { + it('replaces mentions at the end of the hellpost', () => { const html = [ p('How are you doing today, fine gentlemen?'), p( @@ -157,184 +104,7 @@ describe('RichContent', () => { const wrapper = shallowMount(RichContent, { localVue, propsData: { - hideMentions: false, - handleLinks: true, - greentext: true, - emoji: [], - html - } - }) - - expect(wrapper.html()).to.eql(compwrap(expected)) - }) - - it('removes mentions from the end of the hellpost (<br>)', () => { - const html = [ - 'How are you doing today, fine gentlemen?', - [ - makeMention('John'), - makeMention('Josh'), - makeMention('Jeremy') - ].join('') - ].join('<br>') - const expected = [ - 'How are you doing today, fine gentlemen?', - // TODO fix this extra line somehow? - '<br>' - ].join('') - - const wrapper = shallowMount(RichContent, { - localVue, - propsData: { - hideMentions: true, - handleLinks: true, - greentext: true, - emoji: [], - html - } - }) - - expect(wrapper.html()).to.eql(compwrap(expected)) - }) - - it('removes mentions from the end of the hellpost (\\n)', () => { - const html = [ - 'How are you doing today, fine gentlemen?', - [ - makeMention('John'), - makeMention('Josh'), - makeMention('Jeremy') - ].join('') - ].join('\n') - const expected = [ - 'How are you doing today, fine gentlemen?', - // TODO fix this extra line somehow? - '' - ].join('\n') - - const wrapper = shallowMount(RichContent, { - localVue, - propsData: { - hideMentions: true, - handleLinks: true, - greentext: true, - emoji: [], - html - } - }) - - expect(wrapper.html()).to.eql(compwrap(expected)) - }) - - it('Does not remove mentions in the middle or at the end of text string', () => { - const html = [ - [ - makeMention('Jack'), - 'let\'s meet up with ', - makeMention('Janet') - ].join(''), - [ - 'cc: ', - makeMention('John'), - makeMention('Josh'), - makeMention('Jeremy') - ].join('') - ].join('\n') - const expected = [ - [ - removedMentionSpan, - 'let\'s meet up with ', - stubMention('Janet') - ].join(''), - [ - 'cc: ', - stubMention('John'), - stubMention('Josh'), - stubMention('Jeremy') - ].join('') - ].join('\n') - - const wrapper = shallowMount(RichContent, { - localVue, - propsData: { - hideMentions: true, - handleLinks: true, - greentext: true, - emoji: [], - html - } - }) - - expect(wrapper.html()).to.eql(compwrap(expected)) - }) - - it('removes mentions from the end if there\'s only one first mention', () => { - const html = [ - p( - makeMention('Todd'), - 'so anyway you are wrong' - ), - p( - makeMention('Tom'), - makeMention('Trace'), - makeMention('Theodor') - ) - ].join('') - const expected = [ - p( - removedMentionSpan, - 'so anyway you are wrong' - ), - // TODO fix this extra line somehow? - p() - ].join('') - - const wrapper = shallowMount(RichContent, { - localVue, - propsData: { - hideMentions: true, - handleLinks: true, - greentext: true, - emoji: [], - html - } - }) - - expect(wrapper.html()).to.eql(compwrap(expected)) - }) - - it('does not remove mentions from the end if there\'s more than one first mention', () => { - const html = [ - p( - makeMention('Zacharie'), - makeMention('Zinaide'), - 'you guys have cool names, and so do these guys: ' - ), - p( - makeMention('Watson'), - makeMention('Wallace'), - makeMention('Wakamoto') - ) - ].join('') - const expected = [ - p( - removedMentionSpan, - removedMentionSpan, - 'you guys have cool names, and so do these guys: ' - ), - p( - lastMentions( - stubMention('Watson'), - stubMention('Wallace'), - stubMention('Wakamoto') - ) - ) - ].join('') - - const wrapper = shallowMount(RichContent, { - localVue, - propsData: { - hideMentions: true, + attentions, handleLinks: true, greentext: true, emoji: [], @@ -362,7 +132,7 @@ describe('RichContent', () => { const wrapper = shallowMount(RichContent, { localVue, propsData: { - hideMentions: true, + attentions, handleLinks: false, greentext: true, emoji: [], @@ -386,7 +156,7 @@ describe('RichContent', () => { const wrapper = shallowMount(RichContent, { localVue, propsData: { - hideMentions: true, + attentions, handleLinks: false, greentext: true, emoji: [], @@ -406,7 +176,7 @@ describe('RichContent', () => { const wrapper = shallowMount(RichContent, { localVue, propsData: { - hideMentions: true, + attentions, handleLinks: false, greentext: false, emoji: [], @@ -427,7 +197,7 @@ describe('RichContent', () => { const wrapper = shallowMount(RichContent, { localVue, propsData: { - hideMentions: true, + attentions, handleLinks: false, greentext: false, emoji: [{ url: 'about:blank', shortcode: 'spurdo' }], @@ -444,7 +214,7 @@ describe('RichContent', () => { const wrapper = shallowMount(RichContent, { localVue, propsData: { - hideMentions: true, + attentions, handleLinks: false, greentext: false, emoji: [], @@ -464,7 +234,7 @@ describe('RichContent', () => { ].join('\n') const expected = [ '<span class="greentext">>quote</span>', - stubMention('lol'), + mentionsLine(1), '<span class="greentext">>quote</span>', '<span class="greentext">>quote</span>' ].join('\n') @@ -472,6 +242,7 @@ describe('RichContent', () => { const wrapper = shallowMount(RichContent, { localVue, propsData: { + attentions, handleLinks: true, greentext: true, emoji: [], @@ -496,127 +267,14 @@ describe('RichContent', () => { const expected = [ 'Bruh', 'Bruh', - [ - stubMention('foo'), - stubMention('bar'), - stubMention('baz') - ].join(''), + mentionsLine(3), 'Bruh' ].join('<br>') const wrapper = shallowMount(RichContent, { localVue, propsData: { - hideMentions: true, - handleLinks: true, - greentext: true, - emoji: [], - html - } - }) - - expect(wrapper.html()).to.eql(compwrap(expected)) - }) - - it('Don\'t remove last mention if it\'s the only one', () => { - const html = [ - 'Bruh', - 'Bruh', - makeMention('foo'), - makeMention('bar'), - makeMention('baz') - ].join('<br>') - const expected = [ - 'Bruh', - 'Bruh', - stubMention('foo'), - stubMention('bar'), - stubMention('baz') - ].join('<br>') - - const wrapper = shallowMount(RichContent, { - localVue, - propsData: { - hideMentions: true, - handleLinks: true, - greentext: true, - emoji: [], - html - } - }) - - expect(wrapper.html()).to.eql(compwrap(expected)) - }) - - it('Don\'t remove last mentions if there are more than one first mention - remove first instead', () => { - const html = [ - [ - makeMention('foo'), - makeMention('bar') - ].join(' '), - 'Bruh', - 'Bruh', - [ - makeMention('foo'), - makeMention('bar'), - makeMention('baz') - ].join(' ') - ].join('\n') - - const expected = [ - [ - removedMentionSpan, - removedMentionSpan, - 'Bruh' // Due to trim we remove extra newline - ].join(''), - 'Bruh', - lastMentions([ - stubMention('foo'), - stubMention('bar'), - stubMention('baz') - ].join(' ')) - ].join('\n') - - const wrapper = shallowMount(RichContent, { - localVue, - propsData: { - hideMentions: true, - handleLinks: true, - greentext: true, - emoji: [], - html - } - }) - - expect(wrapper.html()).to.eql(compwrap(expected)) - }) - - it('Remove last mentions if there\'s just one first mention - remove all', () => { - const html = [ - [ - makeMention('foo') - ].join(' '), - 'Bruh', - 'Bruh', - [ - makeMention('foo'), - makeMention('bar'), - makeMention('baz') - ].join(' ') - ].join('\n') - - const expected = [ - [ - removedMentionSpan, - 'Bruh' // Due to trim we remove extra newline - ].join(''), - 'Bruh\n' // Can't remove this one yet - ].join('\n') - - const wrapper = shallowMount(RichContent, { - localVue, - propsData: { - hideMentions: true, + attentions, handleLinks: true, greentext: true, emoji: [], @@ -652,7 +310,7 @@ describe('RichContent', () => { const wrapper = shallowMount(RichContent, { localVue, propsData: { - hideMentions: true, + attentions, handleLinks: true, greentext: true, emoji: [], @@ -664,53 +322,7 @@ describe('RichContent', () => { }) it('rich contents of a mention are handled properly', () => { - const html = [ - p( - 'Testing' - ), - p( - '<a href="lol" class="mention">', - '<span>', - 'https://</span>', - '<span>', - 'lol.tld/</span>', - '<span>', - '</span>', - '</a>' - ) - ].join('') - const expected = [ - p( - 'Testing' - ), - p( - '<mentionlink-stub url="lol" content="', - '<span>', - 'https://</span>', - '<span>', - 'lol.tld/</span>', - '<span>', - '</span>', - '">', - '</mentionlink-stub>' - ) - ].join('') - - const wrapper = shallowMount(RichContent, { - localVue, - propsData: { - hideMentions: false, - handleLinks: true, - greentext: true, - emoji: [], - html - } - }) - - expect(wrapper.html()).to.eql(compwrap(expected)) - }) - - it('rich contents of a mention in beginning are handled properly', () => { + attentions.push({ statusnet_profile_url: 'lol' }) const html = [ p( '<a href="lol" class="mention">', @@ -729,16 +341,19 @@ describe('RichContent', () => { const expected = [ p( '<span class="MentionsLine">', - '<mentionlink-stub content="', + '<span class="MentionLink mention-link">', + '<a href="lol" target="_blank" class="original">', '<span>', 'https://</span>', '<span>', 'lol.tld/</span>', '<span>', '</span>', - '" url="lol" class="mention-link">', - '</mentionlink-stub>', - '<!---->', // v-if placeholder + '</a>', + ' ', + '<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display + '</span>', + '<!---->', // v-if placeholder, mentionsline's extra mentions and stuff '</span>' ), p( @@ -748,11 +363,8 @@ describe('RichContent', () => { const wrapper = mount(RichContent, { localVue, - stubs: { - MentionLink: true - }, propsData: { - hideMentions: false, + attentions, handleLinks: true, greentext: true, emoji: [], @@ -796,7 +408,7 @@ describe('RichContent', () => { const wrapper = shallowMount(RichContent, { localVue, propsData: { - hideMentions: false, + attentions, handleLinks: true, greentext: true, emoji: [], @@ -806,4 +418,63 @@ describe('RichContent', () => { expect(wrapper.html()).to.eql(compwrap(expected)) }) + + it.skip('[INFORMATIVE] Performance testing, 10 000 simple posts', () => { + const amount = 20 + + const onePost = p( + makeMention('Lain'), + makeMention('Lain'), + makeMention('Lain'), + makeMention('Lain'), + makeMention('Lain'), + makeMention('Lain'), + makeMention('Lain'), + makeMention('Lain'), + makeMention('Lain'), + makeMention('Lain'), + ' i just landed in l a where are you' + ) + + const TestComponent = { + template: ` + <div v-if="!vhtml"> + ${new Array(amount).fill(`<RichContent html="${onePost}" :greentext="true" :handleLinks="handeLinks" :emoji="[]" :attentions="attentions"/>`)} + </div> + <div v-else="vhtml"> + ${new Array(amount).fill(`<div v-html="${onePost}"/>`)} + </div> + `, + props: ['handleLinks', 'attentions', 'vhtml'] + } + console.log(1) + + const ptest = (handleLinks, vhtml) => { + const t0 = performance.now() + + const wrapper = mount(TestComponent, { + localVue, + propsData: { + attentions, + handleLinks, + vhtml + } + }) + + const t1 = performance.now() + + wrapper.destroy() + + const t2 = performance.now() + + return `Mount: ${t1 - t0}ms, destroy: ${t2 - t1}ms, avg ${(t1 - t0) / amount}ms - ${(t2 - t1) / amount}ms per item` + } + + console.log(`${amount} items with links handling:`) + console.log(ptest(true)) + console.log(`${amount} items without links handling:`) + console.log(ptest(false)) + console.log(`${amount} items plain v-html:`) + console.log(ptest(false, true)) + }) }) |