import { mount, shallowMount } from '@vue/test-utils' import RichContent from 'src/components/rich_content/rich_content.jsx' const attentions = [] const global = { mocks: { '$store': { state: {}, getters: { mergedConfig: () => ({ mentionLinkShowTooltip: true }), findUserByUrl: () => null } } }, stubs: { FAIcon: true } } const makeMention = (who) => { attentions.push({ statusnet_profile_url: `https://fake.tld/@${who}` }) return `@${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, { global, props: { attentions, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(html)) }) it('unescapes everything as needed', () => { const html = [ p('Testing 'em all'), 'Testing 'em all' ].join('') const expected = [ p('Testing \'em all'), 'Testing \'em all' ].join('') const wrapper = shallowMount(RichContent, { global, props: { attentions, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected)) }) it('replaces mention with mentionsline', () => { const html = p( makeMention('John'), ' how are you doing today?' ) const wrapper = shallowMount(RichContent, { global, props: { attentions, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(p( mentionsLine(1), ' how are you doing today?' ))) }) it('replaces mentions at the end of the hellpost', () => { 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, { global, props: { attentions, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected)) }) it('Does not touch links if link handling is disabled', () => { const html = [ [ makeMention('Jack'), 'let\'s meet up with ', makeMention('Janet') ].join(''), [ makeMention('John'), makeMention('Josh'), makeMention('Jeremy') ].join('') ].join('\n') const wrapper = shallowMount(RichContent, { global, props: { attentions, handleLinks: false, greentext: true, emoji: [], html } }) expect(wrapper.html()).to.eql(compwrap(html)) }) it('Adds greentext and cyantext to the post', () => { const html = [ '>preordering videogames', '>any year' ].join('\n') const expected = [ '>preordering videogames', '>any year' ].join('\n') const wrapper = shallowMount(RichContent, { global, props: { attentions, handleLinks: false, greentext: true, emoji: [], html } }) expect(wrapper.html()).to.eql(compwrap(expected)) }) it('Does not add greentext and cyantext if setting is set to false', () => { const html = [ '>preordering videogames', '>any year' ].join('\n') const wrapper = shallowMount(RichContent, { global, props: { attentions, handleLinks: false, greentext: false, emoji: [], html } }) expect(wrapper.html()).to.eql(compwrap(html)) }) it('Adds emoji to post', () => { const html = p('Ebin :DDDD :spurdo:') const expected = p( 'Ebin :DDDD ', '' ) const wrapper = shallowMount(RichContent, { global, props: { attentions, handleLinks: false, greentext: false, emoji: [{ url: 'about:blank', shortcode: 'spurdo' }], html } }) 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, { global, props: { attentions, handleLinks: false, greentext: false, emoji: [], html } }) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(html)) }) it('Greentext + last mentions', () => { const html = [ '>quote', makeMention('lol'), '>quote', '>quote' ].join('\n') const expected = [ '>quote', mentionsLine(1), '>quote', '>quote' ].join('\n') const wrapper = shallowMount(RichContent, { global, props: { attentions, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html()).to.eql(compwrap(expected)) }) it('One buggy example', () => { const html = [ 'Bruh', 'Bruh', [ makeMention('foo'), makeMention('bar'), makeMention('baz') ].join(''), 'Bruh' ].join('
') const expected = [ 'Bruh', 'Bruh', mentionsLine(3), 'Bruh' ].join('
') const wrapper = shallowMount(RichContent, { global, props: { attentions, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected)) }) it('buggy example/hashtags', () => { const html = [ '

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

' ].join('') const expected = [ '

', '', 'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg', ' ', '', ' ', '', '

' ].join('') const wrapper = shallowMount(RichContent, { global, props: { attentions, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected)) }) it('rich contents of a mention are handled properly', () => { attentions.push({ statusnet_profile_url: 'lol' }) const html = [ p( '', '', 'https://', '', 'lol.tld/', '', '', '' ), p( 'Testing' ) ].join('') const expected = [ p( '', '', '', '', 'https://', '', 'lol.tld/', '', '', '', '', '' ), p( 'Testing' ) ].join('') const wrapper = mount(RichContent, { global, props: { attentions, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html().replace(/\n/g, '').replace(//g, '')).to.eql(compwrap(expected)) }) it('rich contents of nested mentions are handled properly', () => { attentions.push({ statusnet_profile_url: 'lol' }) const html = [ '', '', '', 'https://', '', 'lol.tld/', '', '', '', ' ', '', '', 'https://', '', 'lol.tld/', '', '', '', ' ', '', 'Testing' ].join('') const expected = [ '', '', '', '', '', 'https://', '', 'lol.tld/', '', '', '', '', '', '', '', 'https://', '', 'lol.tld/', '', '', '', '', '', ' ', '', 'Testing' ].join('') const wrapper = mount(RichContent, { global, props: { attentions, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html().replace(/\n/g, '').replace(//g, '')).to.eql(compwrap(expected)) }) it('rich contents of a link are handled properly', () => { const html = [ '

', 'Freenode is dead.

', '

', '', '', 'https://', '', 'isfreenodedeadyet.com/', '', '', '', '

' ].join('') const expected = [ '

', 'Freenode is dead.

', '

', '', '', 'https://', '', 'isfreenodedeadyet.com/', '', '', '', '

' ].join('') const wrapper = shallowMount(RichContent, { global, props: { attentions, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html().replace(/\n/g, '')).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: `
${new Array(amount).fill(``)}
${new Array(amount).fill(`
`)}
`, props: ['handleLinks', 'attentions', 'vhtml'] } console.log(1) const ptest = (handleLinks, vhtml) => { const t0 = performance.now() const wrapper = mount(TestComponent, { global, props: { 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)) }) })