import React from 'react' ; import TestRenderer from 'react-test-renderer' ; import MarkdownView , { MarkdownViewProps , GlobalConfiguration , ShowdownExtension , } from './' ; afterEach ( ( ) => { GlobalConfiguration . resetExtensions ( ) ; GlobalConfiguration . resetOptions ( ) ; } ) ; describe ( 'MarkdownView' , ( ) => { const renderInnerHTML = ( props ) => { const testRenderer = TestRenderer . create ( < MarkdownView dangerouslySetInnerHTML { ... props } / > ) ; const html = ( testRenderer . toJSON ( ) ! as TestRenderer . ReactTestRendererJSON ) . props . dangerouslySetInnerHTML . __html ; return html ; } ; it ( 'render markdown' , ( ) => { const markdown = '# Headline level 1!\n\nAnother paragraph.\n\n' ; const html = renderInnerHTML ( { markdown } ) ; expect ( html ) . toMatch ( '<h1 id="headlinelevel1">Headline level 1!</h1>' ) ; expect ( html ) . toMatch ( '<p>Another paragraph.</p>' ) ; } ) ; it ( 'render markdown table' , ( ) => { const markdown = `
| Column 1 | Column 2 |
|----------|----------|
| A1       | B1       |
| A2       | B2       |
` ; const html = renderInnerHTML ( { markdown , options : { tables : true } } ) ; expect ( html ) . toMatch ( '<th>Column 1</th>' ) ; expect ( html ) . toMatch ( '<th>Column 2</th>' ) ; expect ( html ) . toMatch ( '<td>A1</td>' ) ; expect ( html ) . toMatch ( '<td>B1</td>' ) ; expect ( html ) . toMatch ( '<td>A2</td>' ) ; expect ( html ) . toMatch ( '<td>B2</td>' ) ; } ) ; it ( 'render markdown table with flavor github' , ( ) => { const markdown = `
| Column 1 | Column 2 |
|----------|----------|
| A1       | B1       |
| A2       | B2       |
` ; const html = renderInnerHTML ( { flavor : 'github' , markdown } ) ; expect ( html ) . toMatch ( '<th id="column_1">Column 1</th>' ) ; expect ( html ) . toMatch ( '<th id="column_2">Column 2</th>' ) ; expect ( html ) . toMatch ( '<td>A1</td>' ) ; expect ( html ) . toMatch ( '<td>B1</td>' ) ; expect ( html ) . toMatch ( '<td>A2</td>' ) ; expect ( html ) . toMatch ( '<td>B2</td>' ) ; } ) ; it ( 'render markdown table with flavor original' , ( ) => { const markdown = `
| Column 1 | Column 2 |
|----------|----------|
| A1       | B1       |
| A2       | B2       |
` ; const html = renderInnerHTML ( { flavor : 'original' , markdown } ) ; expect ( html ) . toMatch ( '| Column 1 | Column 2 |' ) ; expect ( html ) . toMatch ( '|----------|----------|' ) ; expect ( html ) . toMatch ( '| A1       | B1       |' ) ; expect ( html ) . toMatch ( '| A2       | B2       |' ) ; } ) ; it ( 'render html as it was parsed' , ( ) => { const markdown = '<h1>Title</h1>' ; const html = renderInnerHTML ( { markdown } ) ; expect ( html ) . toMatch ( '<h1>Title</h1>' ) ; } ) ; it ( 'render html class name' , ( ) => { const markdown = '<h1 class="red">A red title</h1>' ; const html = renderInnerHTML ( { markdown } ) ; expect ( html ) . toMatch ( '<h1 class="red">A red title</h1>' ) ; } ) ; it ( 'render html style' , ( ) => { const markdown = '<h1 style="color: red;">A red title</h1>' ; const html = renderInnerHTML ( { markdown } ) ; expect ( html ) . toMatch ( '<h1 style="color: red;">A red title</h1>' ) ; } ) ; it ( 'render text emojies' , ( ) => { const markdown = ':showdown: :+1:' ; const html = renderInnerHTML ( { markdown , options : { emoji : true } } ) ; expect ( html ) . not . toMatch ( ':showdown:' ) ; expect ( html ) . not . toMatch ( ':+1:' ) ; expect ( html ) . toMatch ( /<span.*>S<\/span>/ ) ; expect ( html ) . toMatch ( '👍' ) ; } ) ; it ( 'render custom output extension (via global name)' , ( ) => { GlobalConfiguration . setExtension ( 'big' , { type : 'output' , regex : new RegExp ( `<h1(.*)>` , 'g' ) , replace : `<h1 class="big" $1>` } ) ; const markdown = '# Example headline' ; const html = renderInnerHTML ( { markdown , options : { extensions : [ 'big' ] } } ) ; expect ( html ) . toMatch ( '<h1 class="big"  id="exampleheadline">Example headline</h1>' ) ; } ) ; it ( 'render custom output extension (via options)' , ( ) => { const extension = { type : 'output' , regex : new RegExp ( `<h1(.*)>` , 'g' ) , replace : `<h1 class="big" $1>` } ; const markdown = '# Example headline' ; const html = renderInnerHTML ( { markdown , options : { extensions : [ extension ] } } ) ; expect ( html ) . toMatch ( '<h1 class="big"  id="exampleheadline">Example headline</h1>' ) ; } ) ; it ( 'render custom output extension (via prop)' , ( ) => { const extension = { type : 'output' , regex : new RegExp ( `<h1(.*)>` , 'g' ) , replace : `<h1 class="big" $1>` } ; const markdown = '# Example headline' ; const html = renderInnerHTML ( { markdown , extensions : [ extension ] } ) ; expect ( html ) . toMatch ( '<h1 class="big"  id="exampleheadline">Example headline</h1>' ) ; } ) ; it ( 'render custom language extension (via global name)' , ( ) => { GlobalConfiguration . setExtension ( 'autocorrect' , { type : 'lang' , regex : /Markdown/ , replace : 'Showdown' } ) ; const markdown = 'Markdown ftw!' ; const html = renderInnerHTML ( { markdown , options : { extensions : [ 'autocorrect' ] } } ) ; expect ( html ) . toMatch ( 'Showdown ftw!' ) ; } ) ; it ( 'render custom language extension (via options)' , ( ) => { const extension = { type : 'lang' , regex : /Markdown/ , replace : 'Showdown' } ; const markdown = 'Markdown ftw!' ; const html = renderInnerHTML ( { markdown , options : { extensions : [ extension ] } } ) ; expect ( html ) . toMatch ( 'Showdown ftw!' ) ; } ) ; it ( 'render custom language extension (via prop)' , ( ) => { const extension = { type : 'lang' , regex : /Markdown/ , replace : 'Showdown' } ; const markdown = 'Markdown ftw!' ; const html = renderInnerHTML ( { markdown , extensions : [ extension ] } ) ; expect ( html ) . toMatch ( 'Showdown ftw!' ) ; } ) ; } ) ;