2024-10-08 07:15:26 +00:00
import { describe , expect , it , beforeAll } from 'vitest'
2024-10-09 12:43:40 +00:00
import { mount } from '@vue/test-utils' ;
import { defineComponent } from 'vue'
2024-10-09 14:47:31 +00:00
import { useFormatTypes , FormatTypeStore } from '../use-format-types' ;
2024-10-08 07:15:26 +00:00
import { create } from '../create' ;
import { toHTMLString } from '../to-html-string' ;
2024-10-09 14:47:31 +00:00
import { specWithRegistration } from './helpers' ;
2024-10-08 07:15:26 +00:00
function createNode ( HTML ) {
const doc = document . implementation . createHTMLDocument ( '' ) ;
doc . body . innerHTML = HTML ;
return doc . body . firstChild ;
}
describe ( 'toHTMLString' , ( ) = > {
2024-10-09 14:47:31 +00:00
let TestComponent ;
let store : FormatTypeStore ;
2024-10-09 12:43:40 +00:00
beforeAll ( async ( ) = > {
TestComponent = defineComponent ( {
setup ( ) {
return useFormatTypes ( ) ;
}
} ) ;
2024-10-08 07:15:26 +00:00
2024-10-09 14:47:31 +00:00
store = mount ( TestComponent ) . vm ;
2024-10-09 12:43:40 +00:00
} ) ;
2024-10-08 07:15:26 +00:00
2024-10-09 12:43:40 +00:00
specWithRegistration . forEach (
( {
description ,
formatName ,
formatType ,
html ,
value ,
noToHTMLString ,
} ) = > {
if ( noToHTMLString ) {
return ;
}
2024-10-08 07:15:26 +00:00
2024-10-09 12:43:40 +00:00
// eslint-disable-next-line jest/valid-title
it . skip ( description , ( ) = > {
console . log ( description , formatName ) ;
if ( formatName ) {
2024-10-09 14:47:31 +00:00
store . registerFormatTypes ( { name : formatName , . . . formatType } ) ;
2024-10-09 12:43:40 +00:00
}
2024-10-08 07:15:26 +00:00
2024-10-09 12:43:40 +00:00
const result = toHTMLString ( { value } ) ;
if ( formatName ) {
2024-10-09 14:47:31 +00:00
store . unregisterFormatTypes ( formatName ) ;
2024-10-09 12:43:40 +00:00
}
expect ( result ) . toEqual ( html ) ;
} ) ;
}
) ;
2024-10-08 07:15:26 +00:00
2024-10-09 12:43:40 +00:00
it . skip ( 'should extract recreate HTML 1' , ( ) = > {
2024-10-08 07:15:26 +00:00
const HTML =
'one <em>two 🍒</em> <a href="#"><img src=""><strong>three</strong></a><img src="">' ;
const element = createNode ( ` <p> ${ HTML } </p> ` ) ;
expect ( toHTMLString ( { value : create ( { element } ) } ) ) . toEqual (
HTML
) ;
} ) ;
2024-10-09 12:43:40 +00:00
it . skip ( 'should extract recreate HTML 2' , ( ) = > {
2024-10-08 07:15:26 +00:00
const HTML =
'one <em>two 🍒</em> <a href="#">test <img src=""><strong>three</strong></a><img src="">' ;
const element = createNode ( ` <p> ${ HTML } </p> ` ) ;
expect ( toHTMLString ( { value : create ( { element } ) } ) ) . toEqual (
HTML
) ;
} ) ;
2024-10-09 12:43:40 +00:00
it . skip ( 'should extract recreate HTML 3' , ( ) = > {
2024-10-08 07:15:26 +00:00
const HTML = '<img src="">' ;
const element = createNode ( ` <p> ${ HTML } </p> ` ) ;
expect ( toHTMLString ( { value : create ( { element } ) } ) ) . toEqual (
HTML
) ;
} ) ;
2024-10-09 12:43:40 +00:00
it . skip ( 'should extract recreate HTML 4' , ( ) = > {
2024-10-08 07:15:26 +00:00
const HTML = '<em>two 🍒</em>' ;
const element = createNode ( ` <p> ${ HTML } </p> ` ) ;
expect ( toHTMLString ( { value : create ( { element } ) } ) ) . toEqual (
HTML
) ;
} ) ;
2024-10-09 12:43:40 +00:00
it . skip ( 'should extract recreate HTML 5' , ( ) = > {
2024-10-08 07:15:26 +00:00
const HTML =
'<em>If you want to learn more about how to build additional blocks, or if you are interested in helping with the project, head over to the <a href="https://github.com/WordPress/gutenberg">GitHub repository</a>.</em>' ;
const element = createNode ( ` <p> ${ HTML } </p> ` ) ;
expect ( toHTMLString ( { value : create ( { element } ) } ) ) . toEqual (
HTML
) ;
} ) ;
2024-10-09 12:43:40 +00:00
it . skip ( 'should serialize neighbouring formats of same type' , ( ) = > {
2024-10-08 07:15:26 +00:00
const HTML = '<a href="a">a</a><a href="b">a</a>' ;
const element = createNode ( ` <p> ${ HTML } </p> ` ) ;
expect ( toHTMLString ( { value : create ( { element } ) } ) ) . toEqual (
HTML
) ;
} ) ;
2024-10-09 12:43:40 +00:00
it . skip ( 'should serialize neighbouring same formats' , ( ) = > {
2024-10-08 07:15:26 +00:00
const HTML = '<a href="a">a</a><a href="a">a</a>' ;
const element = createNode ( ` <p> ${ HTML } </p> ` ) ;
expect ( toHTMLString ( { value : create ( { element } ) } ) ) . toEqual (
HTML
) ;
} ) ;
} ) ;