fix tests, add performance test (skipped, doesn't assert anything),

tweak max mentions count
This commit is contained in:
Henry Jameson 2021-08-12 19:37:04 +03:00
parent 2182af4058
commit add5921b8b
4 changed files with 72 additions and 60 deletions

View File

@ -41,7 +41,7 @@ const MentionLink = {
}, },
computed: { computed: {
user () { user () {
return this.url && this.$store.getters.findUserByUrl(this.url) return this.url && this.$store && this.$store.getters.findUserByUrl(this.url)
}, },
isYou () { isYou () {
// FIXME why user !== currentUser??? // FIXME why user !== currentUser???

View File

@ -15,7 +15,7 @@ const MentionsLine = {
}, },
computed: { computed: {
limit () { limit () {
return 2 return 5
}, },
mentionsComputed () { mentionsComputed () {
return this.mentions.slice(0, this.limit) return this.mentions.slice(0, this.limit)

View File

@ -159,7 +159,7 @@ export default Vue.component('RichContent', {
return item // We'll handle it later return item // We'll handle it later
} }
case 'span': case 'span':
if (attrs['class'].includes('h-card')) { if (this.handleLinks && attrs['class'] && attrs['class'].includes('h-card')) {
return ['', children.map(processItem), ''] return ['', children.map(processItem), '']
} }
} }

View File

@ -56,7 +56,7 @@ describe('RichContent', () => {
expect(wrapper.html()).to.eql(compwrap(expected)) expect(wrapper.html()).to.eql(compwrap(expected))
}) })
it('replaces first mention with mentionsline', () => { it('replaces mention with mentionsline', () => {
const html = p( const html = p(
makeMention('John'), makeMention('John'),
' how are you doing today?' ' how are you doing today?'
@ -234,7 +234,7 @@ describe('RichContent', () => {
].join('\n') ].join('\n')
const expected = [ const expected = [
'<span class="greentext">&gt;quote</span>', '<span class="greentext">&gt;quote</span>',
mentionsLine(1) mentionsLine(1),
'<span class="greentext">&gt;quote</span>', '<span class="greentext">&gt;quote</span>',
'<span class="greentext">&gt;quote</span>' '<span class="greentext">&gt;quote</span>'
].join('\n') ].join('\n')
@ -267,7 +267,7 @@ describe('RichContent', () => {
const expected = [ const expected = [
'Bruh', 'Bruh',
'Bruh', 'Bruh',
mentionsLine(3) mentionsLine(3),
'Bruh' 'Bruh'
].join('<br>') ].join('<br>')
@ -322,53 +322,6 @@ describe('RichContent', () => {
}) })
it('rich contents of a mention are handled properly', () => { 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: {
attentions,
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' }) attentions.push({ statusnet_profile_url: 'lol' })
const html = [ const html = [
p( p(
@ -388,16 +341,19 @@ describe('RichContent', () => {
const expected = [ const expected = [
p( p(
'<span class="MentionsLine">', '<span class="MentionsLine">',
'<mentionlink-stub content="', '<span class="MentionLink mention-link">',
'<a href="lol" target="_blank" class="original">',
'<span>', '<span>',
'https://</span>', 'https://</span>',
'<span>', '<span>',
'lol.tld/</span>', 'lol.tld/</span>',
'<span>', '<span>',
'</span>', '</span>',
'" url="lol" class="mention-link">', '</a>',
'</mentionlink-stub>', ' ',
'<!---->', // v-if placeholder '<!---->', // v-if placeholder, mentionlink's "new" (i.e. rich) display
'</span>',
'<!---->', // v-if placeholder, mentionsline's extra mentions and stuff
'</span>' '</span>'
), ),
p( p(
@ -407,9 +363,6 @@ describe('RichContent', () => {
const wrapper = mount(RichContent, { const wrapper = mount(RichContent, {
localVue, localVue,
stubs: {
MentionLink: true
},
propsData: { propsData: {
attentions, attentions,
handleLinks: true, handleLinks: true,
@ -465,4 +418,63 @@ describe('RichContent', () => {
expect(wrapper.html()).to.eql(compwrap(expected)) 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))
})
}) })