logo

pleroma-fe

My custom branche(s) on git.pleroma.social/pleroma/pleroma-fe git clone https://hacktivis.me/git/pleroma-fe.git

rich_content.spec.js (13706B)

    

  1. import { mount, shallowMount } from '@vue/test-utils'
  2. import RichContent from 'src/components/rich_content/rich_content.jsx'
  4. const attentions = []
  5. const global = {
  6.   mocks: {
  7.     $store: {
  8.       state: {},
  9.       getters: {
  10.         mergedConfig: () => ({
  11.           mentionLinkShowTooltip: true
  12.         }),
  13.         findUserByUrl: () => null
  14.       }
  15.     }
  16.   },
  17.   stubs: {
  18.     FAIcon: true
  19.   }
  20. }
  22. const makeMention = (who, noClass) => {
  23.   attentions.push({ statusnet_profile_url: `https://fake.tld/@${who}` })
  24.   return noClass
  25.     ? `<span><a href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
  26.     : `<span class="h-card"><a class="u-url mention" href="https://fake.tld/@${who}">@<span>${who}</span></a></span>`
  27. }
  28. const p = (...data) => `<p>${data.join('')}</p>`
  29. const compwrap = (...data) => `<span class="RichContent">${data.join('')}</span>`
  30. const mentionsLine = (times) => [
  31.   '<mentions-line-stub mentions="',
  32.   new Array(times).fill('[object Object]').join(','),
  33.   '"></mentions-line-stub>'
  34. ].join('')
  36. describe('RichContent', () => {
  37.   it('renders simple post without exploding', () => {
  38.     const html = p('Hello world!')
  39.     const wrapper = shallowMount(RichContent, {
  40.       global,
  41.       props: {
  42.         attentions,
  43.         handleLinks: true,
  44.         greentext: true,
  45.         emoji: [],
  46.         html
  47.       }
  48.     })
  50.     expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(html))
  51.   })
  53.   it('unescapes everything as needed', () => {
  54.     const html = [
  55.       p('Testing &#39;em all'),
  56.       'Testing &#39;em all'
  57.     ].join('')
  58.     const expected = [
  59.       p('Testing \'em all'),
  60.       'Testing \'em all'
  61.     ].join('')
  62.     const wrapper = shallowMount(RichContent, {
  63.       global,
  64.       props: {
  65.         attentions,
  66.         handleLinks: true,
  67.         greentext: true,
  68.         emoji: [],
  69.         html
  70.       }
  71.     })
  73.     expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
  74.   })
  76.   it('replaces mention with mentionsline', () => {
  77.     const html = p(
  78.       makeMention('John'),
  79.       ' how are you doing today?'
  80.     )
  81.     const wrapper = shallowMount(RichContent, {
  82.       global,
  83.       props: {
  84.         attentions,
  85.         handleLinks: true,
  86.         greentext: true,
  87.         emoji: [],
  88.         html
  89.       }
  90.     })
  92.     expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(p(
  93.       mentionsLine(1),
  94.       ' how are you doing today?'
  95.     )))
  96.   })
  98.   it('replaces mentions at the end of the hellpost', () => {
  99.     const html = [
  100.       p('How are you doing today, fine gentlemen?'),
  101.       p(
  102.         makeMention('John'),
  103.         makeMention('Josh'),
  104.         makeMention('Jeremy')
  105.       )
  106.     ].join('')
  107.     const expected = [
  108.       p(
  109.         'How are you doing today, fine gentlemen?'
  110.       ),
  111.       // TODO fix this extra line somehow?
  112.       p(
  113.         '<mentions-line-stub mentions="',
  114.         '[object Object],',
  115.         '[object Object],',
  116.         '[object Object]',
  117.         '"></mentions-line-stub>'
  118.       )
  119.     ].join('')
  121.     const wrapper = shallowMount(RichContent, {
  122.       global,
  123.       props: {
  124.         attentions,
  125.         handleLinks: true,
  126.         greentext: true,
  127.         emoji: [],
  128.         html
  129.       }
  130.     })
  132.     expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
  133.   })
  135.   it('Does not touch links if link handling is disabled', () => {
  136.     const html = [
  137.       [
  138.         makeMention('Jack'),
  139.         'let\'s meet up with ',
  140.         makeMention('Janet')
  141.       ].join(''),
  142.       [
  143.         makeMention('John'),
  144.         makeMention('Josh'), makeMention('Jeremy')
  145.       ].join('')
  146.     ].join('\n')
  147.     const strippedHtml = [
  148.       [
  149.         makeMention('Jack', true),
  150.         'let\'s meet up with ',
  151.         makeMention('Janet', true)
  152.       ].join(''),
  153.       [
  154.         makeMention('John', true),
  155.         makeMention('Josh', true), makeMention('Jeremy', true)
  156.       ].join('')
  157.     ].join('\n')
  159.     const wrapper = shallowMount(RichContent, {
  160.       global,
  161.       props: {
  162.         attentions,
  163.         handleLinks: false,
  164.         greentext: true,
  165.         emoji: [],
  166.         html
  167.       }
  168.     })
  170.     expect(wrapper.html()).to.eql(compwrap(strippedHtml))
  171.   })
  173.   it('Adds greentext and cyantext to the post', () => {
  174.     const html = [
  175.       '&gt;preordering videogames',
  176.       '&gt;any year'
  177.     ].join('\n')
  178.     const expected = [
  179.       '<span class="greentext">&gt;preordering videogames</span>',
  180.       '<span class="greentext">&gt;any year</span>'
  181.     ].join('\n')
  183.     const wrapper = shallowMount(RichContent, {
  184.       global,
  185.       props: {
  186.         attentions,
  187.         handleLinks: false,
  188.         greentext: true,
  189.         emoji: [],
  190.         html
  191.       }
  192.     })
  194.     expect(wrapper.html()).to.eql(compwrap(expected))
  195.   })
  197.   it('Does not add greentext and cyantext if setting is set to false', () => {
  198.     const html = [
  199.       '&gt;preordering videogames',
  200.       '&gt;any year'
  201.     ].join('\n')
  203.     const wrapper = shallowMount(RichContent, {
  204.       global,
  205.       props: {
  206.         attentions,
  207.         handleLinks: false,
  208.         greentext: false,
  209.         emoji: [],
  210.         html
  211.       }
  212.     })
  214.     expect(wrapper.html()).to.eql(compwrap(html))
  215.   })
  217.   it('Adds emoji to post', () => {
  218.     const html = p('Ebin :DDDD :spurdo:')
  219.     const expected = p(
  220.       'Ebin :DDDD ',
  221.       '<anonymous-stub src="about:blank" alt=":spurdo:" class="emoji img" title=":spurdo:"></anonymous-stub>'
  222.     )
  224.     const wrapper = shallowMount(RichContent, {
  225.       global,
  226.       props: {
  227.         attentions,
  228.         handleLinks: false,
  229.         greentext: false,
  230.         emoji: [{ url: 'about:blank', shortcode: 'spurdo' }],
  231.         html
  232.       }
  233.     })
  235.     expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
  236.   })
  238.   it('Doesn\'t add nonexistent emoji to post', () => {
  239.     const html = p('Lol :lol:')
  241.     const wrapper = shallowMount(RichContent, {
  242.       global,
  243.       props: {
  244.         attentions,
  245.         handleLinks: false,
  246.         greentext: false,
  247.         emoji: [],
  248.         html
  249.       }
  250.     })
  252.     expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(html))
  253.   })
  255.   it('Greentext + last mentions', () => {
  256.     const html = [
  257.       '&gt;quote',
  258.       makeMention('lol'),
  259.       '&gt;quote',
  260.       '&gt;quote'
  261.     ].join('\n')
  262.     const expected = [
  263.       '<span class="greentext">&gt;quote</span>',
  264.       mentionsLine(1),
  265.       '<span class="greentext">&gt;quote</span>',
  266.       '<span class="greentext">&gt;quote</span>'
  267.     ].join('\n')
  269.     const wrapper = shallowMount(RichContent, {
  270.       global,
  271.       props: {
  272.         attentions,
  273.         handleLinks: true,
  274.         greentext: true,
  275.         emoji: [],
  276.         html
  277.       }
  278.     })
  280.     expect(wrapper.html()).to.eql(compwrap(expected))
  281.   })
  283.   it('One buggy example', () => {
  284.     const html = [
  285.       'Bruh',
  286.       'Bruh',
  287.       [
  288.         makeMention('foo'),
  289.         makeMention('bar'),
  290.         makeMention('baz')
  291.       ].join(''),
  292.       'Bruh'
  293.     ].join('<br>')
  294.     const expected = [
  295.       'Bruh',
  296.       'Bruh',
  297.       mentionsLine(3),
  298.       'Bruh'
  299.     ].join('<br>')
  301.     const wrapper = shallowMount(RichContent, {
  302.       global,
  303.       props: {
  304.         attentions,
  305.         handleLinks: true,
  306.         greentext: true,
  307.         emoji: [],
  308.         html
  309.       }
  310.     })
  312.     expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
  313.   })
  315.   it('buggy example/hashtags', () => {
  316.     const html = [
  317.       '<p>',
  318.       '<a href="http://macrochan.org/images/N/H/NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg">',
  319.       'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg</a>',
  320.       ' <a class="hashtag" data-tag="nou" href="https://shitposter.club/tag/nou">',
  321.       '#nou</a>',
  322.       ' <a class="hashtag" data-tag="screencap" href="https://shitposter.club/tag/screencap">',
  323.       '#screencap</a>',
  324.       ' </p>'
  325.     ].join('')
  326.     const expected = [
  327.       '<p>',
  328.       '<a href="http://macrochan.org/images/N/H/NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg" target="_blank">',
  329.       'NHCMDUXJPPZ6M3Z2CQ6D2EBRSWGE7MZY.jpg</a>',
  330.       ' <hashtag-link-stub url="https://shitposter.club/tag/nou" content="#nou" tag="nou">',
  331.       '</hashtag-link-stub>',
  332.       ' <hashtag-link-stub url="https://shitposter.club/tag/screencap" content="#screencap" tag="screencap">',
  333.       '</hashtag-link-stub>',
  334.       ' </p>'
  335.     ].join('')
  337.     const wrapper = shallowMount(RichContent, {
  338.       global,
  339.       props: {
  340.         attentions,
  341.         handleLinks: true,
  342.         greentext: true,
  343.         emoji: [],
  344.         html
  345.       }
  346.     })
  348.     expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
  349.   })
  351.   it('rich contents of a mention are handled properly', () => {
  352.     attentions.push({ statusnet_profile_url: 'lol' })
  353.     const html = [
  354.       p(
  355.         '<a href="lol" class="mention">',
  356.         '<span>',
  357.         'https://</span>',
  358.         '<span>',
  359.         'lol.tld/</span>',
  360.         '<span>',
  361.         '</span>',
  362.         '</a>'
  363.       ),
  364.       p(
  365.         'Testing'
  366.       )
  367.     ].join('')
  368.     const expected = [
  369.       p(
  370.         '<span class="MentionsLine">',
  371.         '<span class="MentionLink mention-link">',
  372.         '<a href="lol" class="original" target="_blank">',
  373.         '<span>',
  374.         'https://</span>',
  375.         '<span>',
  376.         'lol.tld/</span>',
  377.         '<span>',
  378.         '</span>',
  379.         '</a>',
  380.         '</span>',
  381.         '</span>'
  382.       ),
  383.       p(
  384.         'Testing'
  385.       )
  386.     ].join('')
  388.     const wrapper = mount(RichContent, {
  389.       global,
  390.       props: {
  391.         attentions,
  392.         handleLinks: true,
  393.         greentext: true,
  394.         emoji: [],
  395.         html
  396.       }
  397.     })
  399.     expect(wrapper.html().replace(/\n/g, '').replace(/<!--.*?-->/g, '')).to.eql(compwrap(expected))
  400.   })
  402.   it('rich contents of nested mentions are handled properly', () => {
  403.     attentions.push({ statusnet_profile_url: 'lol' })
  404.     const html = [
  405.       '<span class="poast-style">',
  406.       '<a href="lol" class="mention">',
  407.       '<span>',
  408.       'https://</span>',
  409.       '<span>',
  410.       'lol.tld/</span>',
  411.       '<span>',
  412.       '</span>',
  413.       '</a>',
  414.       ' ',
  415.       '<a href="lol" class="mention">',
  416.       '<span>',
  417.       'https://</span>',
  418.       '<span>',
  419.       'lol.tld/</span>',
  420.       '<span>',
  421.       '</span>',
  422.       '</a>',
  423.       ' ',
  424.       '</span>',
  425.       'Testing'
  426.     ].join('')
  427.     const expected = [
  428.       '<span>',
  429.       '<span class="MentionsLine">',
  430.       '<span class="MentionLink mention-link">',
  431.       '<a href="lol" class="original" target="_blank">',
  432.       '<span>',
  433.       'https://</span>',
  434.       '<span>',
  435.       'lol.tld/</span>',
  436.       '<span>',
  437.       '</span>',
  438.       '</a>',
  439.       '</span>',
  440.       '<span class="MentionLink mention-link">',
  441.       '<a href="lol" class="original" target="_blank">',
  442.       '<span>',
  443.       'https://</span>',
  444.       '<span>',
  445.       'lol.tld/</span>',
  446.       '<span>',
  447.       '</span>',
  448.       '</a>',
  449.       '</span>',
  450.       '</span>',
  451.       ' ',
  452.       '</span>',
  453.       'Testing'
  454.     ].join('')
  456.     const wrapper = mount(RichContent, {
  457.       global,
  458.       props: {
  459.         attentions,
  460.         handleLinks: true,
  461.         greentext: true,
  462.         emoji: [],
  463.         html
  464.       }
  465.     })
  467.     expect(wrapper.html().replace(/\n/g, '').replace(/<!--.*?-->/g, '')).to.eql(compwrap(expected))
  468.   })
  470.   it('rich contents of a link are handled properly', () => {
  471.     const html = [
  472.       '<p>',
  473.       'Freenode is dead.</p>',
  474.       '<p>',
  475.       '<a href="https://isfreenodedeadyet.com/">',
  476.       '<span>',
  477.       'https://</span>',
  478.       '<span>',
  479.       'isfreenodedeadyet.com/</span>',
  480.       '<span>',
  481.       '</span>',
  482.       '</a>',
  483.       '</p>'
  484.     ].join('')
  485.     const expected = [
  486.       '<p>',
  487.       'Freenode is dead.</p>',
  488.       '<p>',
  489.       '<a href="https://isfreenodedeadyet.com/" target="_blank">',
  490.       '<span>',
  491.       'https://</span>',
  492.       '<span>',
  493.       'isfreenodedeadyet.com/</span>',
  494.       '<span>',
  495.       '</span>',
  496.       '</a>',
  497.       '</p>'
  498.     ].join('')
  500.     const wrapper = shallowMount(RichContent, {
  501.       global,
  502.       props: {
  503.         attentions,
  504.         handleLinks: true,
  505.         greentext: true,
  506.         emoji: [],
  507.         html
  508.       }
  509.     })
  511.     expect(wrapper.html().replace(/\n/g, '')).to.eql(compwrap(expected))
  512.   })
  514.   it.skip('[INFORMATIVE] Performance testing, 10 000 simple posts', () => {
  515.     const amount = 20
  517.     const onePost = p(
  518.       makeMention('Lain'),
  519.       makeMention('Lain'),
  520.       makeMention('Lain'),
  521.       makeMention('Lain'),
  522.       makeMention('Lain'),
  523.       makeMention('Lain'),
  524.       makeMention('Lain'),
  525.       makeMention('Lain'),
  526.       makeMention('Lain'),
  527.       makeMention('Lain'),
  528.       ' i just landed in l a where are you'
  529.     )
  531.     const TestComponent = {
  532.       template: `
  533.       <div v-if="!vhtml">
  534.         ${new Array(amount).fill(`<RichContent html="${onePost}" :greentext="true" :handleLinks="handeLinks" :emoji="[]" :attentions="attentions"/>`)}
  535.       </div>
  536.       <div v-else="vhtml">
  537.         ${new Array(amount).fill(`<div v-html="${onePost}"/>`)}
  538.       </div>
  539.       `,
  540.       props: ['handleLinks', 'attentions', 'vhtml']
  541.     }
  542.     console.log(1)
  544.     const ptest = (handleLinks, vhtml) => {
  545.       const t0 = performance.now()
  547.       const wrapper = mount(TestComponent, {
  548.         global,
  549.         props: {
  550.           attentions,
  551.           handleLinks,
  552.           vhtml
  553.         }
  554.       })
  556.       const t1 = performance.now()
  558.       wrapper.destroy()
  560.       const t2 = performance.now()
  562.       return `Mount: ${t1 - t0}ms, destroy: ${t2 - t1}ms, avg ${(t1 - t0) / amount}ms - ${(t2 - t1) / amount}ms per item`
  563.     }
  565.     console.log(`${amount} items with links handling:`)
  566.     console.log(ptest(true))
  567.     console.log(`${amount} items without links handling:`)
  568.     console.log(ptest(false))
  569.     console.log(`${amount} items plain v-html:`)
  570.     console.log(ptest(false, true))
  571.   })
  572. })