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) => { attentions.push({ statusnet_profile_url: `https://fake.tld/@${who}` }) return `@${who}` } const stubMention = (who) => `` const lastMentions = (...data) => `${data.join('')}` const p = (...data) => `

${data.join('')}

` const compwrap = (...data) => `${data.join('')}` const removedMentionSpan = '' describe('RichContent', () => { it('renders simple post without exploding', () => { const html = p('Hello world!') const wrapper = shallowMount(RichContent, { localVue, propsData: { attentions, hideMentions: true, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html()).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, { localVue, propsData: { attentions, hideMentions: true, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html()).to.eql(compwrap(expected)) }) it('removes mentions from the beginning of post', () => { const html = p( makeMention('John'), ' how are you doing thoday?' ) const expected = p( removedMentionSpan, 'how are you doing thoday?' ) const wrapper = shallowMount(RichContent, { localVue, propsData: { attentions, 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( '', '', '', 'how are you doing thoday?' ) const wrapper = shallowMount(RichContent, { localVue, propsData: { attentions, hideMentions: false, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html()).to.eql(compwrap(expected)) }) it('removes mentions from 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, { localVue, propsData: { attentions, hideMentions: true, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html()).to.eql(compwrap(expected)) }) it('replaces mentions at the end of the hellpost if hideMentions=false (

)', () => { 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: { attentions, hideMentions: false, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html()).to.eql(compwrap(expected)) }) it('removes mentions from the end of the hellpost (
)', () => { const html = [ 'How are you doing today, fine gentlemen?', [ makeMention('John'), makeMention('Josh'), makeMention('Jeremy') ].join('') ].join('
') const expected = [ 'How are you doing today, fine gentlemen?', // TODO fix this extra line somehow? '
' ].join('') const wrapper = shallowMount(RichContent, { localVue, propsData: { attentions, 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: { attentions, 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: { attentions, 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: { attentions, 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: { attentions, hideMentions: true, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html()).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, { localVue, propsData: { attentions, hideMentions: true, 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, { localVue, propsData: { attentions, hideMentions: true, 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, { localVue, propsData: { attentions, hideMentions: true, 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, { localVue, propsData: { attentions, hideMentions: true, handleLinks: false, greentext: false, emoji: [{ url: 'about:blank', shortcode: 'spurdo' }], html } }) expect(wrapper.html()).to.eql(compwrap(expected)) }) it('Doesn\'t add nonexistent emoji to post', () => { const html = p('Lol :lol:') const wrapper = shallowMount(RichContent, { localVue, propsData: { attentions, hideMentions: true, handleLinks: false, greentext: false, emoji: [], html } }) expect(wrapper.html()).to.eql(compwrap(html)) }) it('Greentext + last mentions', () => { const html = [ '>quote', makeMention('lol'), '>quote', '>quote' ].join('\n') const expected = [ '>quote', stubMention('lol'), '>quote', '>quote' ].join('\n') const wrapper = shallowMount(RichContent, { localVue, propsData: { 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', [ stubMention('foo'), stubMention('bar'), stubMention('baz') ].join(''), 'Bruh' ].join('
') const wrapper = shallowMount(RichContent, { localVue, propsData: { attentions, 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('
') const expected = [ 'Bruh', 'Bruh', stubMention('foo'), stubMention('bar'), stubMention('baz') ].join('
') const wrapper = shallowMount(RichContent, { localVue, propsData: { attentions, 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: { attentions, 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: { attentions, hideMentions: true, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html()).to.eql(compwrap(expected)) }) it('buggy example/hashtags', () => { const html = [ '

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

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

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

' ].join('') const wrapper = shallowMount(RichContent, { localVue, propsData: { attentions, hideMentions: true, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html()).to.eql(compwrap(expected)) }) it('rich contents of a mention are handled properly', () => { const html = [ p( 'Testing' ), p( '', '', 'https://', '', 'lol.tld/', '', '', '' ) ].join('') const expected = [ p( 'Testing' ), p( '', '' ) ].join('') const wrapper = shallowMount(RichContent, { localVue, propsData: { attentions, 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( '', '', 'https://', '', 'lol.tld/', '', '', '' ), p( 'Testing' ) ].join('') const expected = [ p( '', '', '', '', // v-if placeholder '' ), p( 'Testing' ) ].join('') const wrapper = mount(RichContent, { localVue, stubs: { MentionLink: true }, propsData: { attentions, hideMentions: false, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html()).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, { localVue, propsData: { attentions, hideMentions: false, handleLinks: true, greentext: true, emoji: [], html } }) expect(wrapper.html()).to.eql(compwrap(expected)) }) })