@ -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 ( 're moves mentions from the beginning of post ', ( ) => {
it ( 're places mention with mentionsline ', ( ) => {
const html = p (
makeMention ( 'John' ) ,
' how are you doing t h oday?'
' how are you doing t oday?'
)
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"/> ` ) }
< / d i v >
< div v - else = "vhtml" >
$ { new Array ( amount ) . fill ( ` <div v-html=" ${ onePost } "/> ` ) }
< / d i v >
` ,
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 ) )
} )
} )